var curIndex = 0;
var curRodImage = 'rod0';
function changePoint() {
	
window.location = "#topmap";
/*
This function will update the iframe, fishing pole graphic, and map when something on the select list is picked
(document.getElementById(boxID).style.top).replace("px","");
The list works like this - 
<select id="pointlist" onchange="changePoint();"> // Calls this function
			<option id="the name in lowercase with no spaces.  This id will be used to get the html page" value="The rod image as rodX">Name (same as the value)</option>
			ex.
			<option id="gibsoninn" value="rod2">Gibson Inn</option> 
			this will look for and display gibsoninn.html in the iframe
</select>		

the rod image is also set
*/
if(document.getElementById('pointlist').selectedIndex == 0){
	var iframeelement = document.getElementById('theiframe');
	iframeelement.src = "welcome.html";
	document.getElementById('rodImage').src = "images/rod0.gif";
	document.getElementById('toolTip').style.visibility = 'hidden';
	return;
}

	 var pointlist = document.getElementById('pointlist'); 
	 var iframeelement = document.getElementById('theiframe');
	 iframeelement.src = pointlist.options[pointlist.selectedIndex].id + ".html";
	 var curIndex = pointlist.selectedIndex; 
	
	/*set the rod image*/
	curRodImage = pointlist.value;
	document.getElementById('rodImage').src = "images/" + curRodImage + ".gif";
	
	/*get the coords and set the tooltip*/
	areaid =  pointlist.options[pointlist.selectedIndex].id + "area";
	tooltipInfo = document.getElementById(areaid);
	reg = new RegExp(/(\d{0,3}),(\d{0,3})$/);
	newCoords = reg.exec(tooltipInfo.coords);
	xycoords = newCoords[0];
	/*x coord*/
	reg1 = new RegExp(/(\d{0,3})/);
	xcoordsearch = reg1.exec(xycoords);
	xcoord = xcoordsearch[0];
	
	/*y coord*/
	reg2 = new RegExp(/(\d{0,3})$/);
	ycoordsearch = reg2.exec(xycoords);
	ycoord = ycoordsearch[0];
	
	theOffset = findPosition(document.getElementById('content'));
	
	document.getElementById('toolTip').style.visibility = 'visible';
	document.getElementById('toolTip').style.left = (theOffset[0] + parseInt(xcoord) + 10) + "px";
	document.getElementById('toolTip').style.top = (theOffset[1] + parseInt(ycoord) + 10) + "px";
	
	areaid =  pointlist.options[pointlist.selectedIndex].id + "area";
	tooltipInfo = document.getElementById(areaid);
	document.getElementById('toolTip').innerHTML = tooltipInfo.className;
}

/*This is called when the mouse is moved over an area on the imagemap.  It has two arguments, selected (the number of the point) and rodimage (the id of the rod image as rodX)*/
function pointMouseOver(selected,rodimage,xcoord,ycoord){
	var pointlist = document.getElementById('pointlist'); 
	/*the mouse moves in*/

	
	if(selected != 'null')
	{
		pointlist.selectedIndex = (selected);
		document.getElementById('rodImage').src = "images/" + rodimage + ".gif";
		document.getElementById('toolTip').style.visibility = 'visible';
		theOffset = findPosition(document.getElementById('content'));
		
		/*+10 is the offset*/
		document.getElementById('toolTip').style.left = (theOffset[0] + xcoord + 10) + "px";
		document.getElementById('toolTip').style.top = (theOffset[1] + ycoord + 10) + "px";
		areaid =  pointlist.options[pointlist.selectedIndex].id + "area";
		tooltipInfo = document.getElementById(areaid);
		document.getElementById('toolTip').innerHTML = tooltipInfo.className;
	}
	/*the mouse moves out*/
	else
	{
		pointlist.selectedIndex = curIndex;
		document.getElementById('rodImage').src = "images/" + curRodImage + ".gif";
		document.getElementById('toolTip').style.visibility = 'hidden';
	}
}

function pointClicked(){
	changePoint();
}
function findPosition( oElement ) {
  if( typeof( oElement.offsetParent ) != 'undefined' ) {
    for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
    return [ posX, posY ];
  } else {
    return [ oElement.x, oElement.y ];
  }
}