/*
 * Bereich fuer die Klasse Dialog 
 */

/**
 * Stellt einen einfache Dialgobox aenhlich einem
 * Popup dar. Der Inhalt der Box ist ein Iframe,
 * welches eine bestimmte Seite anzeigt.
 * @author WOKI/19.02.2008
 */
function Dialog(){
	var width;
	var height;
	var href;
	var title;
	var div; // Das gesamte div
	var iframe;
	var divB; // Hintergrunddiv
	var divC; // Div welches als Container dient
	var divH; // Div welches als Header dient
	var opacity; // Deckkraft
	
	/**
	 * Oeffnet den Dialog.
	 * @param href Das Href der Seite, die als Iframe angezeigt wird.
	 * @param title Der Titel der Seite.
	 * @param width Die Breite des Divs.
	 * @param height Die Hoehe des Divs.
	 */
	this.openDialog = function(href, title, width, height){
		setHref(href);
		setTitle(title);
		setWidth(width);
		setHeight(height);
		setOpacity(80);
		show();
	}
	
	/**
	 * Schliesst den Dialog
	 */
	this.close = function(){
		// Aufruf in eigene Funktion ausgegliedert,
		// damit es keine Probleme mit Funktionsreferenzen gibt.
		closeDialog();
	}
	
	/**
	 * Setzt die Breite des Divs in Pixel.
	 * @param width Die Breite des Divs.
	 */
	function setWidth(width){
        this.width = width;
	}
	
	/**
	 * Liefert die Breite des Divs in Pixel.
	 * @return Die Breite.
	 */
	function getWidth(){
		return this.width;
	}

	/**
	 * Setzt die Hoehe des Divs in Pixel.
	 * @param width Die Hoehe des Divs.
	 */
	function setHeight(height){
        this.height = height;
	}
	
	/**
	 * Liefert die Hoehe des Divs in Pixel.
	 * @return Die Hoehe.
	 */
	function getHeight(){
		return this.height;
	}
	
	/**
	 * Setzt den Href, der Seite, die angezeigt werden soll.
	 * @param href Der Href.
	 */
	function setHref(href){
		this.href = href;
	}
	
	/**
	 * Liefert den Href, der Seite, die angezeigt werden soll.
	 * @return Das Href.
	 */
	function getHref(){
		return this.href;
	}
	
	/**
	 * Setzt den Titel, der Seite, die angezeigt werden soll.
	 * @param href Der Titel.
	 */
	function setTitle(title){
		this.title = title;
	}
	
	/**
	 * Liefert den Titel, der Seite, die angezeigt werden soll.
	 * @return Der titel.
	 */
	function getTitle(){
		return this.title;
	}
	
	/**
	 * Setzt die Deckkraft l.
	 */
	function setOpacity(opacity){
        this.opacity = opacity;
	}	
	
	/**
	 * Liefert die Deckkraft l.
	 */
	function getOpacity(){
        return this.opacity;
	}	
		
	/**
	 * Erstellt die relevanten Elemente.
	 */
	function createElements(){
		
		// Erzeugen der Elemente
		div = document.createElement('div');
		divB = document.createElement('div');
		divC = document.createElement('div');
		divH = document.createElement('div');
		iframe = document.createElement('iframe');
		
		// Setzen der Ids der relevanten Elemente.
		div.id = "dialog";
		divB.id = "dialogBackground";
		divC.id = "dialogBox";
		divH.id = "dialogHead";
		iframe.id = "dialogIframe";
				
//		var topDivRight = document.createElement('span');
//		var topDivLeft = document.createElement('span');

//		divH.appendChild(topDivLeft);
//		divH.appendChild(topDivRight);
		
//		topDivLeft.id = "dialogHeadLeft";
//		topDivRight.id = "dialogHeadRight";
		
		
		var closeButton = document.createElement('a');
		closeButton.onclick = closeDialog;
		closeButton.href = "#";
		closeButton.appendChild(document.createTextNode(String.fromCharCode(160, 160, 160, 160, 160, 160)));
		
//		topDivLeft.appendChild(document.createTextNode(getTitle()));
//		topDivRight.appendChild(closeButton);
		
		divH.appendChild(closeButton);
				
		//setDivCProperties();
		setDivHProperties();
		divC.appendChild(divH);
		divC.appendChild(iframe);
		div.appendChild(divB);
		div.appendChild(divC);
		var body = getBody();
		body.appendChild(div);			
	}
	
	/**
	 * Zeigt den Dialog an.
	 */
	function show(){
		initWindowResizeScrollListener();
		createElements();
		pack();
		setIframeProperties();
		setIframeSrc();
	}
		
	/**
	 * Schliesst den Dialog
	 */
	function closeDialog(){
		if(div != null){
			var divParent = div.parentNode;
			if(divParent != null){
				divParent.removeChild(div);
			}
		}
	}
	
	/**
	 * Sorgt dafuer, dass der Dialog in der Mitte des
	 * Fensters angezeigt wird.
	 */
	function pack(){
		setDivProperties();
		setDivBProperties();
		setDivCProperties();
	}
	
	/**
	 * Setzt die Eigenschaften des Iframes
	 */
	function setIframeProperties(){
		if(iframe != null){
			iframe.frameborder = "0";
			iframe.marginheight = "0";
			iframe.marginwidth = "0"
			iframe.style.border = "none";
			iframe.width = getWidth()+"px";
			iframe.height = getHeight()+"px";
		}
	}
	
	/**
	 * Setzt das src des Iframes.
	 */
	function setIframeSrc(){
		if(iframe != null){
			iframe.src = getHref();
		}
	}
	
	/**
	 * Setzt die Eigenschaften des gesamten divs.
	 */
	function setDivProperties(){
		if(div != null){
			div.style.position = "absolute";
			div.style.top = "0px";
			div.style.left = "0px";
			div.style.zIndex = 1000000;
		}
	}
	
	/**
	 * Setzt die Eigenschaften des Divs, welches
	 * als Hintergrund dient.
	 */
	function setDivBProperties(){
		if(divB != null){
			setOpacityProperties(divB, getOpacity());
			divB.style.position = "absolute";
			//divB.style.overflow = "hidden";
			divB.style.top = getScrollY()+"px";
			divB.style.left = getScrollX()+"px";
			if(!isStyle(divB, "backgroundColor", "background-color")){
				divB.style.backgroundColor = 'rgb(0,0,0)';
			}
			divB.style.width = getWindowWidth()+"px";
			divB.style.height = getWindowHeight()+"px";
		}
	}
	
	/**
	 * Setzt die Eigenschaften des Container-Divs.
	 */
	function setDivCProperties(){
		if(divC != null){
			var ww = getWindowWidth();
			var wh = getWindowHeight();
			var dh = getHeight();
			var dw = getWidth();
			var l = (ww/2) - (dw/2) + getScrollX();
			var t = (wh/2) - (dh/2) + getScrollY();
			l = (l < 0) ? 0 : l;
			t = (t < 0) ? 0 : t;
			if(!isStyle(divC, "backgroundColor", "background-color")){
				divC.style.backgroundColor = 'rgb(50,50,50)';
			}
			divC.style.position = "absolute";
			divC.style.top = t+"px";
			divC.style.left = l+"px";
		}
	}
	
	/**
	 * Setzt die Eigenschaften des Header-Divs.
	 */
	function setDivHProperties(){
		if(divH != null){
			if(!isStyle(divH, "backgroundColor", "background-color")){
				divH.style.backgroundColor = 'rgb(50,50,50)';
			}
			if(!isStyle(divH, "color", "color")){
				divH.style.color = 'rgb(255,255,255)';
			}
		}
	}
	
	/**
	 * Ermittelt die Anzeigehoehe des gesamten Fensters.
	 * @return Die Anzeigehoehe in Pixeln.
	 */
	function getWindowHeight(){
		var y;
		if (self.innerHeight) {// all except Explorer
			y = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) {// Explorer 6 Strict Mode
			y = document.documentElement.clientHeight;
		} else if (document.body) {// other Explorers
			y = document.body.clientHeight;
		}
		return y;
	}
	
	/**
	 * Ermittelt die Anzeigebreite des gesamten Fensters.
	 * @return Die Anzeigebreite in Pixeln.
	 */
	function getWindowWidth(){
		// Breite des Anzeigebereichs = Breite des Tags Body.
		return getBodyWidth();
	}
	
	/**
	 * Liefert die X-Koordinate bis zu der gescrollt wurde.
	 * @return Die X-Koordinate.
	 */
	function getScrollX(){
		var x;
		if (self.pageXOffset) { // all except Explorer
			x = self.pageXOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			// Explorer 6 Strict
			x = document.documentElement.scrollLeft;
		} else if (document.body){ // all other Explorers
			x = document.body.scrollLeft;
		}
		return x;
	}

	/**
	 * Liefert die Y-Koordinate bis zu der gescrollt wurde.
	 * @return Die Y-Koordinate.
	 */
	function getScrollY(){
		var y;
		if (self.pageYOffset) { // all except Explorer
			y = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			// Explorer 6 Strict
			y = document.documentElement.scrollTop;
		} else if (document.body){ // all other Explorers
			y = document.body.scrollTop;
		}
		return y;
	}
	
	/**
	 * Liefert die Hoehe des Tags Body.
	 * @return Die Hoehe des Body-Tags
	 */
	function getBodyHeight(){
		var body = getBody();
		var y = body.offsetHeight;
		return y;
	}

	/**
	 * Liefert die Breite des Tags Body.
	 * @return Die Breite des Body-Tags
	 */
	function getBodyWidth(){
		var body = getBody();
		var x = body.offsetWidth;
		return x;
	}

	
	/**
	 * Liefert eine Referenz auf das Body-Tag
	 * @return Die Referenz auf das Body-Tag.
	 */
	function getBody(){
		var elem = document.getElementsByTagName("body")[0];
		return elem;
	}
	
	/**	
	 * Setzt die Transparenz eines Elements.
	 * @param element Das Element.
	 * @param opacity Die Deckkraft des Elements im
	 * 				  Bereich 0 bis 100 Prozent.
	 */

	function setOpacityProperties(element, opacity){
		if(element != null){
		    var y = opacity / 100;
		    element.style.MozOpacity = y;
		    element.style.opacity = y;
		    element.style.filter = "alpha(opacity:" + ( y * 100 ) + ")";
		}
	}
	
	/**
	 * Initialisiert den Listener, der auf Scroll- und
	 * Resize-Events reagiert.
	 */
	function initWindowResizeScrollListener(){
		window.onresize = windowScrolledOrResized;
		window.onscroll = windowScrolledOrResized;
	}
	
	/**
	 * Wird aufgerufen, wenn im Fenster gescrollt wird
	 * oder das Fenster in der groesse veraendert wird.
	 */
	function windowScrolledOrResized(){
		pack();
	}
	
	/**
	 * Liefert eine Styleangabe, die einem bestimmten Elment zugewiesen ist.
	 * Es muss der JavaScript-Name und der CSS-Name der Style-Eigenschaft
	 * angegeben werden, da IE den JavaScript-Name verwendet.
	 * 
	 * @param el Die Refernz auf das Element.
	 * @param stylePropJSName Der Name er Style-Eigenschaft in Java-Script-Schreibweise.
	 * @param stylePropCSSName Der Name er Style-Eigenschaft in CSS-Schreibweise.
	 * @return Der Inhalt der Style-Eigenschaft.
	 */
	function getStyle(el, stylePropJSName, stylePropCSSName){
		var y = "";
		if(el != null){
			if (el.currentStyle){
				var y = el.currentStyle[stylePropJSName];
			} else if (window.getComputedStyle) {
				var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(stylePropCSSName);
			}
		}
		return y;
	}
	
	/**
	 * Preuft, ob eine Styleangabe bereits gesetzt ist.
	 * @param el Die Refernz auf das Element.
	 * @param stylePropJSName Der Name er Style-Eigenschaft in Java-Script-Schreibweise.
	 * @param stylePropCSSName Der Name er Style-Eigenschaft in CSS-Schreibweise.
	 * @return true, wenn die Styleangabe schon gesetzt ist.
	 */
	function isStyle(el, stylePropJSName, stylePropCSSName){
		var style = getStyle(el, stylePropJSName, stylePropCSSName);
		return !((style == null) || (style == ""));
	}
}

/*
 * Bereich fuer die allgemeine Funktionen 
 */
 
 /**
  * Erzeugt eine neue Instanz von Dialog und legt diese
  * unter window.dialog ab.
  * @param href Das Href der Seite, die als Iframe angezeigt wird.
  * @param title Der Titel der Seite.
  * @param width Die Breite des Divs.
  * @param height Die Hoehe des Divs.
  */
 function openDialog(href, title, width, height){
 	if(window.dialog != null){
 		window.dialog.close();
 	}
 	var d = new Dialog();
 	window.dialog = d;
 	d.openDialog(href, title, width, height);
 }