// JavaScript Document

// Images Variablen
var varfadego = 0;
var containerid = "";
var fadetime = 0;
var fadetime2 = 0;
var imageurl = "";
var allimg = 0;
var activeimg = 0;
var nextimg = 0;
var activelayer = 0;
var nextlayer = 0;
var finall = 0;
var shiny1vis = 0;
var shiny2vis = 0;
var aktivinterval = "";
var intervaltime = 20000;
var slideactive = 0;
var varimagetype = "";



// Init
var topimagesbasic = new Array();
topimagesbasic[0] = new Object();
topimagesbasic[0]["name"] = "Extend";
topimagesbasic[0]["image"] = "de_mainimage_extend_1_big.jpg";
topimagesbasic[0]["imageshort"] = "de_mainimage_extend_1_short.jpg";
topimagesbasic[0]["imgid"] = "extend_1";
topimagesbasic[0]["butposx"] = 595;
topimagesbasic[0]["butposy"] = 110;
topimagesbasic[0]["gotourl"] = 'EXTENDED_LIFE_1250.html';

topimagesbasic[1] = new Object();
topimagesbasic[1]["name"] = "Energysaver";
topimagesbasic[1]["image"] = "de_mainimage_energysaver_1_big.jpg";
topimagesbasic[1]["imageshort"] = "de_mainimage_energysaver_1_short.jpg";
topimagesbasic[1]["imgid"] = "energysaver_1";
topimagesbasic[1]["butposx"] = 498;
topimagesbasic[1]["butposy"] = 277;
topimagesbasic[1]["gotourl"] = 'ENERGY_SAVER_1039.html';

topimagesbasic[2] = new Object();
topimagesbasic[2]["name"] = "Energysaver";
topimagesbasic[2]["image"] = "de_mainimage_energysaver_2_big.jpg";
topimagesbasic[2]["imageshort"] = "de_mainimage_energysaver_2_short.jpg";
topimagesbasic[2]["imgid"] = "energysaver_2";
topimagesbasic[2]["butposx"] = 727;
topimagesbasic[2]["butposy"] = 239;
topimagesbasic[2]["gotourl"] = 'ENERGY_SAVER_1039.html';

topimagesbasic[3] = new Object();
topimagesbasic[3]["name"] = "Biovital";
topimagesbasic[3]["image"] = "de_mainimage_biovital_1_big.jpg";
topimagesbasic[3]["imageshort"] = "de_mainimage_biovital_1_short.jpg";
topimagesbasic[3]["imgid"] = "biovital_1";
topimagesbasic[3]["butposx"] = 383;
topimagesbasic[3]["butposy"] = 128;
topimagesbasic[3]["gotourl"] = 'NARVA_BIO_vital_1032.html';

topimagesbasic[4] = new Object();
topimagesbasic[4]["name"] = "Biovital";
topimagesbasic[4]["image"] = "de_mainimage_biovital_2_big.jpg";
topimagesbasic[4]["imageshort"] = "de_mainimage_biovital_2_short.jpg";
topimagesbasic[4]["imgid"] = "biovital_2";
topimagesbasic[4]["butposx"] = 764;
topimagesbasic[4]["butposy"] = 281;
topimagesbasic[4]["gotourl"] = 'NARVA_BIO_vital_1032.html';

topimagesbasic[5] = new Object();
topimagesbasic[5]["name"] = "Circadian";
topimagesbasic[5]["image"] = "de_mainimage_circadian_1_big.jpg";
topimagesbasic[5]["imageshort"] = "de_mainimage_circadian_1_short.jpg";
topimagesbasic[5]["imgid"] = "circadian_1";
topimagesbasic[5]["butposx"] = 777;
topimagesbasic[5]["butposy"] = 220;
topimagesbasic[5]["gotourl"] = 'CIRCADIAN_light_1249.html';

topimagesbasic[6] = new Object();
topimagesbasic[6]["name"] = "Foodlight";
topimagesbasic[6]["image"] = "de_mainimage_foodlight_1_big.jpg";
topimagesbasic[6]["imageshort"] = "de_mainimage_foodlight_1_short.jpg";
topimagesbasic[6]["imgid"] = "foodlight_1";
topimagesbasic[6]["butposx"] = 597;
topimagesbasic[6]["butposy"] = 195;
topimagesbasic[6]["gotourl"] = 'FOOD_light_1034.html';

topimagesbasic[7] = new Object();
topimagesbasic[7]["name"] = "Foodlight";
topimagesbasic[7]["image"] = "de_mainimage_foodlight_2_big.jpg";
topimagesbasic[7]["imageshort"] = "de_mainimage_foodlight_2_short.jpg";
topimagesbasic[7]["imgid"] = "foodlight_2";
topimagesbasic[7]["butposx"] = 675;
topimagesbasic[7]["butposy"] = 83;
topimagesbasic[7]["gotourl"] = 'FOOD_light_1034.html';

topimagesbasic[8] = new Object();
topimagesbasic[8]["name"] = "Igloo";
topimagesbasic[8]["image"] = "de_mainimage_igloo_1_big.jpg";
topimagesbasic[8]["imageshort"] = "de_mainimage_igloo_1_short.jpg";
topimagesbasic[8]["imgid"] = "igloo_1";
topimagesbasic[8]["butposx"] = 760;
topimagesbasic[8]["butposy"] = 220;
topimagesbasic[8]["gotourl"] = 'IGLOO__1036.html';

topimagesbasic[9] = new Object();
topimagesbasic[9]["name"] = "Safety";
topimagesbasic[9]["image"] = "de_mainimage_safety_1_big.jpg";
topimagesbasic[9]["imageshort"] = "de_mainimage_safety_1_short.jpg";
topimagesbasic[9]["imgid"] = "safety_1";
topimagesbasic[9]["butposx"] = 665;
topimagesbasic[9]["butposy"] = 106;
topimagesbasic[9]["gotourl"] = 'SAFETY__1037.html';

topimagesbasic[10] = new Object();
topimagesbasic[10]["name"] = "Color";
topimagesbasic[10]["image"] = "de_mainimage_color_1_big.jpg";
topimagesbasic[10]["imageshort"] = "de_mainimage_color_1_short.jpg";
topimagesbasic[10]["imgid"] = "color_1";
topimagesbasic[10]["butposx"] = 358;
topimagesbasic[10]["butposy"] = 131;
topimagesbasic[10]["gotourl"] = 'Colour_Light_1035.html';

topimagesbasic[11] = new Object();
topimagesbasic[11]["name"] = "Color";
topimagesbasic[11]["image"] = "de_mainimage_color_2_big.jpg";
topimagesbasic[11]["imageshort"] = "de_mainimage_color_2_short.jpg";
topimagesbasic[11]["imgid"] = "color_2";
topimagesbasic[11]["butposx"] = 768;
topimagesbasic[11]["butposy"] = 287;
topimagesbasic[11]["gotourl"] = 'COLOUR_COLOUR_mix_1035.html';

topimagesbasic[12] = new Object();
topimagesbasic[12]["name"] = "Movie";
topimagesbasic[12]["image"] = "de_mainimage_movie_1_big.jpg";
topimagesbasic[12]["imageshort"] = "de_mainimage_movie_1_short.jpg";
topimagesbasic[12]["imgid"] = "movie_1";
topimagesbasic[12]["butposx"] = 718;
topimagesbasic[12]["butposy"] = 160;
topimagesbasic[12]["gotourl"] = 'MEDIA_light_1041.html';

topimagesbasic[13] = new Object();
topimagesbasic[13]["name"] = "Oceanicreptilight";
topimagesbasic[13]["image"] = "de_mainimage_oceanandreptile_1_big.jpg";
topimagesbasic[13]["imageshort"] = "de_mainimage_oceanandreptile_1_short.jpg";
topimagesbasic[13]["imgid"] = "oceanandreptile_1";
topimagesbasic[13]["butposx"] = 750;
topimagesbasic[13]["butposy"] = 145;
topimagesbasic[13]["gotourl"] = 'Oceanic_Reptilight_1033.html';

topimagesbasic[14] = new Object();
topimagesbasic[14]["name"] = "Oceanicreptilight";
topimagesbasic[14]["image"] = "de_mainimage_oceanandreptile_2_big.jpg";
topimagesbasic[14]["imageshort"] = "de_mainimage_oceanandreptile_2_short.jpg";
topimagesbasic[14]["imgid"] = "oceanandreptile_2";
topimagesbasic[14]["butposx"] = 768;
topimagesbasic[14]["butposy"] = 287;
topimagesbasic[14]["gotourl"] = 'Oceanic_Reptilight_1033.html';

// Neues Randomarray erzeugen
var topimages = new Array();
var a = 0;
var merkname = "";
var varrand = 0;
// erster Datensatz
topimages[0] = new Object();
topimages[0] = topimagesbasic[0];
merkname = topimages[0]["name"];
// Rest einlesen
for(i=1;i <= topimagesbasic.length-1;i++){
	// Wenn nächster Datensatz den gleichen Name hat
	
	if(merkname == topimagesbasic[i]["name"]){
		
		// Random setzen
		var varrand = (Math.random() * 100)+1;
		var varrand = Math.round(varrand);
		if (varrand == 0) varrand++;
		//alert(varrand);
		
		// Random auswerten
		if(varrand >=1 && varrand <=50){ // vorherigen Datensatz in neuem Array überschreiben
			topimages[a] = topimagesbasic[i];
			// Merkname setzen
			merkname = topimages[a]["name"];
		}else{ // Datensatz übergehen (nix machen)
			//i++;
		}
		
		
	}else{ // Wenn nächster Datensatz NICHT den gleichen Namen hat
		
		a++;
		topimages[a] = new Object();
		topimages[a] = topimagesbasic[i];
		// Merkname setzen
		merkname = topimages[a]["name"];
		
		
	}
	
	
}


function headimage_loadrandom(varid,time,imagetype,randomimg){
	
	containerid = varid;
	fadetime = time;
	fadetime2 = fadetime-1000;
	activelayer = 1;
	varimagetype = imagetype;
	allimg = topimages.length;
	
	// IE6 Fading
	isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
	//alert(isIE6);
	//if(isIE6 == true){
		//fadetime = 0;
		//fadetime2 = 0;
	//}
	
	if(document.getElementById(containerid)){
		
		if(randomimg != 0 && topimages[randomimg]){ //Kein Random wenn 0 oder Numme rnicht existiert
			activeimg = randomimg-1;
		}else{ // Random Image
			var zvon = 0;
			var zbis = topimages.length;
			var temp = (Math.random() * zbis) + zvon;
			var temp = Math.round(temp);
			if (temp == 0) temp++;
			temp--;
			activeimg = temp;
		}
		
		if(varimagetype == 'home'){
			//alert('home');
			// Klassen
			mainimageclass = "lay_mainimage"+activelayer+" mi_"+topimages[activeimg]["imgid"];
			shinyclassn1 = "lay_shiny1 sh_"+topimages[activeimg]["imgid"]+"_1";
			shinyclassn2 = "lay_shiny2 sh_"+topimages[activeimg]["imgid"]+"_2";
			document.getElementById('mainimage'+activelayer).className = mainimageclass;
			document.getElementById('shiny1'+activelayer).className = shinyclassn1;
			document.getElementById('shiny2'+activelayer).className = shinyclassn2;
			//alert(mainimageclass);
			//Image laden
			var imgurl = imageurl+"mainimages/"+topimages[activeimg]["image"];
			var shine1url = imageurl+"mainimages/"+"shine_"+topimages[activeimg]["imgid"]+"_big_1.jpg";
			var shine2url = imageurl+"mainimages/"+"shine_"+topimages[activeimg]["imgid"]+"_big_2.jpg";
		}
		if(varimagetype == 'inside'){
			//alert('inside');
			// Klassen
			mainimageclass = "lay_mainimage_short"+activelayer+" mi_short_"+topimages[activeimg]["imgid"];
			shinyclassn1 = "lay_shiny1 sh_"+topimages[activeimg]["imgid"]+"_1";
			shinyclassn2 = "lay_shiny2_short sh_"+topimages[activeimg]["imgid"]+"_short";
			document.getElementById('mainimage'+activelayer).className = mainimageclass;
			document.getElementById('shiny1'+activelayer).className = shinyclassn1;
			document.getElementById('shiny2'+activelayer).className = shinyclassn2;
			
			//Image laden
			var imgurl = imageurl+"mainimages/"+topimages[activeimg]["imageshort"];
			var shine1url = imageurl+"mainimages/"+"shine_"+topimages[activeimg]["imgid"]+"_big_1.jpg";
			var shine2url = imageurl+"mainimages/"+"shine_"+topimages[activeimg]["imgid"]+"_short.jpg";
			//alert(topimages[activeimg]["imageshort"]);
		}
		
		var arrloadimg = new Array();
		arrloadimg[0] = imgurl;
		arrloadimg[1] = shine1url;
		arrloadimg[2] = shine2url;
		finall = 1;
		preloader(arrloadimg,1);
		
		// Button Moreinfo setzen
		setlink(activeimg);
	}
}

function preloader(arrloadimg,imgnr){
	//alert('preload:');
	thisimage = new Image(); 
	//alert(thisimage.src);
	
	//Listener anhängen
	if (thisimage.addEventListener) { // DOM
    	thisimage.addEventListener ("load", ladenfertsch, false);
  	}else if (thisimage.attachEvent) { // IE
    	thisimage.attachEvent("onload", function(){ladenfertsch()});
  	}else{ // ELSE
		thisimage.onload = ladenfertsch();
	}
	
	function ladenfertsch(){
		//alert('geladen'+arrloadimg[imgnr-1]);
		if(imgnr < arrloadimg.length){
			//alert('neuladen:'+varid);
			preloader(arrloadimg,imgnr+1);
		}else{
			//alert('fertsch');
			if(finall == 1) finalload();
			if(finall == 2) switchload();
		}
	}
	thisimage.onerror = function(){
		//alert('error');	
	}
	//alert(arrloadimg[imgnr-1]);
	thisimage.src = arrloadimg[imgnr-1];
}

function finalload(){
	
	//alert('finalload:');
	// Bild faden
	fadein(containerid,fadetime);
	//Loader ausfaden
	fadeout('imageloader',500);
	// Shiny faden nach Zeit x
	setTimeout('fadein(\'shiny_all\'+activelayer,fadetime2)', fadetime);
	shiny1vis = 1;
	// Link einblenden
	setTimeout('fadelink()', 2000);
	if(varimagetype == 'home'){ // Nur auf Startseite
		//alert('home');
		// Ablauf starten
		aktivinterval = window.setInterval ('shineout()', intervaltime);
		// Pager zeichnen
		setTimeout('setpager()', 1000);
	}
	
}

function setpager(){
	//alert('setpager');
	pagerout = "";
	pagerelem1 = '<span class="numberblock" id="page';
	pagerelem2 = '"><span class="x1">&nbsp;</span><a href="javascript:;" class="number ';
	pagerelem3 = '" onclick="';
	pagerelem4 = '">&nbsp;</a></span>';
	
	
	breaker = '<div class="break">&nbsp;</div>'
	for(i=1;i <= allimg;i++){
		if(i==(activeimg+1)){
			activeclass = "nr"+i;
			clickimage = "";
		}else{
			activeclass = "";
			clickimage = "clickimagenow('"+i+"');"
		}
		pageelemout = pagerelem1+i+pagerelem2+activeclass+pagerelem3+clickimage+pagerelem4;
		pagerout+=pageelemout+"\n";
	}
	pagerout+=breaker;
	//alert(pagerout);
	document.getElementById('imagecounter').innerHTML = pagerout;
	// Pager einblenden
	pagetimer = 1500;
	for(i=1;i <= allimg;i++){
		setTimeout('fadein(\'page'+i+'\',fadetime2)', pagetimer);
		pagetimer = pagetimer+70;
	}
	//setTimeout('setlink(activeimg)', 1000);
}

function setlink(wer){
	// Button Moreinfo setzen
	document.getElementById('but_infolink').className = "lay_image_infolink2 but_" + topimages[wer]["imgid"];
	//alert("lay_image_infolink2 but_" + topimages[wer]["shiny"]);
	if(varimagetype == 'home'){ // Nur auf Startseite
		document.getElementById('image_moreinfo').style.top = topimages[wer]["butposy"]+"px";
		document.getElementById('image_moreinfo').style.left = topimages[wer]["butposx"]+"px";
	}else{
		document.getElementById('image_moreinfo').style.top = "146px";
		document.getElementById('image_moreinfo').style.left = "832px";
	}
	document.getElementById('image_moreinfo').onclick = function(){
		window.location.href = topimages[wer]["gotourl"]; 	
	}	
}
function fadelink(){
	fadein('image_moreinfo',1000);	
}

// Image Floater
function shineout(){
	
	//Pager ausschalten
	for(i=1;i <= allimg;i++){
		fadeout('page'+i, 200);
	}
	// Link ausschalten
	fadeout('image_moreinfo', 200);
	
	
	if(shiny1vis == 1){
		fadeout('shiny_all1', 200);
		shiny1vis = 0;
	}
	if(shiny2vis == 1){
		fadeout('shiny_all2', 200);
		shiny2vis = 0;
	}
	floatimage();
	
}

function floatimage(){
	//fadein('imageloader',200);
	// nächstes Bild ermitteln
	if((activeimg+1)==allimg){
		nextimg = 0;
	}else{
		nextimg = activeimg+1;	
	}
	//alert(nextimg);
	
	//Layer ermitteln
	if(activelayer==1){
		nextlayer = 2;
	}else{
		nextlayer = 1;
	}
	//alert(nextlayer);
	
	// Klassen
	mainimageclass = "lay_mainimage"+nextlayer+" mi_"+topimages[nextimg]["imgid"];
	shinyclassn1 = "lay_shiny1 sh_"+topimages[nextimg]["imgid"]+"_1";
	shinyclassn2 = "lay_shiny2 sh_"+topimages[nextimg]["imgid"]+"_2";
	//alert(mainimageclass);
	document.getElementById(('mainimage'+nextlayer)).className = mainimageclass;
	document.getElementById('shiny1'+nextlayer).className = shinyclassn1;
	document.getElementById('shiny2'+nextlayer).className = shinyclassn2;
	
	//Image laden
	var imgurl = imageurl+"mainimages/"+topimages[nextimg]["image"];
	var shine1url = imageurl+"mainimages/"+"shine_"+topimages[nextimg]["imgid"]+"_big_1.jpg";
	var shine2url = imageurl+"mainimages/"+"shine_"+topimages[nextimg]["imgid"]+"_big_2.jpg";
	
	var arrloadimg = new Array();
	arrloadimg[0] = imgurl;
	arrloadimg[1] = shine1url;
	arrloadimg[2] = shine2url;
	finall = 2;
	preloader(arrloadimg,1,2);
	
}

function switchload(){
	//alert('switch'+nextlayer);
	//fadeout('imageloader',500);
	
	if(nextlayer == 2){
		fadein('mainimage2',fadetime);
		setTimeout('fadein(\'shiny_all2\',fadetime2)', fadetime);
		shiny2vis = 1;
	}else{
		fadeout('mainimage2',fadetime);
		setTimeout('fadein(\'shiny_all1\',fadetime2)', fadetime);
		shiny1vis = 1;
	}
	activeimg = nextimg;
	activelayer = nextlayer;
	
	
	//alert(activeimg);
	//Pager einblenden
	setTimeout('setpager()', 1500);
	// Button Moreinfo setzen
	setTimeout('setlink(nextimg)', 2000);
	// Link einblenden
	setTimeout('fadelink()', 2500);
}

// Klick Image
function clickimagenow(wer){
	//alert(wer);
	fadestop();
	//alert(aktivinterval);
	// Bild setzen, Rest macht die folgende Funkton
	activeimg = wer-2;
	// Shine ausblenden und Fader starten
	shineout();
}


function fadein(id,time){
	MM_effectAppearFade(id, time, 0, 100, false);	
}
function fadeout(id,time){
	MM_effectAppearFade(id, time, 100, 0, false);	
}

function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}