var numImages       = 6;
var numImagesLoaded = 0;
var preImages 	    = new Array();
var navTimer;
var navInterval     = 100;


function loadNav()
{
	// create image array
	images    = new Array();
	images[0] = "../images/nav/menu_button_black2.png";
	images[1] = "../images/nav/shadow.png";
	images[2] = "../images/nav/top_with_shadow.png";
	images[3] = "../images/nav/bottom_with_shadow.png";
	images[4] = "../images/nav/sub_button_off3.png";
	images[5] = "../images/nav/sub_button3.png";
	
	// preload images
	for (var i = 0; i < numImages; i++)
	{
		preImages[i]        = new Image();
		preImages[i].onLoad = imageLoaded();
		
		preImages[i].src    = images[i];
	}

}

function imageLoaded()
{
	numImagesLoaded  = numImagesLoaded + 1;
	
	if (numImagesLoaded == numImages)
	{
		preloadComplete();
	}
}

function preloadComplete()
{
	var completeImgs = 0;
	
	for (var i = 0; i < numImages; i++)
	{
		if (isImageOk1(preImages[i]))
		{
			completeImgs++;
		}
	}
	
	if (completeImgs >= numImages)
	{
		clearTimeout(navTimer);
		displayNav();
	}
	else
	{
		navTimer = setTimeout(function(){preloadComplete();}, navInterval); 
	}
}

function displayNav()
{
	document.getElementById("nav").style.display    = 'inline';
	document.getElementById("nav").style.visibility = 'visible';	
}


function isImageOk1(im) {

    // During the onload event, IE correctly identifies any images
    // that weren't downloaded as not complete. Others should too.
    // Gecko-based browsers act like NS4 in that they report this
    // incorrectly: they always return true.
    if (!im.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth
    // and naturalHeight. These give the true size of the image. If
    // it failed to load, either of these should be zero.
    if (typeof im.naturalWidth != "undefined" && im.naturalWidth == 0) {
        return false;
    }

    // No other way of checking: assume it's ok.
    return true;
}