/**
  *
  * @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);

		// todo support for commands
		

		$(this).each(function(){

			var selectobj = this;


/* INJECT  CODE  ************/
			
			var w = $(this).width();
			w += parseInt($(this).css("padding-left"));
			w += parseInt($(this).css("padding-right"));
			
			//first the wrapper
			var wrapper = $('<div class="altselect" />').width(w).insertAfter(selectobj)[0];

			//then the display
			$(wrapper).append("<div class='display'><span /></div>");
			$(wrapper).append("<ul/>");

			//then the options
			$("option",selectobj).each(function(){

				var a = $("<a href='#' />")[0];

				a.altselect_mate = this;
				a.altselect_wrapper = wrapper;
				
				a.altselect_redraw = $.fn.altselect.item_redraw;
				$(a).hover($.fn.altselect.item_over,$.fn.altselect.item_out).click($.fn.altselect.item_click);
				
				$("ul", wrapper).append('<li />');
				$("ul li:last",wrapper).append(a);

			});
			
			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  **********/
			
			// whenever the select changes, so should the altselect
			$(selectobj).change(function(){
				wrapper.altselect_redraw();
			});

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

			// whenever clicking outsite the object, we close it(if open)
			$(document).click(function(){
				if ( wrapper.altselect_is_open && !wrapper.altselect_hover ){
					wrapper.altselect_close();
				}
			});

			// todo keyboard support
			


/*  CLEANING  UP  ***********/

			// todo control over how to hide this
			// maybe with a callback?
			
			// we move the select out of sight, allthough it still exists
			$(selectobj).css("position","absolute").css("left","-9999px");

			// some z-index tricks to avoid overlapping of consecutive selects
			$(wrapper).css("z-index",1);

			// first redraw
			wrapper.altselect_redraw();

		});
		return $(this);
	};

/*  FUNCTIONS  **************/
	$.fn.altselect.item_click = function(){
		this.altselect_wrapper.altselect_close();
		$(this.altselect_wrapper.altselect_mate).val($(this.altselect_mate).attr("value")).change();
		return false;
	};
	
	$.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(){

		// todo provide a way to customize what happens here
		// maybe allow this function to be replaced completely
		// or maybe use a callback
		
		$(this).html($(this.altselect_mate).html());
		
		if ( $(this.altselect_wrapper.altselect_mate).val() == $(this.altselect_mate).attr("value") ){
			$(this).addClass('selected');
		}else{
			$(this).removeClass('selected');
		}
	};

	$.fn.altselect.wrapper_update = function(){

		// todo check and see if the content of the selectbox isn't changed
		// maybe it's better to reconstruct the options everytime here?
		// or maybe provide a method for doing that manualy

		var span = $('div.display span', this);
		var crt = $(this.altselect_mate).val();
		var text = $("option[value="+crt+"]",this.altselect_mate).html();

		$(span).html(text);

		$("ul li a",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 = {
		
	};



})(jQuery);