var StoutBox = new Class({

	//implements
	Implements: [Options],
	
	//variables
	imgWidth: null,					//will use this to store image width
	imgHeight: null,					//will use this to store image height
	pic_opener: null,  				//I'll be using this to hold the image Fx.tween stuff (for re-use and any possible chaining purposes)
	imgSrc: null,						//will use for storing source of image
	theOverlay: null,					//overlay div element (created at initialization)
	theLoading: null,					//div for holding 'loading' gif
	theClosebtn: null,				//div for close btn
	

	//options
	options: {
	transitionTime: 1000, 		//transition time (1 second = 1000) for box opening animation & image fade-in/out animation
	theBox: null,					//the 'stoutbox' div, which will be created if not on the page already
	theImage: null,				//the div inside the 'theBox' element, which will hold the actual image
	items:  null, 					//Array of rel='stoutbox' elements
	spacer: 5,						//border width (in pixels) around image
	boxWidth: 200,				//initial box width
	boxHeight: 200,				//initial box height
	overlayOpacity: .8,			//opacity of item rollover (thumbnail rollover)
	overOpacity: .5				//opacity of item rollover (thumbnail rollover)
	},
	

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		//setup the 'stoutbox' div if not there
		if(this.options.theBox == null){
			var myBox = new Element('div', {
				'id' : 'stoutbox'
			});
			this.options.theBox = myBox;
			$(document.body).grab(myBox);			
		}
		
		
		//create 'loading' div
		/*
		var myLoading = new Element('div', {
			'id': 'loading',
			'styles' : {
				'opacity': 0,
				'left': '20px',
				'top': '20px',
				'z-index': 10000
			}
		});
		this.theLoading = myLoading;
		this.options.theBox.grab(this.theLoading);
		*/
		
		//create the close btn
		var myCloseBtn = new Element('div', {
			'id' : 'closebtn',
			'styles' : {
				'opacity' : 0,
				'cursor' : 'pointer',
				'z-index' : 10001
			}
		});
		this.theClosebtn = myCloseBtn;
		this.theClosebtn.set('tween', {duration: 250, ease: 'linear'});
		this.theClosebtn.addEvents({
			'mouseenter': function(){
				this.tween('opacity', .75);	
			},
			'mouseleave': function(){
				this.tween('opacity', .6);	
			}
		});
		
		this.options.theBox.grab(this.theClosebtn);
		
		//create the div that holds the image
		var myImage = new Element('div', {
			'id' : 'boximage',
			'styles' : {
				'opacity' : 0,
				'z-index' : 9999,
				'position' : 'absolute',
				'left' : this.options.spacer,
				'top' : this.options.spacer
			}
		});
		this.options.theImage = myImage;
		this.options.theBox.grab(myImage);
		
		//style & position 'stoutbox'
		this.options.theBox.setStyles({
			'opacity' : 0,
			'width' : this.options.boxWidth,
			'height' : this.options.boxHeight,
			'top' : (window.getSize().y - this.options.boxHeight)/2,
			'left' : (window.getSize().x - this.options.boxWidth)/2
		});
		
		this.options.theBox.set('morph', { 
			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);
		
		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)
			
		});
		
		
		//get all the marked links for opening a stoutbox
		if(this.options.items == null){
			this.options.items = $(document.body).getElements('a[rel=stoutbox]');	
		}
		
		
		//set each link to load & open the stoutbox
		this.options.items.each(function(v, k){
			//v = the element
			//k = the index
			v.set('tween', {
				duration: 300,
				transition: 'cubic:out'
			});
			
			var thisImg = $(v.getElement('img'));
			thisImg.set('tween', {
				duration: 300,
				transition: 'cubic:out'
			});
			
			var overOp = this.options.overOpacity;
			
			v.addEvents({
				'click' : function(event){ 
					event.preventDefault();
					this.imgSrc = v.getAttribute('href');
					this.showOverlay();
				}.bind(this),
				'mouseenter' : function() {
					//this.setStyle('cursor', 'pointer');
					this.tween('opacity', overOp);
				}.bind(thisImg),
				'mouseleave' : function() {
					this.tween('opacity', '1');
				}.bind(thisImg)
			});
			
		}, this);
		
		
	},
	
	showOverlay: function(){
		this.theOverlay.tween('opacity',this.options.overlayOpacity);
		
		this.theOverlay.addEvents({
			'click': function(){
				this.hideOverlay();
				this.hideBox();
				this.theOverlay.removeEvent('click');
				this.theClosebtn.removeEvent('click');
			}.bind(this)
		});
		
		this.theClosebtn.addEvents({
			'click': function(){
				this.hideOverlay();
				this.hideBox();
				this.theOverlay.removeEvent('click');
				this.theClosebtn.removeEvent('click');
			}.bind(this)
		});
		
	},
	
	showBox: function(){
		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.set('morph', {
			onComplete: function(){
				this.loadPic();
			}.bind(this)
		});
		this.options.theBox.morph({
			'opacity' : 1
		});
	},
	
	loadPic: function(){
		//this.showLoader();
		var imageSrc = this.imgSrc;
		
		//load image here
		var tempImages = new Asset.images([imageSrc], {
				onComplete: function(){ 
					var tempImg = tempImages[0];
					//tempImg.setStyle('opacity', 0);
					this.options.theImage.empty();
					this.options.theImage.setStyles({
						'top': '5px', 
						'left': '5px', 
						'opacity': 0
					});
					this.options.theImage.grab(tempImg);
					this.stretchBox();  
				}.bind(this)
		});

	},
	
	stretchBox: function(){
		var tempW = this.options.theImage.getSize().x + 10;
		var tempH = this.options.theImage.getSize().y + 10;
		var tempX = ((window.getSize().x - tempW)/2).toInt();
		var tempY = ((window.getSize().y - tempH)/2).toInt();
		
		this.options.theBox.addClass('loading');
		
		this.options.theBox.set('morph', {
			onComplete: function()	{
				this.options.theBox.removeClass('loading');
				this.showPic();	
			}.bind(this)
		});
		
		this.options.theBox.morph({
			'width' : tempW,
			'height' : tempH,
			'top' : tempY,
			'left' : tempX,
			'opacity': 1
		});
	},
	
	showPic: function() {
		var theImg = $(this.options.theImage.getElement('img'));
		this.options.theImage.set('tween', {
			onComplete: function(){
				//do nothing for now
			}
		});
		this.theClosebtn.tween('opacity', .6);
		this.options.theImage.tween('opacity', 1);
	},
	
	hidePic: function() {
		this.options.theImage.set('tween', {
			onComplete: function(){
				this.unloadPic();
			}.bind(this)
		});
		this.theClosebtn.tween('opacity', 0);
		this.options.theImage.tween('opacity', 0);
	},
	
	unloadPic: function(){
		this.options.theImage.empty();
	},
	
	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
		});
		
	}
	
});