// JavaScript Document
function Box(height,width){
	this.boxHeight = 0;
	this.boxWidth = width;
}

Box.prototype.openBox = function(contentURL,el){
	this.contentURL = contentURL;
	var boxBG = new Element('div',{'id':'boxBackground'});
	boxBG.setStyles({'opacity':'0.0'});
	var boxBGFade = boxBG.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
	boxBGFade.start({'opacity':'0.75'});
	$$('body').adopt(boxBG);
	var box = new Element('div',{'id':'boxWrapper'});
	box.setHTML(''+
		'<div id="boxContainer">'+
			'<div id="boxClose_btn"></div>'+
			'<div id="boxUpperLeft"></div>'+
			'<div id="boxTop"></div>'+
			'<div id="boxUpperRight"></div>'+
			
			'<div id="boxLeft"><div id="boxRight">'+
			'<div id="boxMiddle"><div id="boxContent"></div><img src="assets/images/ajax-loader(3).gif" alt="Loading..."> <span class="loadingText">Loading...</span></div></div></div>'+
	
			'<div id="boxLowerLeft"></div>'+
			'<div id="boxBottom"></div>'+
			'<div id="boxLowerRight"></div>'+
		'</div>');
	box.setStyles({'left':'-1000px'});
	$$('body').adopt(box);
	this.boxHeight = $('boxMiddle').getStyle('height').toInt();
	$('boxContainer').setStyles({'width':this.boxWidth+30+'px'});
	$('boxTop').setStyles({'width':this.boxWidth+'px'});
	$('boxMiddle').setStyles({'width':this.boxWidth+'px'});
	$('boxBottom').setStyles({'width':this.boxWidth+'px'});
	$('boxClose_btn').setStyles({'left':this.boxWidth+10+'px'});
	
	var boxSlide = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
	boxSlide.start({'left':-(this.boxWidth/2)+'px'}).chain(function(){
		var date = new Date();
		var timestamp = date.getTime();
		var contentRequest = new Ajax(contentURL+'&time='+timestamp,{method:'get',update:$('boxMiddle')}).request();
		contentRequest.addEvent('onComplete',function(){
			
			var content = $('boxContent');
			content.setStyles({'opacity':0.1});
			content.setStyles({'display':'block'});
			var newHeight = content.getStyle('height').toInt()+50;
			$('boxMiddle').setStyles({'width':this.boxWidth+'px'});
			var contentFadeIn = content.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
			contentFadeIn.start({'opacity':'1'});
			this.resize();
			eval($('script').innerHTML);
			
		}.bind(this));
	}.bind(this));
	
	$('boxClose_btn').addEvent('click',this.closeBox);
}

Box.prototype.closeBox = function(){
	var boxBG = $('boxBackground');	
	var box = $('boxWrapper');
	var content = $('boxContent');
	content.setStyles({'opacity':0});
	content.setStyles({'display':'block'});
	
	var boxBGFade = boxBG.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
	boxBGFade.start({'opacity':'0.0'}).chain(function(){
		boxBG.remove();
	});
	var boxSlide = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
	boxSlide.start({'left':'-2000px'}).chain(function(){
		box.remove();											
	});
}

Box.prototype.shake = function(){
	var boxBG = $('boxBackground');	
	var box = $('boxWrapper');
	var leftMargin = box.getStyle('margin-left').toInt();
	
	var shake = box.effects({duration: 1000, transition: Fx.Transitions.Elastic.easeOut});
	var moveLeft = box.effects({duration: 100, transition: Fx.Transitions.Quart.easeOut});
	moveLeft.start({'margin-left':leftMargin-100+'px'}).chain(function(){
		shake.start({'margin-left':leftMargin+'px'});														  
	});
	var date = new Date();
	var timestamp = date.getTime();
	var contentRequest = new Ajax(this.contentURL+'&time='+timestamp,{method:'get',update:$('boxMiddle')}).request();
	contentRequest.addEvent('onComplete',function(){
		var content = $('boxContent');
		content.setStyles({'opacity':0});
		content.setStyles({'display':'block'});
		var contentFadeIn = content.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
		contentFadeIn.start({'opacity':'1'});
		eval($('script').innerHTML);
	});
}

Box.prototype.resize = function(){
	var boxBG = $('boxBackground');	
	var box = $('boxWrapper');	
	var content = $('boxMiddle');
	var newHeight = content.getStyle('height').toInt();

}