// ImageLoader - Version 1.0
// Author: Ulhas S. Math 
// ImageLoader script contains a single function to display a loading message until the image loads on the page.
// It can be called any number of times in the page for mulitple images.
// USE THE insertImage() FUNCTION WHEREVER YOU ARE USING <img src> tag and pass a unique name to every call of this 
// function. Also you need to pass imageSource and width and height of the MessageBox to be displayed 
// on the image until it loads. For best results it is better to pass the width and height same as that 
// that of the original image.

var countHits = 0;
var imagenames=new Array(50);
var xposition;
var yposition;                                  
var loadedcolor='gray' ;                
var unloadedcolor='white';                   
var barheight;                                 
var barwidth;                                
var bordercolor='black';                      

var NS4; 
var IE4; 
var NS6;
var imagesdone;
var blocksize;
var loaded=0, perouter, perdone, images=new Array();
var txt;
function fnShowProgressBar(imageName,xPosValue,yPosValue,widthValue,heightValue,message)
{
imagenames[countHits] = imageName;
xposition=xPosValue;
yposition=yPosValue;                                 
loadedcolor='gray' ;                
unloadedcolor='white';              
barheight=heightValue;              
barwidth=widthValue;                
bordercolor='white';                

//DO NOT EDIT BEYOND THIS POINT 
NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
IE4 = (document.all)? true : false;
NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
imagesdone=false;
blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var divNamePerouter = "perouter"+countHits;
var divNamePerdone = "perdone"+countHits;
txt=(NS4)?'<layer id="'+divNamePerouter+'" name="'+divNamePerouter+'" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="'+divNamePerouter+'" style="position:relative; width:'+barwidth+';visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table id="table'+divNamePerouter+'" name="table'+divNamePerouter+'" cellpadding="0" cellspacing="0" style="border:1 dotted black;"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="2" face="GE Inspira">'+message+'</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer id="'+divNamePerdone+'" name="'+divNamePerdone+'" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="'+divNamePerdone+'" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="2" face="GE Inspira">'+message+'</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
loadimages(divNamePerouter,divNamePerdone);
countHits++;
}
function loadimages(divNamePerouter,divNamePerdone){
var perouterLocal;
var perdoneLocal;
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
//perouter=document.all.perouter;
perouterLocal=document.getElementById(divNamePerouter);
//perdone=document.all.perdone;
perdoneLocal=document.getElementById(divNamePerdone);
}
cliplayer(perdoneLocal,0,0,barheight,0);
//window.onresize=setouterpos;
var callSetouterpos = "setouterpos("+divNamePerouter+",'"+divNamePerdone+"')";
//setTimeout( callSetouterpos,100);
setouterpos(divNamePerouter,divNamePerdone);
var callCheckLoad = "checkload("+countHits+",'"+divNamePerouter+"','"+divNamePerdone+"')";
setTimeout( callCheckLoad,100);

}
function setouterpos(divNamePerouter,divNamePerdone){
perouterLocal=document.getElementById(divNamePerouter);
perdoneLocal=document.getElementById(divNamePerdone);
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
//var x=(ww-barwidth)/2;
var x=xposition;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
if(perouterLocal != null && perouterLocal != undefined && perouterLocal != "")
  {
  perouterLocal.style.left=x+'px';
  perouterLocal.style.top=yposition+'px';
  perouterLocal.style.visibility="visible";
  }
}}
function dispbars(divNamePerouter,divNamePerdone,imageObjectWidth,imageObjectHeight){
perouterLocal=document.getElementById(divNamePerouter);
perdoneLocal=document.getElementById(divNamePerdone);
loaded++;
cliplayer(perdoneLocal, 0, blocksize*loaded, barheight, 0);
var callHidePerouter = "hideperouter('"+divNamePerouter+"','"+divNamePerdone+"','"+imageObjectWidth+"','"+imageObjectHeight+"')";
setTimeout(callHidePerouter,100);

//hideperouter(divNamePerouter,divNamePerdone,imageObject);

}
function doNothing(){
alert("frfr");
}
function checkload(index,divNamePerouter,divNamePerdone){
perouterLocal=document.getElementById(divNamePerouter);
perdoneLocal=document.getElementById(divNamePerdone);
var callCheckLoad = "checkload("+index+",'"+divNamePerouter+"','"+divNamePerdone+"')";
var imageObject = new Image();
//imageObject.src=imagenames[index];
var imageNameValue = imagenames[index];
imageObject = document.images[imageNameValue];
//alert(imagenames[index]);
(imageObject.complete)? dispbars(divNamePerouter,divNamePerdone,imageObject.width,imageObject.height) : setTimeout(callCheckLoad, 10);
}
function hideperouter(divNamePerouter,divNamePerdone,imageObjectWidth,imageObjectHeight){
perouterLocal=document.getElementById(divNamePerouter);
perdoneLocal=document.getElementById(divNamePerdone);
tableperouterLocal = document.getElementById("table"+divNamePerouter);
(NS4)? tableperouterLocal.border="0" : tableperouterLocal.style.border="none";
(NS4)? perouterLocal.visibility="hide" : perouterLocal.style.visibility="hidden";
tableperouterLocal.parentElement.parentElement.style.width = imageObjectWidth;
tableperouterLocal.parentElement.parentElement.style.height = imageObjectHeight;
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
function insertImage(imageName,imageSource,imageWidth,imageHeight,loadingMessage,altText)
{
	//alert("asd");
 document.write('<div id="outerMostDiv" style="width:'+imageWidth+';height:'+imageHeight+'">');
 document.write('<div id="divImage" style="position:absolute;">');
 document.write('<img id="'+imageName+'" src="'+imageSource+'" alt="'+altText+'">');
 document.write('</div>');
 document.write('<script>fnShowProgressBar("'+imageName+'",0,0,'+imageWidth+','+imageHeight+',"'+loadingMessage+'");</script>');
 document.write('</div>');
 document.write('</div>');
}