var browser = new Browser();

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

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

var headerValue = 'Header';
var contentValue = 'Content';

var effectTimes = 5;
var timerValue = 5;
var errorPrecision = 2;

var clientWidthValue;
var clientHeightValue;

var topestDivID;

function setOffsetDimensions(divID)
{
    var divIndex = getDivIndex(divID);
    var divRef = document.getElementById(divNames[divIndex]);
    
    divRef.style.width = '';
    divRef.style.height = '';
    divRef.style.display = 'block';
    divRef.style.overflow = 'visible';
    divRef.style.left = "0px";
    divRef.style.top = "0px";
    
    divOriginalWidths[divIndex] = divRef.offsetWidth;
    divOriginalHeights[divIndex] = divRef.offsetHeight;
    
    divRef.style.display = 'none';
    divRef.style.overflow = 'hidden';
}

function popupPanel(divID)
{
    setOffsetDimensions(divID);
    
    var divIndex = getDivIndex(divID);
    var divRef = document.getElementById(divNames[divIndex]);
        
    clientWidthValue = screen.availWidth + document.body.scrollLeft * 2;
    clientHeightValue = screen.availHeight + document.body.scrollTop * 2;
    
    divRef.style.display = 'block';
    divOpacityValues[divIndex] = 0;    
    divWidthValues[divIndex] = 0;
    divHeightValues[divIndex] = 0;
    
    if (browser.isIE || browser.isOpera)
    {
       divRef.style.filter = 'alpha(opacity=' + divOpacityValues[divIndex] + ')';
    }
  
    if (browser.isNS)
    {
        divRef.style.opacity = divOpacityValues[divIndex] / 100;
    }
    
    divRef.style.width = divOriginalWidths[divIndex] + "px";
    divRef.style.height = divOriginalHeights[divIndex] + "px";
    
    divActiveLeftValues[divIndex] = ( clientWidthValue -  divOriginalWidths[divIndex] ) / 2;
    //divActiveTopValues[divIndex] = ( clientHeightValue - divRef.offsetHeight ) / 2;
    divActiveTopValues[divIndex] = 0;
    
    divRef.style.left = divActiveLeftValues[divIndex] + "px";
    //divRef.style.top =  divActiveTopValues[divIndex] + "px";
    divRef.style.top = "0px";
        
    divOpacityTimers[divIndex] = clearInterval(divOpacityTimers[divIndex]);
    divOpacityTimers[divIndex] = setInterval('showPanelOpacity(' + divIndex + ')', timerValue);
    
    divWidthTimers[divIndex] = clearInterval(divWidthTimers[divIndex]);
    divWidthTimers[divIndex] = setInterval('showPanelWidth(' + divIndex + ')', timerValue);
    
    divHeightTimers[divIndex] = clearInterval(divHeightTimers[divIndex]);
    divHeightTimers[divIndex] = setInterval('showPanelHeight(' + divIndex + ')', timerValue);
    
    setTopest(divID);
}

function hidePanel(divID)
{
    var divIndex = getDivIndex(divID);
    var divRef = document.getElementById(divNames[divIndex]);
    
    divOpacityTimers[divIndex] = clearInterval(divOpacityTimers[divIndex]);
    divOpacityTimers[divIndex] = setInterval('hidePanelOpacity(' + divIndex + ')', timerValue);
        
    divWidthTimers[divIndex] = clearInterval(divWidthTimers[divIndex]);
    divWidthTimers[divIndex] = setInterval('hidePanelWidth(' + divIndex + ')', timerValue)
    
    divHeightTimers[divIndex] = clearInterval(divHeightTimers[divIndex]);
    divHeightTimers[divIndex] = setInterval('hidePanelHeight(' + divIndex + ')', timerValue)
}

function showPanelOpacity(divIndex)
{
    var divRef = document.getElementById(divNames[divIndex]);
    
    if(divOpacityValues[divIndex] + errorPrecision < 100)
    {
        divOpacityValues[divIndex] += 100 / effectTimes;
        
        if(browser.isIE || browser.isOpera)
        {
            divRef.style.filter = 'alpha(opacity=' + divOpacityValues[divIndex] + ')';
        }
        
        if(browser.isNS)
        {
            divRef.style.opacity = divOpacityValues[divIndex] / 100;
        }
    }
    else
    {
        divOpacityTimers[divIndex] = clearInterval(divOpacityTimers[divIndex]);
        divOpacityValues[divIndex] = 100;
    }
}


function hidePanelOpacity(divIndex)
{
    var divRef = document.getElementById(divNames[divIndex]);
    
    if(divOpacityValues[divIndex] - errorPrecision > 0)
    {
        divOpacityValues[divIndex] -= 100 / effectTimes;
        
        if(browser.isIE || browser.isOpera)
        {
            divRef.style.filter = 'alpha(opacity=' + divOpacityValues[divIndex] + ')';
        }
        
        if(browser.isNS)
        {
            divRef.style.opacity = divOpacityValues[divIndex] / 100;
        }
    }
    else
    {
        divOpacityTimers[divIndex] = clearInterval(divOpacityTimers[divIndex]);
        divRef.style.display = "none";
        divOpacityValues[divIndex] = 0;
    }
}

function showPanelWidth(divIndex)
{
    var divRef = document.getElementById(divNames[divIndex]);
    
    if(divWidthValues[divIndex] + errorPrecision < divOriginalWidths[divIndex])
    {
        divWidthValues[divIndex] += divOriginalWidths[divIndex] / effectTimes;
        divRef.style.left = (clientWidthValue - divWidthValues[divIndex]) / 2 + "px";
        //divRef.style.top = (clientHeightValue - divHeightValues[divIndex]) / 2 + "px";
        divRef.style.top = "10px";
        divRef.style.width = divWidthValues[divIndex] + "px";
    }
    else
    {
        divWidthTimers[divIndex] = clearInterval(divWidthTimers[divIndex]);
        divWidthValues[divIndex] = divOriginalWidths[divIndex];
        
        divRef.style.left = (clientWidthValue - divOriginalWidths[divIndex]) / 2 + "px";
                
        /*** To avoid negative position ***/
        if ((clientHeightValue - divHeightValues[divIndex]) / 2 < 0)
            divRef.style.top = "10px";
        
        if ((clientWidthValue - divWidthValues[divIndex]) / 2 < 0)
            divRef.style.left = "0px";
        /*** To avoid negative position ***/
    }
}

function hidePanelWidth(divIndex)
{
    var divRef = document.getElementById(divNames[divIndex]);
    
    if(divWidthValues[divIndex] - errorPrecision > 0)
    {
        divWidthValues[divIndex] -= divOriginalWidths[divIndex] / effectTimes;
        divRef.style.width = divWidthValues[divIndex] + "px";
        
        divActiveLeftValues[divIndex] = divRef.offsetLeft;
        divRef.style.left = divActiveLeftValues[divIndex] + ( divOriginalWidths[divIndex] / effectTimes / 2) + "px";
    }
    else
    {
        divWidthTimers[divIndex] = clearInterval(divWidthTimers[divIndex]);
        divRef.style.display = "none";
        divWidthValues[divIndex] = 0;
    }
}

function showPanelHeight(divIndex)
{
    var divRef = document.getElementById(divNames[divIndex]);
    
    if(divHeightValues[divIndex] + errorPrecision < divOriginalHeights[divIndex])
    {
        divHeightValues[divIndex] += divOriginalHeights[divIndex] / effectTimes;        
        divRef.style.height = divHeightValues[divIndex] + "px";
    }
    else
    {
        divHeightTimers[divIndex] = clearInterval(divHeightTimers[divIndex]);
        divHeightValues[divIndex] = divOriginalHeights[divIndex];
        
        divActiveLeftValues[divIndex] = divRef.offsetLeft;
        divActiveTopValues[divIndex] = divRef.offsetTop;
    }
}

function hidePanelHeight(divIndex)
{
    var divRef = document.getElementById(divNames[divIndex]);
    
    if(divHeightValues[divIndex] - errorPrecision > 0)
    {
        divHeightValues[divIndex] -= divOriginalHeights[divIndex] / effectTimes;
        divRef.style.height = divHeightValues[divIndex] + "px";
        
        divActiveTopValues[divIndex] = divRef.offsetTop;
        divRef.style.top = divActiveTopValues[divIndex] + ( divOriginalHeights[divIndex] / effectTimes / 2) + "px";
    }
    else
    {
        divHeightTimers[divIndex] = clearInterval(divHeightTimers[divIndex]);
        divRef.style.display = "none";
        divHeightValues[divIndex] = 0;
    }
}

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

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

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

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

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

var setTopestDisabled = false;

function setTopest(divID)
{
    if(setTopestDisabled)
    {
        setTopestDisabled = false;
        return;
    }
        
    var maxZIndexValue = 10;
    var divTopestIndexRef = new Array();
    
    for (var i = 0; i < arrayElementCounter; i++)    
        divTopestIndexRef[i] = divTopestIndex[i];
    
    divTopestIndex[0] = divID;
    document.getElementById(divID).style.zIndex = --maxZIndexValue;
    var j = 1;
    for (var i = 0; i < arrayElementCounter; i++)
    {
        if(divTopestIndexRef[i] != divID)
        {
            divTopestIndex[j] = divTopestIndexRef[i];
            document.getElementById(divTopestIndex[j]).style.zIndex = --maxZIndexValue;
            j++;
        }
        else
            continue;
    }
}