o2.widget = o2.widget || {};
o2.require("o2.widget.Common", null, false);
o2.widget.Mask = new Class({
	Implements: [Options, Events],
	Extends: o2.widget.Common,
	options: {
		"style": "default",
		"zIndex": 100,
		"loading": true,
		"progress": false,
		"html": ""
	},
	initialize: function(options){
		this.setOptions(options);
		this.path = o2.session.path+"/widget/$Mask/";
		this.cssPath = o2.session.path+"/widget/$Mask/"+this.options.style+"/css.wcss";
		this._loadCss();
		
		this._createMaskNodes();
	},

	_createMaskNodes: function(){
		this.container = new Element("div", {
			"styles": this.css.container
		});
		this.container.setStyle("z-index", this.options.zIndex);

		this.maskBar = new Element("iframe", {
			"styles": this.css.mask
		});
		this.maskBar.setStyle("z-index", this.options.zIndex);

		this.backgroundBar = new Element("div", {
			"styles": this.css.backgroundBar
		});
		this.backgroundBar.setStyle("z-index", this.options.zIndex+1);

		this.maskBar.inject(this.container);
		this.backgroundBar.inject(this.container);

		if (this.options.loading){
			this.loadBar = new Element("div", {
				"styles": this.css.loadingBar,
				"html": "<table width=\"80%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr valign=\"middle\" height=\"30\"><td align=\"right\"><img src=\""+o2.session.path+"/widget/$Mask/"+this.options.style+"/loading.gif\" /></td><td align=\"center\">"+
					( this.options.html ? this.options.html : "loading..." ) +
					"</td></tr></table>"
			});
			this.loadBar.setStyle("z-index", this.options.zIndex+2);
			this.loadBar.inject(this.container);
		}
		if (this.options.progress){
			this.progressNode =  new Element("div", {"styles": this.css.progressNode}).inject(this.container);
			this.progressNode.setStyle("z-index", this.options.zIndex+2);
		}

	},
	
	hide: function(callBack){
		var morph = new Fx.Morph(this.container, {duration: 500});

		morph.start({
			"opacity": 0
		}).chain(function(){
			this.container.destroy();
            if (callBack) callBack();
		}.bind(this));
	},
	load: function(){
		if (this.fireEvent("queryLoad")){
			
			this.container.inject($(document.body));

			if (!this.options.loading){
				if (this.loadBar) this.loadBar.setStyle("display", "none");
			}else{
				this.loadBar.setStyle("display", "block");
				
				//var size = $(window).getSize();
                var size = this.container.getSize();
				var tmpLeft = (size.x-120)/2;
				if( tmpLeft<0 )tmpLeft = 0;
				var tmpTop = (size.y-30)/2;
				if (tmpTop<=0) tmpTop = (window.screen.height-30)/2;
				this.loadBar.setStyle("left", ""+tmpLeft+"px");
				this.loadBar.setStyle("top", ""+tmpTop+"px");
			}
			this.fireEvent("postLoad");
		}
	},
    loadNode: function(node){
        if (this.fireEvent("queryLoad")){

            this.container.inject($(node));

            if (!this.options.loading){
				if (this.loadBar) this.loadBar.setStyle("display", "none");
            }else{
                this.loadBar.setStyle("display", "block");

                var size = $(node).getSize();
                var tmpLeft = (size.x-120)/2;
				if( tmpLeft<0 )tmpLeft = 0;
                //var tmpLeft = (size.x)/2;
                var tmpTop = (size.y-30)/2;
                if (tmpTop<=0) tmpTop = (window.screen.height-30)/2-100;
                this.loadBar.setStyle("left", ""+tmpLeft+"px");
                this.loadBar.setStyle("top", ""+tmpTop+"px");
            }
            this.fireEvent("postLoad");
        }
    }
});