var obsidianNormal, obsidianHover;
var porcelainLeft, porcelainMiddle, porcelainRight;
var porcelain2Left, porcelain2Middle, porcelain2Right;
var selectedObsidianID = '';
var firstObsidianID = '';
var navTimer, navTimerRunning = false;
var oTimer, oTimerRunning = false;
var p2Timer, p2timerRunning = false;
var porcelainOnID = '';
var pageloaded = false;

function obsidianMouseOver(obsidianID)
{
    if (pageloaded)
    {
        if (porcelainOnID != '')
            turnOff();
        oTimer = setTimeout('obsidianOn(\'' + obsidianID + '\')',150);
        oTimerRunning = true;
    }
}
function obsidianOn(obsidianID)
{
    var oldIndex = parseInt(selectedObsidianID.replace('obsidian',''))-1;
    var newIndex = parseInt(obsidianID.replace('obsidian',''))-1;
  
    // unselect currently selected
    if (selectedObsidianID != null && selectedObsidianID != '')
    {
	    var selectedObsidian = document.getElementById(selectedObsidianID);
	    var selectedPorcelain = document.getElementById(selectedObsidianID.replace('obsidian','porcelainContent'));
	    selectedObsidian.src = obsidianNormal[oldIndex].src;
	    selectedPorcelain.className = 'menuHide';
	}
	// select new
	if (selectedObsidianID != null && selectedObsidianID != '')
    {
	    var obsidianImage = document.getElementById(obsidianID);
	    var porcelainContentID = obsidianID.replace('obsidian','porcelainContent');
	    var porcelainContent = document.getElementById(porcelainContentID);
	    
	    obsidianImage.src = obsidianHover[newIndex].src;
	    porcelainContent.className = 'menuShow';
	    //alignPorcelainContent(obsidianID,porcelainContentID);
	    selectedObsidianID = obsidianID;
	}
}

function obsidianMouseOut(obsidianID)
{
    if (oTimerRunning)
        clearTimeout(oTimer);
    oTimerRunning = false;
}
function porcelainMouseOver(porcelainID, contentID)
{
    if (porcelainOnID != '')
        turnOff();
    // hover button
    var selectedPorcelain = document.getElementById(porcelainID);
    if (selectedPorcelain.className != 'porcelainItemCurrent')
    {
        selectedPorcelain.className = 'porcelainItemSelected';
        handleDividerImages(porcelainID,true);
    }
        // display flyout if neccessary
        var flyout = document.getElementById(porcelainID + '_FlyOut');
        if (flyout != null)
        {
            positionFlyout(selectedPorcelain, contentID, flyout);
            porcelainOnID = porcelainID;
        }
}

function porcelainMouseOut(porcelainID)
{
    var flyout = document.getElementById(porcelainID + '_FlyOut');
    if (flyout == null)
    {
        // unhover button
        var selectedPorcelain = document.getElementById(porcelainID);
        if (selectedPorcelain.className != 'porcelainItemCurrent')
        {
            selectedPorcelain.className = 'porcelainItem';
            handleDividerImages(porcelainID,false);
        }
    }
    else
    {
        p2Timer = setTimeout("turnOff()",500);
        p2timerRunning = true;
    }
}

function handleDividerImages(porcelainID,turnOff,expireState)
{
    var porcelainItem = document.getElementById(porcelainID);
    var dividerAfterID = porcelainID.replace('_porcelain','_divider');
    var pIndex = parseInt(dividerAfterID.substring(dividerAfterID.length - 1, dividerAfterID.length));
    var from = '_divider' + pIndex;
    var to = pIndex - 1;
    to = '_divider' + to;
    var dividerBeforeID = dividerAfterID.replace(from,to);
    
    var firstDivider, secondDivider;
    var visValue = 'visible';
    var disValue = 'inline';
    if (turnOff)
    {
        visValue = 'hidden';
        disValue = 'none';
    }
    if (firstDivider = document.getElementById(dividerBeforeID))
    {
        if (firstDivider.className != 'expired')
        {
            firstDivider.style.visibility = visValue;
        }
        if (expireState) { firstDivider.className = 'expired'; }
        else { firstDivider.style.display = disValue; }
    }
    if (secondDivider = document.getElementById(dividerAfterID))
    {
        if (secondDivider.className != 'expired')
        {
            secondDivider.style.visibility = visValue;
        }
        if (expireState) { secondDivider.className = 'expired'; }
        else { secondDivider.style.display = disValue; }
    }
}

function revertNavigation ()
{
    navTimer = setTimeout('revertFinal()',500);
    navTimerRunning = true;
}
function revertFinal()
{
    navTimerRunning = false;
    obsidianOn(firstObsidianID);
}
function cancelRevert ()
{
    if (navTimerRunning)
    {
        navTimerRunning = false;
        clearTimeout(navTimer);
    }
}

function LoadNavigation ()
{
    // preload Images
    obsidianNormal = new Array();
    obsidianHover = new Array();

    var obsidianRow = document.getElementById('obsidianRow');
    var allImages = obsidianRow.getElementsByTagName('img');

    var myIndex = 0;
    for (var index = 0; index < allImages.length; index++)
    {
        if (allImages[index].id != null && allImages[index].id.indexOf('obsidian') > -1)
        {
            // set normal state
            obsidianNormal[myIndex] = new Image();
            obsidianNormal[myIndex].src = allImages[index].src;

            // set hover state
            obsidianHover[myIndex] = new Image();
            if (obsidianNormal[myIndex].src.indexOf('_actv.gif') > -1)
            {
                obsidianHover[myIndex].src = obsidianNormal[myIndex].src;
            }
            else
            {
		        obsidianHover[myIndex].src = obsidianNormal[myIndex].src.replace('.gif','_hvr.gif');
	        }
	        myIndex++;
    	    
	    }
    }

    // set initial selected obsidian
    var porcelainArea = document.getElementById("porcelainFiller");
    var porcelainContents = porcelainArea.getElementsByTagName("div");  
    var selectedPorcelainContentID;
    for (var index = 0; index < porcelainContents.length; index++)
    {
        // set selected
        if (porcelainContents[index].className == 'menuShow')
        {
            porcelainContents[index].style.visibility = 'hidden';
            firstObsidianID = selectedObsidianID = porcelainContents[index].id.replace('porcelainContent','obsidian');
            selectedPorcelainContentID = porcelainContents[index].id;
            addPageLoadEvent(function () { document.getElementById(selectedPorcelainContentID).style.visibility = 'visible'; });
            //addPageLoadEvent(function () { alignPorcelainContent(selectedObsidianID,selectedPorcelainContentID); });
            addPageLoadEvent(function () { pageloaded = true; });
            
        }
    }
    // set initial porcelain if neccessary
    var selectedPorcelain = document.getElementById('selectedPorcelainNode');
    if (selectedPorcelain)
    {
        var selectedNode = document.getElementById(selectedPorcelain.value);
        selectedNode.className = 'porcelainItemCurrent';
        handleDividerImages(selectedPorcelain.value,true,true);
    }
    function addPageLoadEvent(myFunction)
    {
        var oldonload = window.onload;
        if (typeof window.onload != 'function')
        {
            window.onload = function(){myFunction();};
        }
        else 
        { 
            window.onload = function() { 
                if (oldonload) { oldonload(); }
                 myFunction(); };
        }
    }
}