// C00L GuestMap 2.0 - JavaScript main file

//load placed messages
document.write('<script type="text/javascript" src="'+msgPath+'/icons.php?id='+gmId+'&amp;rand='+Math.round(Math.random() * 1000)+'"></script>');

// global variables
var viewMessages=false;
var messagesMade=false;
var posY; 
var posX; 
var formWidth;
var formHeight;
var map;
var mapBox;
var mapForm;
var mapPointer;
var guestmap;
var msie=false;
var iconValue;
var iconPreview;

function init(){

	//check if the browser is MSIE
	if(navigator.userAgent.toLowerCase().indexOf('msie') > -1){
		msie=true;
	}
	
	//fill all the needed variables
	map=document.getElementById('mapImage');
	map.src=gmImage;
	mapForm=document.getElementById('mapForm');
	mapBox=document.getElementById('mapBox');
	mapPointer=document.getElementById('mapPointer');
	guestmap=document.getElementById('guestmap');
	iconPreview=document.getElementById('iconPreview');
	iconValue=document.getElementById('iconValue').value;
	mapBox.style.height=(guestmap.offsetHeight-mapBox.offsetTop-2)+'px';
	
	document.getElementById('messages').style.height=(guestmap.offsetHeight-mapBox.offsetTop-2)+'px';
	document.getElementById('gmId').value=gmId;
	document.getElementById('gmTitle').innerHTML=gmTitle;

	placeIcons(1);
	addFormIcons();
	//width/height of the form is not allowed to change!
	formWidth=mapForm.offsetWidth;
	formHeight=mapForm.offsetHeight;
	hide('mapForm');
	hide('messages');
	getError();
}

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

//change the opacity of an element for different browsers
function setOpacity(opacity, id){
	var object=document.getElementById(id).style; 
	object.opacity=(opacity / 100);
	object.MozOpacity=(opacity / 100);
	object.KhtmlOpacity=(opacity / 100);
	object.filter="alpha(opacity="+opacity+")";
}

function zoom(factor){

	if((magnification < maxMagnification && factor > 1) || (magnification > minMagnification && factor < 1)){
		map.width=map.width * factor;
		magnification=magnification * factor;
		placeIcons(magnification / 100);
		
		if(mapForm.style.display=="block"){

			placeForm(factor);
		}
	}
}
//multiplies a coordinate with the current magnification
function applyZoom(number){

	return Math.round((number / 100) * magnification);
}

//hides any element depending on the id argument
function hide(id){
	document.getElementById(id).style.display="none";
}

//shows any element
function show(id){
	document.getElementById(id).style.display="block";
}

//displays the tooltip with message once the mouse pointer is on an icon
function showTip(id){
	var tip=document.getElementById('tip');
	
	tip.innerHTML='<strong>'+icon[id][4]+':</strong> \('+icon[id][5]+'\)<BR> '+icon[id][6];
	show('tip');

	var emoTop=getPixels(document.getElementById('emo'+id).style.top);
	var emoLeft=getPixels(document.getElementById('emo'+id).style.left);
	
	if((emoTop+tip.offsetHeight) > map.height){
		tip.style.top=(map.height-tip.offsetHeight)+'px';
	}else{
		tip.style.top=emoTop+'px';
	}

	if((emoLeft+tip.offsetWidth) > map.width){
		tip.style.left=(map.width-tip.offsetWidth-12)+'px';	
	}else{
		tip.style.left=emoLeft+'px';
	}
}

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

//getting the cursor location works different in MSIE and Gecko (Mozilla/Netscape) browsers
function showMousePosition(e){

	if(!document.all){
		posY=e.pageY-guestmap.offsetTop;
		posX=e.pageX-guestmap.offsetLeft;
	}else{
		//documentElement only works in STRICT mode in MSIE 6 (see DTD!), if else use body instead!
		posX=window.event.x+document.body.scrollLeft;
        posY=window.event.y+document.body.scrollTop;
	}

	posX=posX-mapBox.offsetLeft+mapBox.scrollLeft;
	posY=posY-mapBox.offsetTop+mapBox.scrollTop;
}

function placeIcons(factor){

	var icons=document.getElementById('mapIcons');
	icons.innerHTML="";

	for(var i=0; i < icon.length; i++){
		
		//check for MSIE
		if(msie && dxFilter){
			icons.innerHTML += '<div id="emo'+i+'" style="top: '+Math.round(icon[i][1] * factor)+'px; left: '+Math.round(icon[i][2] * factor)+'px;" onmouseover="showTip('+i+')" onmouseout="hide(\'tip\')" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+iconPath+'/'+icon[i][3]+'.'+iconType+'\')"></div>';
		
		} else {
			icons.innerHTML += '<img src="'+iconPath+'/'+icon[i][3]+'.'+iconType+'" id="emo'+i +'" style="top: '+Math.round(icon[i][1] * factor)+'px; left: '+Math.round(icon[i][2] * factor)+'px;" onmouseover="showTip('+i+')" onmouseout="hide(\'tip\')" alt="" />';

			if(useTransparency){
				setOpacity(icon[i][0], 'emo'+i);
			}
		} 
	}
}

function addFormIcons(){

	var formIcons=document.getElementById('formIcons');
	for(var i=1; i <= iconCount; i++){

		if(msie && dxFilter){
			formIcons.innerHTML +='<div id="formIcon'+i+'" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+iconPath+'/'+i+'.'+iconType+'\', sizingMethod=\'scale\')" onclick="selectFormIcon('+i+')"></div>';
		} else {
			formIcons.innerHTML +='<img src="'+iconPath+'/'+i+'.'+iconType+'" id="formIcon'+i+'" onclick="selectFormIcon('+i+')" />';
		}
	}
}

//make the form visible and store the current cursor position in hidden fields
function showForm(){

	mapPointer.style.left=posX+'px';
	mapPointer.style.top=posY+'px';

	show('mapPointer');
	
	// set click position
	document.getElementById('cursorX').value=Math.round((posX * 100) / magnification);
	document.getElementById('cursorY').value=Math.round((posY * 100) / magnification);
	
	var overflowX=posX+formWidth-map.width;
	var overflowY=applyZoom((posY * 100 / magnification))+formHeight-map.height;

	if(overflowY > 0){
		posY=map.height-formHeight-20;
	}

	if(overflowX > 0){
		posX=posX-formWidth-20;
	}

	mapForm.style.top=posY+'px';
	mapForm.style.left=posX+'px';

	show('mapForm');

	placePreview();
	
	//if no icon has been selected before, start the blinking
	//needs to be HERE, for when the view changes (when zooming) and an icon as been selected, else it won't appear until something else is selected.
	
	if(!iconValue > 0){
		showPreview();
		blinkPreview(false);
	} else {
		show('iconPreview');
	}
}

function hideForm(){
	hide('mapForm');
	hide('mapPointer');
	hide('iconPreview');
}

function placeForm(factor){

	mapPointer.style.left=Math.round(getPixels(mapPointer.style.left) * factor)+'px';
	mapPointer.style.top=Math.round(getPixels(mapPointer.style.top) * factor)+'px';

	mapForm.style.left=Math.round(getPixels(mapForm.style.left) * factor)+'px';
	mapForm.style.top=Math.round(getPixels(mapForm.style.top) * factor)+'px';

	placePreview();
}

function placePreview(){

	iconPreview.style.left=mapPointer.style.left;
	iconPreview.style.top=mapPointer.style.top;
}

function changeView(){

	if(viewMessages){
		hide('messages');
		show('mapBox');
  document.getElementById('viewLink').innerHTML = 'list view';
		viewMessages=false;


	} else {
		hide('mapBox');

document.getElementById('viewLink').innerHTML = 'map view';
		show('messages');



		viewMessages=true;
	
		if(!messagesMade){
			makeMessages();
		}
	}
}

function makeMessages(){

	var list=document.getElementById('messageList');

	for(var i=icon.length-1; i >= 0; i--){

		if(msie && dxFilter){
			list.innerHTML +='<li><div id="msgIcon'+i+'" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+iconPath+'/'+icon[i][3]+'.'+iconType+'\')"></div> <strong>'+icon[i][4]+':</strong> \('+icon[i][5]+'\) '+icon[i][6]+'</li>';
		} else {
			list.innerHTML +='<li><img src="'+iconPath+'/'+icon[i][3]+'.'+iconType+'" alt="" id="msgIcon'+i+'" /> <strong>'+icon[i][4]+':</strong> \('+icon[i][5]+'\) '+icon[i][6]+'</li>';
			if(useTransparency){
				setOpacity(icon[i][0],'msgIcon'+i);
			}
		}
	}
	messagesMade=true;
}

//apply "selected" CSS class to the selected icon
function selectFormIcon(id){

	for(var i=1; i <= iconCount; i++){
		if(id != i){
			document.getElementById('formIcon'+i).className='';
		} else {
			document.getElementById('formIcon'+i).className='selected';
			iconValue= i;
		}
	}
	showPreview();
}

//set icon preview
function showPreview(){
	
	if(msie && dxFilter){
		iconPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+iconPath+"/"+iconValue+"."+iconType+"')"
	} else {
		iconPreview.style.backgroundImage="url('"+iconPath+"/"+iconValue+"."+iconType+"')";
		setOpacity(70,'iconPreview');
		
	}
	
	show('iconPreview');
}

//make icon preview blink
function blinkPreview(display){

	setTimeout('togglePreview('+display+')', 500);
}

function togglePreview(display){
	
	if(display){
		iconPreview.style.visibility='visible';
		display=false;
	} else {
		iconPreview.style.visibility='hidden';
		display=true;
	}

	blinkPreview(display);
}

//read error messages from cookie
function getError(){

	var search='GM2error=';
	var errorMsg=document.cookie;
	var start = -1;
	var end;

	if(errorMsg.length > 0){
		start=errorMsg.indexOf(search); 
		if(start != -1){
			start += search.length;
			end=errorMsg.indexOf(';',start);
		}
		
		if(end==-1){
			end=errorMsg.length;
		}
		if(end > start){

			errorMsg=errorMsg.substring(start,end);

			//replace all plus characters with spaces
			var i=errorMsg.indexOf('+');
			while(i > -1){

				errorMsg=errorMsg.replace('+',' ');
				i=errorMsg.indexOf('+',i+2);
			}
			alert(errorMsg);
		}

		//reset cookie
		var expDate=new Date();
		expDate.setTime(expDate.getTime()-1);
		document.cookie=search+'0;expires='+expDate.toGMTString();
	} 
}

//this function is called once the form is submitted, it checks all the fields displays errors
function validate(){
	var errorMessage='';

	document.getElementById('iconValue').value=iconValue;

	if(iconValue==''){
		errorMessage="- No icon selected.\n";
	}
	
	if(document.getElementById('nameValue').value.length < 3){
		errorMessage += "- Your name is too short.\n";
	}

	if(document.getElementById('locationValue').value.length < 3){
		errorMessage += "- Your location is too short.\n";
	}


	if(document.getElementById('messageValue').value.length < 3){
		errorMessage += "- Your message is too short.";
	}
	
	//if an error is set, display an alert and return false to prevent the form from being submitted
	if(errorMessage != ''){
		alert("Before continuing, check the following:\n\n"+errorMessage); 
		return false;
	} else {
		return true;
	}
}