/*#############################################################
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.
var selects;
var inputs;
//var radios = new Array();
//var checkboxes = new Array();
var hovers = new Array();
var buttons = new Array();
var selectText = "Please select";

//this function runs when the page is loaded so put all your other onload stuff in here too.
function init() {
	
	//check if styles are enabled and only then start replacing elements
	if(findPosX(document.getElementById('stylesheetTest')) == -999) {
		replaceSelects();
		//replaceRadios();
		//replaceCheckboxes();
    replaceChecks(); 
    replaceRadios();
}
	//hoverEffects();
	buttonHovers();
}



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
		var selectArea = document.createElement('div');
		var left = document.createElement('div');
		var right = document.createElement('div');
		var center = document.createElement('div');
		var button = document.createElement('a');
		var text = document.createTextNode(selectText);
		center.id = "mySelectText"+i;
		button.href="javascript:showOptions("+i+")";
		selectArea.className = "selectArea";
		left.className = "left";
		right.className = "right";
		center.className = "center";
		right.appendChild(button);
		center.appendChild(text);
		selectArea.appendChild(left);
		selectArea.appendChild(right);
		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.left = findPosX(selectArea) + 'px';
		optionsDiv.style.top = findPosY(selectArea) + 19 + '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 showOptions(g) {
		elem = document.getElementById("optionsDiv"+g);
		if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
		else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
}

function selectMe(selectFieldId,linkNo,selectNo) {
	//feed selected option to the actual select field
	selectField = document.getElementById(selectFieldId);
	hasChanged = false;
	for(var k = 0; k < selectField.options.length; k++) {
		if(k==linkNo) {
		    if (selectField.options[k].selected != "selected") {
			    selectField.options[k].selected = "selected";
			    hasChanged = true;
		    }
		}
		else {
			selectField.options[k].selected = "";
		}
		if (hasChanged && selectField.onchange != "")
		    selectField.onchange();
		
	}
	//show selected option
	textVar = document.getElementById("mySelectText"+selectNo);
	var newText = document.createTextNode(selectField.options[linkNo].value);
	textVar.replaceChild(newText, textVar.childNodes[0]);
}

function findPosY(obj) {
	var posTop = 0;
	while (obj.offsetParent) {
		posTop += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return posTop;
}
function findPosX(obj) {
	var posLeft = 0;
	while (obj.offsetParent) {
		posLeft += obj.offsetLeft;
		obj = obj.offsetParent;
	}
	return posLeft;
}


function hoverEffects() {
	//get all elements (text inputs, passwords inputs, textareas)
	var elements = document.getElementsByTagName('input');
	var j = 0;
	for (var i4 = 0; i4 < elements.length; i4++) {
		if((elements[i4].type=='text')||(elements[i4].type=='password')) {
			hovers[j] = elements[i4];
			++j;
		}
	}
	elements = document.getElementsByTagName('textarea');
	for (var i4 = 0; i4 < elements.length; i4++) {
		hovers[j] = elements[i4];
		++j;
	}
	
	//add focus effects
	for (var i4 = 0; i4 < hovers.length; i4++) {
		hovers[i4].onfocus = function() {this.className += "Hovered";}
		hovers[i4].onblur = function() {this.className = this.className.replace(/Hovered/g, "");}
	}
}

function buttonHovers() {
	//get all buttons
	var elements = document.getElementsByTagName('input');
	var j = 0;
	for (var i5 = 0; i5 < elements.length; i5++) {
		if(elements[i5].type=='submit') {
			buttons[j] = elements[i5];
			++j;
		}
	}
	
	//add hover effects
	for (var i5 = 0; i5 < buttons.length; i5++) {
		buttons[i5].onmouseover = function() {this.className += "Hovered";}
		buttons[i5].onmouseout = function() {this.className = this.className.replace(/Hovered/g, "");}
	}
}


//window.onload = init;
/*
THE FOLLOWING CODE HANDLES THE GRAPHICAL CHANGES FOR RADIO BUTTONS AND CHECKBOXES
*/
//global variables that can be used by ALL the function son this page. 
//var inputs; 
var imgCheckboxFalse = '/img/checkbox_unchecked.gif'; 
var imgCheckboxTrue = '/img/checkbox_checked.gif'; 
var imgRadioFalse = '/img/radio_unchecked.gif'; 
var imgRadioTrue = '/img/radio_checked.gif'; 

//this function runs when the page is loaded, put all your other onload stuff in here too. WILL MOVE UP TO THE FIRST INIT FUNTION
//function init() { 
  //  replaceChecks(); 
  //  replaceRadios();
//} 

function replaceChecks() { 

    //get all the input fields on the page 
    inputs = document.getElementsByTagName('input'); 

    //cycle trough the input fields 
    for(var i=0; i < inputs.length; i++) { 

	//check if the input is a checkbox 
	if(inputs[i].getAttribute('type') == 'checkbox') { 

	    //create a new image 
	    var img = document.createElement('img'); 

	    //check if the checkbox is checked 
	    if(inputs[i].checked) { 
				if(inputs[i].disabled)
				{
					img.src = imgCheckboxTrueDisabled; 
				} else {
					img.src = imgCheckboxTrue; 
				}
	    } else { 
		if(inputs[i].disabled)
				{
					img.src = imgCheckboxFalseDisabled; 
				} else {
					img.src = imgCheckboxFalse; 
				}
	    } 

	    //set image ID and onclick action 
	    img.id = 'checkImage'+i; 
	    //set image 
	    if(!inputs[i].disabled) img.onclick = new Function('checkChange('+i+')'); 
	    //place image in front of the checkbox 
	    inputs[i].parentNode.insertBefore(img, inputs[i]); 

	    //hide the checkbox 
	    inputs[i].style.display='none'; 
	} 
    } 
} 

function replaceRadios() { 

    //get all the input fields on the page 
    inputs = document.getElementsByTagName('input'); 

    //cycle trough the input fields 
    for(var i=0; i < inputs.length; i++) { 

	//check if the input is a checkbox 
	if(inputs[i].getAttribute('type') == 'radio') { 

	    //create a new image 
	    var img = document.createElement('img'); 

	    //check if the checkbox is checked 
	    if(inputs[i].checked) { 
				if(inputs[i].disabled)
				{
					img.src = imgRadioTrueDisabled; 
				} else {
					img.src = imgRadioTrue; 
				}
	    } else { 
		if(inputs[i].disabled)
				{
					img.src = imgRadioFalseDisabled; 
				} else {
					img.src = imgRadioFalse; 
				}
	    } 

	    //set image ID and onclick action 
	    img.id = 'radioImage'+inputs[i].id; 

	    //set image click event if button not disabled
	    if(!inputs[i].disabled) img.onclick = new Function('radioChange('+i+')'); 
	    //place image in front of the checkbox 
	    inputs[i].parentNode.insertBefore(img, inputs[i]); 

	    //hide the checkbox 
	    inputs[i].style.display='none'; 
	} 
    } 
} 

//change the checkbox status and the replacement image 
function checkChange(i) { 

    if(inputs[i].checked) { 
	inputs[i].checked = ''; 
	document.getElementById('checkImage'+i).src=imgCheckboxFalse; 
    } else { 
	inputs[i].checked = 'checked'; 
	document.getElementById('checkImage'+i).src=imgCheckboxTrue; 
    } 
} 

//change the checkbox status and the replacement image of checked and all in same group
function radioChange(i) { 
	var radios=new Array();
	var tmpradios;

	// load all the inputs into tmp array
	tmpradios = document.getElementsByTagName('input'); 

	for(var j=0; j < tmpradios.length; j++) { 
		// Add only the radios in this group to the array
		if(tmpradios[j].getAttribute('name') == inputs[i].getAttribute('name'))
		{
			radios.push(tmpradios[j]);
		}
	}

    if(inputs[i].checked) { 
		// already checked so do nothing as radio does not uncheck like a checkbox
    } else { 
		// make all other group items unchecked
	for(var j=0; j < radios.length; j++) { 
			document.getElementById('radioImage'+radios[j].id).src=imgRadioFalse; 
			document.getElementById('radioImage'+radios[j].id).checked=''; 
		}
		// make the selected item checked
	inputs[i].checked = 'checked'; 
	document.getElementById('radioImage'+inputs[i].id).src = imgRadioTrue;       
    } 
} 

window.onload = init;

/*
END OF RADIO BUTTON /CHECKBOX CODE
*/