/* 
 *  Light Box by Andres Pi
 *  http://dreamsiteweb.com
 * 
*/

		
/****
 * Here start the object lbox.
 * The only parameter is the ID(string) for the HTML element,
 * and is optional. The default ID is 'lbox'.
 *      
 ****/

var lbox = function(id){
        /*
         *  Show method: this the method to show 
         *  the message. The parameters are 6:
         *  1- type: String with the type of the message(alert, confirm, prompt, wait,modal).
         *  2- message: String with the content for the message. It could be HTML or just text.
         *  3- bg: Boolean, true for add opacity to the window.
         *  4- callbak: String used only for the confirm and prompt messages, with the function to call aftar confirm the message.
         *  5- width: Number for a custom with. Optional, if is undefined use a default value.
         *  6- height: Number for a custom height. Optional, if is undefined use a default value.
         *  
         */
        this.show = function(type,message,bg,callback,width,height){	     
            this.t = type;
            var lbox = this;
            /*
             * Set width and height. 
             * If the parameter is undefined use default value.
             */
            if(this.t == 'wait'){
                this.w = (width)?width:90;
                this.h = (height)?height:24;
            }else if(this.t == 'prompt'){
                this.w = (width)?width:530;
                this.h = (height)?height:84;
            }else{
                this.w = (width)?width:530;
                this.h = (height)?height:50;
            }
            
            //Insert the message
            if(message){
                this.lbox.addClass('lbox ' + this.t).html(message);
            }else{
                this.lbox.addClass('lbox ' + this.t);
            }
                        
            //Fade in the Popup and add close button
            switch(this.t){
                case 'alert':
                    this.lbox.show().css({width: this.w, height: this.h})
                        .prepend('<a id="close-lbox">x</a>')
                        .append('<div id="confirm-lbox"><button value="Accept" id="btn-accept" class="btn"><span><span>Accept</span></span></button></div>');
                    $('#confirm-lbox').css('left',this.w/2 - $('#confirm-lbox').width()/2);    
                    $('#confirm-lbox .btn').click(function(){
                        lbox.hide();
                    })
                    break;
                case 'confirm':
                    this.lbox.fadeIn().css({width: this.w, height: this.h})
                        .prepend('<a id="close-lbox">x</a>')
                        .append('<div id="confirm-lbox"><button value="Accept" id="btn-accept" class="btn"><span><span>Accept</span></span></button><button value="Cancel" id="btn-cancel" class="btn"><span><span>Cancel</span></span></button></div>');
                    $('#confirm-lbox').css('left',this.w/2 - $('#confirm-lbox').width()/2);
                    lbox = this;
                    $('#confirm-lbox .btn').click(function(){
                        lbox.hide();
                        if($(this).val()=='Accept'){
                            eval(callback);
                        }
                    })
                    break;
                case 'prompt':
                    this.lbox.fadeIn().css({width: this.w, height: this.h})
                        .prepend('<a id="close-lbox">x</a>')
                        .append('<input type="text" id="input-prompt-lbox" class="">')
                        .append('<div id="confirm-lbox"><button value="Accept" id="btn-accept" class="btn"><span><span>Accept</span></span></button><button value="Cancel" id="btn-cancel" class="btn"><span><span>Cancel</span></span></button></div>');
                    $('#confirm-lbox').css('left',this.w/2 - $('#confirm-lbox').width()/2);
                    lbox = this;
                    $('#confirm-lbox .btn').click(function(){
                        lbox.hide();
                        eval(callback+'("' + $('#input-prompt-lbox').val() + '")');
                    })
                    break;
                default:
                    this.lbox.fadeIn().css({width: this.w, height: this.h}).prepend('<a id="close-lbox">x</a>');
            }
            
            
            //Define margin for center alignment (vertical + horizontal)
            this.mTop = (this.lbox.outerHeight()) / 2;
            this.mLeft = (this.lbox.outerWidth()) / 2;
            
            //Apply Margin to lboxup
            this.lbox.css({ 
                    'margin-top' : -this.mTop,
                    'margin-left' : -this.mLeft
            });
            
            //Create Background 
            //Add the fade layer to bottom of the body tag.
            $('body').append('<div id="fade" />'); 
            this.bg = $('#fade');
            //Fade in the fade layer
            // TODO: Add a conditional for IE
            this.bg.css('background',(bg)?'#000':'transparent').fadeIn(); 
            if(this.t != 'wait'){
                bindEvents(this);  
            }
        }
        
        this.hide = function(){
            var lbox = this;
            function callback(){
                $('#fade, #close-lbox').remove();  
                lbox.lbox.removeClass();
            }
            //fade them both out
            if(this.t=='alert'){
                $('#fade , #' + this.ID).hide(function() {
                    callback();
                }); 
            }else{
                $('#fade , #' + this.ID).fadeOut(function() {
                    callback();
                });
            }
            unbindEvents();
        }
        
        var init = function(lbox,id){
            /* Set the ID if exist, if not,
             * set the default and insert the element.
             */
            if(id){
                lbox.ID = id;
            }else{
                lbox.ID = 'lbox';
                $('body').append('<div id="lbox" />'); 
            }            
            lbox.lbox = $('#' + lbox.ID);
                       
        }
        
        // bind & unbind keydown events
        var bindEvents = function(lbox){
            $(document).bind('keydown.lbox', function (e) {
                if (e.keyCode === 27) { // ESC
                    e.preventDefault();
                    lbox.hide();
                }
            });
            //Close Popups and Fade Layer
            var elements = (lbox.t=='alert')?'#close-lbox':'#close-lbox, #fade';
            //When clicking on the close or fade layer...
            $(elements).live('click', function() { 
                lbox.hide()
            }); 
        }
        var unbindEvents = function(){
            $(document).unbind('keydown.lbox');
            $('#close-lbox, #fade').die();
        }
        
        init(this, id);
}