/*********************************/
/*
/* 	Author: Mathieu Price
/*
/*	Contact: primat777@hotmail.com
/*
/*********************************/
;(function($){
 $.fn.jSelect = function(options) {

  var defaults = {
   className : 'default',
   msieMaxHeight : 240
  };
  var options = $.extend(defaults, options);

  return this.each(function(i) {
													
		var jSelectCounter = $('.jSelect').length;
		var $originalSelect = $(this);
		var $originalOptions = $('option',$originalSelect);
		var $selectedOption = $('option:selected',$originalSelect).eq(0);
		var newID = 'jSelect_'+(jSelectCounter + 1); // Set a unique id for this newly created jSelect

		// Create the new container that will replace the select box
		var box = '<div id="' + newID + '" class="jSelect ' + defaults.className + '">\n';
		box += '\t<div>' + $selectedOption.text() + '</div>\n';
		box += '\t<ul></ul>\n';
		box += '</div>\n';

		// Insert the new box after the old select and then hide the old select
		$originalSelect.after(box);
		$originalSelect.hide();
		
		// Store the new reference to the outter div
		var $newOuterDiv = $('#'+newID);
		var $newInnerDiv = $newOuterDiv.children('div').eq(0);
		var $newUl = $newOuterDiv.children('ul').eq(0);
		
		// Disable text selection in this jSelect
		var target = document.getElementById(newID);
		if (typeof target.onselectstart!="undefined") //IE route
			target.onselectstart=function(){return false}
		else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
			target.style.MozUserSelect="none"
		else //All other route (ie: Opera)
			target.onmousedown=function(){return false}
		
		// Add an li for each option in the original select
		var lis = '';
		$originalOptions.each(function(){
			if ($(this).is(':selected'))
				lis += '<li id="' + $(this).val() + '" class="selected">' + $(this).text() + '</li>\n';
			else
				lis += '<li id="' + $(this).val() + '">' + $(this).text() + '</li>\n';
		});
		$newOuterDiv.children('ul').eq(0).html(lis).children('li').hover(
      function () {
        $(this).addClass('selected');
      }, 
      function () {
				if ($(this).text() != $newInnerDiv.text())
        	$(this).removeClass('selected');
      }
    );
		
		// Bind the click event to the new outterDiv
		$newOuterDiv.bind('click', {'originalSelectObj':$originalSelect}, function(e) {
			e.stopPropagation();
			
			// Check if the ul is visible already
			if ($newOuterDiv.hasClass('open')) {
				
				if (e.target.nodeName.toUpperCase() == 'LI') { // Make sure we are operating on a <li>
					
					var $targetLi = $(e.target);
					var val = e.target.id
					
					$targetLi.parent().children('li.selected').removeClass('selected');
					$targetLi.addClass('selected');
					
					$(this).children('div').text($targetLi.text());
					
					e.data.originalSelectObj.val(val); // Set the new value in the select box we replaced
				}

				$('.jSelect').removeClass('open'); // Hide the menu
				
				// ie zIndex fix
				if ($.browser.msie) {
					$('.jSelect').css('zIndex','1000');
				}
				
				$(document).unbind('click.jSelect');
			}
			else {
				// ie z-index fix
				if ($.browser.msie) {
					// Set the maximum height in ie
					if ($newUl.height() > defaults.msieMaxHeight) {
						$newUl.css('height', defaults.msieMaxHeight+'px');
					}
						
					$('.jSelect').css('zIndex','1000'); // Set all jSelects to 1000 zIndex
					$newOuterDiv.css('zIndex','1001'); // And set the one we are opening just a tad higher
				}
				
				// Close all other jSelects and unbind the close event for them(it) 
				$('.jSelect').removeClass('open');
				$(document).unbind('click.jSelect');
				
				// Open this particular jSelect and set the click bindings
				$newOuterDiv.addClass('open');
				$(document).bind('click.jSelect', {'id':e.data.id}, function(e){
					e.stopPropagation();
					$newOuterDiv.removeClass('open');
					$(document).unbind('click.jSelect');
				});
			}
		});
  });
 };
})(jQuery);