// JavaScript Document

var AllElemsDiv = 0;
var AllElemsDivCount = 0;
var AllElemsA = 0;
var ActRef = 0;
var NewRef = 0;
var DataBlockPosLeft = "0";
var DataBlockPosBottom = "0";
var ImgLoaded = 0;
var ClickCheck = 1;

function InitPage(){
	CountElems();
	WindowWidth();
	SetHMTLElems();
	RefreshHMTLElems();
}

function CountElems(){ // Elemente zählen und IDS vergeben
	
	AllElemsDiv = document.getElementsByTagName('div'); //HMTL Elemente
	AllElemsA = document.getElementsByTagName('a'); //HMTL Elemente
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsDiv.length;i++){
		if(AllElemsDiv[i].className.indexOf('referenzblock')!=-1){ // Data Elemente
			AllElemsDiv[i].id = "referenzblock_"+IdCounter;
			IdCounter++;
		}
	}
	AllElemsDivCount = IdCounter;
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsDiv.length;i++){
		if(AllElemsDiv[i].className.indexOf('back1')!=-1){ // Data Elemente
			AllElemsDiv[i].id = "back1_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsDiv.length;i++){
		if(AllElemsDiv[i].className.indexOf('back2')!=-1){ // Data Elemente
			AllElemsDiv[i].id = "back2_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsDiv.length;i++){
		if(AllElemsDiv[i].className.indexOf('datablock')!=-1){ // Data Elemente
			AllElemsDiv[i].id = "datablock_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsDiv.length;i++){
		if(AllElemsDiv[i].className.indexOf('sn_block')!=-1){ // Data Elemente
			AllElemsDiv[i].id = "sn_block_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsDiv.length;i++){
		if(AllElemsDiv[i].className.indexOf('ref_info')!=-1){ // Data Elemente
			AllElemsDiv[i].id = "ref_info_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsDiv.length;i++){
		if(AllElemsDiv[i].className.indexOf('zahl')!=-1){ // Data Elemente
			AllElemsDiv[i].id = "zahl_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsA.length;i++){
		if(AllElemsA[i].className.indexOf('sn_link')!=-1){ // Data Elemente
			AllElemsA[i].id = "sn_link_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsA.length;i++){
		if(AllElemsA[i].className.indexOf('but_plus')!=-1){ // Data Elemente
			AllElemsA[i].id = "but_plus_"+IdCounter;
			IdCounter++;
		}
	}
	
	var IdCounter = 0;
	for(var i=0;i<AllElemsA.length;i++){
		if(AllElemsA[i].className.indexOf('but_minus')!=-1){ // Data Elemente
			AllElemsA[i].id = "but_minus_"+IdCounter;
			IdCounter++;
		}
	}
	
		
}

function SetHMTLElems(){
	
	// Je nach Anzahl der Contentelemente (AllElemsDivCount) durchlaufen
	for(var i=0;i<AllElemsDivCount;i++){ 
		// Datablocks nach außen setzen
		$("datablock_"+i).style.right = "-950px";
		// Z-Index der Blöcke setzen
		$("referenzblock_"+i).style.zIndex = "100";
		// Zahl nach außen setzen
		$('zahl_'+i).style.left = "-400px";
		// Weitere Referenz Blöcke nach außen setzen (bis auf den ersten), den ersten aktivieren
		if(i==0){
			// Bild im Hintergrundladen
			ImgLoaded = 0;
			LoadURL = 'referenzen/ref'+(i+1)+'/superback.jpg';
			preloader(LoadURL,ActRef);
			// Elemente einblenden
			$("referenzblock_"+i).style.left = "0%";
			window.setTimeout("FadeInOutBack(\"back1_\","+i+",0.8,100)", 500);
			window.setTimeout("MorphThis('datablock_0','right:"+DataBlockPosLeft+";',0.8,0,0)", 1500);
			window.setTimeout("FinalLoadSuperBack("+ActRef+")", 2500);
			
		}
		// Plus-Minus Button setzen
		if($("but_plus_"+i)){ // existiert der Button
			$("but_plus_"+i).id2 = i;
			$("but_plus_"+i).onclick = function(){
				MorphThis('datablock_'+this.id2,'height:465px;',0.8,0,0);
				MorphThis('ref_info_'+this.id2,'top:365px;',0.8,0,0);
				this.style.top = "-5000px";
				$("but_minus_"+this.id2).style.top = "363px";
			}
		}
		if($("but_minus_"+i)){ // existiert der Button
			$("but_minus_"+i).id2 = i;
			$("but_minus_"+i).onclick = function(){
				MorphThis('datablock_'+this.id2,'height:395px;',0.8,0,0);
				MorphThis('ref_info_'+this.id2,'top:400px;',0.8,0,0);
				this.style.top = "-5000px";
				$("but_plus_"+this.id2).style.top = "363px";
			}
		}
	}
	
	// Navielemente (max 10) durchlaufen und nicht benötigte ausblenden, je nach Anzahl Content
	for(var i=0;i<10;i++){ 
		if(i<AllElemsDivCount){
			$("sn_link_"+i).style.display = "block"; // Gesamtes Navielement einlenden (nach Anzahl des Contents)
			// IDs für Span innerhalb des Navielementes vergeben
			var HoverSpan = $("sn_link_"+i).getElementsByTagName('span');
			HoverSpan[0].id = "sn_block_sub_1_"+i;
			HoverSpan[1].id = "sn_block_sub_2_"+i;
			// Die ID des Span2 an das Navielement hängen
			$("sn_link_"+i).id2 = "sn_block_sub_2_"+i;
			$("sn_link_"+i).id3 = i;
			// Mausaktionen für das Navielement
			$("sn_link_"+i).onmouseover = function(){ // MouseOver 
				$(this.id2).style.display = "block"; // Span2 einblenden
				MorphThis(this,'top:10px;',0.2,0,0); // Navielem bewegen
			}
			$("sn_link_"+i).onmouseout = function(){ // MouseOver 
				$(this.id2).style.display = "none"; // Span2 ausblenden
				MorphThis(this,'top:0px;',0.2,1,0); // Navielem zurückbewegen
			}
			$("sn_link_"+i).onclick = function(){ // MouseClick
				if(ClickCheck == 0){
					// Neue Referenz setzen
					NewRef = this.id3;
					// Aktionen ausführen
					SetActive();
				}
				
			}
		}else{
			$("sn_link_"+i).style.display = "none"; // Gesamtes Navielement ausblendenn (nach Anzahl des Contents)
		}
		// Link für CC-Seite setzen und normalen deaktivieren
		if(i==(AllElemsDivCount-1)){
			// normalen Navipunkt ausblenden
			$("sn_link_"+i).style.display = "none"; // Gesamtes Navielement ausblendenn (nach Anzahl des Contents)
			// Link auf Logo
			$("logolink").id3 = i;
			$("logolink2").id3 = i;
			$("logolink").onclick = function(){ // MouseClick
				if(ClickCheck == 0){
					// Neue Referenz setzen
					NewRef = this.id3;
					// Aktionen ausführen
					SetActive();
				}
			}
			$("logolink2").onclick = function(){ // MouseClick
				if(ClickCheck == 0){
					// Neue Referenz setzen
					NewRef = this.id3;
					// Aktionen ausführen
					SetActive();
				}
			}
		}
	}
	
	SetSupernavi(); // Supernavi aktiv setzen
	
}

function SetActive(){
	if(NewRef != ActRef){
		ClickCheck = 1;
		SetLogoItemsOff();
		//alert(ActRef + "/" + NewRef);
		// Supernavi ausblenden
		$('supernavi').style.top = "-70px";
		$('zahl_'+ActRef).style.left = "-400px";
		SetSupernavi(); // Supernavi aktiv setzen
		// Loader anzeigen
		window.setTimeout("FadeInOutBack(\"loader\",'',0,100)", 200);
		// Bild im Hintergrundladen
		ImgLoaded = 0;
		LoadURL = 'referenzen/ref'+(NewRef+1)+'/superback.jpg';
		preloader(LoadURL,ActRef);
		// Alte Referenzblock normalen ZIndex geben
		$("referenzblock_"+ActRef).style.zIndex = "100";
		// Datablock der aktuellen Ref bewegen
		window.setTimeout("MorphThis('datablock_"+ActRef+"','right:2000px;',0.8,0,0)", 400)
		// Neuen Referenzblock höheren ZIndex geben
		$("referenzblock_"+NewRef).style.zIndex = "200";
		// Neuen Referenzblock auf Bildschirmfläche setzen
		$("referenzblock_"+NewRef).style.left = "0%";
		// Hintergrundfarbe neue Referenz einblenden
		window.setTimeout("FadeInOutBack('back1_',"+NewRef+",0.8,100)", 1200);
		window.setTimeout("MorphThis('datablock_"+NewRef+"','right:"+DataBlockPosLeft+";',0.8,0,0)", 2200);
		window.setTimeout("FinalLoadSuperBack("+NewRef+")", 3200);
	}
}

function FinalLoadSuperBack(RefID){
	AktivImage = window.setInterval("FinalLoadSuperBack2("+RefID+")", 500);
}
function FinalLoadSuperBack2(RefID){
	if(ImgLoaded == 1){
		ImgLoaded = 0;
		window.clearInterval(AktivImage);
		$("back2_"+RefID).innerHTML = '<img src="referenzen/ref'+(RefID+1)+'/superback.jpg" alt="">';
		//alert($("back2_"+RefID).innerHTML);
		window.setTimeout("FadeInOutBack(\"back2_\","+RefID+",0.8,100)", 0);
		window.setTimeout("FadeInOutBack(\"loader\",'',0.5,0)", 1000);
		window.setTimeout("ClickFinal()", 2000);
		
		
		
		
		
	}
}

function SetLogoItemsOff(){
	// Diverse Elemente setzenif(NewRef+1 == AllElemsDivCount){
			$("logolink").style.display = "none";
			$("logo_blue").style.display = "none";
			$("work").style.display = "none";
			$("work_klein").style.display = "none";
		
}
function SetLogoItems(){
	// Diverse Elemente setzen
		if(NewRef+1 == AllElemsDivCount){
			$("logolink").style.display = "none";
			$("logo_blue").style.display = "block";
		}else{
			$("logolink").style.display = "block";
			$("logo_blue").style.display = "none";
		}
}

function ClickFinal(){
	SetLogoItems();
	if(ActRef == 0 && NewRef == 0){
		$('zahl_'+ActRef).innerHTML = ActRef+1;
		
	}else{
		$('zahl_'+NewRef).innerHTML = NewRef+1; // Zahl setzen
		
		// Wenn Referenz letzte (CC!) dann Zahl extra setzen
		if(NewRef+1 == AllElemsDivCount){
			$('zahl_'+NewRef).innerHTML = 13; // Zahl setzen
		}
		
		// Alte Referenz alles zurücksetzen
		$("referenzblock_"+ActRef).style.left = "100%";
		$("referenzblock_"+ActRef).style.zIndex = "100";
		window.setTimeout("FadeInOutBack(\"back1_\","+ActRef+",0,0)", 0);
		window.setTimeout("FadeInOutBack(\"back2_\","+ActRef+",0,0)", 0);
		window.setTimeout("MorphThis('datablock_"+ActRef+"','right:-950px;',0,0,0)", 0);
		
		// Aktuelle Referenz setzen
		ActRef = NewRef;
		NewRef = 0;	
	}
	WindowWidth();
	window.setTimeout("MorphThis('supernavi','top:-10px;',0.5,0,0)", 0);
	window.setTimeout("MorphThis('zahl_"+ActRef+"','left:-40px;',0.5,0,0)", 500);
	window.setTimeout("ClickCheckNow()", 1000);
}

function ClickCheckNow(){
	ClickCheck = 0;
}

function SetSupernavi(){
	
	for(var i=0;i<AllElemsDivCount;i++){ // Links zurück setzen
		
		// Link nach oben scheiben
		$("sn_link_"+i).style.top = "0px";
		// Span zurücksetzen
		var HoverSpan = $("sn_link_"+i).getElementsByTagName('span');
		HoverSpan[1].style.display = "none";
		$("sn_link_"+i).onmouseover = function(){ // MouseOver 
				$(this.id2).style.display = "block"; // Span2 einblenden
				MorphThis(this,'top:10px;',0.2,0,0); // Navielem bewegen
		}
		$("sn_link_"+i).onmouseout = function(){ // MouseOver 
				$(this.id2).style.display = "none"; // Span2 ausblenden
				MorphThis(this,'top:0px;',0.2,1,0); // Navielem zurückbewegen
		}
		$("sn_link_"+i).onclick = function(){ // MouseClick
				// Neue Referenz setzen
				NewRef = this.id3;
				// Aktionen ausführen
				SetActive();
		}
		
	}
	
	$("sn_link_"+NewRef).style.top = "10px";
	var HoverSpan = $("sn_link_"+NewRef).getElementsByTagName('span');
	HoverSpan[1].style.display = "block";
	$("sn_link_"+NewRef).onmouseover = function(){};
	$("sn_link_"+NewRef).onmouseout = function(){};
	$("sn_link_"+NewRef).onclick = function(){};
	
}

function RefreshHMTLElems(){
	// Je nach Anzahl der Contentelemente (AllElemsDivCount) durchlaufen
	WindowWidth();
	for(var i=0;i<AllElemsDivCount;i++){ 
		//alert(i);
		SetPosition("datablock_"+i)
	}
}
function WindowWidth(){
	// Weite des Screens ermitteln (Browser)
	if(document.body.clientWidth){
		WinWidth = document.body.clientWidth;
		WinHeight = document.body.clientHeight;
	}else{
		WinWidth = window.innerWidth;
		WinHeight = window.innerHeight;
	}
	
	//alert(ActRef +"/"+ AllElemsDivCount);
	if(WinWidth > 1700){
			// Rand setzen
			DataBlockPosLeft = "200px";
			DataBlockPosBottom = "120px";
			$('cc_navi').style.right = "46%";
			$('cc_navi2').style.right = "46%";
			// Schriftgrösse ändern
			$('datacontblock_cc').style.fontSize = "12px";
			// Headline ändern
			if(ActRef+1 != AllElemsDivCount){
				$('work').style.display = "block";
				$('work_klein').style.display = "none";
			}
		}
		if(WinWidth <= 1700){
			// Rand setzen
			DataBlockPosLeft = "160px";
			DataBlockPosBottom = "100px";
			$('cc_navi').style.right = "50%";
			$('cc_navi2').style.right = "50%";
			// Schriftgrösse ändern
			$('datacontblock_cc').style.fontSize = "12px";
			// Headline ändern
			if(ActRef+1 != AllElemsDivCount){
				$('work').style.display = "block";
				$('work_klein').style.display = "none";
			}
		}
		if(WinWidth <= 1500){
			// Rand setzen
			DataBlockPosLeft = "120px";
			DataBlockPosBottom = "80px";
			$('cc_navi').style.right = "53%";
			$('cc_navi2').style.right = "53%";
			// Schriftgrösse ändern
			$('datacontblock_cc').style.fontSize = "12px";
			// Headline ändern
			if(ActRef+1 != AllElemsDivCount){
				$('work').style.display = "block";
				$('work_klein').style.display = "none";
			}
		}
		if(WinWidth <= 1350){
			// Rand setzen
			DataBlockPosLeft = "90px";
			DataBlockPosBottom = "60px";
			$('cc_navi').style.right = "55%";
			$('cc_navi2').style.right = "55%";
			// Schriftgrösse ändern
			$('datacontblock_cc').style.fontSize = "12px";
			// Headline ändern
			if(ActRef+1 != AllElemsDivCount){
				$('work').style.display = "block";
				$('work_klein').style.display = "none";
			}
		}
		if(WinWidth <= 1280 || WinHeight <= 800){
			// Rand setzen
			DataBlockPosLeft = "50px";
			DataBlockPosBottom = "50px";
			$('cc_navi').style.right = "57%";
			$('cc_navi2').style.right = "57%";
			// Schriftgrösse ändern
			$('datacontblock_cc').style.fontSize = "12px";
			// Headline ändern
			if(ActRef+1 != AllElemsDivCount){
				$('work').style.display = "block";
				$('work_klein').style.display = "none";
			}
		}
		if(WinWidth <= 1150 || WinHeight <= 750){
			// Rand setzen
			DataBlockPosLeft = "40px";
			DataBlockPosBottom = "40px";
			$('cc_navi').style.right = "61%";
			$('cc_navi2').style.right = "61%";
			// Schriftgrösse ändern
			$('datacontblock_cc').style.fontSize = "11px";
			// Headline ändern
			if(ActRef+1 != AllElemsDivCount){
				$('work').style.display = "block";
				$('work_klein').style.display = "none";
			}
		}
		if(WinWidth <= 1024 || WinHeight <= 705){
			// Rand setzen
			DataBlockPosLeft = "15px";
			DataBlockPosBottom = "8px";
			$('cc_navi').style.right = "63%";
			$('cc_navi2').style.right = "63%";
			// Schriftgrösse ändern
			$('datacontblock_cc').style.fontSize = "11px";
			// Headline ändern
			if(ActRef+1 != AllElemsDivCount){
				$('work').style.display = "none";
				$('work_klein').style.display = "block";
			}
		}
}
function SetPosition(ThisElem){
	
	// Layout setzen (nur wenn nicht ausserhalb Screen)
	ThisPosition = SuchenUndErsetzen($(ThisElem).style.right, 'px', '');
	if(ThisPosition > -950){
		
		$(ThisElem).style.right = DataBlockPosLeft;
		
	}
	$(ThisElem).style.bottom = DataBlockPosBottom;
}

function MorphThis(MObject,MStyleSet,MSpeed,MCancel,MAuto,MFinishStyle){ // Morphing
	if(MCancel == 1)myEffect.cancel();
	ThisStyle = '' + MStyleSet + ''; // CSS Properties
	myEffect = new Effect.Morph(MObject, {
	  style: ThisStyle, // CSS Properties oder Class Name
	  duration: MSpeed, // Core Effect properties
	  afterFinish:  function(){ // Funktion nach Beendigung aufrufen
		  	if(MFinishStyle && MFinishStyle != ""){
				alert('finishstyle')
				MorphThis(MObject,MFinishStyle,0,MCancel,MAuto,'')
			}
		  } 
	});
}

function FadeInOutBack(MObject,MCount,MSpeed,AlphaVar){ // Morphing
	MObject = MObject + MCount;
	AlphaVar100 = AlphaVar/100;
	ThisStyle = 'opacity: '+AlphaVar100+';filter: alpha(opacity='+AlphaVar+');-ms-filter: "alpha(opacity='+AlphaVar+')";-khtml-opacity: '+AlphaVar100+';-moz-opacity: '+AlphaVar100+';'; // CSS Properties
	myEffect = new Effect.Morph(MObject, {
	  style: ThisStyle, // CSS Properties oder Class Name
	  duration: MSpeed, // Core Effect properties
	  afterFinish:  function(){ // Funktion nach Beendigung aufrufen
		  	
		  
		  } 
	});
}

function blogin(){
	MorphThis('blogbutton','top:0px;',0.3,0,0);
}
function blogout(){
	MorphThis('blogbutton','top:-30px;',0.3,1,0);
}

function preloader(ImgUrl,RefID){
	//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(){
		//Was machen wenn fertig geladen?
		//alert('fertsch geladen');
		ImgLoaded = 1;
	}
	thisimage.onerror = function(){
		alert('Image kann nicht geladen werde...');	
	}
	// Image laden
	thisimage.src = ImgUrl;
}

function SuchenUndErsetzen(QuellText, SuchText, ErsatzText)
        {   // Erstellt von Ralf Pfeifer
            // Fehlerpruefung
            if ((QuellText == null) || (SuchText == null))           { return null; }
            if ((QuellText.length == 0) || (SuchText.length == 0))   { return QuellText; }

            // Kein ErsatzText ?
            if ((ErsatzText == null) || (ErsatzText.length == 0))    { ErsatzText = ""; }

            var LaengeSuchText = SuchText.length;
            var LaengeErsatzText = ErsatzText.length;
            var Pos = QuellText.indexOf(SuchText, 0);

            while (Pos >= 0)
            {
                QuellText = QuellText.substring(0, Pos) + ErsatzText + QuellText.substring(Pos + LaengeSuchText);
                Pos = QuellText.indexOf(SuchText, Pos + LaengeErsatzText);
            }
            return QuellText;
        } // -->