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 porcelain2MouseOver(porcelain2ID, parentID)
{
    if (p2timerRunning)
	    clearTimeout(p2Timer);
    porcelainOnID = parentID;
    var item = document.getElementById(porcelain2ID);
    item.className = 'porcelain2ItemSelected';
}
function porcelain2MouseOut(porcelain2ID)
{
    p2Timer = setTimeout("turnOff()",500);
    p2timerRunning = true;
    var item = document.getElementById(porcelain2ID);
    item.className = 'porcelain2Item';
}
function turnOff()
{
    if (p2timerRunning)
	    clearTimeout(p2Timer);
    // unhover button
    var selectedPorcelain = document.getElementById(porcelainOnID);
    if (selectedPorcelain != null)
    {
        if (selectedPorcelain.className != 'porcelainItemCurrent')
        {
            selectedPorcelain.className = 'porcelainItem';
            handleDividerImages(porcelainOnID,false);
        }
    }
    // hide flyout
    var flyout = document.getElementById(porcelainOnID + '_FlyOut');
    if (flyout != null)
	    flyout.className = 'porcelain2Hide';
    porcelainOnID = '';
    p2timerRunning = false;
}

function relativePosition(currentObject, baseObjectID) 
{
    var totalLeft = 0;
    var totalTop = 0;
    if (currentObject.offsetParent) 
    {
	    totalLeft = currentObject.offsetLeft;
	    totalTop = currentObject.offsetTop;
	    if (baseObjectID == null)
	    {
	        while (currentObject = currentObject.offsetParent)
	        {
	            totalLeft += currentObject.offsetLeft;
    		    totalTop += currentObject.offsetTop;
	        }
	    }
	    else
	    {
	        var found = false;
	        while (!(found)) 
	        {
	            currentObject = currentObject.offsetParent;
	            if (currentObject.id == baseObjectID)
	            {
	                found = true;
	            }
	            else
	            {
		            totalLeft += currentObject.offsetLeft;
        		    totalTop += currentObject.offsetTop;
                }
	        }
	    }
    }
    return [totalLeft,totalTop];
}

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.png') > -1)
            {
                obsidianHover[myIndex].src = obsidianNormal[myIndex].src;
            }
            else
            {
		        obsidianHover[myIndex].src = obsidianNormal[myIndex].src.replace('.png','_hvr.png');
	        }
	        myIndex++;
    	    
	    }
    }

    porcelainLeft = new Image();
    porcelainLeft.src = 'Itemimg/por_active_cap_lft.gif';
    porcelainMiddle = new Image();
    porcelainMiddle.src = 'Itemimg/por_active_bkg_span.gif';
    porcelainRight = new Image();
    porcelainRight.src = 'Itemimg/por_active_cap_rt.gif';
    porcelain2Left = new Image();
    porcelain2Left.src = 'Itemimg/por2_active_cap_lft.gif';
    porcelain2Middle = new Image();
    porcelain2Middle.src = 'Itemimg/por2_active_bkg_span.gif';
    porcelain2Right = new Image();
    porcelain2Right.src = 'Itemimg/por2_active_cap_rt.gif';

    // 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 = myFunction;
        }
        else 
        { 
            window.onload = function() { 
                if (oldonload) { oldonload(); }
                 myFunction(); };
        }
    }
}