(function($) {
  $.fn.elSelect = function(options) {
	var defaults = {width: 206};
	var options = $.extend(defaults, options);  				
    return this.each(function() {
		// inicia reemplazo del select
			selector = $(this); 
			var selectorId = '#'+selector.attr('id');
			var change = $(selectorId+' select[onchange]').attr('onchange');

			if(options.width!=206){
				ancho = 'style="width:'+options.width+'px;"';
				if(options.width<206){
					anchoInterno = 'style="width:'+(options.width-29)+'px;"';
				}
			}else{ancho = '';anchoInterno ='';}
			
			var textInputName 	= $('select', selector).attr('name'); // nombre del select
			var primerValor 	= $('select :selected', selector).text();
			if($.trim(primerValor)==''){
				primerValor = $('select option:first',selector).text();
			}
			
			cuerpoSelect = '<div class="elSelect" '+ancho+'><div class="selected"><div class="selectedOption" '+anchoInterno+'>';
			cuerpoSelect = cuerpoSelect + primerValor+'</div><div class="dropDown"></div></div>';
			cuerpoSelect = cuerpoSelect + '<div class="clear"></div>';
			cuerpoSelect = cuerpoSelect + '<div '+ancho+' class="optionsContainer">';
			cuerpoSelect = cuerpoSelect + '<div '+ancho+' class="optionsContainerTop"><div><div></div></div></div>';

			// creacióe las opciones
			$('select option',selector).each(function(){
				var extraClases = '';
				if($(this).attr('selected')){extraClases = 'selected ';}
				if($(this).attr('disabled')){extraClases = 'disabled ';}
				extraClases = extraClases + $(this).attr('class');
				cuerpoSelect = cuerpoSelect + '<div class="option '+extraClases+'" alt="'+$(this).attr('value')+'">'+$(this).text()+'</div>';
			});

			cuerpoSelect = cuerpoSelect + '<div '+ancho+' class="optionsContainerBottom"><div><div></div></div></div></div></div>';
			$(selector).append(cuerpoSelect);
			$(selector).append('<input type="hidden" name="'+textInputName+'" id="'+ textInputName +'" />');
		// finaliza reemplazo del select

		// inicializacion del valor seleccionado
		$('input[name='+textInputName+']').val($('select',selector).val());
		$('.optionsContainer .selected',selector).addClass('selected');

		// inicio de comportamiento
			$(selectorId+' .selected:first').toggle(
				function(){
					$(selectorId+' .optionsContainer').css('display','block');
				},
				function(){
					$(selectorId+' .optionsContainer').css('display','none');
				}
			);
			
			$('html')
			.not(selectorId)
			.click(function() {
				if($(selectorId+' .optionsContainer').css('display')=='block'){
					$(selectorId+' .selected:first').trigger('click');
				}
			});

			$('.optionsContainer .option',selector) // efecto de hover sobre la opciones
			.not('.disabled').hover(
				function(){ 
					$('.optionsContainer .option',selector).removeClass('selected');
					$(this).addClass('selected');
				},
				function(){ 
					$(this).removeClass('selected');
				}
			);

			$(selectorId+' .optionsContainer .option')
			.not('.disabled')
			.click(function(){ // seleccióe una opció			// se extrae el valor del atributo 'alt' en el div contenedor de la opció			
				var current_selected = $(this).attr('alt');
				//$('input[name='+textInputName+']').val(current_selected); // se asigna el valor al input hidden creado para substituir al select
				document.getElementById(textInputName).value = current_selected;
				
				if(change!=undefined){ // se agrega la funcion onchange al input hidden
					$('input[name='+textInputName+']').attr('onchange',change);
				}
				
				$(selectorId+' .selectedOption').text($(this).text());

				// se esconde el container nuevamente
				$(selectorId+' .selectedOption').trigger('click');
				
			});

			$(selectorId+' .selected:first').click(function(){
				$(selectorId+' .optionsContainer .option')
				.filter('div[alt='+$('input[name='+textInputName+']').val()+']')
				.addClass('selected'); // se agrega la clase 'selected' fuera del hover para evitar el evento out
			});
			
		// final de comportamiento		
		
		//se borra el select inicial
		$(selectorId+' select').remove();
    });
  }
})(jQuery);