/**
* Ersetzung von URL-Select-Springmenues durch optisch und funktional aehnliche Linkliste
*
* © 2008 <i-D> internet + Design GmbH & Co. KG
* Erfurter Str. 35
* 99423 Weimar
* Deutschland
* Fon:     03643 7785 0
* Fax:     03643 7785 29
* E-Mail:  office@i-d.de
* Web:     http://www.i.d.de/
*
* @author Niels Bobogk <niels@i-d.de>
*/

// ----- BEGIN CONFIG

var CSS_CLASS_URL_DROP_DOWN           = 'urlDropDown';   // css-KLasse, welche die zu ersetzenden URL-Selects kennzeichnet
var LIST_ITEM_FOCUS_BACKGROUND_COLOR  = '#36c';          // Hintergrundfarbe aktives Listenelement (Link)
var LIST_ITEM_FOCUS_COLOR             = '#fff';          // Schriftfarbe aktives Listenelement (Link)

// ----- END CONFIG


//--------------------------------------------------------------------------------

var URLList = Class.create();
URLList.prototype = {
	initialize: function(objSelect) {
		this.obj = objSelect;
		this.options = this.obj.options;
		
		// Container erstellen
		this.container = document.createElement("div");
		$(this.container).addClassName('URLList');
		$(this.container).setStyle({
			width: $(this.obj).getWidth() + 'px'
		});
		
		// Linkliste erstellen
		for (var i = 0; i < this.obj.options.length; i++) {
			var a = document.createElement("a");
			a.href = this.obj.options[i].value;
			if (this.obj.options[i].selected) {
				$(a).addClassName('selected');	
			}
			// externer Link?
			if ($(this.obj.options[i]).hasClassName('extern'))
			{
				a.target = "_blank";
				
			}
			a.appendChild(document.createTextNode(this.obj.options[i].text));	
			
			Event.observe($(a), 'focus', function() {
				this.setStyle({
					backgroundColor: LIST_ITEM_FOCUS_BACKGROUND_COLOR,
					color: LIST_ITEM_FOCUS_COLOR
				});							  
			});
			
			Event.observe($(a), 'blur', function() {
				this.setStyle({
					backgroundColor: '#fff',
					color: '#000'
				});							  
			});
			
			Event.observe($(a), 'mousedown', function() {
				if (this.target == '_blank')
				{
					var win = window.open(this.href, '_blank');
					win.focus();
				} else {
					location.href = this.href;							  
				}
			});
			
			this.container.appendChild(a);
			this.container.appendChild(document.createElement("br"))
		}		
	}
}

//--------------------------------------------------------------------------------

/**
* Klasse URLSelect
* erstellt Container mit Kopfleiste und URL-Liste
* registriert Event-Behandlung
*/
var URLSelect = Class.create();
URLSelect.prototype = {
	/**
	* Startprozedur
	*
	* @param object objSelect - select-Feld mit URLs
	*/
	initialize: function(objSelect, i) {
		this.obj       = objSelect;
		this.parent    = this.obj.parentNode;
		this.URLList   = new URLList(this.obj);
		this.isOpen    = false;
		
		// Container erstellen
		this.container = document.createElement("div");
		this.container.id = "URLDropDown" + i; 
		$(this.container).addClassName("URLSelect");
		$(this.container).setStyle({
			width: $(this.obj).getWidth() + 'px'
		});

		// Select-Kopf
		this.head = document.createElement("a");
		this.head.href = 'javasc' + 'ript:;';
		$(this.head).addClassName("URLSelectHead");
		// aktuellen Wert setzen
		var tmp = this.obj.options[0].text;
		for (var i = 0; i < this.obj.options.length; i++) {
			if (this.obj.options[i].selected) {	
				tmp = this.obj.options[i].text;				
				break;
			}
		}
		this.head.appendChild(document.createTextNode(tmp));
		this.container.appendChild(this.head);
		
		// einhaengen/ersetzen	
		this.URLList.container.hide();
		this.container.appendChild(this.URLList.container);			
		this.parent.replaceChild(this.container, this.obj);
				
		Event.observe($(this.container), 'mousedown', this.toggleList.bindAsEventListener(this));
		Event.observe($(this.container), 'keydown',   this.checkKey.bindAsEventListener(this));
	},
	
	/**
	* Einblenden der URL-Liste
	*/
	showList: function() {
		if (this.isOpen) return;
		
		this.URLList.container.show();
		this.isOpen = true;
		
		var listItems = this.URLList.container.childNodes;
		for (var i = 0; i < listItems.length; i++) {
			if (listItems[i].firstChild.nodeValue == this.head.firstChild.nodeValue) {
				listItems[i].focus();
				break;
			}
		}
	},
	
	/**
	* Ausblenden der URL-Liste
	*/
	hideList: function() {
		this.URLList.container.hide();
		this.isOpen = false;
		this.container.parentNode.focus();
	},
	
	/**
	* Ein/Ausblenden der URL-Liste ("toggeln")
	*/
	toggleList: function() {
		this.URLList.container.toggle();
	},
	
	/**
	* Behandlung bestimmter Tastaturereignisse
	*
	* @param object event
	*/
	checkKey: function(event) {
		this.showList();
		
		// aktuellen Wert checken
		var listItems = this.URLList.container.childNodes;
		
		switch(event.keyCode) {
			// bei ESCAPE Liste schließen
			case Event.KEY_ESC:
				this.hideList();
				break;
			
			// per Pfeiltasten vorwaerts
			case Event.KEY_RIGHT:
			case Event.KEY_DOWN:
				// ab Kopfzeile
				if (Event.element(event) == this.head) {
					this.URLList.container.firstChild.focus();
				} else {
					for (var i = 0; i < listItems.length; i++) {
						if (Event.element(event) == listItems[i] && i < listItems.length) {
							listItems[i + 1].focus();
							break;
						}
					}
				}
				break;
			
			// per Pfeiltasten rueckwaerts
			case Event.KEY_LEFT:
			case Event.KEY_UP:
				for (var i = 0; i < listItems.length; i++) {
					if (Event.element(event) == listItems[i] && i > 0) {
						listItems[i - 1].focus();
						break;
					}
				}
				break;		
		}
	}
}

//--------------------------------------------------------------------------------

/**
* Klasse URLSelectSimple
*/
var URLSelectSimple = Class.create();
URLSelectSimple.prototype = {
	/**
	* Startprozedur
	*
	* @param object objSelect - select-Feld mit URLs
	*/
	initialize: function(objSelect) {
		this.obj = objSelect;
		this.changed = false;
		this.startValue = this.obj.value;
		
		Event.observe(this.obj, 'click',   this.changeURL.bindAsEventListener(this));
		Event.observe(this.obj, 'keydown', this.changeURL.bindAsEventListener(this));
	},
	
	/**
	* URL nach select-Value wechseln, jedoch erst nach Betätigung von "ENTER"
	*
	* @param object event
	*/
	changeURL: function(event) {
		// im IE wechsel bei change verhindern; erst bei "ENTER"
		if (event.type == 'keydown') {
			// bei "ESCAPE" Ursprungswert eintragen und Element verlassen
			if (event.keyCode == Event.KEY_ESC) {
				this.obj.value = this.startValue;
				this.obj.blur();
				return;
			}
			// wenn nicht ESCAPE oder ENTER, dann nicht wechseln
			if (event.keyCode != Event.KEY_RETURN) {
				return true;	
			}
		}
		
		// URL wechseln
		if (document.location.href != this.obj.value && this.startValue != this.obj.value) {
			document.location.href = this.obj.value;
		}
	}
}

//--------------------------------------------------------------------------------

/**
* testet rekursiv, ob ein DOM-Knoten oder eines seiner untergeordneten
* Knoten die Eventquelle ist; setzt damit den focus;
* Hintergrund: blur-Event findet im IE nur auf bestimmten Elementen statt
* und kann daher nicht benutzt werden, darum andersrum ;-)
*
* @param object event
* @param object aktueller DOM-Knoten
* @param object object, um Zustand per Referenz speichern zu koennen
*/
function checkFocus(event, currNode, objRef) {
	if (objRef.isFocused == true) {
		return;	
	}
	
	if (Event.element(event) == currNode) {
		objRef.isFocused = true;
	} else {
		for (var i = 0; i < currNode.childNodes.length; i++) {
			checkFocus(event, currNode.childNodes[i], objRef)	
		}
	}
}

//--------------------------------------------------------------------------------

/**
* Ueberprueft, ob CSS aktiviert ist
*/
function hasCSS() {
	var testDiv = document.createElement('div');
	testDiv.id = 'testDiv';
	$(document.body).appendChild(testDiv);
	
	$('testDiv').setStyle({
		width:   '1px',
		height:  '1px',
		display: 'none'
	});
	
	return ($('testDiv').getWidth() != 1) ? false : true;
}

//--------------------------------------------------------------------------------

/**
* Startinitialisierung, wenn Seite geladen
*/
Event.observe (window, 'load', function() {						
	// wenn script mehrmals aufgerufen wurde, dann mehrmaliges Ausfuehren verhindern
	if (document.URLSelects) {
		return true;
	}

	// selects erfassen
	document.URLSelects = $$('select.' + CSS_CLASS_URL_DROP_DOWN);								

	if (!window.opera && hasCSS()) {		
		for (var i = 0; i < document.URLSelects.length; i++) {
			document.URLSelects[i] = new URLSelect(document.URLSelects[i], i)
		}
		
		// Tastaturereignissen behandeln
		Event.observe (document, 'keyup', function(event) {
			for (var i = 0; i < document.URLSelects.length; i++) {
				var objRef = new Object();
				objRef.isFocused = false;			
				checkFocus(event, document.URLSelects[i].container, objRef);				
				if (objRef.isFocused && event.keyCode != Event.KEY_ESC) {
					document.URLSelects[i].showList();
				} else {
					document.URLSelects[i].hideList();
				}
			}
		});
		
		// Mausklicks behandeln; 
		// Einblenden und toggle beim Element selbst;
		// alle ausblenden, die nicht den Focus haben
		Event.observe (document, 'click', function(event) {
			for (var i = 0; i < document.URLSelects.length; i++) {
				var objRef = new Object();
				objRef.isFocused = false;
				checkFocus(event, document.URLSelects[i].container, objRef);
				if (!objRef.isFocused) {
					document.URLSelects[i].hideList();	
				}
			}
		});
		
	} else {
		for (var i = 0; i < document.URLSelects.length; i++) {
			document.URLSelects[i] = new URLSelectSimple(document.URLSelects[i])
		}
	}
});