/**
 * Ortsplan für www.altlussheim.de
 *
 * @author René Kubach, www.eDynamic.de
 */

window.addLoadEvent(ortsplanLaden);

function ortsplanLaden () {
	Ortsplan.laden();
}

var Ortsplan = {

	// Lade-Status
	detailGeladen: false,
	uebersichtGeladen: false,

	// Einstellungen
	maxName: "c5",		  		// Name des "letzten" Planquadrates
	mapX: 70,		  	 		// Breite eines Planquadrats in der Übersichtskarte
	mapY: 76,		  			// Höhe eines Planquadrats in der Übersichtskarte
	img: "/design/web/images/ortsplan/",	// Pfad zum Grafik-Ordner

	// Zeiger
	x: -1,			 			// x-Koordinate der oben links gezeigten Grafik
	y: -1,						// y-Koordinate der oben links gezeigten Grafik
	xMax: 0,					// Anzahl der Spalten der Planquadrate
	yMax: 0,					// Anzahl der Zeilen der Planquadrate

	// Liste der Planquadrate
	quadrate: new Array(),

	/**
	 * Lädt den Ortsplan
	 */
	laden: function () {
		var alphabet, area, f, ff, i, map, name, parameter, quadrat="", x, y;

		alphabet = "abcdefghijklmnopqrstuvwxyz";
		this.xMax = alphabet.indexOf(this.maxName.charAt(0));
		this.yMax = this.maxName.charAt(1)-1;
		map = edynamic.node(edynamic.$("ortsplan-uebersicht").getElementsByTagName("map").item(0));
		map.removeAllChildren();
		for (x=0; x<=this.xMax; x++) {
			for (y=0; y<=this.yMax; y++) {
				name = alphabet.charAt(x).toUpperCase() + (y+1).toString();
				// Planquadrat anlegen
				this.quadrate[name] = new Array();
				this.quadrate[name]["x"] = x;
				this.quadrate[name]["y"] = y;
				// Link aus der Übersichtskarte anlegen
				area = map.addChild(
					"area",
					"shape=rect,href=javascript:Ortsplan.zeigePlanquadrat(\""+name+"\");"
				);
				area.setAttributeValue(
					"coords",
					(x*this.mapX)+","+(y*this.mapY)+","+((x+1)*this.mapX)+","+((y+1)*this.mapY)
				);
			}
		}

		// Lesen, ob ein Parameter für das Skript gesetzt wurde:
		parameter = document.location.href.split("/");
		for (i=0; i<parameter.length; i++) {
			if ( parameter[i+1] && (
					parameter[i].toLowerCase()=="(planquadrat)" ||
					parameter[i].toLowerCase()=="(detail)"
				)) {
				quadrat = parameter[i+1].toUpperCase();
				break;
			}
		}
		if (this.quadrate[quadrat]) {
			this.zeigePlanquadrat(quadrat); // zeigt ein Planquadrat
		} else if (quadrat.indexOf("-")!=-1) {
			this.zeigeDetail(quadrat); // zeigt ein Planquadrat
		} else {
			this.zeigeUebersicht(); // zeigt die Übersicht
		}

        // Formular-Events hinzufügen:
		if ( edynamic.$("ortsplan-navigation") ) {
			f = edynamic.$("ortsplan-navigation").getElementsByTagName("form").item(0);
			edynamic.dom.setEvent( f, "onsubmit", "Ortsplan.formularAuswerten(this); return false;");
        	edynamic.dom.setEvent( f.getElementsByTagName("button").item(0), "onclick", "Ortsplan.formularAuswerten(this.form); return false;");
			ff = f.getElementsByTagName("select");
			for ( i=0; i<ff.length; i++ ) {
				edynamic.dom.setEvent(ff.item(i),"onchange","Ortsplan.formularAuswahl(this);");
			}
		}

		edynamic.dom.remove$("ortsplan-laden");
	},

	/**
	 * Zeigt die Übersicht
	 */
	zeigeUebersicht: function () {
		edynamic.dom.addClassName(edynamic.$("ortsplan-detail"),"versteckt");
		if (!this.uebersichtGeladen) {
			edynamic.$("uebersichtskarte").src = this.img + "uebersicht.gif";
			this.uebersichtGeladen = true;
		}
		edynamic.dom.removeClassName(edynamic.$("ortsplan-uebersicht"),"versteckt");
	},

	/**
	 * Zeigt ein Planquadrat
	 * @param String quadrat Planquadrat, z.B. "C3"
	 */
	zeigePlanquadrat: function ( quadrat ) {
		var q = this.quadrate[quadrat.toUpperCase()];
		this.zeigeDetail((2*q['x'] + 1 )+"-"+(2*q['y'] + 1));
	},

	/**
	 * Zeigt ein Planquadrat
	 * @param String detail obere linke Grafik in der Form "x-y"
	 */
	zeigeDetail: function ( detail ) {
		edynamic.dom.addClassName(edynamic.$("ortsplan-uebersicht"),"versteckt");
		if (!this.detailGeladen) {
			var a, b, c;
			a = edynamic.$("ortsplan-detail");
			// Werkzeuge
			b = edynamic.createNode(a,"div","id=detail-werkzeug");
			b.addChild(
				"a",
				"href=javascript:Ortsplan.zeigeUebersicht();,title=Ausschnitt ausblenden und Übersichtskarte anzeigen",
				"Detail schließen und Übersichtskarte anzeigen"
			);
			b.addChild("span","class=ende");
			// Karte
			b = edynamic.createNode(a,"div","id=detail-karte");
			// Karte: Navigation
			c = b.addChild("a","href=javascript:Ortsplan.geheHoch();,class=navigation,title=nach oben,id=nach-oben");
			c.addChild("span","class=no-css","nach oben");
			c = b.addChild("a","href=javascript:Ortsplan.geheRunter();,class=navigation,title=nach unten,id=nach-unten");
			c.addChild("span","class=no-css","nach unten");
			c = b.addChild("a","href=javascript:Ortsplan.geheLinks();,class=navigation,title=nach links,id=nach-links");
			c.addChild("span","class=no-css","nach links");
			c = b.addChild("a","href=javascript:Ortsplan.geheRechts();,class=navigation,title=nach rechts,id=nach-rechts");
			c.addChild("span","class=no-css","nach rechts");
			// Karte: Auschnitt
			c = b.addChild("div","id=ausschnitt");
			c = c.addChild("div");
			c.addChild("img","src="+this.img+"leer.gif,alt=Ortsplan-Ausschnitt,id=detail-1");
			c.addChild("img","src="+this.img+"leer.gif,alt=Ortsplan-Ausschnitt,id=detail-2");
			c.addChild("br","class=no-css");
			c.addChild("img","src="+this.img+"leer.gif,alt=Ortsplan-Ausschnitt,id=detail-3");
			c.addChild("img","src="+this.img+"leer.gif,alt=Ortsplan-Ausschnitt,id=detail-4");
			// Status
			this.detailGeladen = true;
		}
		edynamic.dom.removeClassName(edynamic.$("ortsplan-detail"),"versteckt");
		// Ausschnitt anzeigen
		var xy = detail.split("-");
		this.gehe( parseInt(xy[0]), parseInt(xy[1]) );
	},

/* ===== Formular-Events ===== */

	formularAuswahl: function ( feld ) {
		if ( feld.name=="poi" ) {
			feld.form.strasse.value = "";
		} else if ( feld.name=="strasse" ) {
			feld.form.poi.value = "";
		}
	},

	formularAuswerten: function ( formular ) {
		var strasseWert = formular.strasse.value;
		var poiWert = formular.poi.value;
		var wert = (strasseWert) ? strasseWert : ((poiWert) ? poiWert : "");
		if ( this.quadrate[wert] ) {
			this.zeigePlanquadrat(wert);
			return true;
		}
		if ( wert.indexOf("-") != -1 ) {
			this.zeigeDetail(wert);
			return true;
		}
		return false;
	},

/* ===== Ansicht bewegen ===== */

	gehe: function ( x, y ) {
		this.x = x;
		this.y = y;
		var imgs = new Array();
		for (var i=0; i<=4; i++) {
			imgs[i] = new Image();
		}
		imgs[0].src = this.img + "leer.gif";
		imgs[1].src = this.img + (x)+"-"+(y)+".gif";
		imgs[2].src = this.img + (x+1)+"-"+(y)+".gif";
		imgs[3].src = this.img + (x)+"-"+(y+1)+".gif";
		imgs[4].src = this.img + (x+1)+"-"+(y+1)+".gif";
		for (var i=1; i<=4; i++) {
			edynamic.$("detail-"+i).src = imgs[0].src;
		}
		for (var i=1; i<=4; i++) {
			edynamic.$("detail-"+i).src = imgs[i].src;
		}
		// Pfeile ein-/ausblenden
		edynamic.$("nach-oben").style.display = (y==1) ? "none" : "block";
		edynamic.$("nach-unten").style.display = (y==2*this.yMax+1) ? "none" : "block";
		edynamic.$("nach-links").style.display = (x==1) ? "none" : "block";
		edynamic.$("nach-rechts").style.display = (x==2*this.xMax+1) ? "none" : "block";
	},

	geheHoch: function () {
		if (!this.detailGeladen || this.y==1) {
			return;
		}
		this.gehe(this.x,this.y-1);
	},

	geheRunter: function () {
		if (!this.detailGeladen || this.y==2*this.yMax+1) {
			return;
		}
		this.gehe(this.x,this.y+1);
	},

	geheLinks: function () {
		if (!this.detailGeladen || this.x==1) {
			return;
		}
		this.gehe(this.x-1,this.y);
	},

	geheRechts: function () {
		if (!this.detailGeladen || this.x==2*this.xMax+1) {
			return;
		}
		this.gehe(this.x+1,this.y);
	}

};