/* 
    #########################################
    Author : JACKSON OATES jackson@zeroninelab.com
    Company : ZERO NINE LAB, LLC - www.zeroninelab.com
    Date: 12/06/09 
    Updated: NA 
    * 
    #########################################

    CREATE A CENTERED OVERLAY AND INJECT PASSED IMAGE
     
    IMPLEMENT:  
    var overlay = new OverlayImg(imgUrl,{ // url to your image 
    	containerId:'overlayContainer',   // id for your container element
    	dimmerId:'dimmer',				  // id for your dimmer/mask
    	close:true						  // add a close button, defaults to false
   	})
    UPDATE LOG:
    NA
    
*/


var OverlayImg = new Class({
	Implements: [Options],	
    options:{
    	// passed when creating new OverlayImg
    	containerId	: null,
		dimmerId		: null,
		close			: false
		
    },
    initialize: function(id, options){
    	this.setOptions(options);
    	this.src		 	= id; 
    	this.containerId	= this.options.containerId;
    	this.dimmerId		= this.options.dimmerId; 
		this.closeBtn		= this.createCloseBtn();
    	this.closeOption	= this.options.close;
		this.docDimensions	= $(document.body).getSize();
		this.windowScroll	= $(document.body).getScrollSize();
		this.image			= null;
		this.start			= this.init();
	},
	init : function(){
		this.body = $(document.body).setStyle('position','relative');
		this.dimmer = this.createDimmer();
		this.dimmer.inject($(document.body),'bottom')
		this.dimmer.fade('.5');
		this.image = new Asset.image(this.src, {
			id: 'centerImg', 
			title: 'myImage'
		});
		this.injectEl();
	},

	// CLOSE EVENT //
	
	closeElement : function(){
		this.elements = [this.dimmer, this.container];
		this.elements.each(function(el){
			this.fx = new Fx.Tween(el,{
				fps:100,
				duration:500,
				onComplete:function(el){
					el.dispose();
				}
			});
			this.fx.start('opacity',0);
			
		})
	},
		
	// CREATE ELEMENTS //
	
	createCloseBtn : function(){
		return new Element('a',{
			id:'close_btn',
			text:'close',
			events:({
				'click':this.closeElement.bind(this)
			})
		})
	},
	createDimmer : function(){
		return new Element('div',{
			'id':this.dimmerId,
			'styles':({
				'height':this.windowScroll.y,
				'width':this.windowScroll.x,
				'opacity':0
			}),
			events:({
				'click':this.closeElement.bind(this)
			})
		})
	},	
	
	// CENTER //
	
	injectEl : function(){
		this.container = new Element('div',{
			id:this.containerId,
			styles:({
				'opacity':0
			})
		})
		if(this.closeOption){
			this.closeBtn.inject(this.container,'top')
		}
		this.image.inject(this.container,'bottom');
		this.container.inject($(document.body));
		
		// add slight delay to calculate dimensions then center and fade in
		this.centerEl.delay(500, this)
	},
	centerEl : function(){
		// TODO: add fancy shit here
		this.container.position().pin().fade('in');
		
	}
});
OverlayImg.implement(new Events, new Options);