/****************************************/
/* jQuery Custom Select Plugin			*/
/* 										*/
/* Author: 	David Dexter				*/
/* Version: 0.01						*/
/* Date: 	12/28/2006					*/
/* Email: 	blemming [at] gmail.com	 	*/
/* 										*/
/****************************************/

jQuery.fn.customSelect = function(){
	CS = jQuery('#'+jQuery(this).id());
	init();
}

CS = 			new Object();
CS_bodyClick 	= Array();
CS_option 		= '';

function init(obj){
	var sel = 	'';
	// CREATE THE HTML FOR THE NEW "SELECT BOX" 
		var tmp = 	'	<table border=0 cellpadding="0" cellspacing="0">'+
					'		<tr>'+
					'			<td>'+
					'				<div class="CS_select" id="CS_'+CS.id()+'">'+
					'					<a id="curr_'+CS.id()+'" class="CS_current" onClick="CS_toggle(this.parentNode);event.cancelBubble=true;">'+
					'					<table cellpadding=2 cellspacing=0><tr><td><img src="grey.jpg" /></td><td>What Is Your Favorite Color</td></tr></table></a>'+
					'					<div class="CS_hidden">';
	// LOOP THROUGH ALL OF THE NESTED DIV TAGS TO 
	// CREATE THE FAUX OPTION TAGS
		var i = 0;
		jQuery('#'+CS.id()+' div').each(function(){
													// STORE THE FIRST VALUE TO PUT IN THE 
													// HIDDEN TEXT FIELD FOR THE CUSTOM SELECT BOX
														if(i==0){
															val = jQuery(this).attr('val');
															i++;
														}

													// SET AN ATTRIBUT OF "SEL" = TRUE IN ORDER 
													// TO DEFAULT TO A GIVEN OPTION
														if(jQuery(this).attr('sel') == 'true'){
															sel 	= 	jQuery(this).html();
															sel_val = 	jQuery(this).attr('val');
														}
													// CREATE OPTIONS
														tmp += '<a vl="'+jQuery(this).attr('val')+'" href="javascript: void(0);" class="choice_'+CS.id()+'">'+jQuery(this).html()+'</a>';
												});
	
		tmp +=		'					</div>'+
					'					<input type="hidden" value="'+val+'" name="'+CS.id()+'" id="val_'+CS.id()+'">'+
					'				</div></td>'+
					'			<td height="100%">'+
					'				<table width="100%" height="100%" cellpadding="0" cellspacing="0">'+
					'					<tr>'+
					'						<td class="CS_down">'+
					'							<img hspace="2" vspace="2" src="'+downimage+'" onClick="CS_toggle(document.getElementById(\'CS_'+CS.id()+'\'));event.cancelBubble=true;" /></td>'+
					'					</tr>'+
					'				</table></td>'+
					'		</tr>'+
					'	</table>';
	// REPLACE THE EXISTING DIVS WITH THE NEW 
	// CUSTOM SELECT BOX
		CS.html(tmp);

	// IF THERE IS A DEFAULT OPTION SELECT IT NOW
		if(sel != ''){
			jQuery('#curr_'+CS.id()).html(sel);
			jQuery('#val_'+CS.id()).val(sel_val);
		}
	
	// CREATE THE ON CLICK EVENTS FOR THE CUSTOM OPTION TAGS
		CS_select(CS.id());
	
	// CREATE THE EVENT THAT CLOSES ANY OPEN BOXES WHEN THE BODY IS CLICKED
		CS_bodyOnclick(CS_close); 
}

// TOGGLE THE SELECT BOX OPEN OR CLOSED
	function CS_toggle(obj){
		if(CS_option != ''){
			jQuery('#'+CS_option).next().addClass('CS_hidden');
			CS_option = '';
		}
		var h = jQuery('#'+obj.id).find('div');
		choices = h.attr("class");
		if (choices == 'CS_hidden'){
			CS_option = obj.id;
			CS_close(); 
			h.addClass('CS_options');
		}else{
			h.removeClass('CS_options');
			CS_option = '';
		}
	}

// CREATE THE ON CLICK FOR THE OPTIONS 
	function CS_select(obj){
		jQuery('.choice_'+obj).click(function(){
								jQuery('#val_'+obj).val(jQuery(this).attr("vl"));
								jQuery('#curr_'+obj).html(jQuery(this).html());
							});
	}

// CLOSE ALL OPEN CUSTOM SELECT BOXES
	function CS_close(){
		jQuery('div').removeClass('CS_options');
	}
	function CS_bodyOnclick(fnc){
		document.onclick = CS_bodyOnClick;
		CS_bodyClick[CS_bodyClick.length] = fnc;
	}
	function CS_bodyOnClick(){
		for (var i=0;i<CS_bodyClick.length;i++){
			CS_bodyClick[i]();
		}
	}