//this function retrieves the number of pixels from a CSS value, "343px" will be converted to "343"
function getPixels(id) {
	pixels = id.split("p");
	return parseInt(pixels[0]);
}

//displays the tooltip with name and message once the mouse is positioned above the smiley
function showtip(id,naam,adres,wplaats,website) {
	tooltip = document.getElementById('tip');

	tooltip.style.top = document.getElementById('img' + id).style.top;
	tooltip.style.left = document.getElementById('img' + id).style.left;
	tooltip.innerHTML = "<strong>" + naam + "</strong><br> " + adres + "<br>" + wplaats + "<br>" + website;
	tooltip.style.visibility = "visible";
	tooltip.style.zIndex = 100;
}

//get the cursor location
function cursorLocation() {
	//needed for other browsers then MSIE
	if(!document.all) {
		document.captureEvents(Event.MOUSEMOVE);
	}
		
	document.getElementById('guestMapImage').onmousemove = showMousePosition;
}

//getting the cursor location works different in MSIE and Gecko (Mozilla/Netscape) browers
function showMousePosition(e) {
	var posY; 
	var posX; 

	if(!document.all) {
		posY = e.pageY;
		posX = e.pageX;
	} else {
		//MSIE needs some correction, especially when scrolling
		posX = window.event.x + document.body.scrollLeft - 1 + getPixels(document.getElementById('guestMapDiv').style.left);
        posY = window.event.y + document.body.scrollTop - 2 + getPixels(document.getElementById('guestMapDiv').style.top);
	}
	//insert the values in the hidden fields after compensating the map position
	document.getElementById('tempY').value = (posY - getPixels(document.getElementById('guestMapDiv').style.top));
	document.getElementById('tempX').value = (posX - getPixels(document.getElementById('guestMapDiv').style.left));
}

//once called, this function will make the form visible and store the current cursor position in some hidden fields
function showForm() {
	var imgArrow = document.getElementById('imgArrow').style;

	imgArrow.visibility = "visible";
	imgArrow.zIndex = 99;

	imgArrow.left = document.getElementById('tempX').value + "px";
	imgArrow.top = (document.getElementById('tempY').value - 12) + "px";
	
	// set click position, the numbers at the end are the image witdh/height divided by 2
	document.getElementById('cursorX').value = document.getElementById('tempX').value - 7;
	document.getElementById('cursorY').value = document.getElementById('tempY').value - 7;

	document.getElementById('mapform').style.visibility = "visible";
	document.getElementById('mapform').style.zIndex = 100;
}


//once an emoticon is selected all the others need to be made semi-transparant
function selectEmoticon(naam,id) {
	document.getElementById('emoticonValue').value = naam;
	
	var i = 1;
	
	//check each emoX element
	while(document.getElementById('emo' + i)) {
		if(id != i) {
			//if the i is unequal to the chosen id, make it semi-transparent
			changeOpac(50,'emo' + i);
		} else {
			//100% visible
			changeOpac(100,'emo' + i);
		}
		i++;
	}
}

//changes the (un)selected emoticon's opacity 
function changeOpac(opacity,id) {
	emoticon = document.getElementById(id).style;

	emoticon.filter = "alpha(opacity=" + opacity + ")";
	emoticon.MozOpacity = (opacity / 100);
	emoticon.opacity = (opacity / 100);
}

//hides any element depending on the id argument
function hide(id) {
	document.getElementById(id).style.visibility = "hidden";
	document.getElementById(id).style.zIndex = 0;
}

//this function is called once the form is submitted, it checks all the fields and returns in an alert() errors if needed.
function validate() {
	var errorMessage = "";

	if(document.getElementById('emoticonValue').value == "") {
		errorMessage = "- Je hebt geen emoticon geselecteerd.\n";
	}
	
	if(document.getElementById('naamValue').value.length < 3) {
		errorMessage += "- Je naam is te kort.\n";
	}

	if(document.getElementById('adresValue').value.length < 3) {
		errorMessage += "- Het adres is te kort.\n";
	}

	if(document.getElementById('wplaatsValue').value.length < 3) {
		errorMessage += "- De woonplaats is te kort.\n";
	}


	//if an error is set, display an alert and return false to prevent the form from being submitted
	if(errorMessage != "") {
		alert("Er is een fout opgetreden, controleer het volgende:\n" + errorMessage); 
		return false;
	} else {
		return true;
	}
}