/*
 * 	 styleSelect - apply style to a select box
 *   (http://www.8stream.com)
 *
 * 	 Copyright (c) 2009 Siim Sindonen, 8STREAM <siim@8stream.com>
 *   Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 * 
 *   Requires jQuery version: >= 1.3.2
 * 	 $Version: 1.2.1 | 22.09.2009
 */
 
(function($){

	$.fn.styleSelect = function(options){
		
		var tabindex = 1;
		
		var opts = $.extend({}, $.fn.styleSelect.defaults , options);
		
		return this.each(function() {
	
			mainSelect = $(this);
			var mainId = mainSelect.attr('name');
			var styledTabIndex = mainSelect.attr('tabindex');

			var date = new Date;
			var selectId = 'selectbox_'+mainId+date.getTime();
			
			//Hidde select box
			mainSelect.hide();
	
			//Main container 
			var mainContainer = $('<div></div>')
				.css({position : 'relative'})
				.addClass(opts.styleClass)
				.attr('id', selectId)
				.insertBefore(mainSelect);
			
			//Options container
			var subContainer = $('<div></div>').css({'top' : opts.optionsTop, 'opacity' : 0.85})
				.addClass('items_container')
				.appendTo($(mainContainer))
				.hide();
				
			//Generate options list
			var optionsList = "";
			
			mainSelect.find('option').each(function(){
				optionsList += '<a id="'+$(this).val()+'"';
				if ($(this).attr('selected')) optionsList += ' class="selected"';
				optionsList += '>';
				optionsList +=  '<span>'+$(this).text()+'</span></a>';
			});

			subContainer.append(optionsList);
			var sch = subContainer.height();
			sch = sch > opts.optionsHeight ? opts.optionsHeight : sch;
			subContainer.css({'top': opts.optionsPos == 'down' ? opts.optionsTop : -sch, 'height': sch+'px'});
			
			checkSelected(opts.styleClass);
				
			//Show otions
			$('#'+selectId).click(function(){
				$(this).find('div.items_container').animate({'opacity':'toggle'},opts.speed);
			});
			
			//On click
			$('#'+selectId+' a').click(function(){ doSelection($(this)); });
			
			//Do selection
			var doSelection = function(item) {
				item.siblings().removeClass('selected');
				item.addClass('selected');
				var selectedItem = item.attr('id');
				var realSelector = $('select[name="'+mainId+'"]');
				realSelector.siblings().selected = false;
				realSelector.find('option[value="'+selectedItem+'"]').attr('selected','selected');
				realSelector.trigger(opts.selectTrigger);
				checkSelected(opts.styleClass);
			}
			
			$('#'+selectId).click(function(e) { e.stopPropagation(); });
			$(document).click(function() { $('#'+selectId+' div.items_container').animate({'opacity':'hide'},opts.speed); });
			
			});	
		}
		
		//Selected items check
		function checkSelected(mainClass){				
			$('.'+mainClass).each(function() {
				$(this).find('.select').each(function() { $(this).remove(); });
				var selectedName = $(this).find('.selected');
				var selectDiv = $('<div></div>').addClass('select').appendTo($(this));
				$('<span></span>').text(selectedName.text()).appendTo($(selectDiv));
			});
		}	
	
		$.fn.styleSelect.defaults = {
			optionsPos: 'down',
			optionsTop: '25px',
			optionsHeight: '200',
			styleClass: 'selectMenu',
			speed: 0,
			selectTrigger: 'change'
		};
	
})(jQuery);