(function($) {
   
     //Attach this new method to jQuery  
    $.fn.extend({   
          
         //This is where you write your plugin's name  
		combobox: function(settings){
						
			$div = $(this);
			
			// Settings
			settings = jQuery.extend({
				width: '300px',
				height: '190px',
				comboCss: 'jquery_combo',
				itemCss: 'jquery_combo_item',
				itemOverCss: 'jquery_combo_item_over',
				icon: '/img/bt_flecha_reservas.jpg',
				value: ' ',
				data: null
			}, settings);
		
			$div.addClass(settings.comboCss);
			
			$div.css({			
					'width': parseInt(settings.width)-19,
					'float': 'left'					
			});
			
			//$div.parent().css({'padding-right': '2px'});
			
			//Agrego un hidden para que contenga el valor
			$hidden = $('<input type="hidden" name="'+$div[0].id+'" id="'+$div[0].id+'" value="'+(settings.value!='&nbsp;'?settings.value:'')+'">');
			
			$div[0].id = $div[0].id+'_div';
					
			//Lista con los valores y eventos
			$ul = $('<ul class="'+settings.comboCss+'_ul"></ul>');
			$ul.css({
				'width':parseInt(settings.width)+10+'px',
				'height':parseInt(settings.height)+'px'
			});
						
			heightUl = 0;
			$(settings.data).each(function(i,o){
				$li = $('<li class="'+settings.itemCss+'">'+o+'</li>');
				$li.id = $div[0].id;
				$li.mouseover(function(){
					$(this).removeClass(settings.itemCss);
					$(this).addClass(settings.itemOverCss);
				});
				
				$li.mouseout(function(){
					$(this).removeClass(settings.itemOverCss);
					$(this).addClass(settings.itemCss);
				});
				
				$li.click(function(a){				
					$(this).parent().toggle('fade');
					$(this).parent().prev().prev().prev().html($(this).html())	
					$(this).parent().prev().prev().val($(this).html())		
				});
				//Determino el alto real de la lista	
				heightUl += 21;				
				$ul.append($li);
				
			})			
			//Si el alto real es menor al alto del ul, lo achico
			if(parseInt($ul.css('height')) > heightUl){
				$ul.css('height',heightUl+'px');
			}
			
			
			$ul.hide();	
			//
			//Icono del combo
			$icon = $('<div></div>');
			$icon.css({
				'background': 'url('+settings.icon+') no-repeat',
				'width': '14px',
				'height': '17px',
				'float': 'left',
				'cursor': 'pointer'
			})
			$icon.click(function(){
				$(this).next().toggle('fade');
			});
			
			
			//Le cambio el id al div y se lo pongo al hidden
			
			$div.html(settings.value);
			
			//
			//Meto el icono, el hidden y el ul	
			$div.after($icon);	
			$div.after($hidden);
			$icon.after($ul);	
			
			return this;
		}
	});


})(jQuery);