// Plugin Name: indexedselect
// Plugin Author: David Moena

(function($) {

$.fn.indexedselect = function(options) {

	var defaults = {
		defaultText: "Select..."
	};
	var opts = $.extend(defaults,options);

	this.each(function(){
		var input = $('<input class="indexedselect_input" type="text" style="position:absolute;padding:0px;"/>');
		input.css({width:$(this).outerWidth() + 'px',
				height:'20px',
				top:$(this).position().top + 'px',
				left:$(this).position().left + 'px'}).
			val(opts.defaultText).
			insertAfter(this);

		input.focus(function(){
			$('.indexedselect').hide();
			indexedselect.show();
			content.css('height', index.outerHeight() + 'px');
			$(input).select();
		});

		input.click(function(){
			this.select();
			return false;
		});

		input.keypress(function(){
			return false;
		});

		var hidden = $('<input type="hidden"/>').insertAfter(input);
		if($.trim($(this).attr('name')) != ''){
			hidden.attr('name',$(this).attr('name'));
			$(this).attr('name','')
		}

		var img = $('<img class="img" src="indexed_select.png"/>').insertAfter(input);
		img.css({position:'absolute',
				left:(img.position().left - 18) + 'px',
				top:(input.position().top + 1) + 'px'});

		img.mouseover(function(){
			$(this).attr('src','indexed_select_hover.png');
		});
		
		img.mouseout(function(){
			$(this).attr('src','indexed_select.png');
		});

		img.click(function(e){
			if(!$(indexedselect).is(':visible')){
				$('.indexedselect').hide();
				$(indexedselect).show();
				content.css('height', indexedselect.find('.index').height() + 'px');
				$(input).select();
			} else {
				$('.indexedselect').hide();
			}
			return false;
		});

		var indexedselect = $('<ul class="indexedselect" style="margin:0px;padding:0px;list-style:none;position:absolute;margin-left:-18px;	* margin-left:-21px;">' +
							'<li class="index" style="float:left;width:18px;text-align:center;">' +
								'<ul style="margin:0px;padding:0px;list-style:none;cursor:pointer;white-space:nowrap;">' +
								'</ul>' +
							'</li>' +
							'<li class="content" style="overflow:auto;border:1px solid #cccccc;margin-left:18px;">' +
								'<ul style="margin:0px;padding:0px;list-style:none;cursor:pointer;white-space:nowrap;">' +
								'</ul>' +
							'</li>' +
						'</ul>').insertAfter(input);

		var content = indexedselect.find('.content');

		content.
			css('width', $(this).outerWidth() + 'px');

		content.mouseover(function(e){
			if($(e.target).children().length == 0)
				$(e.target).addClass('hover');
			return false;
		});

		content.mouseout(function(e){
			if($(e.target).children().length == 0)
				$(e.target).removeClass('hover');
			return false;
		});

		content.click(function(e){
			input.val(String($.trim($(e.target).html())).replace('&amp;','&'));
			hidden.val($(e.target).data('value'));
			indexedselect.hide();
			return false;
		}); 

		var index = indexedselect.find('.index');

		var iul = indexedselect.find('.index ul');
		var cul = indexedselect.find('.content ul');

		var indexes = Array();
		$(this).find('option').each(function(){
			var letter = String($(this).html()).substring(0,1).toLowerCase();
			if(!indexes[letter]){
				iul.append('<li>' + letter + '</li>');
				indexes[letter] = letter;
			}
			$('<li>' + $(this).html() + '</li>').
				data('value',$(this).attr('value')).
				appendTo(cul);
		});

		index.click(function(e){
			var selectedindex = String($.trim($(e.target).html())).toLowerCase();
			index.find('.selectedindex').removeClass('selectedindex');
			content.find('.selectedindex').removeClass('selectedindex');
			$(e.target).addClass('selectedindex');
			content.find('ul li').each(function(){
				if(String($(this).html()).substring(0,1).toLowerCase() == selectedindex) {
					$(this).addClass('selectedindex');
					var divOffset = content.offset().top;
					var pOffset = $(this).offset().top;
					var pScroll = pOffset - divOffset - 1;
					content.animate({scrollTop: '+=' + pScroll + 'px'}, 250);
					return false;
				}
			});
			return false;
		});

		index.mouseover(function(e){
			if($(e.target).children().length == 0)
				$(e.target).addClass('hover');
			return false;
		});

		index.mouseout(function(e){
			if($(e.target).children().length == 0)
				$(e.target).removeClass('hover');
			return false;
		});

		indexedselect.css('top', input.position().top + input.outerHeight() + 'px').
			css('left', input.position().left + 'px').
			hide();

		$(document).click(function() {
			$('.indexedselect').hide();
		});

		$(this).css('visibility','hidden');
	});
};

})(jQuery);