/*
 * Ändert die gewöhnliche Selectbox in ein div konstrukt das Stylebar ist
 * @author Robert Agthe
 */
$.fn.select2div = function (after_select) {

	// Variablen deklarieren
	var element = this;
	var optgroup_arr = element.find('optgroup');
	var options_arr = element.find('option');
	var selected_val = element.val();
	var selected_text = element.find('option:selected').text();
	var selected_flag = element.find('option:selected').attr('class');

	// Konstruiert das Dropdown 
	var dropdown_construct = function (e) {
		e.stopPropagation()
		e.preventDefault()

		// Prüfen ob Dropdown layer schon vorhanden ist..
		if(element.find('.select2div_dropdown').length == 0){

			// Sind Optgroups vorhanden? Wenn ja, dann erst diese
			// iterieren und unterliegeende Options dann übernehmen
			if(optgroup_arr.length > 0) {

				// Layer DIV einfügen
				$(this).after('\
					<div class="select2div_dropdown" style="display:none;">\
					</div>\
				');

				// Ausgabe INIT
				var html ='';
				$.each(optgroup_arr, function(i,optgroup) {
					html = html+'<h4>'+$(optgroup).attr('label')+'</h4><ul>';

					// Optionen iterieren und anhängen
					$(optgroup_arr[i]).children('option').each(function(i,val) {
						html = html+'\
								<li>\
									<a class="'+$(val).attr('class')+'" rel="'+val.value+'">\
										'+val.text+'\
									</a>\
								</li>';
					})
					html = html+'</ul>';
				})
				// Ausgabe in UL anhängen
				$('div.select2div_dropdown').append(html);
			}
			// Keine Optgroups vorhanden!
			else
			{
				// Layer DIV einfügen
				$(this).after('\
					<div class="select2div_dropdown" style="display:none;">\
						<ul>\
						\
						</ul>\
					</div>\
				');

				// Optionen iterieren und anhängen
				$.each(options_arr, function(i,val) {
					element
						.find('.select2div_dropdown ul')
						.append('\
							<li>\
								<a class="'+$(options_arr[i]).attr('class')+'" rel="'+options_arr[i].value+'">\
									'+options_arr[i].text+'\
								</a>\
							</li>'
						);
				})
			}

			element.find('.select2div_dropdown').show() // Dropdown anzeigen

		}
		else
		{
			// Wird nichts ausgewählt, dann layer wieder schliessen
			element.find('.select2div_dropdown').remove();
		}
	}

	// Aktionen nach einem Klick auf ein Item
	var accept_item = function() {
		selected_val = $(this).attr('rel');
		selected_text = $(this).text();
		selected_flag = $(this).attr('class');
		element.find('.select2div_select span')
			.text(selected_text) // Text übernehmen und anzeigen
			.removeClass() // alle CSS Klassen entfernen
			.addClass(selected_flag) // Flagge übernehmen

		element.find('.select2div_dropdown').remove(); // Dropdown löschen

		// Funktion ausführen um parameter weiterzuleiten
		if(typeof(after_select) == 'function') {
			after_select.call(this, selected_val);
		}
		
	}

	// Selectbox löschen und DIV Container erstellen
	element
		.find('select')
		.replaceWith('\
			<div class="select2div_select">\
				<span class="'+selected_flag+'">'+selected_text+'</span>\
			</div>\
		');

	// Klick ins Dokument -> Dropdown schliessen
	$(window).click(function(){
		element.find('.select2div_dropdown').remove();
	})

	// Event definieren, wenn DIV Konstrukt angeklickt wird
	element
		.find('.select2div_select')
		.click(dropdown_construct);


	// Event, wenn auf ein neues Listelement geklickt wird
	element
		.find('.select2div_dropdown ul li a')
		.live('click', accept_item);
}