function popupPanels(browserRef)
{
    this.browserRef = browserRef;

    this.arrayElementCounter = 0;
    this.divNames = new Array();
    this.divOriginalWidths = new Array();
    this.divOriginalHeights = new Array();
    this.divOpacityValues = new Array();
    this.divWidthValues = new Array();
    this.divHeightValues = new Array();

    this.divOpacityTimers = new Array();
    this.divWidthTimers = new Array();
    this.divHeightTimers = new Array();
    this.divActiveLeftValues = new Array();
    this.divActiveTopValues = new Array();
    this.divTopestIndex = new Array();

    this.headerValue = 'Header';
    this.contentValue = 'Content';

    this.effectTimes = 5;
    this.timerValue = 5;
    this.errorPrecision = 2;

    if (this.browserRef.isChrome)
    {
        this.effectTimes = 10;
        this.timerValue = 20;
    }

    this.clientWidthValue = null;
    this.clientHeightValue = null;

    var topestDivID = null;
    this.setTopestDisabled = false;

    this.setOffsetDimensions = setOffsetDimensions;
    this.popupPanel = popupPanel;
    this.hidePanel = hidePanel;
    this.showPanelOpacity = showPanelOpacity;
    this.hidePanelOpacity = hidePanelOpacity;
    this.showPanelWidth = showPanelWidth;
    this.hidePanelWidth = hidePanelWidth;
    this.showPanelHeight = showPanelHeight;
    this.hidePanelHeight = hidePanelHeight;
    this.registerPanel = registerPanel;
    this.getDivIndex = getDivIndex;
    this.disableSelection = disableSelection;
    this.setTopest = setTopest;

    function setOffsetDimensions(divID)
    {
        var divIndex = this.getDivIndex(divID);
        var divRef = document.getElementById(this.divNames[divIndex]);

        divRef.style.width = '';
        divRef.style.height = '';
        divRef.style.display = 'block';
        divRef.style.overflow = 'visible';
        divRef.style.left = "0px";
        divRef.style.top = "0px";

        this.divOriginalWidths[divIndex] = divRef.offsetWidth;
        this.divOriginalHeights[divIndex] = divRef.offsetHeight;

        divRef.style.display = 'none';
        divRef.style.overflow = 'hidden';
    }

    function popupPanel(variableName, divID)
    {
        this.setOffsetDimensions(divID);

        var divIndex = this.getDivIndex(divID);
        var divRef = document.getElementById(this.divNames[divIndex]);

        this.clientWidthValue = getClientWidthValue();
        this.clientHeightValue = getClientHeightValue();

        divRef.style.display = 'block';
        this.divOpacityValues[divIndex] = 0;
        this.divWidthValues[divIndex] = 0;
        this.divHeightValues[divIndex] = 0;

        if (this.browserRef.isIE)
        {
            divRef.style.filter = 'alpha(opacity=' + this.divOpacityValues[divIndex] + ')';
        }
        else
        {
            divRef.style.opacity = this.divOpacityValues[divIndex] / 100;
        }

        divRef.style.width = this.divOriginalWidths[divIndex] + "px";
        divRef.style.height = this.divOriginalHeights[divIndex] + "px";

        this.divActiveLeftValues[divIndex] = (this.clientWidthValue - this.divOriginalWidths[divIndex]) / 2 + getScrollCoordinatesX();
        this.divActiveTopValues[divIndex] = (this.clientHeightValue - this.divOriginalHeights[divIndex]) / 2 + getScrollCoordinatesY();

        divRef.style.left = this.divActiveLeftValues[divIndex] + "px";
        divRef.style.top = this.divActiveTopValues[divIndex] + "px";

        this.divOpacityTimers[divIndex] = clearInterval(this.divOpacityTimers[divIndex]);
        this.divOpacityTimers[divIndex] = setInterval('try{' + variableName + '.showPanelOpacity(' + divIndex + ');}catch(err){}', this.timerValue);

        this.divWidthTimers[divIndex] = clearInterval(this.divWidthTimers[divIndex]);
        this.divWidthTimers[divIndex] = setInterval('try{' + variableName + '.showPanelWidth(' + divIndex + ');}catch(err){}', this.timerValue);

        this.divHeightTimers[divIndex] = clearInterval(this.divHeightTimers[divIndex]);
        this.divHeightTimers[divIndex] = setInterval('try{' + variableName + '.showPanelHeight(' + divIndex + ');}catch(err){}', this.timerValue);

        this.setTopest(divID);
    }

    function hidePanel(variableName, divID)
    {
        var divIndex = this.getDivIndex(divID);
        var divRef = document.getElementById(this.divNames[divIndex]);

        this.divOpacityTimers[divIndex] = clearInterval(this.divOpacityTimers[divIndex]);
        this.divOpacityTimers[divIndex] = setInterval('try{' + variableName + '.hidePanelOpacity(' + divIndex + ');}catch(err){}', this.timerValue);

        this.divWidthTimers[divIndex] = clearInterval(this.divWidthTimers[divIndex]);
        this.divWidthTimers[divIndex] = setInterval('try{' + variableName + '.hidePanelWidth(' + divIndex + ');}catch(err){}', this.timerValue)

        this.divHeightTimers[divIndex] = clearInterval(this.divHeightTimers[divIndex]);
        this.divHeightTimers[divIndex] = setInterval('try{' + variableName + '.hidePanelHeight(' + divIndex + ');}catch(err){}', this.timerValue)
    }

    function showPanelOpacity(divIndex)
    {
        var divRef = document.getElementById(this.divNames[divIndex]);

        if (this.divOpacityValues[divIndex] + this.errorPrecision < 100)
        {
            this.divOpacityValues[divIndex] += 100 / this.effectTimes;

            if (this.browserRef.isIE)
                divRef.style.filter = 'alpha(opacity=' + this.divOpacityValues[divIndex] + ')';
            else
                divRef.style.opacity = this.divOpacityValues[divIndex] / 100;
        }
        else
        {
            this.divOpacityTimers[divIndex] = clearInterval(this.divOpacityTimers[divIndex]);
            this.divOpacityValues[divIndex] = 100;
        }
    }


    function hidePanelOpacity(divIndex)
    {
        var divRef = document.getElementById(this.divNames[divIndex]);

        if (this.divOpacityValues[divIndex] - this.errorPrecision > 0)
        {
            this.divOpacityValues[divIndex] -= 100 / this.effectTimes;

            if (this.browserRef.isIE)
                divRef.style.filter = 'alpha(opacity=' + this.divOpacityValues[divIndex] + ')';
            else
                divRef.style.opacity = this.divOpacityValues[divIndex] / 100;
        }
        else
        {
            this.divOpacityTimers[divIndex] = clearInterval(this.divOpacityTimers[divIndex]);
            divRef.style.display = "none";
            this.divOpacityValues[divIndex] = 0;
        }
    }

    function showPanelWidth(divIndex)
    {
        var divRef = document.getElementById(this.divNames[divIndex]);

        if (this.divWidthValues[divIndex] + this.errorPrecision < this.divOriginalWidths[divIndex])
        {
            this.divWidthValues[divIndex] += this.divOriginalWidths[divIndex] / this.effectTimes;
            divRef.style.left = ((this.clientWidthValue - this.divWidthValues[divIndex]) / 2) + getScrollCoordinatesX() + "px";
            divRef.style.top = ((this.clientHeightValue - this.divHeightValues[divIndex]) / 2) + getScrollCoordinatesY() + "px";

            divRef.style.width = this.divWidthValues[divIndex] + "px";
        }
        else
        {
            this.divWidthTimers[divIndex] = clearInterval(this.divWidthTimers[divIndex]);
            this.divWidthValues[divIndex] = this.divOriginalWidths[divIndex];

            divRef.style.left = ((this.clientWidthValue - this.divOriginalWidths[divIndex]) / 2) + getScrollCoordinatesX() + "px";
            divRef.style.top = ((this.clientHeightValue - this.divOriginalHeights[divIndex]) / 2) + getScrollCoordinatesY() + "px";

            /*** To avoid negative position ***/
            if ((this.clientHeightValue - this.divHeightValues[divIndex]) / 2 + getScrollCoordinatesY() < 0)
                divRef.style.top = "10px";

            if ((this.clientWidthValue - this.divWidthValues[divIndex]) / 2 + getScrollCoordinatesX() < 0)
                divRef.style.left = "0px";
            /*** To avoid negative position ***/
        }
    }

    function hidePanelWidth(divIndex)
    {
        var divRef = document.getElementById(this.divNames[divIndex]);

        if (this.divWidthValues[divIndex] - this.errorPrecision > 0)
        {
            this.divWidthValues[divIndex] -= this.divOriginalWidths[divIndex] / this.effectTimes;
            divRef.style.width = this.divWidthValues[divIndex] + "px";

            this.divActiveLeftValues[divIndex] = divRef.offsetLeft;
            divRef.style.left = this.divActiveLeftValues[divIndex] + (this.divOriginalWidths[divIndex] / this.effectTimes / 2) + "px";
        }
        else
        {
            this.divWidthTimers[divIndex] = clearInterval(this.divWidthTimers[divIndex]);
            divRef.style.display = "none";
            this.divWidthValues[divIndex] = 0;
        }
    }

    function showPanelHeight(divIndex)
    {
        var divRef = document.getElementById(this.divNames[divIndex]);

        if (this.divHeightValues[divIndex] + this.errorPrecision < this.divOriginalHeights[divIndex])
        {
            this.divHeightValues[divIndex] += this.divOriginalHeights[divIndex] / this.effectTimes;
            divRef.style.height = this.divHeightValues[divIndex] + "px";
        }
        else
        {
            this.divHeightTimers[divIndex] = clearInterval(this.divHeightTimers[divIndex]);
            this.divHeightValues[divIndex] = this.divOriginalHeights[divIndex];

            this.divActiveLeftValues[divIndex] = divRef.offsetLeft;
            this.divActiveTopValues[divIndex] = divRef.offsetTop;
            divRef.style.height = "";
        }
    }

    function hidePanelHeight(divIndex)
    {
        var divRef = document.getElementById(this.divNames[divIndex]);

        if (this.divHeightValues[divIndex] - this.errorPrecision > 0)
        {
            this.divHeightValues[divIndex] -= this.divOriginalHeights[divIndex] / this.effectTimes;
            divRef.style.height = this.divHeightValues[divIndex] + "px";

            this.divActiveTopValues[divIndex] = divRef.offsetTop;
            divRef.style.top = this.divActiveTopValues[divIndex] + (this.divOriginalHeights[divIndex] / this.effectTimes / 2) + "px";
        }
        else
        {
            this.divHeightTimers[divIndex] = clearInterval(this.divHeightTimers[divIndex]);
            divRef.style.display = "none";
            this.divHeightValues[divIndex] = 0;
        }
    }

    function registerPanel(divID)
    {
        var divRef = document.getElementById(divID);
        var divOpacityTimer, divWidthTimer, divHeightTimer;

        this.divNames[this.arrayElementCounter] = divID;
        this.divOriginalWidths[this.arrayElementCounter] = divRef.offsetWidth;
        this.divWidthValues[this.arrayElementCounter] = 0;
        this.divOriginalHeights[this.arrayElementCounter] = divRef.offsetHeight;
        this.divHeightValues[this.arrayElementCounter] = 0;
        this.divOpacityValues[this.arrayElementCounter] = 0;
        this.divOpacityTimers[this.arrayElementCounter] = divOpacityTimer;
        this.divWidthTimers[this.arrayElementCounter] = divWidthTimer;
        this.divHeightTimers[this.arrayElementCounter] = divHeightTimer;
        this.divTopestIndex[this.arrayElementCounter] = divID;

        this.arrayElementCounter++;

        this.disableSelection(divID);
    }

    function getDivIndex(divID)
    {
        var divIndex;

        for (var i = 0; i < this.arrayElementCounter; i++)
        {
            if (this.divNames[i] == divID)
            {
                divIndex = i;
                break;
            }
        }

        return divIndex;
    }

    function disableSelection(divID)
    {
        var divHeaderRef = document.getElementById(divID + this.headerValue);

        divHeaderRef.onselectstart = function() { return false; };
        divHeaderRef.unselectable = "on";
        divHeaderRef.style.MozUserSelect = "none";
    }

    function setTopest(divID)
    {
        if (this.setTopestDisabled)
        {
            this.setTopestDisabled = false;
            return;
        }

        var maxZIndexValue = 10;
        var divTopestIndexRef = new Array();

        for (var i = 0; i < this.arrayElementCounter; i++)
            divTopestIndexRef[i] = this.divTopestIndex[i];

        this.divTopestIndex[0] = divID;
        document.getElementById(divID).style.zIndex = --maxZIndexValue;
        var j = 1;
        for (var i = 0; i < this.arrayElementCounter; i++)
        {
            if (divTopestIndexRef[i] != divID)
            {
                this.divTopestIndex[j] = divTopestIndexRef[i];
                document.getElementById(this.divTopestIndex[j]).style.zIndex = --maxZIndexValue;
                j++;
            }
            else
                continue;
        }
    }
}