$j(document).ready(function(){
// first locate all of the select tags on the page and hide them
$j("select#page_id").css('display','none');
//now, for each select box, run this function
$j("select.#page_id").each(function(){
	
	var curSel = $j(this);
	// get the CSS width from the original select box
	var gddWidth = $j(curSel).css('width');
	var gddWidthL = gddWidth.slice(0,-2);
	var gddWidth2 = gddWidthL - 28;
	var gddWidth3 = gddWidthL - 16;
	// build the new div structure
	var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" id="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
	//get the default selected option
	var whatSelected = $j(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();      
	$j(curSel).children('option').each( function() {           
		var text = $j(this).text();  
		var selVal = $j(this).attr('value'); 
		var before =  '<li style="width:' + gddWidthL + 'px;"><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;
	$j(curSel).after(GDD);
	//this var selects the div select box directly after each of the origials
	var nGDD = $j(curSel).next('div.selectME');
	
	$j(nGDD).find('li:first').addClass("first");
	
	$j(nGDD).find('li:last').addClass('last');
	//handle the on click functions - push results back to old text box
	$j(nGDD).click( function(e) {
		 var myTarA = $j(e.target).attr('rel');
		 var myTarT = $j(e.target).text();
		 var myTar = $j(e.target);
		 //if closed, then open
		 if( $j(nGDD).find('li').css('display') == 'none')
			{
					//this next line closes any other selectboxes that might be open
					$j('div.selectME').find('li').css('display','none');
					$j(nGDD).find('li').css('display','block');
					
					//if user clicks off of the div select box, then shut the whole thing down
					$j(document.window || 'body').click( function(f) {
							var myTar2 = $j(f.target);
							if (myTar2 !== nGDD) {$j(nGDD).find('li').css('display','none');}
					});
							return false;
			}
			else
			{      
					if (myTarA == null){
						$j(nGDD).find('li').css('display','none');
								return false;
							}
							else {
								//set the value of the old select box
								$j(curSel).val(myTarA);
								//set the text of the new one
								 $j(nGDD).find('span.gselected').text(myTarT);
								 $j(nGDD).find('li').css('display','none');
								 return false;
							}
			}
	//handle the tab index functions
	 }).focus( function(e) {        
	 	        

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