﻿/**
 * @author fairy
 * @version v0.2
 * @description
 * 	a opacity div as background
 *  a operation div in frontend
 */
var maskerUtil = {
	$ : function(selector, tagName) {
		var _tag = selector.substr(0, 1);
		var _results = [];
		var _selector = selector.substr(1);
		switch(_tag) {
			case "#" : 
				_results = document.getElementById(_selector);
				break;
			case "-" :
				_results = document.getElementsByName(_selector);
				break;
			case "." :
				var _elems = document.getElementsByTagName(tagName || "*");
				var _reg = new RegExp("(^|\\s)" + _selector + "(\\s|$)");
				var _l = _elems.length - 1;
				for(var i=_l; i>=0; i--) {
					if(_reg.test(_elems[i].className)) _results.push(_elems[i]);
				}
				break;
			default:
				_results = document.getElementsByTagName(selector);
				break;
		}
		if(_results && _results.length == 0) {
			_results = false;
		}
		return _results;
	},
	addEvent : function(em, type, fn) {
		if(!!em) {
			if(em.addEventListener) {
				em.addEventListener(type, fn, false);
			}
			else {
				em.attachEvent("on"+type, fn);
			}
		}
	},
	removeEvent : function(em, type, fn) {
		if(!!em) {
			if(em.removeEventListener) {
				em.removeEventListener(type, fn, false);
			}
			else {
				em.detachEvent("on"+type, fn);
			}
		}
	},
	trim : function(s) {
		return s.replace(/^s+|s+$/g, "");
	}
};

var masker = {
	config : {
		inner			: "",
		title			: "",
		defWidth		: 400,
		defBorderWidth	: 7,
		scrollAble		: false,
		resizeAble		: false,
		nox				: "",
		verticalAlign	: {
			open		: true,
			num			: 100
		}
	},
	init 				: function() {
		masker._switchHide("hidden");
		var _mct = maskerUtil.$(masker._config._tag)[0], _mci = masker.config.inner;
		if(!masker._config._quirks) {
			if(!masker._config._hasInit) {
				masker._initShower();
				masker._config._hasInit = true;
			}
			else {
				maskerUtil.$(".maskerCW")[0].style.width = masker.config.defWidth + "px";
				maskerUtil.$(".maskerX")[0].style.display = masker.config.nox;
				masker._getData();
				maskerUtil.$(masker._config._tag)[0].style.display = "block";
				maskerUtil.$("." + masker._config._defTitleClass)[0].innerHTML = "<span></span>" + masker.config.title;
				var _content = maskerUtil.$("." + masker._config._defContentClass)[0];
				if(typeof masker.config.inner == "string") {
					_content.innerHTML = _mci;
				}
				else {
					masker.__getParentAndNext();
					_content.appendChild(_mci);
				}
				masker._setTop();
				var __tl = maskerUtil.$("." + masker._config._defShowerClass)[0];
				__tl.style.top = masker._config._top + "px";
				__tl.style.left = masker._config._left + "px";
			}
		}
		else {
			if(!!_mct) {
				document.body.removeChild(_mct);
			}
			masker._config._hasInit = false;
			masker._getData();
			var _quirkDom = [masker._dom()[0], "</div>"];
			masker._appendToBody(_quirkDom);
			if(!!_mci) {
				masker.__getParentAndNext();
				_mci.style.position = "absolute";
				_mci.style.width = masker.config.defWidth + "px";
				_mci.style.left = masker._config._left + "px";
				_mci.style.zIndex = 1200;
				maskerUtil.$(masker._config._tag)[0].appendChild(_mci);
			}
			masker._setTop();
			_mci.style.top = masker._config._top + "px";
		}
		if(masker.config.resizeAble) {
			maskerUtil.addEvent(window, "resize", masker.resize);
		}
		if(masker.config.scrollAble) {
			maskerUtil.addEvent(window, "scroll", masker.scroll);
		}
	},
	close				: function() {
		masker._switchHide("visible");
		var _mct = maskerUtil.$(masker._config._tag)[0];
		_mct.style.display = "none";
		if(!masker._config._quirks) {
			var _mcdc = maskerUtil.$("." + masker._config._defContentClass)[0];
			maskerUtil.$("." + masker._config._defTitleClass)[0].innerHTML = "<span></span>";
			if(typeof masker.config.inner == "string") {
				_mcdc.innerHTML = "";
			}
			else {
				var __mcdcc = _mcdc.childNodes[0];
				masker._revert(__mcdcc);
			}
		}
		else {
			masker._config._quirks = false;
			var _mci = masker.config.inner;
			masker._revert(_mci);
			document.body.removeChild(_mct);
			delete(_mct);
		}
		masker.config.nox = "";
		masker.config.verticalAlign.open = true;
		if(masker.config.resizeAble) {
			maskerUtil.removeEvent(window, "resize", masker.resize);
		}
		if(masker.config.scrollAble) {
			maskerUtil.removeEvent(window, "scroll", masker.scroll);
		}
		return;
	},
	scroll				: function() {
		masker._setTop();
		var _mct = masker._config._top;
		if(!masker._config._quirks) {
			var _shower = maskerUtil.$("." + masker._config._defShowerClass)[0];
			if(!!_shower) {
				_shower.style.top = _mct + "px";
			}
		}
		else {
			masker.config.inner.style.top = _mct + "px";
		}
	},
	resize				: function() {
		masker._getData();
		masker._setTop();
		var _mct = masker._config._top;
		if(!masker._config._quirks) {
			var _shower = maskerUtil.$("." + masker._config._defShowerClass)[0];
			if(!!_shower) {
				_shower.style.left = (document.body.scrollWidth - masker.config.defWidth - masker.config.defBorderWidth * 2) / 2 + "px";
				_shower.style.top = _mct + "px";
			}
		}
		else {
			masker.config.inner.style.left = (document.body.scrollWidth - masker.config.defWidth - masker.config.defBorderWidth * 2) / 2 + "px";
			masker.config.inner.style.top = _mct + "px";
		}
		var _mcbg = maskerUtil.$("." + masker._config._defBG)[0];
		if(_mcbg) {
			_mcbg.style.height = masker._config._browserHeight + "px";	
		}
	},
	_config : {
		_tag 			: ".masker",
		_browserWidth	: 0,
		_browserHeight	: 0,
		_top			: 0,
		_left			: 0,
		_hideElem 		: ["select", "object", "embed", "iframe"],
		_hasInit		: false,
		_defTitleClass	: "maskerTitle",
		_defBG			: "maskerBG",
		_defShowerClass	: "maskerShower",
		_defContentClass: "maskerContent",
		_innerParent	: null,
		_innerNext		: null,
		_originStyle	: "",
		_quirks			: false,
		_verticalPos	: -1
	},
	_initShower 		: function() {
		masker._getData();
		var __dom = masker._dom(), __content = masker.config.inner;
		if(typeof __content == "string") {
			__dom[3] = __content;
		}
		masker._appendToBody(__dom);
		masker.__getParentAndNext();
		if(typeof __content == "object") {
			maskerUtil.$("." + masker._config._defContentClass)[0].appendChild(__content);
		}
		masker._setTop();
		maskerUtil.$("." + masker._config._defShowerClass)[0].style.top = masker._config._top + "px";
	},
	_appendToBody : function(__dom) {
		var __div = document.createElement("div"), __body = document.body;
		__div.style.cssText = "display:none";
		__div.innerHTML = __dom.join("");
		__body.appendChild(__div);
		__body.appendChild(__div.childNodes[0]);
		__body.removeChild(__div);
	},
	__getParentAndNext  : function() {
		var __content = masker.config.inner;
		if(typeof __content == "object") {
			masker._config._innerParent = __content.parentNode;
			var _ns = __content.nextSibling;
			while(_ns && _ns.nodeType != 1) {
				_ns = _ns.nextSibling;
			}
			if(_ns && _ns.nodeType == 1) {
				masker._config._innerNext = _ns;
			}
			masker._config._originStyle = __content.style.cssText;
			__content.style.display = "";
		}
	},
	_dom 				: function() {
		return ['<div class="masker" style="display:block;width:100%"><div class="maskerBG" style="height:' + masker._config._browserHeight + 'px"></div>',
				'<div class="maskerShower" style="top:' + masker._config._top + 'px;left:' + masker._config._left + 'px"><dl class="maskerCW" style="width:' + masker.config.defWidth + 'px"><dt><div class="maskerTitle"><span></span>' + masker.config.title,
				'</div><a href="javascript:void(0)" id="maskerX" class="maskerX" onclick="return masker.close();" style="display:' + masker.config.nox + '"></a></dt><dd class="maskerHr"></dd><dd class="maskerContent">',
				'',
				'</dd></dl></div></div>'];
	},
	_getData			: function() {
		var __db = document.body, __dd = document.documentElement, __bhs = __db.scrollHeight, __bhc = __dd.clientHeight;
		_w = masker._config._browserWidth = __db.scrollWidth;
		masker._config._browserHeight = __bhs > __bhc ? __bhs : __bhc;
		masker._config._left = (_w - masker.config.defWidth - masker.config.defBorderWidth * 2) / 2;
		delete(_w);
	},
	_setTop			: function() {
		if(masker.config.verticalAlign.open) {
			masker.__getVerticalPos();
		}
		else {
			masker._config._verticalPos = parseInt(masker.config.verticalAlign.num);
		}
		masker._config._top = document.documentElement.scrollTop + masker._config._verticalPos;
		
		if(!!/Safari/.test(navigator.userAgent)) {
			masker._config._top = window.pageYOffset + masker._config._verticalPos;
		}
	},
	__getVerticalPos		: function() {
		var __verticalHeight = parseInt(window.innerHeight || document.documentElement.clientHeight || document.body.offsetHeight);
		var __mci = masker.config.inner;
		if(masker._config._quirks) {
			__verticalHeight = (__verticalHeight - parseInt(masker._isNaN(__mci.offsetHeight)))/2;
		}
		else {
			__verticalHeight = (__verticalHeight - parseInt(masker._isNaN(parseInt(maskerUtil.$(".maskerShower")[0].offsetHeight)))) / 2;
		}
		
		masker._config._verticalPos = masker._isNaN(__verticalHeight);
	},
	_isNaN : function(value) {
		return isNaN(value) ? 0 : value;
	},
	_revert : function(__node) {
		if(masker._config._innerNext) {
			masker._config._innerParent.insertBefore(__node, masker._config._innerNext);
		}
		else {
			masker._config._innerParent.appendChild(__node);
		}
		__node.style.cssText = masker._config._originStyle;
	},
	_switchHide			: function(value) {
		var _emSpecail = masker._config._hideElem;
		var _l = _emSpecail.length;
		for(var i = _l-1; i >= 0; i--) {
			var _ems = maskerUtil.$(_emSpecail[i]);
			var _il = _ems.length;
			var _mci = masker.config.inner;
			for(var j = _il-1; j >= 0; j--) {
				var _p = _ems[j].parentNode;
				while(_p.tagName.toLowerCase() != "body" && _p != _mci) {
					_p = _p.parentNode;
				}
				if(_p.tagName.toLowerCase() == "body") {
					_ems[j].style.visibility = value;	
				}
			}
		}
	}
};