/*******************
Author: Patrick Ryan
URL: http://www.agavegroup.com

Feel free to use this however you like.  Credit is always appreciated.
*******************/

	//need to set a couple of images here:
	imageSelectDropDownArrow="/SiteElements/Global/Images/selectDrop.gif";
	
	//the rest of the images are in the CSS


	function prettyForms(){
		fixSelects();
	}
	
	
//****
//**** functions that apply the look to the form elements
//****	

	//this function is run for all form elements (except radio buttons)
	//this function accepts one element, and wraps it in four divs that are styled with shadows
	function appendParentsTo(currItem){
		//create the divs
		tl = document.createElement("div");
		br = document.createElement("div");
		bl = document.createElement("div");
		tr = document.createElement("div");

		if(document.all){							//IE
			//give them the proper class
			tl.className="sys_frmShdwTopLt";
			br.className="sys_frmShdwBottomRt";
			bl.className="sys_frmShdwBottomLt";
			tr.className="sys_frmShdwTopRt";
			//insert the top level div
			t1=currItem.insertAdjacentElement("BeforeBegin",tl);
		}else{										//FFX
			//give them the proper class
			tl.setAttribute("class", "sys_frmShdwTopLt");
			br.setAttribute("class", "sys_frmShdwBottomRt");
			bl.setAttribute("class", "sys_frmShdwBottomLt");
			tr.setAttribute("class", "sys_frmShdwTopRt");
			inputParent = currItem.parentNode;
			//insert the top level div
			tl = inputParent.insertBefore(tl, currItem);
		}
		
		//append children
		br = tl.appendChild(br);
		bl = br.appendChild(bl);
		tr = bl.appendChild(tr);
		//move input to child of divs
		tr.appendChild(currItem);
	}

	

	
	//apply look to select boxes
	function fixSelects(){
		selects = document.getElementsByTagName("select")
		for(i=0;i<selects.length;i++){
			//create the standard shadows
			appendParentsTo(selects[i]);
			
			//give this thing an id if it doesn't have one
			if(selects[i].id==""){
				selects[i].id="dynId"+i;
			}
			
			//create new div to hold list
			//this is a wrapper div to hold everything together
			fakeSelectWrapper = document.createElement("div");
			
			//this is the link that holds the select's drop down arrow
			fakeSelectIcon = document.createElement("a")
			
			if(document.all){				//IE
				fakeSelectIcon.href="javascript:dropDownMenu(\"sys_frmShdwMenu"+i+"\", \"sys_frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")";
				fakeSelectIcon.innerHTML = "<img class=\"sys_fakeSelectImg\" src=\""+imageSelectDropDownArrow+"\" />";
				//this is the div that actually contains the list of options
				fakeSelect = document.createElement("div");
				fakeSelect.id="sys_frmShdwMenu"+i;
				fakeSelect.className="sys_frmShdwSelectDrop";
				options = selects[i].getElementsByTagName("option");
				//this div is displayed when the box is NOT dropped down.  Shows currently displayed item
				fakeSelectedHolder = document.createElement("a");

				fakeSelectedHolder.className="sys_frmShdwSelectDropChosen";
				fakeSelectedHolder.id="sys_frmShdwMenuChosen"+i;
				fakeSelectedHolder.style.width=selects[i].clientWidth-15+"px";
				fakeSelectedHolder.href="javascript:dropDownMenu(\"sys_frmShdwMenu"+i+"\", \"sys_frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")";

				
				for(j=0;j<options.length;j++){
					//create a p tag for each element, and append it to the parent div
					fakeOption = document.createElement("a")
					fakeOption.innerHTML = options[j].innerHTML;
					fakeOption.style.width=selects[i].clientWidth-16+"px";
					//here's some crazy IE stuff.
					fakeOption.href='javascript:chooseSelect("'+selects[i].id+'",'+j+',"sys_frmShdwMenu'+i+'", "sys_frmShdwMenuChosen'+i+'")'
					fakeSelect.appendChild(fakeOption);
					//set the default text to show
					if(options[j].selected==true){
						fakeSelectedHolder.innerHTML=options[j].innerHTML;
						fakeOption.className="selected";
					}
				}
				
				//construct the menu parts Wrapper around list of options and image
				fakeSelectWrapper.appendChild(fakeSelectedHolder);
				fakeSelectWrapper.appendChild(fakeSelect);
				fakeSelectWrapper.appendChild(fakeSelectIcon);
				
				//now put the new div inside the shadows, above the select box
				selectParent = selects[i].parentNode;
				fakeSelect.style.width=selects[i].clientWidth-15+"px";
				
				// more crazy IE stuff : push the dropped down menu to the left where it belongs
				fakeSelect.style.margin="3px 3px 3px -"+(selects[i].clientWidth-5)+"px";
				
				
				fakeSelectWrapper = selects[i].insertAdjacentElement("BeforeBegin",fakeSelectWrapper)
				//hide the real select box
				selects[i].style.display="none"; 
				
				
			}else{
				fakeSelectIcon.setAttribute("href","javascript:dropDownMenu(\"sys_frmShdwMenu"+i+"\", \"sys_frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")");
				fakeSelectIcon.innerHTML = "<img class=\"sys_fakeSelectImg\" src=\""+imageSelectDropDownArrow+"\" />";
				//this is the div that actually contains the list of options
				fakeSelect = document.createElement("div");
				fakeSelect.setAttribute("id","sys_frmShdwMenu"+i);
				fakeSelect.setAttribute("class","sys_frmShdwSelectDrop");
				options = selects[i].getElementsByTagName("option");
				//this div is displayed when the box is NOT dropped down.  Shows currently displayed item
				fakeSelectedHolder = document.createElement("div");
				fakeSelectedHolder.setAttribute("class","sys_frmShdwSelectDropChosen");
				fakeSelectedHolder.setAttribute("id","sys_frmShdwMenuChosen"+i);
				fakeSelectedHolder.style.width=selects[i].clientWidth-15+"px";
				fakeSelectedHolder.setAttribute("onclick","javascript:dropDownMenu(\"sys_frmShdwMenu"+i+"\", \"sys_frmShdwMenuChosen"+i+"\",\""+selects[i].id+"\")");
				
				
				for(j=0;j<options.length;j++){
					//create a p tag for each element, and append it to the parent div
					fakeOption = document.createElement("a")
					fakeOption.innerHTML = options[j].innerHTML;
					fakeOption.setAttribute("href","javascript:chooseSelect(\""+selects[i].id+"\","+j+",\"sys_frmShdwMenu"+i+"\", \"sys_frmShdwMenuChosen"+i+"\")");	//clicking calls the function chooseSelect passing the select object, and the chosen index
					fakeSelect.appendChild(fakeOption);
					
					//set the default text to show
					if(options[j].selected==true){
						fakeSelectedHolder.innerHTML=options[j].innerHTML;
						fakeOption.setAttribute("class","selected");
					}				
				}
				
				//construct the menu parts Wrapper around list of options and image
				fakeSelectWrapper.appendChild(fakeSelectedHolder);
				fakeSelectWrapper.appendChild(fakeSelect);
				fakeSelectWrapper.appendChild(fakeSelectIcon);
				
				//now put the new div inside the shadows, above the select box
				selectParent = selects[i].parentNode;
				fakeSelect.style.width=selects[i].clientWidth-15+"px";
				fakeSelectWrapper = selectParent.insertBefore(fakeSelectWrapper,selects[i]);
				//hide the real select box
				selects[i].style.display="none"; 
			}
		}
	}
	
	
	
	
	
	
//****
//**** functions that apply the functionality to the form elements
//****		
	
	//function runs when a radio button is clicked
	function toggleRadio(realRadioId, fakeRadioId){
		realRadio = document.getElementById(realRadioId);
		fakeRadio = document.getElementById(fakeRadioId);
		//want to ONLY look in the correct form, so get this radio button's parent form (supports multiple forms)
		radioForm = realRadio.parentNode;
		tmpCnt=1;
		while(radioForm.tagName!="FORM"){
			radioForm = radioForm.parentNode;
			tmpCnt++;
			if(tmpCnt>50){
				window.alert("encountered javascript error\n[parentNode]")
				break;
			}
		}	
		inputs=radioForm.getElementsByTagName("input");
		for(i=0;i<inputs.length;i++){
			if(inputs[i].type=="radio"){		
				//IDs look like this:  realId: blah    fakeId: fakeblah
				if(inputs[i].name==realRadio.name){	//is part of the same radio group, uncheck it.
					inputs[i].checked=false;	//uncheck the actual button
					document.getElementById("fake"+inputs[i].id).src=imageRadioUnchecked;
					if(inputs[i].id==realRadioId){
						inputs[i].checked=true;	//check the actual button
						document.getElementById("fake"+inputs[i].id).src=imageRadioChecked;
					}
				}
			}
		}
		
		//**** EVENT HANDLING
		// Clicking the radiobutton equivalent to the button's onClick event and onChange event . fire it.
		triggerEvent(realRadio,"change");
		triggerEvent(realRadio,"click");
	}
	

	
	//function runs when drop down arrow next to select box is clicked
	function dropDownMenu(menuId, chosenMenuId, realMenuId){
		//hide the default Text item
		//document.getElementById(chosenMenuId).style.display="none";
		//show the full list
		document.getElementById(menuId).className="sys_frmShdwSelectDropShown";
		
		//**** EVENT HANDLING
		// Clicking the list is equivalent to the selects onClick event. fire it.
		realMenu = document.getElementById(realMenuId);
		if(document.all){
			res = realMenu.fireEvent("onclick");
		}else{
			mouseEvent = document.createEvent('MouseEvents');
			mouseEvent.initMouseEvent('click',true,true,window,1,0,0,0,0,false,false,false,false,0,null);
			realMenu.dispatchEvent(mouseEvent); 
		}
		
	}
	
	//function runs when a drop down item is clicked
	function chooseSelect(chosenSelect,chosenIndex,menuId, chosenMenuId){

		realDropdown = document.getElementById(chosenSelect);
		fakeDropDown = document.getElementById(menuId);
		fakeChosenItem = document.getElementById(chosenMenuId)
		//set the chosen item to be selected in the REAL drop down		
		currSelect = realDropdown.selectedIndex=chosenIndex;
				
		//put the chosen text into the display div
		//for some reason setting innerHTML breaks in IE
		fakeChosenItem.childNodes[0].nodeValue=realDropdown[chosenIndex].innerHTML;
		
		//deselect all the items under the dropdown
		fakeOptions=fakeDropDown.getElementsByTagName("a");
		
		for(i=0;i<fakeOptions.length;i++){
			fakeOptions[i].className="";
			//if this is the selected item, set to selected
			if(fakeOptions[i].innerHTML ==  realDropdown[chosenIndex].innerHTML){
				fakeOptions[i].className="selected";
			}
		}
		
		//hide the rest of the dropdown
		fakeDropDown.className="sys_frmShdwSelectDrop";
		
		//show the display div
		fakeChosenItem.style.display="block";
		
		//**** EVENT HANDLING
		// Choosing an item is equivalent to the selects onChange event. fire it.
		triggerEvent(realDropdown,"change");
		
	}
	
	
	
	
	//function to trigger events that are built into the form elements that have been hidden
	function triggerEvent(obj, evt){
		if(document.all){
			if(evt=="click"){
				res = obj.fireEvent("onclick");
			}else if(evt=="change"){
				res = obj.fireEvent("onchange");
			}
		}else{
			//NOTE - in the mozilla event model, I am cancelling the bubbleUp!  (1st false)
			// this is needed to prevent odd interaction, but could cause other issues!
			if(evt=="click"){
				mouseEvent = document.createEvent('MouseEvents');
				mouseEvent.initMouseEvent('click',true,true,window,1,0,0,0,0,false,false,false,false,0,null);
				obj.dispatchEvent(mouseEvent); 
			}else if(evt=="change"){
				mouseEvent = document.createEvent('HTMLEvents');
				mouseEvent.initEvent('change',true,true,window,1,0,0,0,0,false,false,false,false,0,null);
				obj.dispatchEvent(mouseEvent);
			}
		}
	}