$(document).ready(function(){
	
	if($("select.dropdownSelect").length){
		$("select.dropdownSelect").each(function(i){
			var el=$(this);
			var name=el.attr("name")
			p=el.parent()
			$(p).append('<div class="dropdownSelect" id="dropdownSelect-'+i+'"><input type="hidden" value="" name="'+name+'"/><div class="dropdownSelected"></div><div class="dropdownOptions"></div></div>')
			var appendedOptions=$("div#dropdownSelect-"+i+" div.dropdownOptions",$(p))
			var vals=new Array();
			$("option",el).each(function(i){
				if($(this).attr("selected"))
					appendedOptions.append('<div class="dropdownOption selected" title="'+$(this).val()+'">'+$(this).text()+'</div>')
				else
					appendedOptions.append('<div class="dropdownOption" title="'+$(this).val()+'">'+$(this).text()+'</div>')
			});
			el.remove()
			
		})
	}
	$("div.dropdownSelect div.dropdownOptions").hide();
	
	$("div.dropdownSelect").hoverIntent({
		over: function(){
			console.log(1)
			$(this).find("div.dropdownOptions").slideDown();
		},
		out: function(){
			$(this).find("div.dropdownOptions").slideUp();
		},
		timeout: 500
	});
	$("div.dropdownSelect div.dropdownOptions div.dropdownOption").hover(
		function(){
			$(this).addClass("hover");
		},
		function(){
			$(this).removeClass("hover");
	});
	$("div.dropdownSelect div.dropdownOptions div.dropdownOption").click(function(){
		var currentSelected=$(this).closest("div.dropdownSelect").find("div.dropdownSelected")
		$(this).closest("div.dropdownSelect").find("input").val($(this).attr("title"))
		currentSelected.text($(this).text())
		$(this).closest("div.dropdownOptions").find("div.dropdownOption").removeClass("selected");
		$(this).addClass("selected");
	});
	
	$("div.dropdownSelect div.dropdownOptions div.dropdownOption.selected").click();
});

//<div class="dropdownSelect">
//	<input type="hidden" value="" name="color"/>
//	<div class="dropdownSelected"></div>
//	<div class="dropdownOptions">
//		<div class="dropdownOption selected" title="1">Rdeca</div>
//		<div class="dropdownOption" title="2">Zelena</div>
//		<div class="dropdownOption" title="3">Modra</div>
//		<div class="dropdownOption" title="4">Roza</div>
//	</div>
//</div>