/*
	V1

	Will convert a standard select box into a nice <ul><li> styled list. 
	Will also incorporate OPTGROUPS and convert them to
	
	See accompanying dropdown.css for styling

	Example use:
	
	$( "#location-chooser" ).fancyDrop({
		first:	'Please select one...',
		onSelect : function(){}
	});
	
*/

(function($){
	
	$.fn.tagName = function() {
	    return this.get(0).tagName;
	}
	
	$.fn.fancyDrop = function(options) {
		
		var defaults = {
			first:	'default',
			onLoad:		function(){},
			onSelect:	function(){}
		},
		settings = $.extend({}, defaults, options);
		
		//Create empty list
		items = '';
		
		//Create an array to put the current <option> values into
		values = [];
		
		this.each(function(){

			var $this = $(this);
			
			
			if(settings.first == 'default'){
				topText = $this.children('option[selected]').text();
			}else{
				topText = settings.first;
			}
			
			t = $this.children('option').size() - 1;
			
			
			$.each( $this.children(), function(i,oObj){
			
				if( $(this).tagName() === 'OPTION' ){
					makeListOption( i, $(this) );
				}
				
				if( $(this).tagName() === 'OPTGROUP' ){
					makeSubListOption( i, $(this).children( 'option' ) );
				}
					
			});
			
			createDropDown( t, items, values, $this.attr('name'), topText );
		
			function makeListOption( iCnt, oObjectRow ){
				
				txt = oObjectRow.text();
				val = oObjectRow.attr('value');

				if(val == ''){
					val = txt;
				}

				items = items + '<li><a href="#" title=\"' + val + '\">'+ txt +'</a></li>';
			}
			
			function makeSubListOption( iCnt, oObjectRow ){
				
				items = items + "<li class=\"sub_menu\"><span>London</span><ul>";
			
				$.each( oObjectRow, function(i,oObj){
					txt = $(this).text();
					val = $(this).attr('value');
					items = items + '<li><a href="#" title=\"' + val + '\">'+ txt +'</a></li>';
	
					values[iCnt++] = val;
				});
				items = items + "</ul></li>";
				
				
			}
			
			
			//GENERATE THE HTML CODE FOR THE DROP DOWN MENU
			function createDropDown(t, items, values, name, initial){
				ddReplace = '<div id="'+name+'" class="drop_down"><a href="#" class="top">'+initial+'</a><ul class="primary">'+items+'</ul></div><input type="hidden" name="'+name+'" value=""/>';
				
				$this.after(ddReplace);
				$this.remove();
				settings.onLoad.call(this);
				
			}
			
		});
		
		//TOP CLICK
			
		$('div.drop_down a.top').click(function(){
			id = $(this).parent('div').attr('id');
			if($('#'+id).hasClass('drop_down_active')==false){
				$('#'+id).addClass('drop_down_active');
				$('#'+id).css({overflow:'visible'});
			}else{
				$('#'+id).removeClass('drop_down_active');
				$('#'+id).css({overflow:'hidden'});
			}
			return false;
		});
		
		//ROLL OUT
		
		$('div.drop_down').mouseleave(function(){
			$(this).css({overflow:'hidden'}).removeClass('drop_down_active');
		});
		
		//ITEM CLICK
		
		$('div.drop_down li a').click(function(){
			
			txt = $(this).text();
			val = $(this).attr('title');
			
			id = $( this ).closest( 'div.drop_down' ).attr( 'id' );
			
			$('#'+id).css({overflow:'hidden'}).removeClass('drop_down_active');
			
			$('#'+id).children('a.top').text(txt);
			
			$("input[name='"+id+"']").val(val);
			
			settings.onSelect.call(this);
			return false;
		});
		
	};
})(jQuery);