/**
 * @alias BoxEW_simp
 * @alias JSH.BoxEW_simp
 * @param {String} selector
 * @param {String} [parSelector] Append box to 'parSelector'
 * @param {Interger} [offsetTop] Static offsetTop
 * @param {Boolean} [isindep] Define the layer whether it need auto replication
 * @param {Function} [callback] Callback funtion
 * @author Cyan
 * @version 2009.08.17 v0.4
 * 
 * @projectDescription Only height is avaliable in this version, width will always be center <br />
 * <a href="changelog.txt">Click here to see the ChangeLog</a>
 */

var BoxEW_simp = function(selector,parSelector,offsetTop,isindep,callback){
	
	// Debug
	thisLayer = "orz";
	
	// Object;
	if (isindep && isindep != "") {
		thisLayer = $(selector);
	} else {
		if (parSelector != "") {
			this.parentLayer = $(parSelector);
			var thisLayer = $(selector).clone().appendTo(parSelector);
		}
		else {
			var thisLayer = $(selector).clone().appendTo("#container");
		}
	}
	this.thisLayer = $(thisLayer);
	
	if(offsetTop && offsetTop != "")
		this.offsetTop = offsetTop;

//	if(offsetTop)
//		this.offsetTop = offsetTop;
		
	this.winHandle = $(window);
	
	if(parSelector != "" && this.parentLayer.css("position") == "static")
		this.parentLayer.css("position","relative");
		
	this.thisLayer.css("position","absolute");
	if (!isindep)
		this.thisLayer.attr("id",this.thisLayer.attr("id") + "_" + Math.round(Math.random() * 1000000));
	this.thisLayer.attr("class",$(selector).attr("class"));
	
	// Mask
	
	this.maskLayer = $('<div class="boxew_mask"></div>');
	this.maskLayer.css("display", "none");
	this.maskLayer.insertBefore(this.thisLayer);
	
	if(callback){
		if(this.parentLayer){
			callback(this.thisLayer,this.parentLayer,this.maskLayer,this);
		} else {
			callback(this.thisLayer,$("#container"),this.maskLayer,this);
		}
	}
		
		
	
	// Privileage Methods
	
	/**
	 * @alias fixPosition
	 * @alias JSH.BoxEW.fixPosition
	 * @return {null}
 	 * @projectDescription Loate the layer to specific place, based on its size.
	 */
	this.fixPosition = function(){
		// Fix box position to it should be
		if (parSelector != "") {
			var offsetTopValue = (this.parentLayer.height() - this.getBoxSize().height > 0 ? this.parentLayer.height() - this.getBoxSize().height : 0)/2
			var offsetLeftValue = (this.parentLayer.width() - this.getBoxSize().width > 0 ? this.parentLayer.width() - this.getBoxSize().width : 0)/2
			
			offsetTop ? 
				this.thisLayer.css("top",offsetTop):
				this.thisLayer.css("top",offsetTopValue);
			
			this.thisLayer.css("left", offsetLeftValue);
		}
		else {
			var offsetTopValue = (this.getBrowserRules().height - this.getBoxSize().height > 0 ? this.getBrowserRules().height - this.getBoxSize().height : 0)/2;
			var offsetLeftValue = (this.getBrowserRules().width - this.getBoxSize().width > 0 ? this.getBrowserRules().width - this.getBoxSize().width : 0)/2
			
			offsetTop ? 
				this.thisLayer.css("top", offsetTop + this.getBrowserRules().sTop) : 
				this.thisLayer.css("top", offsetTopValue + this.getBrowserRules().sTop);
			
			this.thisLayer.css("left", offsetLeftValue);
		}
	}
	
	/**
	 * @alias getBoxSize
	 * @alias JSH.BoxEW.getBoxSize
	 * @return {Array} 
 	 * @projectDescription Returns array about boxHeight, boxWidth
	 */
	this.getBoxSize = function(){
		return {
			height:this.thisLayer.height(),
			width:this.thisLayer.width()
		}
	}
}

/**
 * @alias getBrowserRules
 * @alias JSH.BoxEW.getBrowserRules
 * @return {Array} [height,width,sTop,sLeft,sHeight,sWidth] 
 * @projectDescription Returns browser size param
 */
BoxEW_simp.prototype.getBrowserRules = function() {
	return {
		height : document.documentElement.clientHeight,
		width : document.documentElement.clientWidth,
		sTop: document.documentElement.scrollTop,
		sLeft: document.documentElement.scrollLeft,
		sHeight: document.documentElement.scrollHeight,
		sWidth: document.documentElement.scrollWidth
	}
}

/**
 * @alias showBox
 * @alias JSH.BoxEW.showBox
 * @param {Boolean} [maskSelector] mask selector
 * @param {Boolean} [fade] if this box have a fade effect
 */
BoxEW_simp.prototype.showBox = function(mask,fade,simpleCallback){
	
	var that = this;
	
	if(mask == 1){
		this.haveMask = 1;
		resizeMask();
		if(!this.parentLayer)
			this.winHandle.bind("scroll resize",function(){
				resizeMask();
			})
	}
	
	function resizeMask(){
		if (that.parentLayer) {
			that.maskLayer.css("zIndex",that.parentLayer.css("zIndex"));
			that.maskLayer.height(that.parentLayer.height());
			that.maskLayer.width(that.parentLayer.width());
		} else {
			that.maskLayer.addClass("global_mask");
			that.maskLayer.height(that.getBrowserRules().sHeight - 5);
			that.maskLayer.width(that.getBrowserRules().sWidth);
		}
		try{that.maskLayer.css("filter","alpha(opacity=50)")}catch(e){}
	}
	
	// Just Callback
	if(simpleCallback && this.parentLayer)
		simpleCallback(this.thisLayer,this.parentLayer);
	else if(simpleCallback)
		simpleCallback(this.thisLayer);
	
	// Then fix it
	this.thisLayer.show();
	this.fixPosition();
	this.thisLayer.hide();
	
	// Set z-index by parent
	if (this.parentLayer)
		this.thisLayer.css("zIndex",this.parentLayer.css("zIndex"));
		
	// If have fade, show this box with animation.
	if(fade == 1){
		that.thisLayer.fadeIn(200);
		if(that.haveMask)
			that.maskLayer.fadeIn(200);
	} else {
		$(that.thisLayer).css("display","block");
		if(that.haveMask)
			that.maskLayer.show()
	}
	
	// Make the offsetTop work when scroll the window
	if (this.offsetTop) {
		this.winHandle.bind("scroll resize",function(){
			that.fixPosition();
		})
	}
}

/**
 * @alias hideBox
 * @alias JSH.BoxEW.hideBox
 * @param {Boolean} [fade] if this box have a fade effect
 * @return {null}
 */
BoxEW_simp.prototype.hideBox = function(fade) {	
	if (!!this.offsetTop){
		this.winHandle.unbind("scroll resize");
		this.winHandle.unbind("scroll resize");
	}
	
	if(fade == 1){
		this.thisLayer.fadeOut(200);
		if(this.haveMask)
			this.maskLayer.fadeOut(200);
	} else {
		this.thisLayer.hide();
		if(this.haveMask)
			this.maskLayer.hide();
	}
	
	this.haveMask = 0;
}