(function($) {
    $.fn.extend({
		/*
			Replace radio buttons with images
		*/
       transformRadio: function(options) {

            var defaults = {
            	checked : "/img/content/radio_checked.gif",
				unchecked : "/img/content/radio.gif"
            };

            var settings = $.extend(defaults, options);
            
            return this.each(function() {
				
				if(typeof(options) == "string")
				{
				    if(options == "reset")
				    {
				        $(this).removeAttr("checked");
				        $(this).next("img").attr("src", settings.unchecked);
				    }
				    return this; 
				}
				
				// Radio hide
				$(this).hide();
				
				// Afbeelding
				if($(this).is(":checked"))
				{
					$(this).after("<img src='" + settings.checked + "' />");	
				}
				else
				{
					$(this).after("<img src='" + settings.unchecked + "' />");	
				}
				
				$(this).next("img").click(function(){
					// Afbeelding switchen
					$(this).attr("src", settings.checked);
					$(this).siblings("img").attr("src", settings.unchecked);
					
					// Radio button checkedn
					$(this).prev("input:radio").attr("checked", "checked");
				});
			});
	   },
	   /*
	   		Replace checkboxes with images
	   */
	   transformCheckbox: function(options) {

            var defaults = {
            	checked : "/img/content/checkbox_checked.gif",
				unchecked : "/img/content/checkbox.gif"
            };

            var settings = $.extend(defaults, options);

            return this.each(function() {
				
				if(typeof(options) == "string")
				{
				    if(options == "reset")
				    {
				        $(this).removeAttr("checked");
				        $(this).next("img").attr("src", settings.unchecked);
				    }
				    return this; 
				}
				
				// Radio hide
				$(this).hide();
				
				// Afbeelding
				if($(this).is(":checked"))
				{
					$(this).after("<img src='" + settings.checked + "' />");	
				}
				else
				{
					$(this).after("<img src='" + settings.unchecked + "' />");	
				}
				
				$(this).next("img").click(function(){
					if($(this).prev().is(":checked"))
					{
						// Afbeelding switchen
						$(this).attr("src", settings.unchecked);
						
						// Radio button checkedn
						$(this).prev("input:checkbox").removeAttr("checked").change();
					}
					else
					{
						// Afbeelding switchen
						$(this).attr("src", settings.checked);
						
						// Radio button checkedn
						$(this).prev("input:checkbox").attr("checked", "checked").change();
					}
				});
			});
	   },
	   transformSelect: function(options) {
			var defaults = {
				selectedContainer	: "span",
				dropDownClass		: "transformSelect"
			};
			
			var vars = {me : null};
			var settings = $.extend(defaults, options);
	
			return this.each(function() {
			    
			    if(typeof(options) == "string")
				{
				    if(options == "reset")
				    {
				        $(this).get(0).selectedIndex = 0;
				        $(this).next("ul").find("span:eq(0)").html($(this).find("option:eq(0)").text());
				    }
				    return this; 
				}
				
				// Zet mezelf als var
				vars.me = $(this);
				
				// Hide mezelf
				$(this).hide();
				
				// Generate HTML
				var selectedIndex = -1;
				if( $(this).find("option:selected").length > 0 )
					selectedIndex = $(this).find("option").index($(this).find("option:selected"));
				else
					selectedIndex = 0;	
				
				// Maak een ul aan
				var $ul = $("<ul/>").addClass(settings.dropDownClass);
				var $li = $("<li />");
				var $span = $("<span />");
				
				// span vullen met geselecteerde waarde
				$span.html($(this).find("option").eq(selectedIndex).html());
				$li.append($span);
				$ul.append($li);
				$li.append("<ul />");
				
				var $drop = $li.find("ul");
				$drop.hide();
				// Door loop de items (option)
				$(this).find("option").each(function(){
					// Maak een LI voor de options
					var $li = $("<li />");	
					$li.append("<span />")
					$li.find("span").html($(this).html());
					$drop.append($li);
					
					// Als er wordt geklikt op een nieuwe waarde
					$li.click(selectNewValue);
				});
				$(this).after($ul);
				
				
				//$(this).find(options.selectedContainer).click(openDrop);
				$("html").click(closeDropDowns);
				$span.click(openDrop);
				return this;
			});
	
			function selectNewValue()
			{
				var index = $(this).parent().find("li").index($(this));	
				$(vars.me).get(0).selectedIndex = index;
				//$("." + settings.dropDownClass).find("ul").hide();
				//$("." + settings.dropDownClass).find("span:eq(0)").html($(this).text());
				//$("." + settings.dropDownClass).removeClass("open");	
				$(this).parent().parent().parent().find("ul").hide();
				$(this).parent().parent().parent().find("span:eq(0)").html($(this).text());
				$(this).parent().parent().parent().removeClass("open");	
			}
			
			function openDrop()
			{
			    //$("." + settings.dropDownClass).find("ul").css({'z-index' : 100});
				//$("." + settings.dropDownClass).find("ul").show();
				//$("." + settings.dropDownClass).addClass("open");
				$(this).parent().find("ul").css({'z-index' : 100});
				$(this).parent().find("ul").show();
				$(this).parent().parent().addClass("open");
			}
			function closeDropDowns(e)
			{
				var $el = $("." + settings.dropDownClass).find("ul");
				if($(e.target).closest("." + settings.dropDownClass).length == 0)
				{
					$("." + settings.dropDownClass).find("ul").hide();	
					$("." + settings.dropDownClass).removeClass("open");					
					//$(this).parent().find("ul").hide();	
					//$(this).parent().parent().removeClass("open");					
				}
			}
			
		}

		   
    });

})(jQuery);