﻿/**  $(this).jBox().showWindow('content here', true); **/
;(function($) {
    var tempID = 0;
    var version = '1.0';
    
    $.fn.jBox = function(options){   
        var o = { s: this.selector, c: this.context };
        var myBox;
        var overlay;
        var instance = (new Date()).valueOf();        
        var myContainer = '#myContainer_' + instance;
        var myScroll;
        var myResize;
        var iCounter = 0;
        
        //READ IN THE CUSTOM SETTINGS
        var settings = { 
            'fadeInDelay':300,
            'fadeOutDelay':300,
            'backgroundcolor':'white', 
            'border':'2px solid black', 
            'autoHide': 0, 
            'showClose':true, 
            'fixedWidth': '',
            'fixedHeight': '',
            'zIndex': 99999,
            'clickToClose':true
        };      
          
        $.extend(settings, options);   

        function closePopup(){
            $(window).unbind('scroll', myScroll);
            $(window).unbind('resize', myResize);
            $(myContainer).find(".overlay").fadeOut(eval(settings.fadeOutDelay), function(){ $(this).remove(); });
            $(myContainer).find(".myBox").fadeOut(eval(settings.fadeOutDelay), function(){ $(this).remove(); });
        }
        
        this.close = function(){
            closePopup();
            return this;
        };               
        
        this.getInstance = function(){ return myContainer; }
        this.getInstanceID = function(){ return instance; }
        
        this.position = function(){
            rePosition();
        };
        var checkTop = true;
        function rePosition(){     
            //CHECK SETTINGS.AUTOHIDE 
            if (eval(settings.autoHide) > 0)
                setTimeout(function(){closePopup();}, eval(settings.autoHide));
                
            //CHECK SETTINGS.FIXEDWIDTH
            if (settings.fixedWidth != '')
                $(myContainer).find(".myBox").stop(true, true).css('width', settings.fixedWidth);
            
            //CHECK SETTINGS.FIXEDHEIGHT            
            if (settings.fixedHeight != '')
                $(myContainer).find(".myBox").stop(true, true).css('height', settings.fixedHeight);
                
            //CHECK SETTINGS.ZINDEX
            if (settings.zIndex != ''){
                $(myContainer).find(".overlay").css("z-index", eval(settings.zIndex)-1);
                $(myContainer).find(".myBox").css("z-index", eval(settings.zIndex)-1);
                $(myContainer).find(".closeButton").css("z-index", eval(settings.zIndex));              
            }
            
            var x = (($(window).width() / 2) - ($(myContainer).find(".myBox").outerWidth() / 2)) + jQuery(window).scrollLeft();
            var y = (($(window).height() / 2) - ($(myContainer).find(".myBox").outerHeight() / 2) + jQuery(window).scrollTop());     
            
            //check to see if there is a custom frame present
            $(myContainer).find(".myDynamicFrame").css("top",y + "px").css("left",x + "px").css("height",$(myContainer).find(".myBox").css('height')).css("width",$(myContainer).find(".myBox").css('width'));
            
            if ($(myContainer).find(".myBox").outerHeight() > $(window).height()){                
                y = jQuery(window).scrollTop();
                
                if (checkTop){
                    //$(myContainer).find(".myBox").css("left", x + "px").css("top", y + "px");
                    $(myContainer).find(".myBox").stop(true, true).animate({ "left": x + "px", "top": y + "px" }, 500);
                }
                else {
                    //$(myContainer).find(".myBox").css("left", x + "px");
                    $(myContainer).find(".myBox").stop(true, true).animate({ "left": x + "px" }, 500);
                }
                
                checkTop = false;
            }
            else {
                checkTop = true;
                //$(myContainer).find(".myBox").css("left", x + "px").css("top", y + "px");
                $(myContainer).find(".myBox").stop(true, true).animate({ "left": x + "px", "top": y + "px" }, 500);
            }                                               
        }       
         
        this.showContainer = function(id){
            var mContainer = $("#" + id).html();
            return this.showWindow(mContainer, true);            
        };

        this.showFrame = function(url){
            if (url.indexOf('?') > 0) { url += '&instanceid=' + instance; }
            else { url += '?instanceid=' + instance; } 
            
            var frame = "<iframe class='myDynamicFrame' frameborder='0' src='" + url + "'></iframe>";
            return this.showWindow(frame, true);           
        };
        
        this.resizeWindow = function(h, w){           
            settings.fixedWidth = w + 'px';
            settings.fixedHeight = h + 'px';
             

            var x = (($(window).width() / 2) - (w+10) / 2) + jQuery(window).scrollLeft();
            var y = (($(window).height() / 2) - (h+10) / 2) + jQuery(window).scrollTop();     
            
            $(myContainer).find(".myDynamicFrame").stop(true, true).animate({"left": x + "px", "top": y + "px","height": settings.fixedHeight, "width": settings.fixedWidth}, 500);
            $(myContainer).find(".myBox").stop(true, true).animate({"left": x + "px", "top": y + "px","height": settings.fixedHeight, "width": settings.fixedWidth}, 500);           
        };
               
        this.showWindow = function(html){                                         
            $(myContainer).remove();
            
            if (eval(settings.showClose)) {
                $("body").append('<div id="' + 'myContainer_' + instance + '" class="jboxContainer"><div class="overlay"></div><div class="myBox"><div class="closeButton"></div><div class="boxContent"></div></div></div>');
            }
            else {
                $("body").append('<div id="' + 'myContainer_' + instance + '" class="jboxContainer"><div class="overlay"></div><div class="myBox"><div class="boxContent"></div></div></div>');
            }
            
            $(myContainer).find(".myBox").css('background-color', settings.backgroundcolor);        
            $(myContainer).find(".myBox").css('border', settings.border);
            
            $(myContainer).find(".boxContent").css('background-color', settings.backgroundcolor);                       
            $(myContainer).find(".boxContent").append(html);
            
            $(myContainer).find(".boxContent").find(".closeBtn").click(function(){ closePopup(); });
            
            rePosition();                                                   
            myScroll = function(){ rePosition(); };
            myResize = function(){ rePosition(); };
            
            $(window).bind('scroll', myScroll);
            $(window).bind('resize', myResize);
            
            if (settings.clickToClose){
                $(myContainer).find(".overlay").click(function(){ closePopup(); });
            }
                        
            if($.browser.msie){            
                $(myContainer).find(".overlay").show();
                $(myContainer).find(".myBox").show();
            }
            else {
                $(myContainer).find(".overlay").fadeIn(eval(settings.fadeInDelay));
                $(myContainer).find(".myBox").fadeIn(eval(settings.fadeInDelay));
            }
            
            
            if (eval(settings.showClose)) {
                $(myContainer).find(".closeButton").click(function(){
                    closePopup();
                });
                
                $(myContainer).find(".closeButton").mouseover(function(){$(this).css("top", (parseInt($(this).css("top")) + 1) + 'px');});                
                $(myContainer).find(".closeButton").mousedown(function(){$(this).css("top", (parseInt($(this).css("top")) + 2) + 'px');});                
                $(myContainer).find(".closeButton").mouseout(function(){$(this).css("top", '-10px');});                
                $(myContainer).find(".closeButton").mouseup(function(){$(this).css("top", '-10px');});              
            }
            return this;                        
        };                 
        return this;
    };                     
})(jQuery);
