/*
	combobox
	Version: 2.2.3
	
	Bugs:
	FF: Der Pfeil zum öffen einer Auswahlbox verwendet die CSS Paddingwerte.
		Daher sieht die ganze Sache bei großen Paddingwerten für
		Inputfelder nicht schön aus.
			
	OP:	Opera kann die padding/border Werte nur ermitteln, 
		wenn die Funktion onload aufgerufen wird, da er document.body
		erst dann Elemente hinzufügt.
	
	IE:	im Quellcode beschrieben.
		Der Pfeil zum öffnen, übernimmt nicht die CSS Border Angabe (IE6)
	
	Änderungen:
	
	2.2.5 (13.10.2009)
	kleiner Bugfixes
	
	2.2.4 (24.10.2007)
	neue Funktion um die Breite des Scrollbar Pfeils zu berechnen
	
	2.2.3
	Umstruktierung und Kommentare erweitert
	Korrektur bei der Berechnung des DIV, für den IE

	2.2.1
	Das Boxmodell richtig berechnen
	
*/


function createCombobox() {
	if(!document.createElement) return;
	
	//////////////////////////////////////////////////////////////
	// Intialisierung
	//////////////////////////////////////////////////////////////
	var offset = get_offset();
	var IE = /*@cc_on!@*/false; 

	// Alle Formulare
	var f = window.document.forms;
	for(var i = 0; i < f.length; i++) {
		// Alle Elemente eines Formulares
		for(var k = 0; k < f[i].elements.length; k++) {
			var el = f[i].elements[k];
			if( !el 
				 || !el.type
				 || el.type.indexOf('select') == -1
				 || !el.className
				 || el.className.toLowerCase().indexOf('combobox') == -1
			)
			continue; // keine Combobox
			
			// Hilfsfunktion, um den gewählten Wert der Auswahliste zu ermitteln
			el.getValue = function() {
				return this.options[this.selectedIndex].value
				|| this.options[this.selectedIndex].text
				|| this.options[this.selectedIndex].innerText
				;
			};
			/*
			Workaround: Eine Leerzeile einfügen, damit aus der Auswahliste 
			etwas gewählt werden kann, bzw. onchange feuert.
			*/
			var l = el.options.length;
			while(l) {
				el.options[l] = new Option( el.options[l - 1].text, el.options[l - 1].value) ;
				l--;
			}
			el.options[0] = new Option(' ', ' ' );
			el.selectedIndex = 0;
			
			var inp = addInput(el);
			inp.name = el.name;
			el.name = '';
			
			// Events
			el.onfocus = function () {
				var c = this.parent;
				if(!c) return;
				if(c.value == this.getValue() ) c.value = '';
			};
			
			el.onchange = function() { this.parent.value = this.getValue(); }
		}
	}
	
	//////////////////////////////////////////////////////////////
	// der Auswahliste das Inputfeld hinzufügen
	//////////////////////////////////////////////////////////////
	function addInput(el) {
		// Das Inputfeld
		var input = document.createElement('input');
		input.style.position = 'absolute';
		input.style.padding = 0;
		
		input.className = 'combo';
		el.parent = input;
		
		if(IE) {
			/////////////////////////////////////////////////////////////
			/*
			IE Bug
			Der IE überdeckt keine Auswahliste mit anderen Elementen
			ausser mit iframes, daher muss für den IE ein zusätzliches DIV, 
			mit einem iframe eingefügt werden.
			
			http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
			*/
			/////////////////////////////////////////////////////////////
			var div = document.createElement('div');
			div.style.position = 'absolute';
			div.style.overflow = 'hidden';

			var iframe = document.createElement('iframe');
			iframe.style.position = 'absolute';
			iframe.scrolling = 'no';
			iframe.src = 'javascript:false';
			
			div.appendChild(iframe);
			el.form.appendChild(div);
			el.div = div;

			iframe.style.height = '100%';
			iframe.style.width = '100%';
		}
		el.form.appendChild(input);
		
		fixSize(input, el);
		return input;
	}
	//////////////////////////////////////////////////////////////
	// die Größe an die Auswahliste anpassen
	//////////////////////////////////////////////////////////////
	function fixSize(inp, el) {
		
		// Größe und Ort des Selectfeldes
		var r = getRect(el);
		//////////////////////////////////////////////////////////////
		// Das Inputfeld anpassen
		//////////////////////////////////////////////////////////////
		with(inp){
			style.top = r.top + 'px';
			style.left = r.left + 'px';
			style.height =  (r.height - offset) + 'px';
			style.width = (r.width- offset - 17)+ 'px';
		}
		if(IE) {
			//////////////////////////////////////////////////////////////
			// das DIV mit dem iframe anpassen
			//////////////////////////////////////////////////////////////
			var diff = inp.offsetWidth - (r.width- offset - 17) ;
			var x = el.div;
			x.style.top = r.top  + 'px';
			x.style.left = r.left + 'px';
			x.style.height = r.height + 'px';
			x.style.width = (r.width - 17 - offset + diff)+ 'px';
		}
	}
   	//////////////////////////////////////////////////////////////
	//	Position und Maße eines Elements ermitteln
	//////////////////////////////////////////////////////////////
	function getRect (o){
		if(!o) return;
		var rect =  { left:0, top: 0, height: o.offsetHeight, width: o.offsetWidth };
		while (o) {
			rect.top += parseInt(o.offsetTop);
			rect.left += parseInt(o.offsetLeft);
			o = o.offsetParent;
		}
		return rect;
	}
	//////////////////////////////////////////////////////////////
	// padding- und bordergröße ermitteln
	//////////////////////////////////////////////////////////////
	function get_offset() {
		// padding und border ermitteln, wg. Boxmodell
		var tmp = document.createElement('input'); 	// 1. Input Element erzeugen
		document.body.appendChild( tmp );			// 2. in's Dokument einfügen
		var x = tmp.offsetHeight;					// 3. Höhe ermitteln
		tmp.style.border = 'none';					// 4. border und
		tmp.style.padding = '0';					// 5. padding auf null setzen
		x -= tmp.offsetHeight;						// 6. Differenz ermitteln
		document.body.removeChild( tmp );
		return x;
	}
}