$(document).ready(function() {
	cssDropDownSelector = '#Sprachenauswahl form select.langSelectBox';
	
	$(cssDropDownSelector).each(function() {
		var dropdown = $(this);
		
		var title = $(dropdown).attr('title');
		var fieldName = $(dropdown).attr('name');
		var formName = $(dropdown).parents('form').eq(0).attr('id');
		var selectedLang = $(dropdown).find("option.selectedLang").eq(0).html();
		var selectedLangValue = $(dropdown).find("option.selectedLang").eq(0).attr('value');
		var pos = $(dropdown).offset();
		var height = $(dropdown).outerHeight();
		var width = $(dropdown).outerWidth();
		var onChange = $(dropdown).attr('onchange');
		
		////////////////////\\\\\\\\\\\\\\\\\\\\
		/////////// ADD NEW ELEMENTS \\\\\\\\\\\
		////////////////////\\\\\\\\\\\\\\\\\\\\
		// add input field to store current value in
		$('<input name="' + fieldName + '" type="hidden" value="' + selectedLangValue + '" />').insertAfter($(dropdown));
		$(dropdown).attr('name','cssDropdown_' + fieldName);
		// add iframe to enable display in IE6
		$('<iframe id="cssDropdown_' + formName + '_' + fieldName + '_iframe" width="0" scrolling="no" height="' + height + '" frameborder="0" class="cssDropdown_iframe"></iframe>').appendTo($('body'));
		// add cssDropdown box to enable selection
		$('<div id="cssDropdown_' + formName + '_' + fieldName + '" class="cssDropdown">' + 
				'<div class="title">' + title + '</div>' + 
				'<ul class="languages"></ul>' + 
			'</div>').appendTo($('body'));
		
		// get cssDropdown box and iframe element
		var input = $(dropdown).next();
		var newbox = $('#cssDropdown_' + formName + '_' + fieldName);
		var newframe = $('#cssDropdown_' + formName + '_' + fieldName + '_iframe');
		
		// add 'options' as list-elements
		$(dropdown).find("option").each(function() {
			var option = $(this);
			var value = $(this).attr('value');
			
			if ($(option).hasClass('selectedLang')) {
				var tag = '<li value="' + value + '" class="selectedLang">';
			} else {
				var tag = '<li value="' + value + '">';
			}
			
			$(tag + $(option).html() + '</li>').appendTo($(newbox).find('.languages'));
		});
		
		// get display height for active dropdown box
		var activeHeight = $(newbox).find('.languages').innerHeight();
		
		// remove dropdown
//		$(dropdown).remove();
		
		////////// STYLE NEW ELEMENTS \\\\\\\\\\
		$(newbox).css('top',pos.top);
		$(newbox).css('left',pos.left);
//		$(newbox).height(height);
//		$(newbox).width(width);
		$(newframe).css('top',pos.top);
		$(newframe).css('left',pos.left);
		$(newframe).height(height);
		$(newframe).width(width);
		
		////////////////////\\\\\\\\\\\\\\\\\\\\
		//////////// ADD NEW EVENTS \\\\\\\\\\\\
		////////////////////\\\\\\\\\\\\\\\\\\\\
		// open / close dropdown field
			// resize iframe
			// bring to front / back
		$(newbox).find('.title').click(function(e) {
			var languagelist = $(this).next();
			
			if (languagelist.css('display') == 'none') {
				// hide all other cssDropdown boxes
				$('.cssDropdown').css('z-index','221');
				$('.cssDropdown .languages').hide();
				// resize iframe and bring to front
				$(newframe).height(height+activeHeight);
				$(this).parent().css('z-index','222');
			}
			else {
				// resize iframe and bring to back
				$(newframe).height(height);
				$(this).parent().css('z-index','221');
			}
			
			languagelist.toggle();
			$(this).addClass('active');
		});
		
		// item hover
		$(newbox).find('.languages li').hover(
			function () {
				$(this).addClass('hover');
			},
			function () {
				$(this).removeClass('hover');
			});
		
		// item click
		$(newbox).find('.languages li').click(function() {
			var title = $(this).html();
			
			// update class selectedLang
			$(newbox).find('.languages li').removeClass('selectedLang');
			$(newbox).find('.languages li').removeClass('hover');
			$(this).addClass('selectedLang');
			
			$(newbox).find('.title').html(title);
			$(input).attr('value',$(this).attr('value'));
			
			$(this).parent().hide();
			
			// submit form
			var formId = $(newbox).parent().attr('id');
			
			// fire change-event callback (if any)
			if ((onChange != undefined) && (typeof onChange == 'function')) {
				onChange();
			}
		});
	});
	
	////////////////////\\\\\\\\\\\\\\\\\\\\
	/////////// AUTO-LOOSE FOCUS \\\\\\\\\\\
	//////// event: click anywhere \\\\\\\\\
	////////////////////\\\\\\\\\\\\\\\\\\\\
	$('*').not('.cssDropdown').click(function(e) {
		var clicked = $(this);
		if ($(clicked).parents('.cssDropdown').length != 1) {
			$('.cssDropdown .languages').hide();
			$('.cssDropdown .title').removeClass('active');
			// verkleinern aller iframes auf default!
			$('.cssDropdown_iframe').each(function() {
				var height = $(this).attr('height');
				$(this).height(height + 'px');
			});
		} else {
			// stop propagation / bubbling
			if(!e) {
				window.event.cancelBubble = true;
			} else if(e.stopPropagation) {
				e.stopPropagation();
			}
		}
	});
});