$(document).ready(function(){
	
	// first locate all of the select tags on the page and hide them
	$("select.changeMe").css('display','none');
	
	//now, for each select box, run this function
	$("select.changeMe").each(function(){
		
		var curSel = $(this);
		// get the CSS width from the original select box
		var gddWidth = '222px';
		var gddWidthL = gddWidth.slice(0,-2);
		var gddWidth2 = gddWidthL - 50;
		var gddWidth3 = gddWidthL - 16;
		// build the new div structure
		var gddTop = '<div style="width:' + gddWidthL + '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">';
		// 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 style="width:200px;"><a href="#" rel="' + selVal + '" tabindex="0"  style="width:' + gddWidth3 + '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');
		});
		
	});
	
});