window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, bilder = new Array(), zInterval = null, aktuell=0, pause=false; bilderAnzahl=3; bilderPfad="images/"; geschwindigkeit=4000;

bwPrdOpn           = new Array();
bwPrdOpn[0]        = new Array(new Image(),new Image());
bwPrdOpn[0][0].src = "images/prd_anti_wrinkle_roll_on_n.jpg";
bwPrdOpn[0][1].src = "images/prd_anti_wrinkle_roll_on_a.jpg";
bwPrdOpn[1]        = new Array(new Image(),new Image());
bwPrdOpn[1][0].src = "images/prd_anti_aging_serum_n.jpg";
bwPrdOpn[1][1].src = "images/prd_anti_aging_serum_a.jpg";
bwPrdOpn[2]        = new Array(new Image(),new Image());
bwPrdOpn[2][0].src = "images/prd_anti_aging_creme_n.jpg";
bwPrdOpn[2][1].src = "images/prd_anti_aging_creme_a.jpg";
bwPrdOpn[3]        = new Array(new Image(),new Image());
bwPrdOpn[3][0].src = "images/prd_creme_xtended_n.jpg";
bwPrdOpn[3][1].src = "images/prd_creme_xtended_a.jpg";

bwSpr              = new Array();
bwSpr[0]           = new Array(new Image(),new Image());
bwSpr[0][0].src    = "images/flg_de_a.gif";
bwSpr[0][1].src    = "images/flg_de_n.gif";
bwSpr[1]           = new Array(new Image(),new Image());
bwSpr[1][0].src    = "images/flg_en_a.gif";
bwSpr[1][1].src    = "images/flg_en_n.gif";
bwSpr[2]           = new Array(new Image(),new Image());
bwSpr[2][0].src    = "images/flg_fr_a.gif";
bwSpr[2][1].src    = "images/flg_fr_n.gif";


function so_init() {
	if(!d.getElementById || !d.createElement)return;	
	
	// erstes Bild wird eingelesen
	bild = d.getElementById("bwRight").getElementsByTagName("img");
	bilder[0] = bild[0];
	bilder[0].style.display = "block";
	bilder[0].xOpacity = .99;

	bilder[1] = new Image();
	bilder[1].src = bilderPfad + "rgt_prd_gesicht2.jpg";
	bilder[1].xOpacity = 0;
	d.getElementById("bwRight").appendChild(bilder[1]);

	bilder[2] = new Image();
	bilder[2].src = bilderPfad + "rgt_prd_gesicht3.jpg";
	bilder[2].xOpacity = 0;
	d.getElementById("bwRight").appendChild(bilder[2]);

	bilder[3] = new Image();
	bilder[3].src = bilderPfad + "rgt_prd_gesicht4.jpg";
	bilder[3].xOpacity = 0;
	d.getElementById("bwRight").appendChild(bilder[3]);
	
	setTimeout(so_xfade,geschwindigkeit);
	neuesBild();
}

function so_xfade() {
	cOpacity = bilder[aktuell].xOpacity;
	nIndex   = bilder[aktuell+1]?aktuell+1:0;
	nOpacity = bilder[nIndex].xOpacity;
	
	cOpacity -= .05; 
	nOpacity += .05;
	
	bilder[nIndex].style.display = "block";
	bilder[aktuell].xOpacity     = cOpacity;
	bilder[nIndex].xOpacity      = nOpacity;
	
	setOpacity(bilder[aktuell]); 
	setOpacity(bilder[nIndex]);
	
	if(cOpacity <= 0) {
		bilder[aktuell].style.display = "none";
		aktuell = nIndex;
		setTimeout(so_xfade, geschwindigkeit);
		neuesBild();
	} else {
		setTimeout(so_xfade, 50);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity > .99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity    = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter     = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}	
}

function neuesBild() {
	// immer ein Bild vorausladen
	if ( (aktuell < (bilderAnzahl-2)) && (bilder.length < bilderAnzahl) ) {
		bilder[aktuell+2]          = new Image();
		bilder[aktuell+2].src      =  bilderPfad + "0" + ((aktuell+3)<10 ? "0" + (aktuell+3) : (aktuell+3)) + ".jpg"
		bilder[aktuell+2].xOpacity = 0;
		d.getElementById("bwRight").appendChild(bilder[aktuell+2]);
	}
}  

function hideLayer(whichLayer) {
  if (document.getElementById) {
    document.getElementById(whichLayer).style.visibility = "hidden";
  } else if (document.all) {
    document.all[whichlayer].style.visibility = "hidden";
  } else if (document.layers) {
    document.layers[whichLayer].visibility = "hidden";
  }
}

function showLayer(whichLayer) {
  if (document.getElementById) {
    document.getElementById(whichLayer).style.visibility = "visible";
  } else if (document.all) {
    document.all[whichlayer].style.visibility = "visible";
  } else if (document.layers) {
    document.layers[whichLayer].visibility = "visible";
  }
}

function handleClick(whichClick, ebene) {
  if (whichClick == "hide") {
    hideLayer("bwRight");
    if (ebene == "wrinkle") {
      showLayer("idRgtWrinkle");
      showLayer("idRgtWrinkleBild1");
      showLayer("idRgtWrinkleLinie1");
      showLayer("idRgtWrinkleUeb1");
      showLayer("idRgtWrinkleText1");
    }
    if (ebene == "serum") {
      showLayer("idRgtSerum");
      showLayer("idRgtSerumBild1");
      showLayer("idRgtSerumLinie1");
      showLayer("idRgtSerumUeb1");
      showLayer("idRgtSerumText1");
    }
    if (ebene == "creme") {
      showLayer("idRgtCreme");
      showLayer("idRgtCremeBild1");
      showLayer("idRgtCremeLinie1");
      showLayer("idRgtCremeUeb1");
      showLayer("idRgtCremeText1");
    }
    if (ebene == "xtended") {
      showLayer("idRgtXtended");
      showLayer("idRgtXtendedBild1");
      showLayer("idRgtXtendedLinie1");
      showLayer("idRgtXtendedUeb1");
      showLayer("idRgtXtendedText1");
    }
  } else if (whichClick == "show") {
    if (ebene == "wrinkle") {
      hideLayer("idRgtWrinkle");
      hideLayer("idRgtWrinkleBild1");
      hideLayer("idRgtWrinkleLinie1");
      hideLayer("idRgtWrinkleUeb1");
      hideLayer("idRgtWrinkleText1");
    }
    if (ebene == "serum") {
      hideLayer("idRgtSerum");
      hideLayer("idRgtSerumBild1");
      hideLayer("idRgtSerumLinie1");
      hideLayer("idRgtSerumUeb1");
      hideLayer("idRgtSerumText1");
    }
    if (ebene == "creme") {
      hideLayer("idRgtCreme");
      hideLayer("idRgtCremeBild1");
      hideLayer("idRgtCremeLinie1");
      hideLayer("idRgtCremeUeb1");
      hideLayer("idRgtCremeText1");
    }
    if (ebene == "xtended") {
      hideLayer("idRgtXtended");
      hideLayer("idRgtXtendedBild1");
      hideLayer("idRgtXtendedLinie1");
      hideLayer("idRgtXtendedUeb1");
      hideLayer("idRgtXtendedText1");
    }
    showLayer("bwRight");
  }
}
  
function produkte_main(bildname, zustand, bildnr) {
  document.images[bildname].src=bwPrdOpn[bildnr][zustand].src;
  
  if (zustand == 1) {
    handleClick('hide', bildname);
  } else {
    handleClick('show', bildname);
  }
}

function sprache(bildname, zustand, bildnr) {
  document.images[bildname].src=bwSpr[bildnr][zustand].src;
}