//PARAMETERS
/*
id:
width:
height:
zIndex:
headerVisible:
headerText:
headerBackground
cssClass:
fadeInTime:
fadeOutTime:
clickOutToClose:
deleteFromPageOnRemove:
onRemove:
onShown:
    
//STYLE
//Overlay
overlayAlpha:
popupAlpha:

//Popup
popupBorder: 
popupBackground:
closeButtonWidth:
closeButtonHeight:
closeButtonPadding:
closeButtonCssClass:
imageCloseUrl:
imageCloseAlt:
imageCloseObject:
popupPosition: 
popupTopPosition:
popupLeftPosition:  

*/

//---------------------------------------------------
function JQueryPopup(objParam) {

    //OBJECT POPUP ******************************************************************************
    this.defaultConf = new JQueryPopup_DefaultConf();
    this.id = objParam.id != null ? objParam.id : this.defaultConf.JQueryPopup_DEFAULT_ID;
    this.width = objParam.width != null ? objParam.width : this.defaultConf.JQueryPopup_DEFAULT_WIDTH;
    this.height = objParam.height != null ? objParam.height : this.defaultConf.JQueryPopup_DEFAULT_HEIGHT;
    this.zIndex = objParam.zIndex != null ? objParam.zIndex : this.defaultConf.JQueryPopup_DEFAULT_ZINDEX;
    this.headerVisible = objParam.headerVisible != null ? objParam.headerVisible : this.defaultConf.JQueryPopup_DEFAULT_HEADER_VISIBLE;
    this.cssClass = objParam.cssClass != null ? objParam.cssClass : this.defaultConf.JQueryPopup_DEFAULT_CSS_CLASS;
    this.fadeInTime = objParam.fadeInTime != null ? objParam.fadeInTime : this.defaultConf.JQueryPopup_DEFAULT_FADE_IN_TIME;
    this.fadeOutTime = objParam.fadeOutTime != null ? objParam.fadeOutTime : this.defaultConf.JQueryPopup_DEFAULT_FADE_OUT_TIME;
    this.clickOutToClose = objParam.clickOutToClose != null ? objParam.clickOutToClose : this.defaultConf.JQueryPopup_DEFAULT_CLICKOUT_TO_CLOSE;
    this.Visible = false;
    
    if (objParam.deleteFromPageOnRemove != null) {
        this.deleteFromPageOnRemove = objParam.deleteFromPageOnRemove;
        this.deleteFromPageOnRemoveIsSet = true;
    }
    else {
        this.deleteFromPageOnRemove = this.defaultConf.JQueryPopup_DEFAULT_DELETE_FROM_PAGE_ON_REMOVE;
        this.deleteFromPageOnRemoveIsSet = false;
    }

    // METHODS -------------------------------------------------------
    this.show = JQueryPopup_Show; //Show popup
    this.remove = JQueryPopup_Remove;  //Remove popup
    this.onRemove = objParam.onRemove;  //Called before removing popup
    this.onShown = objParam.onShown; //Called showing popup

    //auto resize height as content
    this.SetHeightAsContent = function() {
        this._POPUP.css('height', (this._HTML_CONTAINER.height() + 50) + 'px');
    };

    var el = this;

    {//Html
        this.html = function(html) {
            if (html, length != null)
                el._HTML_CONTAINER.html(html);
            else
                el._HTML_CONTAINER.html();
        };
    }

    {//Prepend
        this.prepend = function(html) {
            if (html, length != null)
                el._HTML_CONTAINER.prepend(html);
            else
                el._HTML_CONTAINER.prepend();
        };
    }

    {//Append
        this.append = function(html) {
            if (html, length != null)
                el._HTML_CONTAINER.append(html);
            else
                el._HTML_CONTAINER.append();
        };
    }

    //----------------------------------------------------------------

    //*******************************************************************************************

    //STYLE *************************************************************************************

    //OVERLAY --------------------------------------------------------
    this.overlayAlpha = objParam.overlayAlpha != null ? objParam.overlayAlpha : this.defaultConf.JQueryPopup_DEFAULT_STYLE_OVERLAY_ALPHA;
    this.overlayBackground = objParam.overlayBackground != null ? objParam.overlayBackground : this.defaultConf.JQueryPopup_DEFAULT_STYLE_OVERLAY_BACKGROUND;


    //POPUP ----------------------------------------------------------
    this.popupAlpha = objParam.popupAlpha != null ? objParam.popupAlpha : this.defaultConf.JQueryPopup_DEFAULT_STYLE_POPUP_ALPHA;
    this.popupBorder = objParam.popupBorder != null ? objParam.popupBorder : this.defaultConf.JQueryPopup_DEFAULT_STYLE_POPUP_BORDER;
    this.popupBackground = objParam.popupBackground != null ? objParam.popupBackground : this.defaultConf.JQueryPopup_DEFAULT_STYLE_POPUP_BACKGROUND;
    this.draggable = objParam.draggable != null ? objParam.draggable : false; //Need JQuery UI draggable
    this.resizable = objParam.resizable != null ? objParam.resizable : false; //Need JQuery UI resizable
    this.popupPosition = objParam.popupPosition != null ? objParam.popupPosition : this.defaultConf.JQueryPopup_DEFAULT_STYLE_POSITION;

    this.popupTopPosition = objParam.popupTopPosition;
    this.popupLeftPosition = objParam.popupLeftPosition;
    
    //CLOSE BUTTON ---------------------------------------------------
    this.closeButtonWidth = objParam.closeButtonWidth != null ? objParam.closeButtonWidth : this.defaultConf.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_WIDTH;
    this.closeButtonHeight = objParam.closeButtonHeight != null ? objParam.closeButtonHeight : this.defaultConf.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_HEIGHT;
    this.closeButtonPadding = objParam.closeButtonPadding != null ? objParam.closeButtonPadding : this.defaultConf.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_PADDING;
    this.closeButtonCssClass = objParam.closeButtonCssClass != null ? objParam.closeButtonCssClass : this.defaultConf.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_CSS_CLASS;

    //BUTTON IMAGE ---------------------------------------------------
    this.imageCloseUrl = objParam.imageCloseUrl != null ? objParam.imageCloseUrl : null;
    this.imageCloseAlt = objParam.imageCloseAlt != null ? objParam.imageCloseAlt : this.defaultConf.JQueryPopup_DEFAULT_IMG_CLOSE_ALT;
    this.imageCloseCssClass = objParam.imageCloseCssClass != null ? objParam.imageCloseCssClass : this.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_CSS_CLASS;
    this.imageCloseObject = "<img src='" + this.imageCloseUrl + "' alt='" + this.imageCloseAlt + "' class='" + this.imageCloseCssClass + "'/>";

    //HEADER ---------------------------------------------------------
    if(this.headerVisible){
        this.headerBackground = objParam.headerBackground != null ? objParam.headerBackground : this.defaultConf.JQueryPopup_DEFAULT_STYLE_HEADER_BACKGROUND;

        //HEADER TEXT ----------------------------------------------------
        this.headerText = objParam.headerText != null ? objParam.headerText : this.defaultConf.JQueryPopup_DEFAULT_HEADER_TEXT;
        this.headerTextPadding = objParam.headerTextPadding != null ? objParam.headerTextPadding : this.defaultConf.JQueryPopup_DEFAULT_STYLE_HEADER_TEXT_PADDING;
        this.headerTextCssClass = objParam.headerTextCssClass != null ? objParam.headerTextCssClass : this.defaultConf.JQueryPopup_DEFAULT_STYLE_HEADER_TEXT_CSS_CLASS;
    }

    //*******************************************************************************************

    //POPUP JQUERY ELEMENTS ****************************************************************************

    this._OVERLAY = null;
    this._POPUP = null;
    this._HTML_CONTAINER = null;
    this._HEADER = null;
    this._HEADER_TEXT = null;
    this._IMG_BUTTON = null;

    //*******************************************************************************************

    //ADD ELEMENTS ******************************************************************************
    //OVERLAY -------------------------------------------
    if ($('#' + this.defaultConf.JQueryPopup_POPUP_OVERLAY_PREFIX + this.id).length > 0)
        this._OVERLAY = $('#' + this.defaultConf.JQueryPopup_POPUP_OVERLAY_PREFIX + this.id);
    else {
        this._OVERLAY = $('<div>');
        this._OVERLAY.attr('id', this.defaultConf.JQueryPopup_POPUP_OVERLAY_PREFIX + this.id);
    }

    //POPUP ------------------------------------------------
//    this._POPUP;
    if ($('#' + this.defaultConf.JQueryPopup_POPUP_CONTAINER_PREFIX + this.id).length > 0)
        this._POPUP = $('#' + this.defaultConf.JQueryPopup_POPUP_CONTAINER_PREFIX + this.id);
    else {
        this._POPUP = $('<div>');
        this._POPUP.attr('id', this.defaultConf.JQueryPopup_POPUP_CONTAINER_PREFIX + this.id);
    }

    //HTML CONTAINER ---------------------------------------
    if ($('#' + this.id).length > 0) {
        this._HTML_CONTAINER = $('#' + this.id);
        if (!this.deleteFromPageOnRemoveIsSet)
            this.deleteFromPageOnRemove = false;
    }
    else {
        this._HTML_CONTAINER = $('<div>');
        this._HTML_CONTAINER.attr('id', this.id);
        if (!this.deleteFromPageOnRemoveIsSet)
            this.deleteFromPageOnRemove = true;
    }
    
    //HEADER -----------------------------------------------
    if(this.headerVisible){
        this._HEADER = this._POPUP.children('#' + this.defaultConf.JQueryPopup_POPUP_HEADER_PREFIX + this.id);
        if (this._HEADER.length <= 0) {
            //HEADER
            this._HEADER = $('<div>');
            this._HEADER.attr('id', this.defaultConf.JQueryPopup_POPUP_HEADER_PREFIX + this.id);
            //IMAGE CLOSE
            this._IMG_BUTTON = $('<div>');
            this._IMG_BUTTON.attr('id', this.defaultConf.JQueryPopup_POPUP_IMAGE_CLOSE_BUTTON_PREFIX + this.id);
            this._IMG_BUTTON.addClass(this.closeButtonCssClass);
            //HEADER TEXT
            this._HEADER_TEXT = $('<div>');
            this._HEADER_TEXT.attr('id', this.defaultConf.JQueryPopup_POPUP_HEADER_TEXT_PREFIX + this.id);
        }
    }
    //*******************************************************************************************
}

//INTERNAL FUNCTIONS ---------------------------------------------------------------------

function JQueryPopup_DefaultConf() {
    this.JQueryPopup_DEFAULT_ID = 10000;
    this.JQueryPopup_DEFAULT_ZINDEX = 1000;
    this.JQueryPopup_DEFAULT_HEADER_VISIBLE = true;
    this.JQueryPopup_DEFAULT_WIDTH = 400;
    this.JQueryPopup_DEFAULT_HEIGHT = 300;
    this.JQueryPopup_DEFAULT_FADE_IN_TIME = 300;
    this.JQueryPopup_DEFAULT_FADE_OUT_TIME = 300;
    this.JQueryPopup_DEFAULT_CLICKOUT_TO_CLOSE = true;
    this.JQueryPopup_DEFAULT_CSS_CLASS = "JQueryPopup_DEFAULT_CSS_CLASS";
    this.JQueryPopup_DEFAULT_DELETE_FROM_PAGE_ON_REMOVE = true;

    this.JQueryPopup_DEFAULT_STYLE_OVERLAY_ALPHA = 50;
    this.JQueryPopup_DEFAULT_STYLE_OVERLAY_BACKGROUND = '#000';

    this.JQueryPopup_DEFAULT_STYLE_POPUP_BACKGROUND = '#eee';
    this.JQueryPopup_DEFAULT_STYLE_POPUP_ALPHA = 100;
    this.JQueryPopup_DEFAULT_STYLE_POPUP_BORDER = '1px solid #ccc';
    this.JQueryPopup_DEFAULT_STYLE_POSITION = 'fixed';
    this.JQueryPopup_DEFAULT_STYLE_POSITION = 'fixed';
    
    
    //CLOSE BUTTON -----------------------------------------------------------------------------
    this.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_WIDTH = '50px';
    this.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_HEIGHT = '20px';
    this.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_PADDING = '2px';
    this.JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_CSS_CLASS = 'JQueryPopup_DEFAULT_STYLE_CLOSE_BUTTON_CSS_CLASS';

    //Button image
    this.JQueryPopup_DEFAULT_IMG_CLOSE_ALT = 'Close popup';
    this.JQueryPopup_DEFAULT_IMG_CLOSE_CSS_CLASS = 'JQueryPopup_DEFAULT_IMG_CLOSE_CSS_CLASS';

    //HEADER
    if(this.headerVisible){
        this.JQueryPopup_DEFAULT_STYLE_HEADER_BACKGROUND = '#ccc';
        //HEADER TEXT
        this.JQueryPopup_DEFAULT_STYLE_HEADER_TEXT_PADDING = '3px';
        this.JQueryPopup_DEFAULT_STYLE_HEADER_TEXT_CSS_CLASS = "JQueryPopup_DEFAULT_STYLE_HEADER_TEXT_CSS_CLASS";
        this.JQueryPopup_DEFAULT_HEADER_TEXT = "";
    }
    //-------------------------------------------------------------------------------------------

    //INTERNAL PREFIXES ---------------------------------------------------------------------
    this.JQueryPopup_POPUP_OVERLAY_PREFIX = "JQUERY_POPUP_OVERLAY_";
    this.JQueryPopup_POPUP_CONTAINER_PREFIX = "JQUERY_POPUP_CONTAINER_";
    this.JQueryPopup_POPUP_HEADER_PREFIX = "JQUERY_POPUP_HEADER_";
    this.JQueryPopup_POPUP_HEADER_TEXT_PREFIX = "JQUERY_POPUP_HEADER_TEXT_";
    this.JQueryPopup_POPUP_IMAGE_CLOSE_BUTTON_PREFIX = "JQUERY_POPUP_IMAGE_CLOSE_BUTTON_";
    //-------------------------------------------------------------------------------------------
}


function JQueryPopup_Utilities() {
    //Parsing OverlayAlpha Value for css properties "Filter"
    this.getCssFilter = function(percentINT) {
        var PercINT = parseInt(percentINT);
        return 'alpha(opacity=' + PercINT + ')';
    };

    //Parsing OverlayAlpha Value for css properties "Opacity"
    this.getCssOpacity = function(percentINT) {
        var percINT = parseInt(percentINT);
        if (percINT < 100) {
            var percSTR = percINT + "";
            percSTR = percSTR.length > 1 ? percSTR.substring(0, 1) : percSTR;
            return "0." + percSTR;
        }
        else {
            return "1.0";
        }
    };

    //Parsing OverlayAlpha Value for css properties "Opacity"
    this.getCssMozOpacity = function(percentINT) {
        var percSTR = parseInt(percentINT) + "";
        var percINT = parseInt(percentINT);
        if (percINT < 100) {
            percSTR = percINT + "";
            percSTR = percSTR.length > 2 ? percSTR.substring(0, 2) : percSTR;
            return "0." + percSTR;
        }
        else {
            return "1.00";
        }
    };
}


//SHOW ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function JQueryPopup_Show(objParams) {

    this.Visible = true;
    var body = $("body");

    var el = this;

    var docWidth = $(window).width();
    var docHeight = $(window).height();

    var topPosition = objParams != null && objParams.popupTopPosition != null ? objParams.popupTopPosition + 'px' : (this.popupTopPosition != null ? this.popupTopPosition + 'px' : (parseInt(docHeight / 2) - (this.height / 2)) + 'px');
    var leftPosition = objParams != null &&  objParams.popupLeftPosition != null ? objParams.popupLeftPosition + 'px' : (this.popupLeftPosition != null ? this.popupLeftPosition + 'px' : (parseInt(docWidth / 2) - (this.width / 2)) + 'px');

    //OVERLAY -------------------------------------------
    var UTILITIES = new JQueryPopup_Utilities();

    //this._OVERLAY.css('position', 'absolute');
    this._OVERLAY.css('top', '0px');
    this._OVERLAY.css('left', '0px');
    this._OVERLAY.css('filter', UTILITIES.getCssFilter(this.overlayAlpha));
    this._OVERLAY.css('opacity', UTILITIES.getCssOpacity(this.overlayAlpha));
    this._OVERLAY.css('-moz-opacity', UTILITIES.getCssMozOpacity(this.overlayAlpha));
    this._OVERLAY.css('position', 'fixed');
    this._OVERLAY.css('_position', 'absolute'); /* hack for internet explorer 6*/
    this._OVERLAY.css('height', '100%');
    this._OVERLAY.css('width', '100%');
    this._OVERLAY.css('background', this.overlayBackground);
    this._OVERLAY.css('z-index', (this.zIndex + 1) + '');
    //------------------------------------------------------


    //POPUP ------------------------------------------------

    this._POPUP.css('position', this.popupPosition);
    this._POPUP.css('filter', UTILITIES.getCssFilter(this.popupAlpha));
    this._POPUP.css('opacity', UTILITIES.getCssOpacity(this.popupAlpha));
    this._POPUP.css('-moz-opacity', UTILITIES.getCssMozOpacity(this.popupAlpha));
    this._POPUP.css('top', topPosition);
    this._POPUP.css('left', leftPosition);
    this._POPUP.css('width', this.width + 'px');
    this._POPUP.css('height', this.height + 'px');
    this._POPUP.css('background', this.popupBackground);
    this._POPUP.css('border', this.popupBorder);
    this._POPUP.css('z-index', (this.zIndex + 2) + '');

    if (this.draggable) {
        try {
            //this._POPUP.draggable();
            //only header draggable with handle specification
            this._POPUP.draggable({ handle: 'div#' + this.defaultConf.JQueryPopup_POPUP_HEADER_PREFIX + this.id});
        }
        catch (e) {
            alert('Include JQuery UI for use draggable feature');
            return;
        }
    }

    if (this.resizable) {
        try {
            this._POPUP.resizable();
        }
        catch (e) {
            alert('Include JQuery UI for use resizable feature');  
            return;
        }
    }
    //------------------------------------------------------

    //HTML_CONTAINER ---------------------------------------

    this._HTML_CONTAINER.css('visibility', 'visible');
    this._HTML_CONTAINER.css('display', 'block');
    this._HTML_CONTAINER.css('margin', '20px 0');
    
    
    
    //------------------------------------------------------

    //HEADER ------------------------------------------------------------------------------------------
    if(this.headerVisible){
        this._HEADER.css('overflow', 'hidden');
        this._HEADER.css('height', (parseInt(this.closeButtonHeight) + parseInt(this.closeButtonPadding)) + 'px');
        this._HEADER.css('background', this.headerBackground);


        //IMAGE CLOSE --------------------------------------------

        this._IMG_BUTTON.css('float', 'right');
        this._IMG_BUTTON.css('padding', this.closeButtonPadding);
        this._IMG_BUTTON.css('height', this.closeButtonHeight);
        this._IMG_BUTTON.css('width', this.closeButtonWidth);
        this._IMG_BUTTON.css('text-align', 'right');
        this._IMG_BUTTON.css('overflow', 'hidden');
        this._IMG_BUTTON.css('cursor', 'pointer');

        if (this.imageCloseUrl != null)
            this._IMG_BUTTON.html(this.imageCloseObject);
        else
            this._IMG_BUTTON.html(this.imageCloseAlt);

        {//Click the x event
            this._IMG_BUTTON.click(function() {
                el.remove();
            });
        }

        //HEADER TEXT --------------------------------------------
        this._HEADER_TEXT.addClass(this.headerTextCssClass);
        this._HEADER_TEXT.css('float', 'left');
        this._HEADER_TEXT.css('padding', this.headerTextPadding);
        this._HEADER_TEXT.css('width', (this.width - parseInt(this.closeButtonWidth) - 10) + 'px');
        this._HEADER_TEXT.css('overflow', 'hidden');
        this._HEADER_TEXT.addClass(this.headerTextCssClass);
        this._HEADER_TEXT.html(this.headerText);
 
        //Create Close
        this._HEADER.append(this._IMG_BUTTON);
        this._HEADER.append(this._HEADER_TEXT);
    }
    //--------------------------------------------------------------------------------------------------

    this._POPUP.append(this._HEADER);
    this._POPUP.append(this._HTML_CONTAINER);

    //Body Append
    body.append(this._OVERLAY);
    body.append(this._POPUP);

    //Hide
    this._POPUP.hide();
    this._OVERLAY.hide();
    /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

    //FadeIN POPUP
    this._OVERLAY.fadeIn(this.fadeInTime);

    {//Show
        if (this.onShown != null)
            this._POPUP.fadeIn(this.fadeInTime, function() { el.onShown() }); //On Shown
        else
            this._POPUP.fadeIn(this.fadeInTime);
    }

    /*CLOSING EVENTS :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

    //Click Out
    if (this.clickOutToClose) {
        this._OVERLAY.click(function(sender) {
            el.remove();
        });
    }

    {//Press Escape event
        $(document).keypress(function(e) {
            if (e.keyCode == 27) {
                el.remove();
            }
        });
    }
    /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}


function JQueryPopup_Remove() {
    this.Visible = false;
    //Remove Function ----------------------
    var e = new Object();
    e.cancel = false;
    if (this.onRemove != null)
        this.onRemove(e);

    if (e.cancel) return;
    //--------------------------------------

    if (this.deleteFromPageOnRemove) {
        this._POPUP.fadeOut(this.fadeOutTime, function() { $(this).remove(); });
        this._OVERLAY.fadeOut(this.fadeOutTime, function() { $(this).remove(); });
    }
    else {
        this._POPUP.fadeOut(this.fadeOutTime);
        this._OVERLAY.fadeOut(this.fadeOutTime);
    }
}