var imageLoader = {
	//======== HTML =================	
	contTarget:		false,
	contFormObject:	false,
	
	//======== Images ==================		
	imgPath:		new Array(),
	idVehicle:		new Array(),
	perouter:		false, 
	perdone:		false,
	imagesdone:		false,
	images:			new Array(),
	
	loaded: 		0,
	yposition:		210, 		//POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
	loadedcolor:	'gray', 	// PROGRESS BAR COLOR
	unloadedcolor:	'white',	 // BGCOLOR OF UNLOADED AREA
	barheight:		15, 		// HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
	barwidth:		200,	 	// WIDTH OF THE BAR IN PIXELS 
	bordercolor:	'black', 	// COLOR OF THE BORDER
	blocksize:		false,	
	
	//======== Browser =================	
	NS4:	false,
	NS6:	false,
	IE4:	false,
		
	initVariables: function(strFormName, strImgPathField) {
		imageLoader.loaded = 0;
		imageLoader.imagesdone = false;
		imageLoader.clearimgPath();
		imageLoader.contFormObject = document.forms[strFormName];
		if (imageLoader.contFormObject[strImgPathField].length == undefined ) {
			imageLoader.imgPath[0] = imageLoader.contFormObject[strImgPathField].value;
			imageLoader.blocksize=imageLoader.barwidth;
		} else {
			for (var index=0; index < imageLoader.contFormObject[strImgPathField].length ; index++) {
				imageLoader.imgPath[index] = imageLoader.contFormObject[strImgPathField][index].value;
			}
			imageLoader.blocksize=imageLoader.barwidth/(imageLoader.imgPath.length);
		}		
	},
	
	initBrowsers: function() {
		imageLoader.NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
		imageLoader.IE4 = (document.all)? true : false;
		imageLoader.NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
	},
	
	loadImages: function () {
		imageLoader.initBrowsers();
		
		if(imageLoader.NS4){
			imageLoader.perouter=document.perouter;
			imageLoader.perdone=document.perouter.document.layers[0].document.perdone;
		}

		if(imageLoader.NS6){
			imageLoader.perouter=document.getElementById('perouter');
			imageLoader.perdone=document.getElementById('perdone');
		}

		if(imageLoader.IE4){
			imageLoader.perouter=document.all.perouter;
			imageLoader.perdone=document.all.perdone;
		}
		
		imageLoader.clipLayer(imageLoader.perdone,0,0,imageLoader.barheight,0);

		window.onresize=imageLoader.setOuterPos;
		imageLoader.setOuterPos();
		
		for(var num=0; num < imageLoader.imgPath.length; num++){
			imageLoader.images[num]	= new Image();
			imageLoader.images[num].src = imageLoader.imgPath[num];
			setTimeout('imageLoader.checkLoad('+num+')', num*100);
		}
	},
	
	checkLoad: function(index) {
		if (imageLoader.images[index].complete) {
			imageLoader.displayBars() 
			stockData.fillImages(index);
		}	
		else {
			setTimeout('imageLoader.checkLoad('+index+')', 100);
			imageLoader.checkImages(index);
		}
	},
	
	checkImageCounter:	new Array,
	checkImages: function(index) {
		var x = imageLoader.images[index].fileSize;
		if (imageLoader.checkImageCounter[index] == undefined) imageLoader.checkImageCounter[index] = 0;
		if ( x == -1){
			imageLoader.checkImageCounter[index] = imageLoader.checkImageCounter[index] + 1;
		}
		if ( imageLoader.checkImageCounter[index] == 400) {
			imageLoader.images[index].src = "/images/nocarimage.gif";
			stockData.myImageArray[index].src = "/images/nocarimage.gif";
			imageLoader.checkImageCounter[index] = 0;
		} 	
	},
	
	displayBars: function() {
		imageLoader.loaded++;
		imageLoader.clipLayer(imageLoader.perdone, 0, imageLoader.blocksize*imageLoader.loaded, imageLoader.barheight, 0);
		if(imageLoader.loaded>=imageLoader.imgPath.length)setTimeout('imageLoader.hidePerOuter()', 800);
	},
	
	hidePerOuter: function() {
		(imageLoader.NS4)? imageLoader.perouter.visibility="hide" : imageLoader.perouter.style.visibility="hidden";
		imageLoader.imagesdone=true;	
	},
	
	clipLayer: function(layer, ct, cr, cb, cl){
		if(imageLoader.NS4){
			layer.clip.left=cl;
			layer.clip.top=ct;
			layer.clip.right=cr;
			layer.clip.bottom=cb;
		}
		if(imageLoader.IE4||imageLoader.NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
	},
	
	setOuterPos: function(){
		if(!imageLoader.imagesdone) {
			var ww=(imageLoader.IE4)? document.body.clientWidth : window.innerWidth;
			var x=(ww-imageLoader.barwidth)/2;
			x = x - x/2;
			if(imageLoader.NS4){
				imageLoader.perouter.moveTo(x,imageLoader.yposition);
				imageLoader.perouter.visibility="show";
			}
			
			if(imageLoader.IE4||imageLoader.NS6){
				imageLoader.perouter.style.left=x+'px';
				imageLoader.perouter.style.top=imageLoader.yposition+'px';
				imageLoader.perouter.style.visibility="visible";
			}
		}
	},
	
	buildImageLoader: function(strBuildTarget) {
		imageLoader.initBrowsers();
		
		var barheight=Math.max(imageLoader.barheight, imageLoader.barheight);
				
		var txt=(imageLoader.NS4)?'<layer name="perouter" bgcolor="'+imageLoader.bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+imageLoader.bordercolor+'">';
		txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+imageLoader.barwidth+'" height="'+imageLoader.barheight+'" valign="center">';
		if(imageLoader.NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+imageLoader.unloadedcolor+'" top="0" left="0">';
		txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+imageLoader.barwidth+'" height="'+imageLoader.barheight+'" bgcolor="'+imageLoader.unloadedcolor+'"><center><font color="'+imageLoader.loadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
		if(imageLoader.NS4) txt+='</layer>';
		txt+=(imageLoader.NS4)? '<layer name="perdone" width="100%" height="'+imageLoader.barheight+'" bgcolor="'+imageLoader.loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+imageLoader.barwidth+'px; height:'+imageLoader.barheight+'px; background-color:'+imageLoader.loadedcolor+'; z-index:100">';
		txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+imageLoader.barwidth+'" height="'+imageLoader.barheight+'" bgcolor="'+imageLoader.loadedcolor+'"><center><font color="'+imageLoader.unloadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
		txt+=(imageLoader.NS4)? '</layer></ilayer>' : '</div>';
		txt+='</td></tr></table>';
		txt+=(imageLoader.NS4)?'</layer>' : '</div>';
		
		imageLoader.contTarget = document.getElementById(strBuildTarget);
		imageLoader.contTarget.innerHTML = txt;
	},

	KillImageLoader: function(killTarget) {
		killTarget.innerHTML = "";
	},
	
	clearimgPath: function () {
		imageLoader.imgPath = new Array();		
	}
};
