var pic_step;
var pic_percentage = 0;
var max = 0;
var bodyTag = document.getElementsByTagName('body')[0];
var bar;
var overlayer;

function BilderVorladen()
{
	var FischBilder = new Array("wels.png","welskleinklein.png","mollyklein.png","barbeklein.png","blackmollyklein.png");
	var Bilder=new Array("titel.png","titel_impressum.png","tabbing_119.png","titel_informationen.png","tab_item.png","titel_fischbestand.png","alge3.png","alge1.png","alge2.png","water_right.png","corner_close.png","corner_br.png","corner_tr.png","kiesbett.png","holz.png","water.jpg");
	//var Bilder=new Array();
	 for(var i = 0; i < FischBilder.length; i++)
        {
            Bilder.push("left_" + FischBilder[i],"right_" + FischBilder[i]);
		}
	var Vorladen = new Array();
	
	//var Bilder=new Array();
	
	var h = 30; //höhe es ladebalken
	var w = 0; //weite es ladebalken
	
	bodyTag = document.getElementsByTagName('body')[0];
	if ((istUndefined(bodyTag))) {window.setTimeout("BilderVorladen()",200);return};
	
	overlayer = document.createElement("div"); //background-overlay

	
	var loading_info = document.createElement("div"); //farbbalken-container
	cssSetStyle( loading_info,'position','absolute');
		
	
	var max_bar = document.createElement("div"); //farbbalken-container
	max_bar.className ="progress_bar_wrapper";
	cssSetStyle( max_bar,'position','absolute');
	cssSetStyle( max_bar,'background','#d6f246');
	cssSetStyle( max_bar,'height',h+'px');
	cssSetStyle( max_bar,'textAlign','left');
	//cssSetStyle( max_bar,'border','1px solid black');
		
	bar = document.createElement("div"); //balken-fortschritt
	bar.className = "progress_bar";
	cssSetStyle( bar,'position','relative');
	cssSetStyle( bar,'background','green');
	cssSetStyle( bar,'height',h+'px');
	cssSetStyle( bar,'float','left');
	cssSetStyle( bar,'width','0px'); //zustan: 0%
	cssSetStyle( bar,'background',"url('progressbar_content.png')"); 
	cssSetStyle( bar,'backgroundRepeat',"repeat-x"); 
		
		
	//nur noch overlay in den vordergrund packen ...	
	cssSetStyle( bodyTag,'overflow','hidden'); //verstecke die scrollbar zusätzlich ...
	cssSetStyle( overlayer,'position','absolute');
	if (!document.all) cssSetStyle( overlayer,'position','fixed');
	cssSetStyle( overlayer,'top','0px');
	cssSetStyle( overlayer,'height',pageGetWindowSize().y+'px');
	if (document.all) cssSetStyle( overlayer,'height',2*pageGetWindowSize().y+'px');
	cssSetStyle( overlayer,'width',pageGetWindowSize().x+'px');
	cssSetStyle( overlayer,'top','0px');
	cssSetStyle( overlayer,'left','0px');
	cssSetStyle( overlayer,'background','black');//#f9be2f
	cssSetStyle( overlayer,'zIndex','9999');
	cssSetStyle( overlayer,'textAlign','center');
	cssSetStyle( overlayer,'fontSize','3.2em');
	cssSetStyle( overlayer,'color','white');
	bodyTag.appendChild(overlayer);
	
	var w = pageGetWindowSize().x - 400; //weite (mit 200 abstand zu jeder seite)
	pic_step = Math.round(w / Bilder.length); //schrittgröße pro bild
	w = Bilder.length * pic_step; //neue weite, die mit den bildern erreichbar ist
	max = w;
	cssSetStyle( max_bar,'width',w+'px');
	cssSetStyle( max_bar,'left',(pageGetWindowSize().x - w)/2 + 'px'); //zentrieren horz.
	cssSetStyle( max_bar,'top',(pageGetWindowSize().y - h)/2 + 'px'); //zentrieren vert.
	cssSetStyle( max_bar,'height',h+'px');//h+
	cssSetStyle( max_bar,'overflow','hidden');//h+
	
	
	cssSetStyle( loading_info,'width',w+'px');
	cssSetStyle( loading_info,'left',(pageGetWindowSize().x - w)/2 + 'px'); //zentrieren horz.
	cssSetStyle( loading_info,'top',(pageGetWindowSize().y - h)/2 - 70 + 'px'); //zentrieren vert.
	cssSetStyle( loading_info,'textAlign','center'); //zentrieren vert.
	var lnl = document.createTextNode("Lädt das Aquarium...");
	//cssSetStyle(lnl,'color','white');
	var font = document.createElement("font");
	font.style.color = "white";
	font.appendChild(lnl);
	loading_info.appendChild(font);
	
	
	var loading_abbruch = document.createElement("div"); //farbbalken-container
	cssSetStyle( loading_abbruch,'position','absolute');
	cssSetStyle( loading_abbruch,'width',w+'px');
	cssSetStyle( loading_abbruch,'left',(pageGetWindowSize().x - w)/2 + 'px'); //zentrieren horz.
	cssSetStyle( loading_abbruch,'top',(pageGetWindowSize().y - h)/2 + 40 + 'px'); //zentrieren vert.
	cssSetStyle( loading_abbruch,'textAlign','center'); //zentrieren vert.
	cssSetStyle( loading_abbruch,'fontSize','14pt'); //zentrieren vert.
	var lnl = document.createTextNode(" ... hier geht es direkt zum Aquarium ...");
	//cssSetStyle(lnl,'color','white');
	var link_ev = document.createElement("a");
	link_ev.href="javascript:void(0)";
	var font = document.createElement("font");
	font.style.fontSize = "1em";
	font.style.color = "white";
	font.appendChild(lnl);
	link_ev.appendChild(font);
	loading_abbruch.appendChild(link_ev);
	listenerAdd(loading_abbruch,'click',function(){unHide();this.blur();});

	
	
	max_bar.appendChild(bar);
	overlayer.appendChild(loading_info);
	overlayer.appendChild(max_bar); //alles dem overlay hinzufügen
	overlayer.appendChild(loading_abbruch); //alles dem overlay hinzufügen
	
    for(var i = 0; i < Bilder.length; i++)
        {
            Vorladen[i] = new Image();
			Vorladen[i].onload = function(){moveProgressBar();} //fortschrittsbalken bewegen ...
            Vorladen[i].src = Bilder[i];
        }
return;		
}

//overlayer löschen ...
function unHide()
{
	cssSetStyle( bodyTag,'overflow','auto'); //scrollbar anzeigen
	cssSetStyle( overlayer,'visibility','hidden');
	bodyTag.removeChild(overlayer);
}

//ladebalken bewegen ...
function moveProgressBar(i)
{
	//alert(i);
	pic_percentage +=pic_step;
	cssSetStyle( bar,'width',pic_percentage+'px');
	if (pic_percentage >= max ) unHide(); //100% erreicht ...
}