/*
selectbox style - using input
Danny "Minux" Hendrix 31-1-09
*/
jQuery.fn.extend({
	selectbox: function(options) {
		return this.each(function() {
			new jQuery.SelectBox(this, options);
		});
	}
});

jQuery.SelectBox = function(obj, options) {
	var defaults = {
		optionsClass : "dropdown",
		fieldClass : "select",
		selectedClass : "selected",
		overClass : "hover",
		mainClass : "selectwrap",
		beforeClass : "before",
		overArrowClass : "active",
		imgLoc : "",
		imgEx : "png"
	};
	var options = $.extend(defaults,options);

	var $obj = $(obj);
	
	var $field = inputField(options);
	var $optionsDiv = optionsDiv(options);
	var $mainDiv = mainDiv(options);
	var $beforeDiv = beforeDiv(options);
	var $optionsUl = optionsSelect(options);
	
	//$obj.hide().before($field).before($optionsDiv);
	$mainDiv.append($field).append($optionsDiv);
	
	$obj.hide().before($mainDiv);
	$mainDiv.before($beforeDiv);
	//var width = $obj.width()+50;
	var width = 283;
	
	$field.width(width);
	
	$optionsDiv.find("div.border").append($optionsUl);
	$optionsDiv.width((width+2)).hide();
	
	$(document).click(function(){
		$optionsDiv.hide();
		$field.removeClass(options.overArrowClass);
	});
	
	$field.click(function(event){
		$("div.dropdown:visible").hide();
		$("div.active").removeClass(options.overArrowClass);
		$optionsDiv.slideDown("fast");
		$(this).addClass(options.overArrowClass);
		event.stopPropagation();		
	})/*.
	mouseover(function(){
		$(this).addClass(options.overArrowClass);
	}).
	mouseout(function(){
		$(this).removeClass(options.overArrowClass);
	})*/;

	function hideClick()
	{
		$optionsDiv.hide(0,function(){
			alert("ended");
			//$field.removeClass(options.overArrowClass);			
		});
		$field.removeClass(options.overArrowClass);
	}
	
	function inputField(options)
	{
		var field = document.createElement("div");
		var $field = $(field);
		$field.attr("id",obj.id+"_field");
		$field.addClass(options.fieldClass);

		var span = document.createElement("span");
		var $span = $(span);
		$span.addClass("result");
		$field.append($span);
		
		var link = document.createElement("a");
		var $link = $(link);
		$link.addClass("arrow");
		$field.append($link);
		$link.text("Choose Option");
		return $field;
	}

	function mainDiv(options)
	{
		var element = document.createElement("div");
		var $element = $(element);
		$element.attr("id",obj.id+"_main");
		$element.addClass(options.mainClass);
		
		return $element;		
	}
	
	function beforeDiv(options)
	{
		var element = document.createElement("div");
		var $element = $(element);
		$element.attr("id",obj.id+"_before");
		$element.addClass(options.beforeClass);
		
		return $element;		
	}
	
	function optionsDiv(options)
	{
		var element = document.createElement("div");
		var $element = $(element);
		$element.attr("id",obj.id+"_element");
		$element.addClass(options.optionsClass);

		var element2 = document.createElement("div");
		var $element2 = $(element2);
		$element2.addClass("options");
		
		var element3 = document.createElement("div");
		var $element3 = $(element3);
		$element3.addClass("border");
	
		$element2.append($element3);
		$element.append($element2);
		
		return $element;
	}
	
	function optionImg(options,value)
	{
		var element = document.createElement("img");
		var $element = $(element);
		$element.attr("src",options.imgLoc+value+"."+options.imgEx);

		return $element;
	}
	
	function optionsSelect(options)
	{
		var ul = document.createElement("ul");
		var $ul = $(ul);
		$obj.children("option").each(function()
		{
			var li = document.createElement("li");
			var $li = $(li);
			var a = document.createElement("a");
			var $a = $(a);
			
			var value = $(this).val() || $(this).html();
			a.innerHTML = $(this).html();
			$li.append($a);
			
			if(options.imgLoc)
			{
				$temp = optionImg(options,$(this).val());
				$a.prepend(" ").prepend($temp);
			}
			
			li.setAttribute('id', value);
			$li.attr("id",value);
			//check if it's selected
			if($(this).is(":selected"))
			{
				$li.addClass(options.selectedClass);
				$field.find("span").html($(this).html());
			}
			ul.appendChild(li);
			
			$li.
			mouseover(function(){
				$li.addClass(options.overClass);
			}).
			mouseout(function(){
				$li.removeClass(options.overClass);
			}).
			click(function(){	
				$ul.find("li").removeClass(options.selectedClass);
				$li.addClass(options.selectedClass);	
				selectMe();
			});
		});
		return ul;
	}
	
	function selectMe()
	{
		element = $("li."+options.selectedClass,$optionsDiv).get(0);
		$obj.val(element.id);
		$field.find("span").html($(element).text());
	}
};