/*
Script: Moo.QuickBox.js
	MooTools - My Object Oriented JavaScript Tools.

License:
	MIT-style license.

Author:
	Mike Reid
    
Updated:
    8:54 PM 3/18/2009

Inspiration:
	- Thickbox Overlay Technique - Cody Lindley (http://www.codylindley.com)
*/      

var QuickBoxes = new Class({
    initialize: function() {
        this.stack = [];
        return this;
    },

    reset: function() {
        return this.initialize();
    },
    
    add:function( quickbox ) {
        this.stack.push( quickbox );
        return this;
    },
    
    count:function() {
        return this.stack.length;;
    }
    
});

QB = new QuickBoxes();

var QuickBox = new Class({
    initialize: function( el, qb_class, options ) {
        
		if( QB.count() ) return false; // Limit to one active QuickBox (for now)

        QB.add( this );
        //console.log( QB );
        
		// Default options
		this.options = $extend({
			// Overlay
			overlay:		true,
			overlay_id:		'qb_overlay',
			overlay_color:	'#000',
			overlay_img:	'assets/images/macFFBgHack.png',
			overlay_css:	true,
			overlay_styles:	'',
                
			// Tweening
			transition:		Fx.Transitions.Back.easeOut,
			duration:		1500,
			wait:			false,
			autodrop:		true,
			delay:			0,
			autodropif:		function(){ return 1; },
			start:			'topCenter',
			end:			'center',
			closeSelectors:	'.close',
			opacity:		true,
                
			// Callbacks
			showCallback:	$empty,
			hideCallback:	$empty,
			onHide:	$empty,
						
			// Custom
			description: ''
		}, options || $empty );
        
        this.el = el;
        this.qb_class = $pick( qb_class, '' );
        
        // Inject needed CSS for overlay
		if( this.options.overlay && this.options.overlay_css ) this.injectCSS( this.options.overlay_styles );
                
    	// update active QuickBox on window resize
		//window.addEvent('resize', function(){
		//    if( this.active ) ( this.update.bind(this) ).delay( 150 );		    
		//}.bind(this));
		
		// Active QuickBox follow on scroll (MouseWheel)
		window.addEvents({
			'mousewheel': function(){	
		    	if( this.active ) ( this.update.bind(this) ).delay( 150 ); 		    
			}.bind(this),

			'resize': this.update.bindWithEvent(this),
			'scroll': this.update.bindWithEvent(this)
		});
            
		document.addEvents({
			'keydown': this.keycatch.bind(this)
		});
				
		// Active QuickBox follow on scroll (Scroll)
		/*window.addEvent('scroll', function(){
			if( this.active ) ( this.update.bind(this) ).delay( 150 ); 
		});*/
		//window.onscroll = function(){
	    //		if( this.active ) ( this.update.bind(this) ).delay( 150 ); 
	    //	}.bind(this);
                
        this.prepare();
        
        return this;
    },
        
    keycatch: function(event) { 
        if((event.key && event.key == 'esc') && this.active) {
            this.hide();
        }
    },
        
    ifMacFF: function() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf('mac') != -1 && ua.indexOf('firefox')!=-1) {
            return true;
        }
    },
 
    injectCSS: function( styles ) {
		if( styles == '' )             
			var styles = ".qb_active select,.qb_active embed,.qb_active object{ visibility:hidden !important } .qb_active #qb_viewer select,.qb_active #qb_viewer embed,.qb_active #qb_viewer object{ visibility:visible !important } #qb_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; } .qb_overlayMacFFBGHack {background: url("+this.options.overlay_img+") repeat;} .qb_overlayBG { background-color:"+this.options.overlay_color+"; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } * html #qb_overlay { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #qb_props{ color:#600; text-align:right; cursor:pointer } #qb_viewer .closer { z-index: 200010; cursor:pointer }";
		
		var stylesheet = new Element('style', {
			'class': 'qb_styles',
			'type': 'text/css'
		}).inject( document.id(document.getElementsByTagName('head')[0]), 'bottom' );

		if( Browser.Engine.trident )
			document.styleSheets[ document.styleSheets.length-1 ].cssText = styles;
		else
			stylesheet.appendText( styles );
    },
        
    prepare: function() {
        
        // Soften with an overlay
        this.overlay = new Element('div',{
            'id':'qb_overlay',
            'class': ( this.ifMacFF() ? 'qb_overlayMacFFBGHack' : 'qb_overlayBG' ),
            'styles': $empty
        }).addClass( this.qb_class ).inject(document.body,'bottom');

        // Modal Viewer
        this.modal = new Element('div',{
            'id':'qb_viewer',
            'class':'',
            'styles': $empty
        }).inject(document.body,'bottom');
                
        // Place inside
        this.el.setStyles({'visibility':'visible', 'display':'block'}).inject( this.modal );

		if( this.options.description.length > 0 ){
	        // Modal Description
	        this.description = new Element('div',{
	            'id':'qb_props',
	            'class':'',
	            'styles': $empty
	        });

	        this.description.set('html', this.options.description );//this.el.getProperty('alt')
	        this.description.inject(this.modal,'bottom');
		}

        // this.closer = new Element('div',{
        //     'id':'closer',
        //     'html':'<img src="assets/images/close.png" alt="close" align="absmiddle">'
        // });

        this.closer = new Element('img',{
            'id': 'closer',
            'src': "assets/images/close.png",
			'class': 'closer png hidden',
			'styles': {
				'position':'absolute',
				'right':0,
				'top':0				
			}
        });

        this.closer.inject(this.modal,'top');

        // Event Handling
    	this.closer.addEvent('click', function(){
            this.hide();
        }.bind(this));
        
		if(this.description)
        	this.description.addEvent('click', function(){
	            this.hide();
	        }.bind(this));

        // Positioning
        this.modal.setStyles({
            'left':window.getSize().x*0.5-this.modal.getSize().x*0.5,
            'top':-this.modal.getSize().y-10
        });        
        
        // Tweening
        this.modal.set('morph', {duration: this.options.duration, transition: this.options.transition });        

        this.show();
            
        return this;
    },
        
    show: function() {
        if(!this.active) {
           
            this.modal.morph({ 'top': ((window.getSize().y/2)-(this.modal.getSize().y/2))+window.getScroll().y });
            
            this.active = true;
            document.id(document.getElementsByTagName('html')[0]).addClass('qb_active');            

            ( function(){ this.closer.removeClass('hidden'); }.bind(this) ).delay( this.options.duration );
            ( this.options.showCallback.bind(this) ).delay( this.options.duration );
        }
        return this;
    },
        
    hide: function(e) {

        ( this.options.onHide.bind(this) ).delay( 0 );

        if( this.options.overlay && this.options.overlay_css && document.id(document.getElementsByTagName('head')[0]).getElement('.qb_styles') ) document.id(document.getElementsByTagName('head')[0]).getElement('.qb_styles').dispose();
        this.overlay.dispose();
        if(this.description) this.description.dispose();
        this.modal.dispose();        

        this.active = false;
        document.id(document.getElementsByTagName('html')[0]).removeClass('qb_active');

		QB.reset();

        ( this.options.hideCallback.bind(this) ).delay( this.options.duration );
        
        return this;
    },
        
	update: function(e) {
		if(e) e = new Event(e).stop();
		if(this.active) {
            this.modal.morph({
                'left': ((window.getSize().x/2)-(this.modal.getSize().x/2))+window.getScroll().x,
                'top': ((window.getSize().y/2)-(this.modal.getSize().y/2))+window.getScroll().y
            });
        }

        return this;
    }
});


/***

CHANGELOG:
	0.0.4
		- Added onHide function support
		- Added custom description to options
		- Added QuickBox limit to prevent multiple overlays / QB conflicts
		- Added QB "Closer"

    0.0.3   
        - Updated for MooTools 1.2.1 compatibility
        
    0.0.2   
        - Clicking on the quickbox will now close it

***/