/**
 * @author Bizon
 */

$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select").css('display','none');
//now, for each select box, run this function
renderNewSelect = function() {
	$("select").each(function(){
		
		var curSel = $(this);
		// get the CSS width from the original select box
		var gddWidth = $(curSel).css('width');
		var gddWidthL = gddWidth.slice(0,-2);
		var gddWidth2 = gddWidthL - 28;
		var gddWidth3 = gddWidthL - 16;
		
		// build the new div structure
		if($(curSel).is(':disabled')) // for the media gallery page
		{
			var gddTop = '<div style="display:none;width:' + gddWidthL + 'px" class="selectME ' + $(curSel).attr('id') + '" tabindex="0"><div class="middle"><div><div><div>';	
		}
		else
		{
			var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME ' + $(curSel).attr('id') + '" tabindex="0"><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:' + 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>'
		//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').slideUp();
						$('div.selectME ul').fadeOut();
						//$(nGDD).find('li').css('display','block');
						$(nGDD).find('ul').fadeIn("slow");
						$(nGDD).find('li').slideDown();
						
						//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').slideUp("fast");
									$(nGDD).find('ul').fadeOut();
								}
						});
								return false;
				}
				else
				{      
						if (myTarA == null)
						{
							$(nGDD).find('li').slideUp("fast");
							$(nGDD).find('ul').fadeOut();
							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').slideUp("fast");
							$(nGDD).find('ul').fadeOut();
							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').slideUp("fast");
						$(nGDD).find('ul').fadeOut();
						}     
			}
			$(document).keydown(checkKey);	
		}).blur( function() {
				$(document).unbind('keydown');
		});
	});
};
renderNewSelect();
});