/*#############################################################
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 selects2;
var selects3;
var inputs;
var radios = new Array();
var checkboxes = new Array();
var hovers = new Array();
var buttons = new Array();
var selectText = "Molimo izaberite";


//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
		MM_preloadImages('images/informatikaboxHover.gif','images/managementboxHover.gif','images/StupnjeviGrafikonHover.jpg')
		replaceSelects();
		replaceSelects2();
		replaceSelects3();
		//replaceRadios();
		//replaceCheckboxes();
	
	
	buttonHovers();
}

function replaceRadios() {
	//get all the radio buttons on the page
	var inputs = document.getElementsByTagName('input');
	var j = 0;
	for(var i=0; i < inputs.length; i++) {
		if(inputs[i].type=='radio') {
			radios[j] = inputs[i];
			++j;
		}
	}
	
	//cycle through the radio inputs
	for(var i=0; i <radios.length; i++) {
		
		//make them transparent
		radios[i].className = "transparent";
		
		//get their position
		var x = findPosX(radios[i]);
		var y = findPosY(radios[i]);
		
		//build new div
		var radioArea = document.createElement('div');
		if(radios[i].checked) {radios[i].nextSibling.className = "chosen"; radioArea.className = "radioAreaChecked";}
		else if(!radios[i].checked) {radioArea.className = "radioAreaUnchecked";}
		radioArea.style.left = x + 'px';
		//radioArea.style.left = 10 + 'px';
		radioArea.style.top = y + 'px';
		radioArea.id = 'myRadio'+i;
		radios[i].onclick = new Function('checkRadio('+i+')');
		
		//insert div
		document.getElementsByTagName("body")[0].appendChild(radioArea);
	}
}

function replaceCheckboxes() {
	//get all the checkboxes on the page
	var inputs = document.getElementsByTagName('input');
	var j = 0;
	for (var i2=0; i2 < inputs.length; i2++) {
		if(inputs[i2].type=='checkbox') {
			checkboxes[j] = inputs[i2];
			++j;
		}
	}

	//cycle through the checkboxes
	for(var i2=0; i2 < checkboxes.length; i2++) {

		//make them transparent
		checkboxes[i2].className = "transparent";

		//get their position
		var x = findPosX(checkboxes[i2]);
		var y = findPosY(checkboxes[i2]);

		//build new div
		var checkboxArea = document.createElement('div');
		if(checkboxes[i2].checked) {checkboxes[i2].nextSibling.className = "chosen"; checkboxArea.className = "checkboxAreaChecked";}
		else if(!checkboxes[i2].checked) {checkboxArea.className = "checkboxAreaUnchecked";}
		checkboxArea.style.left = x + 'px';
		checkboxArea.style.top = y + 'px';
		checkboxArea.id = 'myCheck'+i2;
		checkboxes[i2].onclick = new Function('checkCheck('+i2+')');

		//insert div
		document.getElementsByTagName("body")[0].appendChild(checkboxArea);
	}
}
function replaceSelects() {
	//get all the select fields on the page
    selects = document.getElementsByName('smjer');
	
	//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 replaceSelects2() {
	//get all the select fields on the page
    selects2 = document.getElementsByName('mjesto');
	
	//cycle trough the select fields
    for(var i=0; i < selects2.length; i++) {
		
		//create and build div structure
		var selectArea2 = document.createElement('div');
		var left2 = document.createElement('div');
		var right2 = document.createElement('div');
		var center2 = document.createElement('div');
		var button2 = document.createElement('a');
		var text2 = document.createTextNode(selectText);
		center2.id = "mySelectText2"+i;
		button2.href="javascript:showOptions2("+i+")";
		selectArea2.className = "selectArea";
		left2.className = "left";
		right2.className = "right";
		center2.className = "center";
		right2.appendChild(button2);
		center2.appendChild(text2);
		selectArea2.appendChild(left2);
		selectArea2.appendChild(right2);
		selectArea2.appendChild(center2);
		
		//hide the select field
        selects2[i].style.display='none'; 
		
		//insert select div
		selects2[i].parentNode.insertBefore(selectArea2, selects2[i]);
		
		//build & place options div
		var optionsDiv2 = document.createElement('div');
		optionsDiv2.className = "optionsDivInvisible";
		optionsDiv2.id = "optionsDiv2"+i;
		optionsDiv2.style.left = findPosX2(selectArea2) + 'px';
		optionsDiv2.style.top = findPosY2(selectArea2) + 19 + 'px';
		
		//get select's options and add to options div
		for(var j=0; j < selects2[i].options.length; j++) {
			var optionHolder2 = document.createElement('p');
			var optionLink2 = document.createElement('a');
			var optionTxt2 = document.createTextNode(selects2[i].options[j].text);
			optionLink2.href = "javascript:showOptions2("+i+"); selectMe2('"+selects2[i].id+"',"+j+","+i+");";
			optionLink2.appendChild(optionTxt2);
			optionHolder2.appendChild(optionLink2);
			optionsDiv2.appendChild(optionHolder2);
		}
		
		//insert options div
		document.getElementsByTagName("body")[0].appendChild(optionsDiv2);
	}
}
function replaceSelects3() {
	//get all the select fields on the page
    selects3 = document.getElementsByName('termin');
	
	//cycle trough the select fields
    for(var i=0; i < selects3.length; i++) {
		
		//create and build div structure
		var selectArea3 = document.createElement('div');
		var left3 = document.createElement('div');
		var right3 = document.createElement('div');
		var center3 = document.createElement('div');
		var button3 = document.createElement('a');
		var text3 = document.createTextNode(selectText);
		center3.id = "mySelectText3"+i;
		button3.href="javascript:showOptions3("+i+")";
		selectArea3.className = "selectArea";
		left3.className = "left";
		right3.className = "right";
		center3.className = "center";
		right3.appendChild(button3);
		center3.appendChild(text3);
		selectArea3.appendChild(left3);
		selectArea3.appendChild(right3);
		selectArea3.appendChild(center3);
		
		//hide the select field
        selects3[i].style.display='none'; 
		
		//insert select div
		selects3[i].parentNode.insertBefore(selectArea3, selects3[i]);
		
		//build & place options div
		var optionsDiv3 = document.createElement('div');
		optionsDiv3.className = "optionsDivInvisible";
		optionsDiv3.id = "optionsDiv3"+i;
		optionsDiv3.style.left = findPosX3(selectArea3) + 'px';
		optionsDiv3.style.top = findPosY3(selectArea3) + 19 + 'px';
		
		//get select's options and add to options div
		for(var j=0; j < selects3[i].options.length; j++) {
			var optionHolder3 = document.createElement('p');
			var optionLink3 = document.createElement('a');
			var optionTxt3 = document.createTextNode(selects3[i].options[j].text);
			optionLink3.href = "javascript:showOptions3("+i+"); selectMe3('"+selects3[i].id+"',"+j+","+i+");";
			optionLink3.appendChild(optionTxt3);
			optionHolder3.appendChild(optionLink3);
			optionsDiv3.appendChild(optionHolder3);
		}
		
		//insert options div
		document.getElementsByTagName("body")[0].appendChild(optionsDiv3);
	}
}

function showOptions(g) {
		elem = document.getElementById("optionsDiv"+g);
		if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
		else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
}
function showOptions2(g) {
		elem2 = document.getElementById("optionsDiv2"+g);
		if(elem2.className=="optionsDivInvisible") {elem2.className = "optionsDivVisible";}
		else if(elem2.className=="optionsDivVisible") {elem2.className = "optionsDivInvisible";}
}
function showOptions3(g) {
		elem3 = document.getElementById("optionsDiv3"+g);
		if(elem3.className=="optionsDivInvisible") {elem3.className = "optionsDivVisible";}
		else if(elem3.className=="optionsDivVisible") {elem3.className = "optionsDivInvisible";}
}

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 = "";
		}
	}
	//show selected option
	textVar = document.getElementById("mySelectText"+selectNo);
	var newText = document.createTextNode(selectField.options[linkNo].value);
	textVar.replaceChild(newText, textVar.childNodes[0]);
}
function selectMe2(selectFieldId2,linkNo2,selectNo2) {
	//feed selected option to the actual select field
	selectField2 = document.getElementById(selectFieldId2);
	for(var k = 0; k < selectField2.options.length; k++) {
		if(k==linkNo2) {
			selectField2.options[k].selected = "selected";
		}
		else {
			selectField2.options[k].selected = "";
		}
	}
	//show selected option
	textVar2 = document.getElementById("mySelectText2"+selectNo2);
	var newText2 = document.createTextNode(selectField2.options[linkNo2].value);
	textVar2.replaceChild(newText2, textVar2.childNodes[0]);
}
function selectMe3(selectFieldId3,linkNo3,selectNo3) {
	//feed selected option to the actual select field
	selectField3 = document.getElementById(selectFieldId3);
	for(var k = 0; k < selectField3.options.length; k++) {
		if(k==linkNo3) {
			selectField3.options[k].selected = "selected";
		}
		else {
			selectField3.options[k].selected = "";
		}
	}
	//show selected option
	textVar3 = document.getElementById("mySelectText3"+selectNo3);
	var newText3 = document.createTextNode(selectField3.options[linkNo3].value);
	textVar3.replaceChild(newText3, textVar3.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 findPosY2(obj) {
	var posTop2 = 0;
	while (obj.offsetParent) {
		posTop2 += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return posTop2;
}
function findPosX2(obj) {
	var posLeft2 = 0;
	while (obj.offsetParent) {
		posLeft2 += obj.offsetLeft;
		obj = obj.offsetParent;
	}
	return posLeft2;
}
function findPosY3(obj) {
	var posTop3 = 0;
	while (obj.offsetParent) {
		posTop3 += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return posTop3;
}
function findPosX3(obj) {
	var posLeft3 = 0;
	while (obj.offsetParent) {
		posLeft3 += obj.offsetLeft;
		obj = obj.offsetParent;
	}
	return posLeft3;
}

function checkRadio(g) {
	if(radios[g].checked) {
		for (var k = 0; k < radios.length; k++)
		{
			if(k != g) {
				document.getElementById('myRadio'+k).className = "radioAreaUnchecked";
				radios[k].nextSibling.className = "";
			}
			else if(k == g) {
				document.getElementById('myRadio'+k).className = "radioAreaChecked";
				radios[g].nextSibling.className = "chosen";
			}
		}
	}
	else if(!radios[g].checked) {document.getElementById('myRadio'+g).className = "radioAreaUnchecked"; radios[g].nextSibling.className = "";}
}

function checkCheck(g) {
	if(checkboxes[g].checked) {
		for(var k = 0; k < checkboxes.length; k++) {
			if(k == g) {
				document.getElementById('myCheck'+k).className = "checkboxAreaChecked";
				checkboxes[g].nextSibling.className = "chosen";
			}
		}
	}
	else if(!checkboxes[g].checked) {
		document.getElementById('myCheck'+g).className = "checkboxAreaUnchecked";
		checkboxes[g].nextSibling.className = "";
	}
}



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;