YOUSHANG.panel = function (el,config) {
	this.init(el,config);
}
YOUSHANG.panel.prototype = {
	init : function (el,config) {
		this.el = el;
		this.config = config;
	},
	setHeader : function (title) {
		this.title = title;
	} ,
	setBody : function (bodyContent) {
		this.bodyContent = bodyContent;
	} ,
	render : function(appendToNode) {
		var me = this,
			firstChild;
		var html = "";
		function appendTo(element) {
			if (typeof element == "string") {
				element = document.getElementById(element);
			}
	
			if (element) {
				element.appendChild(me.element);
			}
		}
		if(this.config['mask']) {
			this.element = document.createElement("div");
			this.element.id = "ysMask";
			this.element.className = "ysMask";
			this.element.innerHTML = "";
			appendTo(document.body);
		}
		if($("ys"+this.el)) {
			$("ys"+this.el).style.display = "block";
			this.auto = false;
		} else {
			this.auto = true;
			html += '<div class="ysPanel" id="'+this.el+'">';
			html += '<div class="ysPanelTitle">';
			html += this.title;
			if(this.config['close']) {
				html += '<span id="ysPanelClose" class="ysPanelClose">close</span>'
			}
			html += '</div>';
			html += '<div class="ysPanelBody">'
			html += this.bodyContent;
			html += '</div>';
			html += '</div>';
			this.element = document.createElement("div");
			this.element.id = "ys"+this.el;
			this.element.innerHTML = html;
	
			if (appendToNode) {
				appendTo(appendToNode);
			} else {
				appendTo(document.body);
			}
		}
		if(this.config['width']) {
			$(this.el).style.width = this.config['width'];
		}
		if(this.config['height']) {
			$(this.el).style.height = this.config['height'];
		}
		this.sh = setInterval(function() {
			if(me.config['mask']) {
				$('ysMask').style.height = document.documentElement.clientHeight + "px";
				$('ysMask').style.width = document.documentElement.clientWidth + "px";
				$('ysMask').style.top = document.documentElement.scrollTop + "px";
				var top = ($('ysMask').offsetHeight - $(me.el).offsetHeight) / 2;
				var left = ($('ysMask').offsetWidth - $(me.el).offsetWidth) / 2;
			} else {
				var top = (document.documentElement.clientHeight - $(me.el).offsetHeight) / 2;
				var left = (document.documentElement.clientWidth - $(me.el).offsetWidth) / 2;
			}
			$(me.el).style.top = (top + document.documentElement.scrollTop) + "px";
			$(me.el).style.left = left + "px";
		},1);
		var fn = this.hidden;
		var base = new YOUSHANG.base();
		if(me.config['close']) {
			base.addListener("click",fn,$('ysPanelClose'),this);
		}
	},
	
	hidden : function(obj) {
		if(obj.config['mask']) {
			document.body.removeChild($("ysMask"));
		}
		if(obj.auto) {
			document.body.removeChild($("ys"+obj.el));
		} else {
			$($("ys"+obj.el)).style.display = "none";
		}
		clearInterval(obj.sh);
	},
	
	hide : function() {
		if(this.config['mask']) {
			document.body.removeChild($("ysMask"));
		}
		if(this.auto) {
			document.body.removeChild($("ys"+this.el));
		} else {
			$($("ys"+this.el)).style.display = "none";
		}
		clearInterval(this.sh);
	}
}