// jquery.selecttransform.js
// Turns a select box into a list of links.
// P. Anderhagen 2009.04.19
// version: 0.2b

(function($){ 
	$.fn.extend({  
		selecttransform: function(arguments){
			var formelement = $(this);
			var container = formelement.parent();
			
			var sHtml = '<div class="TransformedSelect">';
			
			// Create trigger
			formelement.find("option").each(function(i){
				if( $(this).attr("disabled") ){
					formelement.before('<a href="#" class="Trigger"><span>' + $(this).attr("text") + '</span></a>');
				}
			});
			
			sHtml += '<ul id="TransformedSelectList">';
			formelement.find("option").each(function(i){
				if( $(this).attr("disabled") ){
					sHtml += '<li class="First"><a href="' + $(this).attr("value") + '"><span>' + $(this).attr("text") + '</span></a></li>';
				}
				else{
					sHtml += '<li><a href="' + $(this).attr("value") + '"><span>' + $(this).attr("text") + '</span></a></li>';
				}
				
				
			});
			sHtml += '</ul></div>';
			
			formelement.before(sHtml);
			
			// Hide form element.
			formelement.css("display","none");

			// Adjust some placement attribs.
			//nWidth = ( container.width() + parseFloat(container.css("padding-left").replace("px","")) + parseFloat(container.css("padding-right").replace("px","")) );
			
			nWidth = ( container.width() + parseFloat(container.css("padding-left").replace("px","")) + parseFloat(container.css("padding-right").replace("px","")) );
			
			container.find("#TransformedSelectList").css("width", nWidth );
			container.find("#TransformedSelectList").css("top", -(container.height()) );

			// OK, HTML is done. Now add some functionality.
			container.find("a.Trigger").mouseenter(function(){
				container.addClass("Open");
			})
			
			container.find("#TransformedSelectList").mouseleave(function(){
				container.removeClass("Open");
			})
        } 
    }); 
})(jQuery);