function CustomPanel(){
    this.overlay;
    this.panel;
    this.mask;
    this.pos_y;
    this.context = false;

    //var to hold the id of the element on which to load the content
    this.panel_element;

    //effects
    this.getGrowEffect = getGrowEffect;

    //function to initialize the panel object
    this.init = function(elementPanel, elementOverlay, width, zindex, overlay_height, x_shift, y_shift, context_obj){
        //init overlay
        var pos_x = (document.body.clientWidth - width)/2;
        var pos_y = 50;

        if(typeof x_shift != "undefined")
            pos_x += x_shift;
        if(typeof y_shift != "undefined")
            pos_y += y_shift;

        this.pos_y = pos_y;

        this.panel_element = elementPanel;
        var overlay_width = width + 2;
        var o_height;
        var p_height;
        if(overlay_height != 0 && typeof overlay_height != "undefined"){
            o_height = overlay_height;
            p_height = o_height+"px";
        }
        else{
            o_height = "450";
            p_height = "";
        }
        var context = null;
        if(typeof context_obj != "undefined") {context = [context_obj, "tl", "br"]; this.context = true;}
    
        var mask = document.createElement("div");
        mask.className = "mask";
        mask.innerHTML = " ";
        mask.id = elementPanel + "_mask";
        document.body.insertBefore(mask, document.body.firstChild);
    
        this.mask = new YAHOO.widget.Overlay(elementPanel + "_mask", {
            visible: false,
            x: 0,
            y: 0,
            zIndex: zindex-1,
            width: document.body.clientWidth+"px",
            height: document.body.clientHeight+"px"
        });

        this.overlay = new YAHOO.widget.Overlay(elementOverlay, {
            visible: false,
            x: pos_x,
            y: pos_y,
            zIndex: zindex,
            context: context,
            width: overlay_width+"px"
            //effect:{effect:this.getGrowEffect,duration:0.25, swidth:0, ewidth:width, final_height:o_height}
        });
        //init panel
        this.panel = new YAHOO.widget.Panel(elementPanel, {
            visible: false,
            x: pos_x,
            y: pos_y,
            zIndex: zindex+1,
            width: width+"px",
            height: p_height,
            close: false,
            draggable: false,
            context: context,
            effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:1}
        });
        //YUI 2.6 manages z-index and always place modal panels over overlays even when the overlay z-index is higher than the modal panel
        //don't want this to happen
        this.panel.bringToTop = function() { };

        this.overlay.render(document.body);
        this.panel.render(document.body);
        this.mask.render(document.body);
    }
    //sets the content of the panel
    this.setContent = function(call, opt_function){
        if (call.responseText == undefined) return;
        var panel = this.panel;
        var overlay = this.overlay;
        var mask = this.mask;
        var panel_element = this.panel_element;
        //function to be run once the overlay animation is over
        overlay.showEvent.unsubscribeAll();
        overlay.showEvent.subscribe(
            function(){
                var content = YAHOO.util.Dom.getElementsByClassName("panel_content", "div", panel_element);
                content[0].innerHTML = call.responseText;
                panel.show();
                if (typeof opt_function != "undefined") opt_function();
             }, this
        );

        if (overlay){
            if(!this.context){
                var new_y = this.pos_y;
                if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
                    new_y += document.body.scrollTop || document.documentElement.scrollTop;
                }
                else{
                    if(pageYOffset) new_y += pageYOffset;
                }

                overlay.cfg.setProperty("y", new_y);
                panel.cfg.setProperty("y", new_y);
                mask.cfg.setProperty("height", YAHOO.util.Dom.getDocumentHeight()+"px");
            }
            mask.show();
            resizeMask(mask);
            overlay.show();
        }
    }

    //only sets the content without animations, requires the panel to be loaded
    this.setOnlyContent = function(call, function_to_execute){
        var panel_element = this.panel_element;
        var content = YAHOO.util.Dom.getElementsByClassName("panel_content", "div", panel_element);
        content[0].innerHTML = call.responseText;
        function_to_execute();
    }

    //hides the panel
    this.hide = function(hide_content){
        this.mask.hide();
        this.mask.hideIframe();
        this.overlay.hide();
        this.overlay.hideIframe();
        this.panel.hide();
        this.panel.hideIframe();
        resizeMask(this.mask, true);
        var content = YAHOO.util.Dom.getElementsByClassName("panel_content", "div", this.panel_element);
        setTimeout(function(){content[0].innerHTML = ""},1000);
    }
}

//grow effect for the overlay
function getGrowEffect(overlay, dur, swidth, ewidth, final_height) {
    var swidth = this.swidth;
    var ewidth = this.ewidth;
    var to_height = this.final_height;

    var animWidthIn = new YAHOO.util.Anim(overlay, {
        width: { from: swidth, to: ewidth },
        height: { from: 20, to: 20 },
        fheight: to_height
        }, dur, YAHOO.util.Easing.easeIn);

    var fadeOut = new YAHOO.util.Anim(overlay, {
        opacity: { to: 0 }
        }, 0.1, YAHOO.util.Easing.easeIn);

    var growEffect = new YAHOO.widget.ContainerEffect(overlay, animWidthIn, fadeOut, overlay.element );

    growEffect.handleStartAnimateIn = function(type,args,obj) {
        YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "visible");
        YAHOO.util.Dom.setStyle(obj.overlay.element, "opacity", 1);
    }

    growEffect.handleCompleteAnimateIn = function(type,args,obj,overlay) {
        //animation for height
        var fheight = this.attributes.fheight;
        var animHeightIn = new YAHOO.util.Anim(obj.overlay.element.id, {
        height: { from: 20, to: fheight }
        }, this.duration, YAHOO.util.Easing.easeIn);
        animHeightIn.onComplete.subscribe(function(){
                var content = YAHOO.util.Dom.get("panel_content","div",obj.overlay.element);
                YAHOO.util.Dom.setStyle(content, "visibility", "visible");
            });
        //when the height animation is over, fire showEvent to begin fade animation
        animHeightIn.onComplete.subscribe(function(){obj.overlay.showEvent.fire(obj.overlay)});
        animHeightIn.animate();
    }

    growEffect.handleCompleteAnimateOut =  function(type, args, obj) {
        YAHOO.util.Dom.setStyle(obj.overlay.element, "visibility", "hidden");
        YAHOO.util.Dom.setStyle(obj.overlay.element, "opacity", 0);
    }

    growEffect.init();
    return growEffect;
};

function resizeMask(mask, hide) {
    setTimeout(function(){
        var el = YAHOO.util.Dom.get(mask.element.id);
        var height = YAHOO.util.Dom.getDocumentHeight()+"px";
        if(hide) height = 0;
        YAHOO.util.Dom.setStyle(el, "height", height);
        }, 1500);
}