(function($){
		  
	$.fn.jselectRender = function(options){
		var $div = $(this);
		var safari = $.browser.safari; 
		var firefox = $.browser.mozilla; 	
		
		
		var $title = $('>div', this);		
		var $ul=$('>ul', this);
		
		var liwidth=0,licolums=0;
		liwidth=parseInt($div.attr('liwidth')?$div.attr('liwidth'):'50');
		licolums=parseInt($div.attr('colums')?$div.attr('colums'):4);
		
		
		$div.show();
		
		//隐藏ul
		$ul.hide();
		$ul.css('width',(liwidth+10)*licolums+'px' );
		
		$ul.css('margin-left',-(liwidth+4)+'px' );
		$ul.css('margin-top',$title.height()-4+'px');
		
		$div.css('width',(liwidth+4)+'px' );
		
		$title.addClass('title');
		//$title.css('width',liwidth+'px' );
	
		
		$title.mouseover(function(){			
			//ul_show();
		});			
		$title.mouseout(function(){			
			$ul.hide();
		});	
		$title.click(function(){			
			ul_show();
		});	
		
		$ul.mouseover(function(){			
			ul_show();
		});			
		$ul.mouseout(function(){			
			//$ul.hide();
		});		
		
		var ul_show=function(){			
			$ul.show();
		};
		
		//默认选项
		var defaulttext=$div.attr('default');
		if(defaulttext){
		$title.text(defaulttext);			//if(!$title.text())
		$title.attr('title',$title.text());
		$ul.prepend('<li data="" >'+defaulttext+'</li>');
		}
		
		$('> li', $ul).each(function(index){	
			var $li = $(this);	
			var spanData=$title.attr('data');	
			
			$li.css('overflow','hidden' );
			
			$li.css('width',liwidth+'px' );
			//alert(ulData);			
			
			$li.click(function(){
							
				$title.attr('data',$(this).attr('data'));
				$title.text($(this).text());
				$title.attr('title',$title.text());
				
				$(this).siblings().removeClass('selected'); 
				$(this).addClass('selected');
				
				$ul.hide();
				
				if($div.attr('field')) $('input#'+$div.attr('field')).val($title.attr('data'));
				
				
				var change=$div.attr('change');//$(this).parent().parent().attr('change');
				if(change){					
					//eval(change+"('"+$(this).attr('data')+"','"+$(this).text()+"');");
					eval(change+"($(this));");
				}
			});	
			
			$li.each(function(index){	 			
					var li2Data=$(this).attr('data');	
					$(this).attr('title',$(this).text());
					if(li2Data && li2Data==spanData) $(this).addClass('selected');					
			});	
			
			$li.mouseover(function(){			
				$(this).addClass('over');
			});			
			$li.mouseout(function(){			
				$(this).removeClass('over');
			});	
			
			
		});	
		
		
		/* Hide all open selects */
		var hideSelect = function(){
			$('div.jselect >ul').hide(); 
		};
		
		/* Check for an external click */
		var checkExternalClick = function(event) {
			if ($(event.target).parents('.jselect').length === 0) { hideSelect(); }
		};		
		
		$(document).mouseover(checkExternalClick);
		
		
		
	};/* End the Plugin */
	
	
	$.fn.jselectSetData = function(data,selected,isHash){
		
		isHash= isHash ? true:false;
		
		var $div = $(this);
		var safari = $.browser.safari; 
		var firefox = $.browser.mozilla; 	
		
		
		var $title = $('>div', this);		
		var $ul=$('>ul', this);
		
		
		
		$ul.empty();
			
		
		
		if(isHash){		
			if(selected){
				$ul.attr('data',selected);
				$ul.text(data[selected]);
			}			
			for(var key in data){
				$ul.append('<li data="'+key+'" >'+data[key]+'</li>');			
			}	
		}else{
			if(selected){
				$ul.attr('data',selected);
				$ul.text(selected);
			}			
			for(var key in data){
				$ul.append('<li data="'+data[key]+'" >'+data[key]+'</li>');			
			}
		}
		
		$div.jselectRender();
		
	};/* End the Plugin */
	

	
	$(function(){			  
		$('div.jselect').each(function(index){				
			$(this).jselectRender();						   
		});		
	});

})(jQuery);
/*
<div class="jselect" liwidth="50" colums=4 field=name change=fun>	
	<div data="">区域2</div>
    <ul>    
        <li data="Recent">宝山</li>        
    </ul>
</div>
*/