/*
 * UPDATED: 11.26.08
 *
 * jList
 * by Sean Mooney (sean@whitespace-creative.com) 
 *
 * To Use: place in the head 
 *  <link href="inc/style/jList.css" rel="stylesheet" type="text/css" />
 *  <script type="text/javascript" src="inc/js/jquery.jList.js"></script>
 *
 * And apply the jList class to the form you want to style
 *
 * To Do: Add textareas, Add File upload
 *
 ******************************************** */

(function($){
	$.fn.jList = function(options){
		var self = this;
		var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
		/* Apply document listener */
		$(document).mousedown(checkExternalClick);
		/* each form */
		return this.each(function(){
			$('ul', this).each(function(index){ ListChange(this, index); });});
			
		};/* End the Plugin */

		/* Hide all open selects */
	var ListHide = function(){
			$('.jListSelectWrapper ul:visible').hide();
	};

	/* Check for an external click */
	var checkExternalClick = function(event) {
		if ($(event.target).parents('.jListSelectWrapper').length === 0) { $(".jListSelectWrapper ul").find('a').eq(0).addClass('selected'); ListHide(); }
	};

	var ListChange = function(element, index){
		var height; 
		var $ul = $(element);
		index = index || $ul.css('zIndex')*1;
		index = (index) ? index : 0;
		/* First thing we do is Wrap it */
		$ul.wrap($('<div class="jListWrapper"></div>').css({zIndex: 100-index}));
		$ul.show();
		var width =$ul.width()+41;
		list_count = $ul.find('a').length;
		if(list_count<5) {height=list_count*20;
		$ul.height(height);}
		else {height= $ul.height();}
		
		var top = $ul.offset().top;
		var left = $ul.offset().left;
		$ul.wrap('<div class="jListSelectWrapper"></div>').parents('.jListSelectWrapper').eq(0).prepend('<div><span class="jListSelectOpen"></span><span class="jListSelectText"></span></div>');
		var $wrapper = $(element).parents('.jListSelectWrapper').eq(0).css({width: width +'px', left: left +'px', top: top +'px'});
		$('.jListSelectText', $wrapper).width( width - $('.jListSelectOpen', $wrapper).width());
		$ul[0].selectedIndex=0;
		//$('.jListSelectWrapper ul', $wrapper).css({width:width-20 + 'px'});
		/* IF IE 6 */
		/*if ($.browser.msie && jQuery.browser.version < 7) {
			$ul.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $ul.height() +'px', width:width-21 +'px' }));
		}*/
		/* Now we add the options */
		ListUpdate(element);
		/* Apply the click handler to the Open */
		$('div', $wrapper).click(function(){
			var $ul = $(this).siblings('ul');
			if ($ul.css('display')=='none'){ ListHide(); } /* Check if box is already open to still allow toggle, but close all other selects */
			$ul.toggle();
			/*var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
			$ul.animate({scrollTop: offSet}, 100);*/
			return false;
		});
		/* Add the key listener */
		$ul.keydown(function(e){
			var selectedIndex = this.selectedIndex;
			switch(e.keyCode){
				case 40: /* Down */
					if (selectedIndex < this.options.length - 1){ selectedIndex+=1; }
					break;
				case 38: /* Up */
					if (selectedIndex > 0){ selectedIndex-=1; }
					break;
				default:
					return;
					break;
			}
			$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
			$('span.jListSelectText', $wrapper).html($('option:eq('+ selectedIndex +')', $select).attr('selected', 'selected').text());
			return false;
		}).focus(function(){ $wrapper.addClass('jListFocus'); }).blur(function(){ $wrapper.removeClass('jListFocus'); });
	};

	var ListUpdate = function(element){
		var $ul = $(element);
		var $wrapper = $ul.parents('.jListSelectWrapper').eq(0);
		$('a', $ul).each(function(i, link){
			$(link).attr('index', i);
		});
		/* Add click handler to the a */
		$ul.find('a').click(function(){
			$('a.selected', $wrapper).removeClass('selected');
			$(this).addClass('selected');	
			/* Fire the onchange event */
			if ($ul[0].selectedIndex != $(this).attr('index') && $ul[0].onchange) { $ul[0].selectedIndex = $(this).attr('index'); $ul[0].onchange();}
			$ul[0].selectedIndex = $(this).attr('index');
			$('span.jListSelectText', $wrapper).html($(this).html());
			$ul.hide();
			return false;
		});
		
		$ul.find('a').hover(function(){$ul.find('a').removeClass('selected')}, function(){});
		
		/* Set the defalut */
		$('a:eq('+ $ul[0].selectedIndex +')', $ul).click();
	};


	/* Utilities */
	$.jList = {
			ListChange : function(element, index){ 	ListChange(element, index); },
			ListUpdate : function(element){ ListUpdate(element); }
	};/* End Utilities */

})(jQuery);