var Overlay = new Class({
    Implements: [Options],    
    options:{
        // passed when creating new OverlayImg
        containerId	: null,
        close       : false,
        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.type           = this.options.type || 'image';
        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');

        // create content //
        if(this.type == 'image'){
            this.content = new Asset.image(this.src, {
                id: 'centerImg', 
                title: 'myImage'
            });
        }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;
                }.bind(this)

            }).send();
        }else if(this.type == 'clone'){
           this.content = $(this.containerId).clone();
        }
		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);
            this.fireEvent('onClose');
            
        })
    },
        
    // CREATE ELEMENTS //
    
    createCloseBtn : function(){
        return new Element('a',{
            'class':'overlay_close button',
            'text':'close',
            events:({
                'click':this.closeElement.bind(this)
            })
        })
    },
    createDimmer : function(){
        dimmer = new Element('div',{
            'id':this.dimmerId,
            'styles':({
                'height':this.windowScroll.y,
                'width':this.windowScroll.x,
                'opacity':0
            })/*,
            events:({
                'click':this.closeElement.bind(this)
            })*/
        })
    	if(this.closeOption){
    		dimmer.addEvent('click',this.closeElement.bind(this))
    	}
    	console.log('x101: ', this.closeOption)
    	return dimmer;
        
    },    
    
    // 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')
        }

        this.content.inject(this.containerclass,'bottom');
        this.content.setStyles({'display':'block','opacity':'1','visibility':'visible'});
        
        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);
        this.fireEvent('onTorpedo');
    },
    centerEl : function(){
        // TODO: add fancy shit here
        //this.container.position().pin().fade('in');
        this.container.position({
            relativeTo:$(document.body),
            position:'centerCenter',
            edge:'centerCenter'
        }).pin().fade('in')
        
    }
});
Overlay.implement(new Events, new Options);



/*
function initOverlay(){
    $('overlay').addEvent('click',function(e){
        e.preventDefault();
        var overlay = new OverlayImg(e.target.href,{
        containerId:'overlayContainer',
        dimmerId:'dimmer',              
        close:true                     
       });
       
    });
};

window.addEvent('domready',initOverlay)
*/




/*
var Modal = new Class({
	Implements: [Events,Options],
	options: {
		target: $(document.body),
		dimmer: true,
		dimmerId: 'modalDimmer',
		dimmerOpacity: .5,
		center: true,
		modalId: 'modalWindow',
		autoClose: false,
		windowDelay: 5000,
		onShow: $empty,
		onClose: $empty
	},
	
	initialize: function(content,options){
		this.setOptions(options);
		this.options.target = ($(this.options.target)) ? $(this.options.target) : $(document.body);
		
		if(this.options.dimmer) this.createDimmer();
		this.createWindow(content);
		
		return this;
	},
	
	createWindow: function(content){
		this.modalWindow = new Element('div',{
			'id':this.options.modalId
		}).inject(this.options.target);
		
		this.modalWindow.fade('hide');		
		this.centerWindow();
		if(this.options.center) {
			window.addEvent('scroll',this.centerWindow.bindWithEvent(this));
		}
		this.modalWindow.fade('in');		
		$(content).inject(this.modalWindow);
		
		if(this.options.autoClose){
			this.close.delay(this.options.windowDelay,this);
		}		
		
		this.fireEvent('onShow',this);
		
	},
	
	centerWindow: function(){
		var windowSize = window.getSize();
		var windowWidth = windowSize.x;
		var windowHeight = windowSize.y;
		
		var modalWindowCoords = this.modalWindow.getCoordinates();
		var scrollOffset = window.getScroll().y;
		var left = (windowWidth - modalWindowCoords.width) / 2;
		var top = (windowHeight - modalWindowCoords.height) / 2;
		this.modalWindow.setStyles({
			'top':top + scrollOffset,
			'left':left
		});
	},
	
	createDimmer: function(){
		var inputs = $(document.body).getElements('form select')
		inputs.each(function(el){
			el.fade('out')
		})
		var scrollSize = window.getScrollSize();
		this.dimmer = new Element('div',{
			'id':this.options.dimmerId,
			'styles':{
				'width':scrollSize.x,
				'height':scrollSize.y,
				'opacity': 0
			},
			'events':{
				'click':this.close.bind(this)
			}
		}).inject(this.options.target);
		this.dimmer.fade(this.options.dimmerOpacity);
		
	},
	
	close: function(){
		if(this.modalWindow){
			new Fx.Morph(this.modalWindow,{
				onComplete: function(){
					this.closeModalWindow();
				}.bind(this)
			}).start({
				'opacity':0
			});
		}
		
		if(this.dimmer){
			var fadeOutDimmer = new Fx.Morph(this.dimmer,{
				onComplete: function(){
					this.closeDimmer();
				}.bind(this)
			}).start({
				'opacity':0
			});
		}
		
		var inputs = $(document.body).getElements('form select')
		inputs.each(function(el){
			el.fade('in')
		})
		
		this.fireEvent('onClose',this);
	},
	
	closeDimmer: function(){
		if(this.dimmer) this.dimmer.destroy();
	},
	
	closeModalWindow: function(){
		if(this.modalWindow) this.modalWindow.destroy();
	}
});
*/