/****************************
update these params to change
the note display 
/****************************/

var fontFace = 'trebuchet ms, verdana';
var fontSize = '11';
var fontColor = '#FFFFFF';
var borderColor = 'Gray';
//var backgroundColor = '#FFFFCC';
var backgroundColor = '#FFFFF0';
//var titleBackroundColor = '#FFCC00';
var titleBackroundColor = '#00407C';
var maxNoteWidth = '160';

/****************************/

var note;
var notes;
var tempX = 0;
var tempY = 0;

var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var to;
var img;
var map;

function noteson(inimg, inmap) {
	img = inimg;
	map = inmap;
	var image = new Object(); 
	img.onmouseover="";
	notes = getNotes(map, img);	
	//imageon(notes);
	//image['notes'] = noets;
	//img.onmouseout=function shutitoff() {
				//to = setTimeout("imageoff()", 300);
			//};
}

function imageoff() { 
	if(notes) {
		for(var i = 0; i < notes.length; i++) {
			notes[i].style.visibility = 'hidden';
		}
	}
	img.onmouseover=function() {noteson(img, map);}
	notes = null;
}


function createA(coord, link_url, title, message, img, map) {
	var top = coord['top'];
	var left = coord['left'];
	var height = coord['height'];
	var width = coord['width'];
	
	var newA = document.createElement("DIV");
	newA.setAttribute("id", 1);
	newA.style.position = "absolute";
	newA.style.top =  top + 'px';
	newA.style.left = left + 'px';
	newA.style.border = 'solid black 1px';
	newA.style.width = width + 'px';
	newA.style.height = height + 'px';
	//newA.style.visibility = 'hidden';
	//newA.style.backgroundColor = '';
	newA.style.opacity =  '0.99';
	newA.style.filter = "alpha(opacity=99)";

	
	width = width - 2;
	height = height - 2;	
	var newA2 = document.createElement("A");
	newA2.setAttribute("id", 1);
	newA2.setAttribute("href", link_url);
	newA2.style.position = "absolute";
	newA2.style.width = width + 'px';
	newA2.style.height = height + 'px';
	newA2.style.border = 'solid #CCCCCC 1px';
	newA2.backgroundColor = '';
	newA2.style.backgroundColor = 'white';
	newA2.style.filter = "alpha(opacity=20)";
	newA2.style.opacity = '0.2';
	newA2.style.MozOpacity= 20/100;
	document.getElementsByTagName('body')[0].appendChild(newA);
	newA.appendChild(newA2);
	
	var acoord = new Object();
	acoord['top'] = top;
	acoord['left'] = left;
	acoord['bottom'] = top + height;
	acoord['right'] = left + width;	
	acoord['link_url'] = link_url;
	acoord['title'] = title;
	acoord['message'] = message;

	var a2 = newA.getElementsByTagName('A')[0];
	acoord['a2'] = a2;
	
	//mouseObjects.push(acoord);
	acoord['type'] = 'a'; 

	newA.onmouseover=function noteA01() {
				clearTimeout(to);
				newA.style.border = 'solid #555555 1px';
				newA2.style.filter = "alpha(opacity=0)";
				newA2.style.opacity = '0.0';
	}	
	
	newA.onmouseout=function noteA012() {
				newA.style.border = 'solid black 1px';
	}	

	
	newA2.onmouseover=function noteA201() {
				clearTimeout(to);
				showNote(acoord);
				a2.style.opacity = 0.1;
				a2.style.filter = "alpha(opacity=10)";
				a2.style.MozOpacity= 10/100;
		};
			
	newA2.onmouseout = function delnoteA2() {
			var delnote = note;
			note = null;
			if(delnote) {
				document.getElementsByTagName('body')[0].removeChild(delnote);
			}
			a2.style.opacity = 0.20;
			a2.style.filter = "alpha(opacity=20)";
			a2.style.MozOpacity= 20/100;

		};					
	return newA; 	
}

function getMouseXY(e) {
	
	if (IE) { // grab the x-y pos.s if browser is IE
    		tempX = event.clientX;
    		tempY = event.clientY;
	    	tempY += document.documentElement.scrollTop;
    		tempX += document.documentElement.scrollLeft;    
  	} else {  // grab the x-y pos.s if browser is NS
    		tempX = e.pageX
    		tempY = e.pageY
  	}

  	if(note) {
  		note.style.top = (tempY + 10)  + "px";
  		note.style.left = (tempX + 15) + "px";
  	}
 }  
 
 
function getNodeCoords(node) {
	var left = (node.offsetLeft);
	var top = (node.offsetTop);
    var oo = node;
    while (oo.offsetParent) {
    		oo = oo.offsetParent;
		left += oo.offsetLeft;
		top += oo.offsetTop;
	}
	var coord = new Object()
	coord['top'] = top;
	coord['left'] = left;
	coord['right'] = node.width + left;
	coord['bottom'] = node.height + top;	
	//coord['id'] = top + '-' + left;
	coord['ison'] = false;
	return coord;
}
 
 function getNotes(mapid, img) {

	var mapObj = document.getElementById(mapid);	
    var areas = mapObj.getElementsByTagName('area');
    
    var image = getNodeCoords(img); 
    var notes = new Array();
    for(var i = 0; i < areas.length; i++) {
		var coo = areas[i].getAttribute('coords').split(',');
		if (coo.length == 4) {
			var left = parseInt(coo[0]) + image['left'];
			var top = parseInt(coo[1]) + image['top'];
        		var width = parseInt(coo[2]) - parseInt(coo[0]);
        		var height = parseInt(coo[3]) - parseInt(coo[1]);
        						
			var mktitle = areas[i].getAttribute('title');
			var notesdata = mktitle.split(',');
			var link_urldata = notesdata[0].split('=');
			var pattern = /\'/g;
			var link_url = unescape((link_urldata[1] + '=' + link_urldata[2]).replace(pattern, "") );
			var titledata = notesdata[1].split('=');			
			var title = unescape( titledata[1].replace(pattern, "") );
			var entrydata = notesdata[2].split('=');			
			var entry = unescape(entrydata[1].replace(pattern, ""));
			
			var coords = new Object();
			coords['top'] = top;
			coords['left'] = left;
			coords['width'] = width;
			coords['height'] = height;
			var newA = createA(coords, link_url, title, entry, img, mapid)
			notes[notes.length] = newA;
		}
		  	
	}
	//alert(notes.length);
	return notes;
}
 
function showNote(moa) {
	id = moa['id'];
	link_url = moa['link_url'];
	title = moa['title'];
	entry = moa['message'];

	var entryLength = entry.length;
	var noteWidth = '';
	if((maxNoteWidth / 2) < entryLength * 2) {
		noteWidth = maxNoteWidth + 'px';
	}

	 
	var noteDiv = document.createElement("DIV");
	noteDiv.setAttribute("id", id);
	noteDiv.style.position = "absolute";
	//noteDiv.style.zIndex = 25;
	noteDiv.style.top =  tempY + 'px';
	noteDiv.style.left = tempX + 'px';
	noteDiv.style.border = 'solid ' + borderColor + ' 1px';
	noteDiv.style.backgroundColor = '#FFFFCC';
	noteDiv.style.width = noteWidth;
	noteDiv.style.opacity = .99;
	//noteDiv.style.height = '50px';
	
	var noteTitle = document.createElement("DIV");
	noteTitle.style.position = "relative";
	noteTitle.style.backgroundColor = titleBackroundColor;
	noteTitle.style.borderBottom = 'solid ' + borderColor + ' 1px';
	noteTitle.style.padding = "2px 5px 2px 5px";
	noteTitle.style.fontFamily = fontFace;
	noteTitle.style.fontSize = fontSize + 'px';
	noteTitle.style.fontWeight = 'bold';
	noteTitle.style.color = fontColor;
	noteDiv.appendChild(noteTitle);
	var titleNode = document.createTextNode(title);
	noteTitle.appendChild(titleNode);
	
	var noteMessage = document.createElement("DIV");
	noteMessage.style.position = "relative";
	noteMessage.style.backgroundColor = backgroundColor;
	noteMessage.style.padding = "2px 5px 2px 5px";
	noteMessage.style.fontFamily = fontFace;
	noteMessage.style.fontSize = fontSize + 'px';
	noteMessage.style.color = "#000000";
	noteDiv.appendChild(noteMessage);
	var messageNode = document.createTextNode(entry);
	noteMessage.appendChild(messageNode);

	var notelink_url = document.createElement("DIV");
	notelink_url.style.position = "relative";
	notelink_url.style.backgroundColor = backgroundColor;
	notelink_url.style.padding = "2px 2px 2px 2px";
	notelink_url.style.fontFamily = fontFace;
	notelink_url.style.color = fontColor;
	notelink_url.style.fontSize = fontSize + 'px';
	notelink_url.style.textAlign = "right";
	notelink_url.style.paddingRight = "5px";
	
	//no link_url!!
	//var link_urlNode = document.createTextNode(" -" + link_url);
	//notelink_url.appendChild(link_urlNode);
	//noteDiv.appendChild(notelink_url);
	
	var body = document.getElementsByTagName('body')[0]
	body.appendChild(noteDiv);
	note = noteDiv;
	return noteDiv;
}

function getNodeCoords(node) {
	var left = (node.offsetLeft);
	var top = (node.offsetTop);
	var oo = node;
	while (oo.offsetParent) {
		oo = oo.offsetParent;
		left += oo.offsetLeft;
		top += oo.offsetTop;
	}
	var coord = new Object()
	coord['top'] = top;
	coord['left'] = left;
	coord['right'] = node.width + left;
	coord['bottom'] = node.height + top;	
	return coord;
 }