/**
 * This is a wrapper function for YUI's panel that simplifies its use.
 * With this class we create the panel directly from JS without requiring to have <div> elements in code to be used as base for ther panels
 * 
 * IMPORTANT if you want a modal panel you need to add "modal:true, visible:false"
 * 
 * Panels have 3 parts: Header, Body, Footer (not all need to have content)
 * 
 * if you want to disable animations use "effect:null" on the properties array
 * 
 * ========== USAGE EXAMPLE: ==========
 * var panel = sfcPanel('header_wishlist_last_item');
 * panel.setProperties(
 *                   {
 *                     width:'250px',
 *                     context: [ document.getElementById("shopping_bag_counter") , 'tr', 'br'],
 *                     fixedcenter: false,
 *                     iframe:true,
 *                     close:false,
 *                     zindex:300,
 *                     modal:false,
 *                     constraintoviewport: false,
 *                     scope:this
 *                   });
 * panel.setProperty("modal", true);
 * panel.setBody("this is the content that will display on Panel's body");
 * panel.setOnCloseFunction(function(){alert("panel is closing")});
 * panel.show();
 *
 * When setting the body content  please make sure about using the following structure:
 * (for memoir and bold headers please make sure to use the class defined on the following example)
    var body = '<div id="password_panel" style="position: relative;">'
                    + '<div id="ov-subheader" class="overlay-subhdr-title">welcome back!</div>' <-- optional (if having memoir subheader)
                    + '<span class="overlay-content-darkgray-bold">this is ...</span><br />' <-- optional if using dark gray bold content 
                    + '<span class="overlay-content-darkgray">this is ...</span><br />' <-- optional if using dark gray content
                    + '<p>Your password must have 6 to 10 characters, must begin with ' <--- content may vary according to overlay.
                    + 'a letter and contain at least one number or special character '
                    + '(e.g., ! @ # $ % ^ & * _ \ - + = : ; . ? / |).</p><br>'
                + '</div>';
 */

function sfcPanel(id){
 
    //passed id in constructor, used for trying to get the contents of an existing div to be used as panel's body
    this.originalId = id;
    //panel id
    this.id = id+"_sfc_panel";
    //panel mask
    this.panelMask = this.id+"_mask";
    //should panel close on mask click?
    this.hideOnMaskClick = true;
    //function that should be called when panel is closed
    this.onCloseFunction = null;
    //default panel options
    this.properties = {
//        fixedcenter: true,
//        close: true,
//        draggable: false,
//        modal: true,
//        visible: false,
//        iframe: true,
//        effect: null//{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5}
    };
    
    //where the YUI panel object will reside.
    this.panel = new YAHOO.widget.Panel(this.id, this.properties);

    /**
     * function that tries to get the content of a div
     * @param {String} div_id   the div's id whose content we want to use to fill in the Panel's body
     */
    this.getDivContent = function(div_id) {
        var div = document.getElementById(div_id);
        if(div)
            return div.innerHTML;
        return null;
    };
    
    /**
     * function with stuff that NEEDS to happen when creating object  
     */  
    this.init = function(){
        //creating a header is indispensable when we are using for example rounded corners so we can set the corners wrappers
        this.panel.setHeader("<div class='tl'></div><div></div><div class='tr'></div>");
        //we try to use a div with "id" = "id passed in sfcPanel contructor" content's as the default content of the panel    
        var body = this.getDivContent(this.originalId), _target=YAHOO.util.Selector.query('#'+this.originalId);
        if(!body) body = "&nbsp;";
        this.panel.setBody(body);
        this.panel.setFooter("&nbsp;");
        this.panel.hideEvent.subscribe(function(){
            YAHOO.util.Dom.setStyle(this.header, 'display', 'none');
            YAHOO.util.Dom.setStyle(this.body, 'display', 'none');
        });
        };

    //initialize the object
    this.initialize = this.init();
    
    /**
     * sets the panel's header
     * @param {String} header the header's content
     */
    this.setHeader = function(header){
        this.panel.setHeader("<div class='tl'></div><div class='overlay-hd-title' id='ov-header'>"+header.toUpperCase()+"</div><div class='tr'></div>");        
    };
    
    /**
     * sets the panel's main content
     * @param {String} body the main content
     */
    this.setBody = function(body){
        this.panel.setBody(body);
    };
    
    /**
     * sets the panel's body to the content of a given div
     * @param {Object} div_id
     */
    this.setBodyFomDiv = function(div_id){
        var body = this.getDivContent(this.originalId);
        if(!body) body = "&nbsp;";
        this.panel.setBody(body);
    }
    
    /**
     * sets the panel's footer
     * @param {String} footer the footer's content
     */
    this.setFooter = function(footer){
        this.panel.setFooter(footer);
    };
    
    /**
     * sets the panel properties
     * @param {Object}  properties  object with panel properties
     * @param {boolean} apply_now   set to true if you want to see configuration changes applied instantly (otherwise changes will reflect next time show is called)
     */
    this.setProperties = function(properties, apply_now) {
        this.panel.cfg.applyConfig(properties, true);
        if(apply_now)
            this.panel.cfg.fireQueue();        
    };
    
    /**
     * change one of YUI's panel properties
     * common available properties are: 
     *  - close        (boolean)
     *  - draggable    (boolean)
     *  - underlay     (shadow, none, matte)
     *  - x            number
     *  - y            number
     *  - context      [contextElementOrId, overlayCorner ("tr" (top right), "tl" (top left), "br" (bottom right), or "bl" (bottom left)), contextElementCorner]
     *  - fixedcenter  (boolean)
     *  - width        number + px (ej: 100px )
     *  - height       number + px (ej: 100px )
     *  - zIndex       number
     *  
     * more properties can be found at http://developer.yahoo.com/yui/container/panel/
     * @param {String} property_name
     * @param {Object} value
     * @param {boolean} apply_now   set to true if you want to see configuration changes applied instantly (otherwise changes will reflect next time show is called)
     */
    this.setProperty = function(property_name, value, apply_now) {
        this.panel.cfg.setProperty(property_name, value);
        if (apply_now) 
            this.panel.cfg.fireQueue();
    };
    
    /**
     * displays the panel on screen
     */
    this.show = function() {
        this.panel.render(document.body);
        this.panel.show();

        YAHOO.util.Dom.setStyle(this.panel.header, 'display', 'block');
        YAHOO.util.Dom.setStyle(this.panel.body, 'display', 'block');

        sIFR.replace(tradegothic20, {
            selector: '.overlay-hd-title',
            css: '.sIFR-root { color: #FFFFFF; font-weight: bold; }',
            wmode: 'transparent'
        });

        sIFR.replace(memoir, {
            selector: '.overlay-subhdr-title',
            css: '.sIFR-root { color: #333333;  }',
            wmode: 'transparent'
        });
        
        this.setHideOnMaskClickListener(); //call goes here because mask should exist before setting listener (mask is created during show)
        this.panel.sizeMask(); // fixes a bug when the overlay is bigger than the document and the mask stays short
        this.panel.center();
    };
    
    /**
     * hides the panel
     */
    this.hide = function() {
        if(this.onCloseFunction != null)this.onCloseFunction()
        this.panel.hide();
        this.panel.destroy();
    };
    
    /**
     * set whether you want the panel close when somebody clicks on the mask (only in modal panels)
     * @param {Bool} value  true if you want panel to close when mask is clicked
     */
    this.setHideOnMaskClick = function(value) {
        this.hideOnMaskClick = value;
    };
    
    /**
     * adds or remove the close listener from the mask
     */
    this.setHideOnMaskClickListener = function() {
        var mask = document.getElementById(this.panelMask);
        var sfcPanel_instance = this;
        if (this.hideOnMaskClick && mask) {            
            YAHOO.util.Event.addListener(mask, "click", function(){
sfcPanel_instance.hide()
        });
        }
        else if(mask){            
            YAHOO.util.Event.removeListener(mask, "click");
        }
    };
    
    /**
     * sets the function to be closed when hiding the panel
     * @param {Object} value
     */
    this.setOnCloseFunction = function(value) {
        this.onCloseFunction = value;
    }
    
    this.center = function()
    {
        if(typeof(this.panel)!='undefined')
            this.panel.center();
    }
};