/******************************************************

	Title: box.js
	Author: Nate Obray <nate@adventcreative.com>
	Description:
	
		

******************************************************/

Box = new Class({
	Implements: Options,
	
	options: {
		type: 'lazy',
		width: 0,
		style: 'white',
		top: 100
	},
	
	initialize: function(options){
		this.setOptions(options);
		
		//load Stylesheet
		
		if(this.options.style == "white"){
			this.stylesheet = new Asset.css('obray/css/white_box.css',{'onload':function(){}});
		} else if(this.options.style == "dark"){
			this.stylesheet = new Asset.css('obray/css/dark_box.css',{'onload':function(){}});
		}
		
		
		//create background
		if($chk($('boxBackground')) == false){
			this.boxBG = new Element('div',{'id':'boxBackground'});
			this.boxBG.setStyles({'height':window.getScrollSize().y});
			$$('body').adopt(this.boxBG);
			
			var newTransition = new Fx.Transition(Fx.Transitions.Quad);
			var boxFade = new Fx.Tween(this.boxBG, {transition: newTransition.easeOut,duration: 1000});
			boxFade.start(['opacity','.75']).chain(function(){
			}.bind(this));
		} else {
			if(this.options.type == 'control'){
				this.boxBG = new Element('div',{'id':'boxBackground'});
				this.boxBG.setStyles({'opacity':'0.75'});
				this.boxBG.setStyles({'height':window.getScrollSize().y});
				this.boxBG.setStyles({'z-index':'5100'});
				$$('body').adopt(this.boxBG);	
			}
		}
		
		//generate HTML
		this.box = 				new Element('div',{'class':'boxWrapper'});
		this.boxContainer = 	new Element('div',{'class':'boxContainer'});
		this.boxClose_btn = 	new Element('div',{'class':'boxClose_btn'});
		this.boxUpperLeft = 	new Element('div',{'class':'boxUpperLeft'});
		this.boxTop = 			new Element('div',{'class':'boxTop'});
		this.boxUpperRight = 	new Element('div',{'class':'boxUpperRight'});
		this.boxLeft = 			new Element('div',{'class':'boxLeft'});
		this.boxRight = 		new Element('div',{'class':'boxRight'});
		this.boxMiddle = 		new Element('div',{'class':'boxMiddle'});
		this.loadingImage = 	new Element('img',{'class':'loadingImage','src':'assets/images/ajax-loader(3).gif','alt':'loading...'});
		this.loadingText = 		new Element('span',{'class':'loadingText'});
		this.loadingText.set('html','Loading...');
		this.boxLowerLeft = 	new Element('div',{'class':'boxLowerLeft'});
		this.boxBottom = 		new Element('div',{'class':'boxBottom'});
		this.boxLowerRight = 	new Element('div',{'class':'boxLowerRight'});
		this.boxContent = 		new Element('div',{'class':'boxContent'});
		this.boxButtons =		new Element('div',{'class':'boxButtons'});
		//Construct box
		this.boxContainer.inject(this.box);
		this.boxClose_btn.inject(this.boxContainer);
		this.boxUpperLeft.inject(this.boxContainer);
		this.boxTop.inject(this.boxContainer);
		this.boxUpperRight.inject(this.boxContainer);
		this.boxLeft.inject(this.boxContainer);
		this.boxLowerLeft.inject(this.boxContainer);
		this.boxBottom.inject(this.boxContainer);
		this.boxLowerRight.inject(this.boxContainer);
		this.boxRight.inject(this.boxLeft);
		this.boxMiddle.inject(this.boxRight);
		this.loadingImage.inject(this.boxMiddle);
		this.loadingText.inject(this.boxMiddle);
		
		//attach box to body element
		this.box.setStyles({'top':this.options.top});
		this.box.setStyles({'left':'-1000px'});
		this.body = $$('body');
		
		$$('body').adopt(this.box);
		
		this.boxHeight = this.boxMiddle.getStyle('height').toInt();
		if(Browser.Engine.trident && Browser.Engine.version <= 4){
			this.boxContainer.setStyles({'width':this.options.width+60+'px'});
			this.boxTop.setStyles({'width':this.options.width+'px'});
			this.boxMiddle.setStyles({'width':this.options.width+10+'px'});
			this.boxBottom.setStyles({'width':this.options.width+'px'});
			this.boxClose_btn.setStyles({'left':this.options.width+10+'px'});
		} else {
			if(this.options.style == "dark"){
				this.boxContainer.setStyles({'width':this.options.width+88+'px'});
				this.boxClose_btn.setStyles({'left':this.options.width+40+'px'});
				this.boxMiddle.setStyles({'height':'428px'});
			} else {
				this.boxContainer.setStyles({'width':this.options.width+30+'px'});
				this.boxClose_btn.setStyles({'left':this.options.width+10+'px'});
			}
			this.boxTop.setStyles({'width':this.options.width+'px'});
			this.boxMiddle.setStyles({'width':this.options.width+'px'});
			this.boxBottom.setStyles({'width':this.options.width+'px'});
			
		}
		if(this.type == 'control'){
			this.box.setStyles({'z-index':'5101'});
		}
		
	},
	
	open: function(url,transition){
		this.contentURL = url;	//content to be loaded
		function loadContent(){
			
			var date = new Date();
			var timestamp = date.getTime();
			
			//this.boxContent.setStyles({'opacity':0});
			var boxRequest = new Request.HTML({method:'get',url:this.contentURL,evalScripts:false,'onSuccess':function(responseTree, responseElements, responseHTML, responseJavaScript){
				
				this.boxNewContent = new Element('div');
				this.boxNewContent.set('html',responseHTML);
				
				this.boxNewContent.inject(this.boxMiddle);
				this.boxContent.setStyles({'display':'block'});
				
				//var newHeight = this.boxContent.getStyle('height').toInt()+50;
				//alert(this.boxContent.getSize().y);
				
				
				
				eval(responseJavaScript);
				
				var br = new Element('br',{'class':'clear'});
				
				//this.boxButtons.inject(br);
				
				this.boxButtons.inject(this.boxMiddle);
				
				this.loadingImage.destroy();
				this.loadingText.destroy();																												 
			}.bind(this)}).send('time='+timestamp);
			
		};
		//handle various transition
		
		if(transition == 'slide'){
			this.transition = transition;
			var boxSlide = this.box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
			boxSlide.start({'left':-(this.options.width/2)-40+'px'}).chain(loadContent.bind(this));
		} else if(transition == 'fade'){
			this.transition = transition;
			this.box.setStyles({'left':-(this.options.width/2)-30+'px','opacity':'0.0'});
			var newTransition = new Fx.Transition(Fx.Transitions.Quad);
			boxFade = new Fx.Tween(this.box, {transition: newTransition.easeOut,duration: 1000});
			boxFade.start(['opacity','1']).chain(loadContent.bind(this));
		}
		this.boxClose_btn.addEvent('click',this.close.bind(this));
	},
	
	close: function(){
		//this.contentRequest.removeEvents();
		this.boxContent.setStyles({'opacity':0});
		this.boxContent.setStyles({'display':'block'});
		if($chk(this.boxBG)){
			
			
			var newTransition = new Fx.Transition(Fx.Transitions.Quad);
			var boxFade = new Fx.Tween(this.boxBG, {transition: newTransition.easeOut,duration: 500});
			boxFade.start(['opacity','0']).chain(function(){
				this.boxBG.destroy();											
			}.bind(this));
			
		}
		if(this.transition == 'slide'){
			var boxSlide = this.box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
			boxSlide.start({'left':'-2000px'}).chain(function(){
				this.box.destroy();											
			}.bind(this));
		} else if(this.transition == 'fade'){
			var newTransition = new Fx.Transition(Fx.Transitions.Quad);
			var boxFade = new Fx.Tween(this.box, {transition: newTransition.easeOut,duration: 1000});
			boxFade.start(['opacity','0']).chain(function(){
				this.box.destroy();											
			}.bind(this));
		}
	},
	
	shake: function(){
		
	},
	
	removeCloseBtn: function(){
		this.boxClose_btn.destroy();
	}
});