$(document).ready(function(){
	select_box_id = 0;
	initSelectBox();
});

function initSelectBox(){
	//now, for each select box, run this function
	$("select").each(function(){
		
	if( $(this).css('display') != 'none' ){
		if( 
			$(this).attr('id') != 'b_country' &&
			$(this).attr('id')!= 's_country' &&
			$(this).attr('id')!= 's_state' &&
			$(this).attr('id')!= 'b_state' &&
			$(this).attr('id')!= 'state' &&
			$(this).attr('id')!= 'country'
		){
			select_box_id ++;
			$(this).css('display','none');
			$(this).attr('select_box_id', select_box_id);

			var curSel = $(this);
			// get the CSS width from the original select box
			var gddWidth = $(curSel).css('width');
			var gddWidthL = gddWidth.slice(0,-2) * 1 + 15;
			var gddWidth2 = gddWidthL - 28;
			var gddWidth3 = gddWidthL - 16;
			// build the new div structure
			var gddTop = '<div style="width:' + ( gddWidthL * 1 + 6 ) + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
			//get the default selected option
			var whatSelected = $(curSel).children('option:selected').text();
			//write the default
			var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 +  'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME" style="width:' + ( gddWidthL * 1 - 4 ) + 'px' + '">';
			// create a new array of div options from the original's options
			var addItems = new Array();      
			$(curSel).children('option').each( function() {           
				var text = $(this).text();  
				var selVal = $(this).attr('value'); 
				var before =  '<li onclick="window.setTimeout( function() { $(\'select[select_box_id=\\\'' + select_box_id + '\\\']\').change(); }, 100 )" style="width:' + ( gddWidthL * 1 - 4 ) + 'px;"><a href="#" rel="' + selVal + '" tabindex="0"  style="width:' + ( gddWidth3 - 4 ) + 'px;">';
				var after = '</a></li>';           
				addItems.push(before + text + after);
			});
			//hide the default from the list of options 
			//var removeFirst = addItems.shift();
			// create the end of the div selectbox and close everything off
			var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
			//write everything after each selectbox
			var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
			$(curSel).after(GDD);
			//this var selects the div select box directly after each of the origials
			var nGDD = $(curSel).next('div.selectME');
			
			$(nGDD).find('li:first').addClass("first");
			
			$(nGDD).find('li:last').addClass('last');
			//handle the on click functions - push results back to old text box
			$(nGDD).click( function(e) {
				var myTarA = $(e.target).attr('rel');
				var myTarT = $(e.target).text();
				var myTar = $(e.target);
				//if closed, then open
				if( $(nGDD).find('li').css('display') == 'none')
					{
							//this next line closes any other selectboxes that might be open
							$('div.selectME').find('li').css('display','none');
							$(nGDD).find('li').css('display','block');
							
							//if user clicks off of the div select box, then shut the whole thing down
							$(document.window || 'body').click( function(f) {
									var myTar2 = $(f.target);
									if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
							});
									return false;
					}
					else
					{      
							if (myTarA == null){
								$(nGDD).find('li').css('display','none');
										return false;
									}
									else {
										//set the value of the old select box
										$(curSel).val(myTarA);
										//set the text of the new one
										$(nGDD).find('span.gselected').text(myTarT);
										$(nGDD).find('li').css('display','none');
										return false;
									}
					}
			//handle the tab index functions
			}).focus( function(e) {        
					

				$(nGDD).find('li:first').addClass('currentDD');
				$(nGDD).find('li:last').addClass('lastDD');
				function checkKey(e){
					//on keypress handle functions
					function moveDown() {
						var current = $(nGDD).find('.currentDD:first');
						var next = $(nGDD).find('.currentDD').next();
						if ($(current).is('.lastDD')){
						return false;
						} else {
							$(next).addClass('currentDD');
							$(current).removeClass('currentDD');
						}
					}
					function moveUp() {
						var current = $(nGDD).find('.currentDD:first');
						var prev = $(nGDD).find('.currentDD').prev();
						if ($(current).is('.first')){
						return false;
						} else {
							$(prev).addClass('currentDD');
							$(current).removeClass('currentDD');
						}
					}
					var curText = $(nGDD).find('.currentDD:first').text();
					var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
				switch (e.keyCode) {
						case 40:
							$(curSel).val(curVal);
							$(nGDD).find('span.gselected').text(curText);
							moveDown();
							return false;
							break;
						case 38:
							$(curSel).val(curVal);
							$(nGDD).find('span.gselected').text(curText);
							moveUp();
							return false;
							break;
						case 13:
							$(nGDD).find('li').css('display','none');
							}     
				}
				$(document).keydown(checkKey);
			}).blur( function() {
					$(document).unbind('keydown');
			});
		}
	}
	});
}