(function($) {
	/**
	 * jQuery plugin to replace select fields with layoutet lists
	 *
	 */
	$.fn.selectlayouted = function(options) {
		// extend and save the default options
		var opts = $.extend({}, $.fn.selectlayouted.defaults, options);
		
		var $select = $(this);
		var $container = $select.parent(".selectLayouted");
		var classNames = $select.attr('class');
		var disabled = ($select.attr("disabled") == true) ? ' selectLayoutedDisabled' : '';
		var $layouted = $('<ul class="select' + disabled + '"></ul>').appendTo("body");
		var $sub = $('<ul class="sub" rel="'+classNames+'"></ul>').appendTo("body");
		$select.css("visibility", "hidden");
		
		$select.find("option").each(function(){
			var href = $(this).hasClass("href") ? ' href="'+$(this).attr("value")+'" ' : '';
			var rel = ' rel="'+$(this).attr("value")+'" '
			$("<li><a "+href+rel+" >"+$(this).text()+"</a></li>").data("value", $(this).attr("value")).appendTo($sub);
		})
		
		window.setTimeout(function(){
			var left = $select.offset().left;
			var top = $select.offset().top;
			var width = $select.width();
			var topsub = top + opts.subFromTop;
			$layouted.css("left", left+"px");
			$layouted.css("top", top+"px");
			$layouted.css("width", width+"px");
			$layouted.fadeIn('fast');
			$sub.css("left", left+"px");
			$sub.css("top", topsub+"px");
			$sub.css("width", width+"px");
		}, 500);
		
		var current = $select.children("option[selected]").text();
		
		$layouted.append('<li><a>'+current+'</a></li>');
		$layouted
			.find("li>a")
			.click( function(){
				if ($sub.is(":visible")) {
					$("ul.sub").hide();
				}
				else {
					if ($select.attr("disabled") == false) {
						$("ul.sub").hide();
						$sub.show();
					}
				}
			});

		$sub.find("li a").click(function(){
			var value = $(this).parent("li").data("value");
			var text = $(this).text();
			$layouted.find("li a").text(text);
			$select.find("option").removeAttr("selected");
			$select.find("option[value="+value+"]").attr("selected", "selected");
			$sub.hide();
			if ($container.metadata().url !== undefined) {
				var updateUrl 	= $container.metadata().url;
				var updateParam	= $container.metadata().param;
				var updateEl 	= $container.metadata().update;
				$.get("/"+updateUrl+"/"+updateParam+":"+value, function(data){
					$(updateEl).html(data);
					$("ul.select, ul.sub").remove();
					$(".selectLayouted select").each(function(){
						$(this).selectlayouted();
					});
				});
			}
		});
		
		
		
		// return object to make it jQuery-chainable
		return this;
	};
	
	/**
	 * Default settings for the jQuery plugin
	 */	
	$.fn.selectlayouted.defaults = {
		'subFromTop': 20
	};
	
}(jQuery));