/**
  *
  * @todo a way to customize the content of each option
  * @todo keyboard support
  * @todo maybe support for multiple choice selects
  * @todo control over how to hide the original select
  * @todo support for commands(remotely activate/close the select)
  * @todo cleanup
  *
  */
 
(function($) {

	$.fn.altselect = function(options){
		
		var opt = $.extend({}, $.fn.altselect.defaults , options);
		$(this).each(function(){

			if(typeof $.fn.altselect.reg == 'undefined' ){
				$.fn.altselect.reg = 0;
			}

			$.fn.altselect.reg++;

			var selectobj = this;
			var id = $(this).attr("id")?$(this).attr("id"):$.fn.altselect.reg;

			// inject code
			var w = $(this).width();
			$('<div></div>').attr("id",'altsel-'+id).attr("class",opt.wrapper_class).width(w).insertAfter(selectobj);

			var wrapper = $("div#altsel-"+id)[0];
			$(wrapper).append("<span class='altselect-display'></span><ul></ul>");

			$("option",selectobj).each(function(){
				
				var li = $("<li />")[0];
				
				li.altselect_mate = this;
				li.altselect_redraw = $.fn.altselect.item_redraw;
				li.altselect_wrapper = wrapper;

				$(li)
					.hover($.fn.altselect.item_over,$.fn.altselect.item_out)
					.click($.fn.altselect.item_click);
				
				$("ul", wrapper).append(li);

			});
			
			wrapper.altselect_opt = opt;
			wrapper.altselect_update = $.fn.altselect.wrapper_update;
			wrapper.altselect_redraw = $.fn.altselect.wrapper_redraw;
			wrapper.altselect_open = $.fn.altselect.wrapper_open;
			wrapper.altselect_close = $.fn.altselect.wrapper_close;
			wrapper.altselect_mate = selectobj;
			wrapper.altselect_is_open = 0;
			
			$(wrapper).click(function(){
				if ( this.altselect_is_open )
					this.altselect_close();
				else
					this.altselect_open();
			});


			//adding hooks
			$(selectobj).change(function(){     // whenever the select changes, so should the altselect
				wrapper.altselect_redraw();
			});

			$(wrapper).hover(function(){
				this.altselect_hover = 1;
			},function(){
				this.altselect_hover = 0;
			});

			$().click(function(){               // hide the thing when clicking anywhere outside
				if ( wrapper.altselect_is_open && !wrapper.altselect_hover ){
					wrapper.altselect_close();
				}
			});

			//hiding the select
			$(selectobj).css("position","absolute").css("left","-9999px");

			//z-index
			$(wrapper).css("z-index",1);

			//first redraw
			wrapper.altselect_redraw();

		});
		return $(this);
	};

	$.fn.altselect.item_over = function(){
		$(this).addClass(this.altselect_wrapper.altselect_opt.hover_class);
	};

	$.fn.altselect.item_out = function(){
		$(this).removeClass(this.altselect_wrapper.altselect_opt.hover_class);
	};

	$.fn.altselect.item_click = function(){
		$(this.altselect_wrapper.altselect_mate).val($(this.altselect_mate).attr("value")).change();
		
	};
	
	$.fn.altselect.wrapper_open = function(){
		this.altselect_is_open = 1;
		this.altselect_update();
		$(this).css("z-index",100);
		$("ul", this).show();
	};

	$.fn.altselect.wrapper_close = function(){
		this.altselect_is_open = 0;
		this.altselect_update();
		$("ul", this).hide();
		$(this).css("z-index",1);
	};

	$.fn.altselect.item_redraw = function(){
		$(this).html($(this.altselect_mate).html());
		
		if ( $(this.altselect_wrapper.altselect_mate).val() == $(this.altselect_mate).attr("value") ){
			$(this).addClass(this.altselect_wrapper.altselect_opt.selected_class);
		}else{
			$(this).removeClass(this.altselect_wrapper.altselect_opt.selected_class);
		}
	};

	$.fn.altselect.wrapper_update = function(){
		var span = $("span.altselect-display", this)[0];
		var crt = $(this.altselect_mate).val();
		var text = $("option[value="+crt+"]",this.altselect_mate).html();
//		alert(crt);
		$(span).html(text);
//		alert($(span).html());

		$("ul li",this).each(function(){
			this.altselect_redraw();
		});
	};

	$.fn.altselect.wrapper_redraw = function(){
		this.altselect_update();
		
		this.altselect_is_open?this.altselect_open():this.altselect_close();
	};



	$.fn.altselect.defaults = {
		wrapper_class   : "altselect-wrap",
		hover_class     : "hover",
		selected_class  : "selected"
	};



})(jQuery);