/*#############################################################
Name: Niceforms
Version: 0.9
Author: Lucian Slatineanu
URL: http://www.badboy.ro/

Feel free to use and modify but please provide credits.
#############################################################*/

//global variables that can be used by all the functions on this page.


// JavaScript Document
/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.

Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.

You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.

Visit http://ryanfait.com/ for more information.

*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

/* No need to change anything after this */

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; z-index: 5; }</style>');

var Custom = {
	init: function() {
		replaceSelects();
		var 
		inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				span[a].onmousedown = Custom.pushed;
				span[a].onmouseup = Custom.check;
				document.onmouseup = Custom.clear;
			}
		}
//		inputs = document.getElementsByTagName("select");
//		for(a = 0; a < inputs.length; a++) {
//			if(inputs[a].className == "styled") {
//				option = inputs[a].getElementsByTagName("option");
//				active = option[0].childNodes[0].nodeValue;
//				textnode = document.createTextNode(active);
//				for(b = 0; b < option.length; b++) {
//					if(option[b].selected == true) {
//						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
//					}
//				}
//				span[a] = document.createElement("span");
//				span[a].className = "select";
//				span[a].id = "select" + inputs[a].name;
//				span[a].appendChild(textnode);
//				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
//				inputs[a].onchange = Custom.choose;
//			}
//		}
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
//		option = this.getElementsByTagName("option");
//		for(d = 0; d < option.length; d++) {
//			if(option[d].selected == true) {
//				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
//			}
//		}
	}
}


var selects;
var hovers = new Array();
var selectText = "--";

//this function runs when the page is loaded so put all your other onload stuff in here too.




function replaceSelects() {
	//get all the select fields on the page
    selects = document.getElementsByTagName('select');
	
	//cycle trough the select fields
    for(var i=0; i < selects.length; i++) {
		
		//create and build div structure
		
		
       		for(var k = 0; k < selects[i].options.length; k++) {
              		if(k == selects[i].selectedIndex){
              		    
              		     var text = document.createTextNode(selects[i].options[k].text);
              		     break;
              		}else{
              		     var text = document.createTextNode(selectText);
              		}
              	}
              	
       		var selectArea = document.createElement('div');
       		var leftS = document.createElement('div');
       		var rightS = document.createElement('div');
       		var center = document.createElement('div');
       		var button = document.createElement('a');
       		center.id = "mySelectText"+i;
       		button.href="javascript:showOptions("+i+")";
       		if(selects[i].name== 'cityFilter'){
       		     selectArea.className = "cityselectArea";
       		}else{
       		     selectArea.className = "selectArea";
       		}
       		leftS.className = "leftS";
       		rightS.className = "rightS";
       		center.className = "center";
       		rightS.appendChild(button);
       		center.appendChild(text);
       		selectArea.appendChild(leftS);
       		selectArea.appendChild(rightS);
       		selectArea.appendChild(center);
       		
       		//hide the select field
                      selects[i].style.display='none'; 
       		
       		//insert select div
       		selects[i].parentNode.insertBefore(selectArea, selects[i]);
       		
       		//build & place options div
       		var optionsDiv = document.createElement('div');
       		optionsDiv.className = "optionsDivInvisible";
       		optionsDiv.id = "optionsDiv"+i;
       		optionsDiv.style.leftS = (findPosX(selectArea)-3) + 'px';
       		optionsDiv.style.top = findPosY(selectArea) + 23 + 'px';
       		
       		//get select's options and add to options div
       		for(var j=0; j < selects[i].options.length; j++) {
       			var optionHolder = document.createElement('p');
       			var optionLink = document.createElement('a');
       			var optionTxt = document.createTextNode(selects[i].options[j].text);
              		optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects[i].id+"',"+j+","+i+");"
       			optionLink.appendChild(optionTxt);
       			optionHolder.appendChild(optionLink);
       			optionsDiv.appendChild(optionHolder);
       		}
       		
       		//insert options div
       		document.getElementsByTagName("body")[0].appendChild(optionsDiv);
	}
}
function selectMe(selectFieldId,linkNo,selectNo) {
	//feed selected option to the actual select field
	selectField = document.getElementById(selectFieldId);
	for(var k = 0; k < selectField.options.length; k++) {
		if(k==linkNo) {
			selectField.options[k].selected = "selected";
		}
		else {
			selectField.options[k].selected = "";
		}
	}
	
	ShowHide(selectField.value);
	
	//show selected option
	textVar = document.getElementById("mySelectText"+selectNo);
	var newText = document.createTextNode(selectField.options[linkNo].text);
	textVar.replaceChild(newText, textVar.childNodes[0]);
}
function showOptions(g) {
		elem = document.getElementById("optionsDiv"+g);
		if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
		else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
}
function findPosY(obj) {
	var posTop = 0;
	while (obj.offsetParent) {
		posTop += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return posTop;
}
function findPosX(obj) {
	var posLeftS = 0;
	while (obj.offsetParent) {
		posLeftS += obj.offsetLeftS;
		obj = obj.offsetParent;
	}
	return posLeftS;
}

window.onload = Custom.init;

//window.onload = init;