/***************************************************************************************
* maskdiv是一个基于qui的效果组件。
* 它可以：
*   （1）实现锁定弹出层，同时可以实现弹层跟随效果。
*   （2）自定义弹层背景色，并可自定义背景色的不透明度
*   （3）保证伸缩窗口，弹层总位于最中央。背景不会有破洞.
*    (4）可以在一个页面同时操作多个图层，切换简便。
*    (5) 自动兼容IE6的bug：div不能盖住select , flash和emb，object标签也不会产生遮罩破洞。  
*   （6）对于弹层的css基本无侵入（少量的css仅用来置顶）
*   
* 使用方法：
*   1，引入qui.js
*   <script src="js/qui.js"></script>
*   2, 引入qui.effect.maskdiv.js   
*   <script src="js/qui.effect.maskdiv.js"></script>
*   3，准备好要置顶的DIV，并设置好样式及ID。如弹层ID为toShowDiv
*   4，初始化。foo = new maskdiv("toShowDiv");
*   5，之后就可以使用foo调用maskdiv的方法了。
*   
* 对外方法：
*   1，显示一个弹出层：
*   foo.showMainDiv();
*   2, 隐藏一个弹出层：
*   foo.hideMainDiv();
*   3，设置背景色
*  foo.setBackgroundDivColor("red");
*   4, 设置不透明度
*   foo.setOpacity(0.4);
*   5，设置弹出层不跟随
*   foo.setIsFollowing(false);
*   6，设置背景层的z-index 
*   foo.setBackgroundZIndex(20); //数越大，越靠上 
*  7，设置弹出层的z-index 
*   foo.setBackgroundZIndex(21); //数越大，越靠上，应比背景层数值大
*
*  已通过的测试环境:IE6,IE8,FF3,chrome
*  作者：刘观宇 liuguanyu@360.cn
*  版本: 1.0
********************************************************************************************/

function maskdiv(divId)
{
    this.version = "1.0";  
    this.gid = divId + "_gid"; 
	
	this.defaultBackgroundDivColor = "black"; //默认的背景色，可设置 
    this.defaultBackgroundDivZIndex = 9; //默认的背景z-index，可设置 
	
	this.defaultMainDivZIndex = 10; //默认的弹层z-index，可设置 
    this.defaultOpacity = 0.75; //默认的背景不透明度，1为全不透明，0为全透明，可设置 
    /** document.all ? **/
    this.isIe = eval("false;/*@cc_on@if(@\x5fwin32)isMSIE=true@end@*/");  //是否是IE
	/** 判断 webkit 可能更好一些 **/
	this.isChrome = (window.navigator.userAgent.indexOf("Chrome") !== -1) ; //是否是chrome

    this.isShowing = true;  //目前是否是弹层显示状态
	this.isFollowing = true; //是否需要弹层跟随
	
	this.setBackgroundZIndex();	 //设置背景z-index的方法
	this.setBackgroundDivColor(); //设置背景颜色的方法
	this.setOpacity(); //设置背景不透明度
    this.backgroundDivId = "__background_div__" + this.gid; //背景图层的唯一ID

    this.backgroundDiv = this.createBackgroundDiv().appendTo($('body')); //建立背景图层dom-quiobject对象，缓存至此 ， 并将背景层append到页面上
	this.setMainDivZIndex();  //设置弹层的z-index方法
    try
    {
        this.mainDiv = $("#"+divId); //缓存弹层的dom-quiobject对象
    }
    catch (exp)
    {
        alert(exp.message);    
    }    

    var _thiScope = this; //用于调用重绘方法

    window.onresize = function (){_thiScope.refreshWindow(_thiScope);};  

	window.onscroll = function (){_thiScope.scrollWindow(_thiScope);};  //指定重绘方法，传递变量		
}

maskdiv.prototype.setCssProperty = function (cssObj , cssAttr  , cssAttrValue)
{
    if (typeof(cssObj) != "undefined") 
	{
	    jsonStr = {};
		jsonStr[cssAttr] = cssAttrValue;
		cssObj.css(jsonStr); //调用qui方法，为指定对象设置css属性。		
	}	
}

//如果没有指定zIndex设置为默认属性，同时更新页面
maskdiv.prototype.setBackgroundZIndex = function (zIndex)
{
	if (typeof(zIndex) != "undefined")
	{
		this.backgroundDivZIndex = zIndex;
	}
	else
	{
		this.backgroundDivZIndex = this.defaultBackgroundDivZIndex;		
	}	
	
	this.setCssProperty(this.backgroundDiv , "z-index" , this.backgroundDivZIndex); 
}

//如果没有指定zIndex设置为默认属性，同时更新页面
maskdiv.prototype.setMainDivZIndex = function (zIndex)
{
	if (typeof(zIndex) != "undefined")
	{
		this.mainDivZIndex = zIndex;
	}
	else
	{
		this.mainDivZIndex = this.defaultMainDivZIndex; 		
	}
	
	this.setCssProperty(this.mainDiv , "z-index" , this.mainDivZIndex);	
}

//如果没有指定background-color设置为默认属性，同时更新页面
maskdiv.prototype.setBackgroundDivColor = function(bcolor)
{
	if (typeof(bcolor) != "undefined")
	{
		this.backgroundDivColor = bcolor;
	}
	else
	{
		this.backgroundDivColor = this.defaultBackgroundDivColor; 		
	}  
	this.setCssProperty(this.backgroundDiv , "background-color" , this.backgroundDivColor);	
}

//设置弹层跟随属性
maskdiv.prototype.setIsFollowing = function(isFollowing)
{
	this.isFollowing = isFollowing;
}

//设置背景不透明属性，如果没有设置，则使用默认的不透明属性
maskdiv.prototype.setOpacity = function (opacity)
{
	if (typeof(opacity) != "undefined")
	{
		this.opacity = opacity;
	}
	else
	{
		this.opacity = this.defaultOpacity; 		
	}	

	this.setCssProperty(this.backgroundDiv , "-moz-opacity" , this.opacity);	//ff	
	this.setCssProperty(this.backgroundDiv , "opacity" , this.opacity);	 //chrome
	this.setCssProperty(this.backgroundDiv , "filter" , "alpha(opacity=" + parseInt( this.opacity * 100 ) + ")"); //IE	
}

maskdiv.prototype.createBackgroundDiv = function ()
{
	var itemNew = $('<div/>').css({'id':this.backgroundDivId}).hide();
	return this.setBackgroundDiv(itemNew);
}

maskdiv.prototype.setBackgroundDiv = function(itemNew)
{
	var h;
	//IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 
	//NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
	//我们这样处理：scrollHeight属性 和 clientHeight属性 ，取其大着。	
	h = (document.documentElement.scrollHeight > document.documentElement.clientHeight)
		?  document.documentElement.scrollHeight 
		:  document.documentElement.clientHeight;
		
	itemNew.css({"z-index":this.backgroundDivZIndex ,
				 "background-color" : this.backgroundDivColor,
				 "position" : "absolute" , 
				 "top" : "0px" ,
				 "left" : "0px"	,
				 "width": this.getPix(document.documentElement.scrollWidth) ,
				 "height" : this.getPix(h) ,
				 "-moz-opacity": this.opacity, //firefox
				 "opacity": this.opacity, //chrome
				 "filter" : "alpha(opacity=" + parseInt( this.opacity * 100 ) + ")"	//IE
				}); 
	
	return itemNew;
}

//为适应firefox给像素css属性没有px的加上px
maskdiv.prototype.getPix = function (pixel)
{
	if (/px/.test(pixel))
	{
		return pixel;
	}
	return pixel + "px";
}

//去掉px，便于数字计算
maskdiv.prototype.undressPx = function(pixel)
{
	return pixel.toString().replace(/px/ , "");
}

//窗口resize时重绘
maskdiv.prototype.refreshWindow = function (bobj)
{
    if (true == bobj.isShowing)
    {
        bobj.initMainDiv();
		bobj.setBackgroundDiv(bobj.backgroundDiv);
    }
}

//窗口滚动，且确定跟随时重绘
maskdiv.prototype.scrollWindow = function (bobj)
{
    if (true == bobj.isShowing && true == bobj.isFollowing)
    {
        bobj.initMainDiv();
		bobj.setBackgroundDiv(bobj.backgroundDiv);
    }
}

//显隐所有的select , object , emded 防止背景破洞
maskdiv.prototype.showSelect = function (isShow)
{
	if (this.isIe)
	{
		var selects = document.getElementsByTagName("SELECT"); 
		for(var i = 0 ; i < selects.length; ++i) 
		{ 
			true == isShow  ? selects[i].style.visibility = "visible"
							: selects[i].style.visibility = "hidden" ; 
		} 
	}
    
    var objects = document.getElementsByTagName("OBJECT"); 
    for(var i = 0 ; i < objects.length; ++i) 
    { 
        true == isShow  ? objects[i].style.visibility = "visible"
                        : objects[i].style.visibility = "hidden" ; 
    }
	
    var embs = document.getElementsByTagName("EMBED"); 
    for(var i = 0 ; i < embs.length; ++i) 
    { 
        true == isShow  ? embs[i].style.visibility = "visible"
                        : embs[i].style.visibility = "hidden" ; 
    }
}

maskdiv.prototype.initMainDiv = function ()
{
    mainDivWidth = (this.mainDiv[0].clientWidth || this.mainDiv[0].offsetWidth);
    mainDivHeight = (this.mainDiv[0].clientHeight || this.mainDiv[0].offsetHeight);
	
    this.mainDiv.css({"width" : this.getPix(mainDivWidth)});
    this.mainDiv.css({"height" : this.getPix(mainDivHeight)});        

	if (false == this.isChrome)  //非chrome用document.documentElement
	{
		defaultInitLeft = (document.documentElement.clientWidth  - mainDivWidth)/ 2 + document.documentElement.scrollLeft; 
		defaultInitTop = (document.documentElement.clientHeight  - mainDivHeight)/ 2 + document.documentElement.scrollTop;
	}
	else //chrome的document.documentElement.scrollTop的始终为0，使用document.body
	{
		defaultInitLeft = (document.documentElement.clientWidth  - mainDivWidth)/ 2 + document.body.scrollLeft; 
		defaultInitTop = (document.documentElement.clientHeight  - mainDivHeight)/ 2 + document.body.scrollTop;	
	}
	
    this.mainDiv.css({"top" : this.getPix(defaultInitTop)});        
    this.mainDiv.css({"left" : this.getPix(defaultInitLeft)});	
}

//显示弹层
maskdiv.prototype.showMainDiv = function ()
{
    this.backgroundDiv.show();  
    this.mainDiv.css({"position":"absolute" , "z-index" : this.mainDivZIndex}).show();  
    this.initMainDiv();
	
    this.showSelect(false);   
    this.isShowing = true;
}

//隐藏弹层
maskdiv.prototype.hideMainDiv = function ()
{
    this.backgroundDiv.hide(); 
	
    this.showSelect(true);
     
    this.mainDiv.hide();  
    this.isShowing = false;
}