jQuery.fn.sgmcombo = function(settings){
		
	jQuery.fn.sgmcombo.defaults = {
		width: '100%',
		size: 5,
		align: 'left'
	};
	
	settings = $.extend({}, $.fn.sgmcombo.defaults, settings);
	
	width = 'width: ' + settings.width + '; ';
	align = 'text-align: ' + settings.align + '; ';
	
    return this.each(function() {
      
    	$(this).css('display', 'none');
    	
    	// Creamos un objeto para usarlo
    	obj = $(this);
    	
    	// Nombres de campos (por comodidad)
    	nombre = $(this).attr('name');
        nombre_input = nombre + '_input';
        nombre_boton = nombre + '_btn';
        nombre_div 	 = nombre + '_div';
        nombre_hidden = nombre + '_id';
        
        // Lee la imagen de los parámetros
        if (typeof(settings.img != 'undefined'))
			img = '<img rel="' + nombre + '" src="' + settings.img + '" id="' + nombre_boton + '" class="btn_desplegable" />';
		else
			img = '';
        
        // Recorre los elementos del combo
        elementos = '';
        
        h = $(obj).children();
        h.each(function(index, item){
        	id = item.value;
        	texto = item.text;
        	
        	if (texto != '')
        		elementos += '<li abbr="' + id + '">' + texto + '</li>';
        });
        
        // Añade los elementos específicos del combo
        input = $(this).parent().append('<div class="bg_textbox" style="' + width + ';"><input rel="' + nombre + '" class="textbox" type="text" name="' + nombre_input + '" id="' + nombre_input + '" readonly="readonly" style="' + align + '" /></div>');
        img_c = $(this).parent().append(img);
        div_c = $(this).parent().append('<div rel="' + nombre + '" id="' + nombre_div + '" style="' + width + '" class="desplegable"><ul>' + elementos + '</ul></div>');
        
        $('#' + nombre_div).css('height', (settings.size * 25) + 'px');
        
        // hidden = $(this).parent().append('<input type="text" name="' + nombre_hidden + '" id="' + nombre_hidden + '" />');
        
        // Despliega el combo
        $('#' + nombre_boton).bind('click', function() {

        	combo = $(this).attr('rel'); 
       
        	xnombre_div = '#' + combo + '_div';
        	xnombre_input = '#' + combo + '_input';
        	
        	$('.desplegable:not(' + xnombre_div + ')').slideUp('fast');
        	
        	position = $(xnombre_input).position();
        	
    		$(xnombre_div).css({
    			'top': position.top + 27,
    			'left': position.left
    		});
    		
    		$(xnombre_div).scrollTop(0);
    		
    		$(xnombre_div).slideToggle('fast');
        });
        
        // Captura el CLICK en los elementos del listado
        $('#' + nombre_div + '>ul>li').bind('click', function(){
        	
        	combo = $(this).parent().parent().attr('rel'); 
        	
        	id = $(this).attr('abbr');
    		value = $(this).attr('innerHTML');
    		
    		$('#' + combo + '_input').attr('value', value);
    		$('#' + combo).val(id);
    		
    		$('#' + combo + '_div').slideToggle('fast');
        });
        
        // Efecto en el SOBRE
        $('.desplegable>ul>li').bind('mouseover', function(){
        	$(this).addClass('sobre');
        });
        
        $('.desplegable>ul>li').bind('mouseout', function(){
        	$(this).removeClass('sobre');
        });

    });
};