/* 
    #########################################
    Author : JACKSON OATES jackson@summitprojects.com
    Company : SUMMIT PROJECTS - www.summitprojects.com
    Date: 12/06/09 
    Updated: 05/08/2010: added support for request v.s. html , use request to evaluate scripts.
    * 
    #########################################

    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,
		title		: null,
		copy		: null
    },
    initialize: function(src, options){
    	this.setOptions(options);
    	this.src		 	= src; 
    	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.content		= null;
		this.copy			= this.options.copy;
		this.relative		= this.options.relative || $(document.body);
		this.type			= this.options.type || 'image';
		this.title			= this.options.title;
		this.start			= this.init();      
		
		console.log(this.close,this.closeOption,this.closeBtn,this.title);
		
	},
	init : function(){
		this.body = $(document.body).setStyle('position','relative');
		this.dimmer = this.createDimmer();
		this.dimmer.inject($(document.body),'bottom')
		this.dimmer.fade('.5');
		
		
		// create content //
		
		if(this.type == 'image'){
			this.content = new Asset.image(this.src, {
				id: 'centerImg', 
				title: 'myImage'
			});
			this.injectEl();
		}else if(this.type == 'request'){
			var req = new Request.HTML({
				url:this.src,
				evalScripts:false,
				evalResponse:false,
				
				onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
					this.containerclass.set('html',responseHTML);
					$exec(responseJavaScript);
					if(this.closeOption){
						this.closeBtn.inject(this.containerclass,'top');
					}
				}.bind(this)
			}).send();
		}else if(this.type == 'html'){
			var request = new Request.HTML({
				url:this.src,
				onSuccess:function(responseTree, responseElements, responseHTML, responseJavaScript){
					this.content = responseElements;
					this.injectEl();
					$exec(responseJavaScript);
				}.bind(this)
			}).send();
		}
	},

	// 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
			})
		})   
		
		
		this.containerclass = new Element('div',{
			'class':'content'
		})
		
		if(this.closeOption){
			this.closeBtn.inject(this.containerclass,'top');
		}

		if(this.copy){
			this.copy.inject(this.containerclass,'bottom');
		}

		if(this.title){
			this.titleElement = new Element('h1',{
			   'class':'overlayTitle'
			});                      
			this.titleElement.set("text",this.title);
			this.titleElement.inject(this.containerclass,'top')
		}


		this.content.inject(this.containerclass,'bottom');
		this.containerclass.inject(this.container);
		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');
		this.container.position({
			relativeTo:$(this.relative),
			position:'center',
			edge:'center'
		}).pin().fade('in')
		
	}
});
OverlayImg.implement(new Events, new Options);