/*
	styleDOMComponent can style your selects, radios and checkboxes.
	It makes a copy of the select using div, ul, li and a tags.
	A tag is used also in checkbox and radio components.
	Virtual styled components keep real component classes.
	
	USE:
		$.styleDOMcomponent();
		
	ADVANCED USE (plugin work only in #test area):
		//js
			$.styleDOMcomponent({
				activityArea: "#test"
			});
		//html
			<!-- plugin doesn't work here -->
			<select id="mysel" name="mysel">
				<option>voce 1</option>
				<option>voce 2</option>
			</select>
			<div id="test">
				<!-- plugin works here -->
				<select id="mysel2" name="mysel2">
					<option>voce 1</option>
					<option>voce 2</option>
				</select>
			</div>

*/

(function($){	
	$.extend({
		styleDOMcomponent: function(options) { 
            var defaults = {
				enable_select_style:	true,					//enable style on select components
				enable_radio_style:		true,					//enable style on select components
				enable_checkbox_style:	true,					//enable style on select components
				activityArea:			"",						//working area (selector)
															//select classes
				actualItemClass:		"actualItem",			//item selected class (out of list)
				itemListClass:			"itemList",				//item list class
				selectedItemClass:		"selectedItem",			//item selected evidence class (in list)
				virtualSelectClass:		"mysel",				//select class
				itemClass:				"item",					//item class (no selected)
															//radio classes
				virtualRadioClass:		"myradio",				//radio class
				radioSelectedClass:		"active",				//selected radio class
															//checkbox classes
				virtualCheckboxClass:	"mycheckbox",			//checkbox class
				checkboxSelectedClass:	"active",				//selected checkbox class
				
				enableLoading:			true,				//enable loading gif after selects
				loaderClass:			"loader"				//loader class
			};
			
            var options = $.extend(defaults, options);
			
			if(options.enable_select_style){
				
				$selects = $(options.activityArea+" select");
				$.each($selects, function(i, obj){
					var $select = $(obj);
					if (options.enableLoading){
						var $loader = $(obj).next("." + options.loaderClass + ":first");
						$loader.show();
					}
					var timestamp = new Date();
					timestamp = timestamp.getTime();
					var $styledSelect;
					var $divFirst = $("<div></div>").attr("id", "styledSelect"+timestamp);
					$divFirst.attr("class", $select.attr("class"));
					$divFirst.addClass(options.virtualSelectClass);
					var $fakea = $("<a></a>").attr("href","#item");
					var $divSecond = $("<div></div>").addClass(options.actualItemClass).append($fakea.clone());
					var $ul = $("<ul></ul>").addClass(options.itemListClass);
					var $li = $("<li></li>");
					$styledSelect = $divFirst.append($divSecond).append($ul);
					$select.children().each(function(k, item){
						if(k==0){
							$styledSelect.find("."+options.actualItemClass+" a").html($(item).text());
						}
						$templi = $li.clone();
						if($(item).attr("selected")){
							$templi.addClass(options.selectedItemClass);
							$styledSelect.find("."+options.actualItemClass+" a").html($(item).text());
						}
						$styledSelect.find("."+options.itemListClass).append($templi.addClass(options.itemClass).append($fakea.clone().append($(item).text())));
					});
					$styledSelect = $styledSelect.insertAfter($select);
					$("#styledSelect"+timestamp+" ."+options.actualItemClass+" a").click(function(){
						$("[id^='styledSelect']:not(#"+$(this).parents("[id^='styledSelect']").attr("id")+")").css("z-index", "0");
						$("[id^='styledSelect']:not(#"+$(this).parents("[id^='styledSelect']").attr("id")+") ul").hide();
						$("#"+$(this).parents("[id^='styledSelect']").attr("id")).css("z-index", "10");
						$("#"+$(this).parents("[id^='styledSelect']").attr("id")+" ."+options.itemListClass).toggle();
						$(this).blur();
						return false;
					});
					$("#styledSelect"+timestamp+" ."+options.itemListClass+" a").click(function(){
						$("#"+$(this).parents("[id^='styledSelect']").attr("id")+" ."+options.actualItemClass+" a").text($(this).text());
						$(this).parent().removeClass(options.selectedItemClass);
						$(this).parent().siblings().removeClass(options.selectedItemClass);
						$(this).parent().addClass(options.selectedItemClass);
						var selectedIndex = $(this).parent().parent().find("li").index($(this).parent());
						$("#"+$(this).parents("[id^='styledSelect']").attr("id")+" ."+options.itemListClass).hide();
						$(this).blur();
						var actualvalue = $(this).text();
						$select.find("option").each(function(j, item){
							if(j==selectedIndex){
							//if($(item).text()==actualvalue){
								$(item).attr("selected", true);
							}
						});
						$select.change();
						return false;
					});
					$select.hide();
					if (options.enableLoading){
						$loader.hide();
					}
				});
				
				$(document).bind("click", function(){
					$("[id^='styledSelect'] ."+options.itemListClass).hide();
				});
			}
			
			if(options.enable_radio_style){
				$radios = $(options.activityArea+" input[type='radio']");
				$.each($radios, function(i, obj){
					var $radio = $(obj);
					var timestamp = new Date();
					timestamp = timestamp.getTime();
					var $styledRadio;
					var $fakea = $("<a></a>").attr("id", "styledRadio"+$radio.attr("name")+timestamp).attr("href","#radio");
					$fakea.attr("class", $radio.attr("class"));
					$fakea.addClass(options.virtualRadioClass);
					$fakea.click(function(){
						$radio.click();
					});
					if($radio.attr("checked")){
						$fakea.addClass(options.radioSelectedClass);
					}
					$styledRadio = $fakea.insertAfter($radio);
					$radio.hide();
				});
				
				$("[id^='styledRadio']").click(function(){
					$("[id^='styledRadio"+$(this).prev().attr("name")+"']").each(function(i, elem){
						$(elem).removeClass(options.radioSelectedClass);
					});
					$(this).addClass(options.radioSelectedClass);
					$(this).blur();
					$(this).prev().click();
					$(this).prev().attr("checked", true);
					return false;
				});
			}
			
			if(options.enable_checkbox_style){
				$checkboxes = $(options.activityArea+" input[type='checkbox']");
				$.each($checkboxes, function(i, obj){
					var $checkbox = $(obj);
					var timestamp = new Date();
					timestamp = timestamp.getTime();
					var $styledCheckbox;
					var $fakea = $("<a></a>").attr("id", "styledCheckbox"+timestamp).attr("href","#checkbox");
					$fakea.click(function(){
						$checkbox.live("click", function(event){event.preventDefault();});
						$checkbox.click();
						return false;
					});
					$fakea.attr("class", $checkbox.attr("class"));
					$fakea.addClass(options.virtualCheckboxClass);
					if($checkbox.attr("checked")){
						$fakea.addClass(options.checkboxSelectedClass);
					}
					$styledCheckbox = $fakea.insertAfter($checkbox);
					$checkbox.hide();
				});
				$("[id^='styledCheckbox']").click(function(){
					$(this).toggleClass(options.checkboxSelectedClass);
					$(this).blur();
					/*if($(this).prev().attr("checked")){
						console.log("false");
						$(this).prev().attr("checked", false);
					}else{
						console.log("true");
						$(this).prev().attr("checked", true);
					}*/
					return false;
				});
			}	
        }
    });
})(jQuery);