// Javascript-Funktionen für die Website auf http://wuschel-muc.de/
//
// Programmiert 2005 von Matthias Wimmer

// Maus bewegt sich in die Navigation

// 0 = ausklappen, 1 = einklappen
var direction = 0;
var pos = 0;
var running = 0;
var waitingForLeave = 0;
var isThinking = 0;
var isWaiting = 0;
var waitingTimeoutId;

function mouseMoved(event) {
    if (event.clientX > 350) {
	direction = 1;
	if (running < 1) {
	    updateNavigPos();
	    document.getElementsByTagName("body")[0].removeEventListener("mousemove", mouseMoved, false);
	    waitingForLeave = 0;
	}
    }
}

function updateNavigPos() {
    if (direction == 0) {
	// beginnen auf Ausblenden zu warten?
	if (waitingForLeave == 0) {
	    waitingForLeave = 1;
	    document.getElementsByTagName("body")[0].addEventListener("mousemove", mouseMoved, false);
	}

	// wir klappen aus
	if (pos >= 180) {
	    running = 0;
	} else {
	    running = 1;
	    pos = pos + 20;
	}
    } else {
	// wir klappen ein
	if (pos <= 0) {
	    running = 0;
	} else {
	    running = 1;
	    pos = pos - 20;
	}
    }

    var posLeft = -435 + (1-Math.cos(pos * Math.PI / 180))/2 * 445;
    document.getElementById("navigback").style.left = posLeft+"px";
    document.getElementById("navigation").style.left = posLeft+"px";

    var opacity = 1.0 - (1-Math.cos(pos * Math.PI / 180))/2 * 0.85;
    var mainContentLayer = document.getElementById("main");
    if (mainContentLayer) {
	mainContentLayer.style.opacity = opacity;
    }

    var opacityNavig = 0.50 + (1-Math.cos(pos * Math.PI / 180))/2 * 0.50;
    var opacityNavigBack = 0.55 + (1-Math.cos(pos * Math.PI / 180))/2 * 1.1;
    document.getElementById("navigback").style.opacity = opacityNavigBack;
    document.getElementById("navigation").style.opacity = opacityNavig;

    if (running) {
	window.setTimeout("updateNavigPos()", 100);
    }
}

function enterNavig(event) {
    if (event.clientX < 250) {
	direction = 0;
	if (running < 1) {
	    updateNavigPos();
	}
    }
}

// Anklicken zum Vergrößern von Bildern

function zeigeGrossesBild(element) {
    // öffne ein Fenster
    var popupWindow = window.open("imagePopup?id="+element.getAttribute("id"), "wuschelPopup", "width=900,height=600,resizeable,status=yes");

    return false;
}

function aktiviereGrosseBilder(xmldok) {
    // Alle Definitionen eines vergrößerbaren Bildes
    var bilder = xmldok.getElementsByTagName("element");

    // Durchlaufe die Definitionen
    for (var i=0; i < bilder.length; i++) {
    	var bildID = bilder[i].getAttribute("id");
	var grossesBild = bilder[i].getAttribute("gross");
	var title = bilder[i].getAttribute("title");

	var bild = document.getElementById(bildID);
	if (bild) {
	    bild.onclick = function() { return zeigeGrossesBild(this); };
	    bild.title = "Klick mich an und ich werde größer!";
	    bild.style["cursor"]="pointer";
	}
    }
}

function ladeGrosseBilder(url) {
    if (document.implementation && document.implementation.createDocument) {
	// Implementierung mit DOM Level 2

	// Erzeuge ein neues Document-Objekt
	var xmldok = document.implementation.createDocument("", "", null);
	// Funktion, die das Dokument bearbeitet, wenn es geladen ist
	xmldok.onload = function() { aktiviereGrosseBilder(xmldok); };
	// Starte Ladevorgang
	xmldok.load(url);
    } else if (window.ActiveXObject) {
	// Implementierung für MSIE

	var xmldok = new ActiveXObject("Microsoft.XMLDOM");
	xmldok.onreadystatechange = function() {
	    if (xmldok.readyState == 4) aktiviereGrosseBilder(xmldok);
	}
	xmldok.load(url);
    }
}

// Hovering von Bildern

var usedHoverBilder = new Array();

function hoverIn() {
    this.src = usedHoverBilder[this.getAttribute("id")][1];
}

function hoverOut() {
    this.src = usedHoverBilder[this.getAttribute("id")][0];
}

function aktiviereHoverBilder(xmldok) {
    // Alle Definitionen eines Hover-Bildes
    var bilder = xmldok.getElementsByTagName("bild");

    // Durchlaufe die Definitionen
    for (var i=0; i < bilder.length; i++) {
        var bildID = bilder[i].getAttribute("id");
        var hoverBild = bilder[i].getAttribute("hoverdatei");

	var bild = document.getElementById(bildID);

	if (bild) {
	    var stdBild = bild.src;
	    var bildDaten = new Array(stdBild, hoverBild);

	    usedHoverBilder[bildID] = bildDaten;

	    bild.onmouseover = hoverIn;
	    bild.onmouseout  = hoverOut;
	}
    }
}

function ladeHoverBilder(url) {
    if (document.implementation && document.implementation.createDocument) {
	// Implementierung mit DOM Level 2

	// Erzeuge ein neues Document-Objekt
	var xmldok = document.implementation.createDocument("", "", null);
	// Funktion, die das Dokument bearbeitet, wenn es geladen ist
	xmldok.onload = function() { aktiviereHoverBilder(xmldok); };
	// Starte Ladevorgang
	xmldok.load(url);
    } else if (window.ActiveXObject) {
	// Implementierung für MSIE

	var xmldok = new ActiveXObject("Microsoft.XMLDOM");
	xmldok.onreadystatechange = function() {
	    if (xmldok.readyState == 4) aktiviereHoverBilder(xmldok);
	}
	xmldok.load(url);
    }

}

// Fenstergröße bei Popup anpassen
function resizeFitImage() {
    if (document.images[0].complete) {
    	window.resizeTo(document.images[0].width+6, document.images[0].height+80);
	window.focus();
    } else {
    	setTimeout("resizeFitImage()", 500);
    }
}

// Workarounds für die Anzeige unter MSIE
function aktiviereIEworkarounds() {
    if (window.navigator.appName != "Microsoft Internet Explorer") {
    	return;
    }

    if (window.navigator.userAgent.indexOf("MSIE 7") != -1) {
    	return;
    }

    if (window && window.top && window == window.top) {
    	location="/IE-workarounds/";
	return;
    }

    if (window.name != "mitte") {
    	return;
    }

    var navigdiv = document.getElementById("navigation");
    if (navigdiv) {
    	navigdiv.style.display="none";
    }

    var cite2 = document.getElementById("cite2");
    if (cite2) {
        cite2.style["left"]="-175px";
    }

    var andidatentable = document.getElementById("andi-daten");
    if (andidatentable) {
    	andidatentable.style["width"] = "600px";
    }

    var bodys = document.getElementsByTagName("body");
    for (var i=0; i<bodys.length; i++) {
    	bodys[i].style["margin"] = "0px";
    }
}

// JavaSkript nach dem Laden der Seite einbinden

function trap() {
//    aktiviereIEworkarounds();
    var navigation = document.getElementById("navigback");
    if (navigation) {
	navigation.addEventListener("mouseover", enterNavig, false);
    }

    /*
    var navLink1 = document.getElementById("navLink1");
    if (navLink1) {
	navLink1.addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/ich/Andi01-klein'); }, false);
	document.getElementById("navLink2").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/aqua/Aquarium10-klein'); }, false);
	document.getElementById("navLink3").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/aqua/Aquarium12-klein'); }, false);
	document.getElementById("navLink4").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Buecher/Buch'); }, false);
	document.getElementById("navLink5").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Einhorn/Einhorn-am-Waldsee'); }, false);
	document.getElementById("navLink6").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Fotografie/Teichrose-klein'); }, false);
	document.getElementById("navLink7").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Fotografie/Friedhof28-klein'); }, false);
	document.getElementById("navLink8").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Musik/Elvis-klein'); }, false);
	document.getElementById("navLink9").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Freunde/Thommy04-klein'); }, false);
	document.getElementById("navLink10").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Freunde/Gabi09-klein'); }, false);
	document.getElementById("navLink11").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Freunde/Danny-Louvre1-klein'); }, false);
	document.getElementById("navLink12").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Freunde/Thommy04-klein'); }, false);
	document.getElementById("navLink13").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Orte/Park04-klein'); }, false);
	document.getElementById("navLink14").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Orte/Park03-klein'); }, false);
	document.getElementById("navLink15").addEventListener("mouseover", function(event) { waitThinkingEvent(event, '/Bilder/Orte/Mauer-klein'); }, false);

	for (var i = 1; i<16; i++) {
	    document.getElementById("navLink"+i).addEventListener("mouseout", function(event) { stopWaitThinking(); }, false);
	}
    }
    */

    /*
    navigation.addEventListener("mouseout", leaveNavig, false);
    for (var i = 0; i < navigation.childNodes.length; i++) {
	navigation.childNodes[i].addEventListener("mouseout", leaveNavigChild, false);
	navigation.childNodes[i].addEventListener("mouseover", enterNavigChild, false);
    }
    */
    ladeHoverBilder("/daten/hoverbilder.xml");
    ladeGrosseBilder("/daten/klickbilder.xml");
}

function popupLoaded() {
    setTimeout("resizeFitImage()", 250);
}

function thinkStep(step) {
    switch (step) {
	case 1:
	    document.getElementById("circ1").style.display='inline';
	    break;
	case 2:
	    document.getElementById("circ2").style.display='inline';
	    break;
	case 3:
	    document.getElementById("circ3").style.display='inline';
	    break;
	case 4:
	    document.getElementById("circ4").style.display='inline';
	    document.getElementById("circImage").style.display='inline';
	    break;
	case 5:
	    document.getElementById("circ1").style.display='none';
	    break;
	case 6:
	    document.getElementById("circ2").style.display='none';
	    break;
	case 7:
	    document.getElementById("circ3").style.display='none';
	    break;
	case 8:
	    document.getElementById("thinking").style.display='none';
	    document.getElementById("circ4").style.display='none';
	    document.getElementById("circImage").style.display='none';
	    isThinking = 0;
	    return;
    }

    setTimeout("thinkStep("+(step+1)+")", step == 4 ? 2500 : 200);
}

function startThinking(x, y, image) {
    isWaiting = 0;
    if (isThinking) {
	return;
    }
    isThinking = 1;
    document.getElementById("circImage").setAttributeNS("http://www.w3.org/1999/xlink", "href", image)
    var thinkDiv = document.getElementById("thinking");
    thinkDiv.style.left = x+"px";
    thinkDiv.style.top = (y-255)+"px";
    thinkDiv.style.display="block";
    thinkStep(1);
}

function waitThinking(x, y, image) {
    if (isWaiting) {
	return;
    }
    waitingTimeoutId = setTimeout("startThinking("+x+", "+y+", '"+image+"')", 60000);
    isWaiting = 1;
}

function stopWaitThinking() {
    if (!isWaiting) {
	return;
    }
    clearTimeout(waitingTimeoutId);
    isWaiting = 0;
}

function waitThinkingEvent(event, image){
    waitThinking(event.clientX, event.clientY, image);
}