(function($) {

	jQuery.fn.customSelect = function(settings) {

		return this.each(function() {
			$this = jQuery(this);

			if($this.context.nodeName == 'SELECT') {
				customizeSelect( $this );
			}
			else {
				$this.find('select').each(function() {
					customizeSelect( jQuery(this) );
				});
			}
		});


		function customizeSelect($sel) {
			// ----------  CREATION  ----------
			var name = $sel.attr('name');
			
			var csId = 'cs-'+$sel.attr('id');
			
			var selected = $sel.find(':selected').attr("value");
			var cVal = '<div class="cs-val" id="'+csId+'-val">'+selected+'</div>';

			var listOpts = '';
			$sel.children('option').each(function(){
				var v = jQuery(this).attr("value");
				var selectedClass = (v == selected) ? ' cs-selected' : '';
				listOpts += '<p class="cs-option'+selectedClass+'">'+v+'</p>';
			});
			
			var cOpts = '<div class="cs-options" id="'+csId+'-options">'+listOpts+'</div>';
			$sel.after('<div id="'+csId+'" class="cs-holder">'+cVal+cOpts+'</div>');
			$sel.css('display', 'none');
			
			
			// ----------  HOVER  ----------
			jQuery('#'+csId+'-val').hover(
				function() { jQuery(this).addClass('cs-hover'); },
				function() { jQuery(this).removeClass('cs-hover'); }
			);
			
			
			// ----------  ANIMATION  ----------
			var $cs = jQuery('#'+csId);
			$cs.click(function() {
				var selector = '#'+csId+'-options';
				jQuery(selector).toggle('slow', function() {
					/*
					// outside click detection
					if(jQuery(this).is(':visible')) {
						jQuery(document).bind('click', function(e){
							jQuery('.cs-options').hide("slow");
						});
					}
					else {
						jQuery(document).unbind('click');
					}
					*/
				});
				jQuery('.cs-options:not('+selector+')').hide("slow");
			});
			
			$cs.find('.cs-option').hover(
				function() { jQuery(this).addClass('cs-opt-hover'); },
				function() { jQuery(this).removeClass('cs-opt-hover'); }
			).click(function() {
				var v = jQuery(this).html();
				jQuery('#'+csId+'-val').html(v);
				
				$cs.find('.cs-selected').removeClass('cs-selected');
				$sel.find(':selected').removeAttr('selected');
				
				jQuery(this).addClass('cs-selected');
				$sel.find('option[value="'+v+'"]').attr('selected', 'selected');
			});
			
			
			// ----------  KEYBOARD ----------
			$cs.keypress(function(e) {
				if(e.charCode == 32) { //space
					jQuery('#'+csId+'-options').toggle("slow");
				}
			});
			
			
			// ----------  OUTSIDE CLICK DETECTION  ----------
			$cs.hover(
				function() {
					jQuery(document).unbind('click');
				},
				function() {
					jQuery(document).bind('click', function(e){
						jQuery('.cs-options').hide("slow");
					});
				}
			);
			
		}

	};

})(jQuery);