$(document).ready(function() {
	
	// convert all configurator select elements to configurator dropdowns
	$("table.configurator select").each(function() {
		var source = $(this);
		var selectedOption = source.find("option[selected]");
		
		var newOptionsHtml = '';
		
		// convert each option in the source select to a dropdown entry
		$("option", source).each(function(){
			var sourceOption = $(this);
			var optionText = sourceOption.text().replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
			var optionClasses = '';
			
			if (sourceOption.val() == selectedOption.val()) optionClasses += 'selected ';
			
			var availability = "<div></div>";
			if (sourceOption.hasClass("availability-no")) availability = '<div class="availability-no">Nein</div>';
			if (sourceOption.hasClass("availability-ordered")) availability = '<div class="availability-ordered">Bestellt</div>';
			if (sourceOption.hasClass("availability-yes")) availability = '<div class="availability-yes">Ja</div>';
			
			var price = (sourceOption.val().split("|"))[2];
			if (price != 0) price = extend(price); else price = "";
			
			newOptionsHtml +=
				'<tr>' +
					'<td><a href="#" class="' + optionClasses + '">' + optionText + '<span class="value">' + sourceOption.val() + '</span></a></td>'+
					'<td class="availability">' + availability + '</td>' +
					'<td class="pricefield">' + price + '</td>' +
				'</tr>';
		});
		
		newHtml =
			'<dl class="dropdown">' +
			'<dt><a href="#"><div><span class="value"></span></div></a></dt>' +
			'<dd>' +
				'<table class="upgrades">' +
				'<tr><th>Option</th><th>Verfügbar</th><th>Aufpreis&nbsp;&#8364;</th></tr>' +
					newOptionsHtml +
				'</table>' +
			'</dd></dl>';
		
		source.after(newHtml);
		source.hide();
		
	});
	
	
	// custom events for dropdown dl
	$("table.configurator dl.dropdown").bind({
		'open': function() {
				$(this).find("table").show();
				$(this).addClass("selected");
			},
		'close': function() {
				$(this).find("table").hide();
				$(this).removeClass("selected");
		}
	});
	
	// event: clicking anywhere in the document hides all opened dropdowns 
	$(document).bind('click', function(e) {
		$("table.configurator dl.dropdown.selected").trigger('close');
	});
	
	// event: clicking on dropdown main element toggles the dropdown list
	$("table.configurator dl.dropdown dt a").click(function() {
		var dl = $(this).parent().parent();
		
		if (!dl.hasClass("selected")) {
			$("table.configurator dl.dropdown.selected").trigger('close');
			dl.trigger('open');
		} else {
			dl.trigger('close');
		}
		
		return false;
	});
	
	// event: clicking on an entry selects it in dropdown
	// the first tr is ommitted because it contains the table headers
	$("table.configurator dl.dropdown dd table tr + tr").click(function() {
		var tr = $(this);
		var table = tr.parent().parent();
		var link = tr.children().first().children().first();
		var text = link.html();
		var dl = table.parent().parent();
		var dropdownEntryDiv = dl.children().first().children().children().first();
		var availabilityDiv = link.parent().next().children().first();
		
		table.children().find("tr.selected").removeClass("selected");  // remove highlight from previously selected entry
		link.parent().parent().addClass("selected");                   // add highlight to clicked entry
		
		// set text from clicked entry
		dropdownEntryDiv.html(text);
		
		// show availability in dropdown
		dropdownEntryDiv.removeClass("availability-no availability-ordered availability-yes");
		if (availabilityDiv.hasClass("availability-no")) dropdownEntryDiv.addClass("availability-no");
		if (availabilityDiv.hasClass("availability-ordered")) dropdownEntryDiv.addClass("availability-ordered");
		if (availabilityDiv.hasClass("availability-yes")) dropdownEntryDiv.addClass("availability-yes");
		
		dl.trigger('close'); // close dropdown list
		
		// trigger change event on original select to update prices
		var source = table.parent().parent().prev();
		source.val(link.find("span.value").html());
		source.trigger("change");
		
		return false;
	});
	
	
	// select the default entries
	$("table.configurator dl.dropdown dd table a.selected").click();
	
});