var DetailsBox = new Class({

	//implements
	Implements: [Options],

	theOverlay: null,			//overlay div element (created at initialization)

	//options
	options: {
	theClosebtn: null,			//div for close btn
	transitionTime: 1000, 		//transition time (1 second = 1000) for box opening animation & image fade-in/out animation
	theStage: null,				//to center details inside (element)
	theBox: null,				//the 'details' div
	overlayOpacity: .8,			//opacity of item rollover (thumbnail rollover)
	startBtn: null				//element to open box (typically a link)
	},
	

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);		
		
		var self = this;
		
		
		self.options.theClosebtn.addEvents({
			'click': function(event){
				event.preventDefault();
				self.hideBox();
			}
		});
		
		
		this.options.theBox.set('tween', { 
			duration: this.options.transitionTime, 
			transition: 'cubic:out',
			link: 'ignore'
		});
		
		
		//create overlay div
		var myOverlay = new Element('div', {
			'id' : 'overlay',
			'styles' :  {
				'opacity': 0
			}
		});
		this.theOverlay = myOverlay;
		$(document.body).grab(myOverlay);
		$(document.body).grab(self.options.theBox);
		
		this.theOverlay.setStyles({
			'top': -$(window).getScroll().y,
			'height':$(window).getScrollSize().y+$(window).getScroll().y
		});
		
		this.theOverlay.set('tween', { 
			duration: 500, 
			transition: 'quad:out',
			
			onComplete: function(){
				if(this.theOverlay.getStyle('opacity') == 0){
					//this.hidePic();	
				}
				else{
					this.showBox.delay(100, this, null);	//(delay, bind, params)
				}
			}.bind(this)
			
		});
		
		
		
		this.options.startBtn.addEvents({
			'click' : function(event){ 
				event.preventDefault();
				self.showOverlay();
			}
		});
		
		
	},
	
	showOverlay: function(){
		var self = this;
		
		self.theOverlay.tween('opacity',self.options.overlayOpacity);
		
		self.theOverlay.addEvents({
			'click': function(){
				self.hideOverlay();
				self.hideBox();
				self.theOverlay.removeEvent('click');
				self.options.theClosebtn.removeEvent('click');
			}
		});
		
		self.options.theClosebtn.addEvents({
			'click': function(){
				self.hideOverlay();
				self.hideBox();
				self.theOverlay.removeEvent('click');
				self.options.theClosebtn.removeEvent('click');
			}
		});
		
	},
	
	showBox: function(){
		
		var self = this;
		
		var theImg = self.options.theBox.getElement('img');
		var imgWidth = theImg.getSize().x;
		
		//self.options.theBox.setStyle('width', (imgWidth + 40));
		self.options.theBox.setStyle('width', imgWidth);
		var tempX = (window.getSize().x - this.options.theBox.getSize().x)/2;
		var tempY = (window.getSize().y - this.options.theBox.getSize().y)/2;
		
		this.options.theBox.setStyles({
			'top' : tempY,
			'left' : tempX
		});
		
		this.options.theBox.morph({
			'opacity' : 1
		});
	},
	
	
	hideBox: function() {
		this.options.theBox.tween('opacity',0);
	},
	
	hideOverlay: function(){
		this.theOverlay.tween('opacity',0);
	},
	
	//fade in function (so I can bind stuff)
	showIt: function(el){ 
		
		var fade_in = new Fx.Morph(el, {
			     duration: 1000, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore'
		});
		
		fade_in.start({
		'opacity': 1
		});
		
	}
	
});