/* preload images */

var barwidth_outer = 302;
var height_outer = 27;
var barwidth = barwidth_outer - 2;
var height_inner = height_outer -2;
var imgCount = imgNames.length;
var blocksize=parseInt(barwidth/(imgCount));
var preLoad = new Array();
var loaded = 0;
var progress_bar, progress_bar_fill;
var show_text = 'Preloading Rollover Images...';

var txt = '<div id="progress_bar" style="width:'+barwidth_outer+'px; height:'+height_outer+'px;">';
txt += '<div class="progress_bar_text">' +show_text+ '</div>';
txt += '<div id="progress_bar_fill" style="height:'+height_inner+'px;">';
txt += '<div class="progress_bar_text">' +show_text+ '</div></div>';
txt += '</div>';

document.write(txt);
window.onload=loadimages;

function loadimages()	{
	// testing code - check the variables
	//document.getElementById('testing').innerHTML = 'blocksize = '+blocksize+ ' and barwidth = '+barwidth+ ' and imageCount = '+imgCount;
	
	progress_bar = document.getElementById('progress_bar');
	progress_bar_fill = document.getElementById('progress_bar_fill');

	for ( i=0; i < imgCount; i++)	{
		preLoad[i] = new Image();
		preLoad[i].src = imgSrc+imgNames[i];
		loaded++;

		// testing code - list the images
		//document.getElementById('testing').innerHTML += '<br \/>' +preLoad[i].src;
	
		setTimeout("change_blocksize()", 200);
	}
	setTimeout('hide_progress_bar()', 1000); // .1 seconds
}

function change_blocksize()	{
	
	if( loaded >= imgCount) {
		progress_bar_fill.style.width = barwidth + 'px';		
	}	else	{
		progress_bar_fill.style.width = parseInt(blocksize*loaded) + 'px';
	}	
}


function hide_progress_bar()	{
// this should be all that is needed...
	progress_bar.style.display="none";
// but just in case...
	progress_bar.style.width="0px";
	progress_bar.style.height="0px";
	progress_bar.style.border= "0px";
	progress_bar.innerHTML = '';
}