/*

pm_mapTracer.js
requires wz_jsgraphics.js

Provides onMouseOver outlining of image map areas and highlighting of corresponding list.

P. McK 2008-07-13


<div id="imgdiv" style='position: relative'><IMG SRC="path/to/mapimage.jpg" border='0' usemap="#imgmap"></div>

<img src="./1x1.gif" 
onload="diagram = new mapTracer('imgdiv'); diagram.init();
legend = new styleSwitcher(['tda0','tdb0','tda1','tdb1','tda2','tdb2'],'backgroundColor','E0F0FF','');
">

<map name="imgmap">
<area name='area0' shape="poly" coords="3,4,144,4,144,32,3,32"
                       href="url0" alt="alt0"
                       onMouseOver="legend.highlight('tda0'); legend.on('tdb0'); diagram.show(this)"
                       onMouseOut="diagram.init(); legend.init()">
<area name='area1' shape="rect" coords="28,38,144,53" 
                       href="url1" alt="alt1"
                       onMouseOver="legend.highlight('tda1'); legend.on('tdb1'); diagram.show(this)"
                       onMouseOut="diagram.init(); legend.init()">
<area name='area2' shape="circle" coords="62,121,46" 
                       href="url2" alt="alt2"
                       onMouseOver="legend.highlight('tda2'); legend.on('tdb2'); diagram.show(this)"
                       onMouseOut="diagram.init(); legend.init()"></map>

<div id='tda0'
onMouseOver="diagram.draw('poly', '3,4,144,4,144,32,3,32'); legend.highlight('tda0'); legend.on('tdb0')"
onMouseOut="diagram.init(); legend.init()">description 1 of item0 goes here</div>
<div id='tdb0'
onMouseOver="diagram.draw('poly', '3,4,144,4,144,32,3,32'); legend.highlight(this.id); legend.on(this.id)"
onMouseOut="diagram.init(); legend.init()">description 2 of item0 goes here</div>
etc

*/

/////
function mapTracer(canvasid) {
 var at  = new jsGraphics(canvasid);
 at.setStroke(1);
 at.setColor('#00559f');
// at.setColor('FF0000');
 this.init = function () {
  at.clear();
 }
 this.show =  function(area) {
 //  alert(area.id + area.shape + area.coords + area.href + area.alt);
  this.draw (area.shape,area.coords);
 }
 this.draw =  function(shape,coords) {
  if (shape.toLowerCase() == 'poly') {
   var pp = new polyParams(coords);
   at.drawPolyline(pp.x_arr,pp.y_arr);
  } else if (shape.toLowerCase() == 'rect') {
   var rp = new rectParams(coords);
   at.drawRect(rp.x,rp.y,rp.width,rp.height);
  } else if (shape.toLowerCase() == 'circle') {
   var cp = new circleParams(coords);
   at.drawEllipse(cp.x,cp.y,cp.width,cp.height);
  }
  at.paint();
 }

// convert imagemap coords for jsGraphics

 function polyParams(coords) {   // x1,y1,x2,y2,x3,y3 > (x1,x2,x3) and (y1.y2.y3)
  var coordsArray = coords.split(',');
  var flag = 0;
  var x_arr = new Array();
  var y_arr = new Array();
  for (var i = 0; i < coordsArray.length; i++ ) {
   var val = coordsArray[i]*1;
   if (flag == 0) {
    x_arr.push(val);
    flag=1;
   }else {
    y_arr.push(val);
    flag=0;
   }
  }
  if ( ( x_arr[0] !=  x_arr[i]) || ( y_arr[0] != y_arr[i]) ) { // close the loop
   x_arr.push(x_arr[0]);
   y_arr.push(y_arr[0]);
  }
  this.x_arr = x_arr;
  this.y_arr = y_arr;
 }

 function rectParams(coords) {         // x,y,x2,y2 > x,y,width,height
  var coordsArray = coords.split(',');
  var dx = (coordsArray[2])-parseInt(coordsArray[0]);
  if (dx > 0) {
   this.x = parseInt(coordsArray[0]);
   this.width=dx;
  }else {
   this.x = parseInt(coordsArray[2]);
   this.width=Math.abs(dx);
  }
  var dy = (coordsArray[3])-parseInt(coordsArray[1]);
  if (dy > 0) {
   this.y = parseInt(coordsArray[1]);
   this.height=dy;
  }else {
   this.y = parseInt(coordsArray[3]);
   this.height=Math.abs(dy);
  }
 }

 function circleParams(coords) {       // x,y,radius > x,y,width,height
  var coordsArray = coords.split(',');
  this.x = parseInt(coordsArray[0])-parseInt(coordsArray[2]);
  this.y = parseInt(coordsArray[1])-parseInt(coordsArray[2]);
  this.width= parseInt(coordsArray[2])*2;
  this.height= parseInt(coordsArray[2])*2;
 }

}
// end mapTracer



// coordinate style changes within a group of elements
// objref = new styleSwitcher([elementlist],selector,onvalue,offvalue)
// legend = new styleSwitcher(['tda0','tdb0','tda1','tdb1','tda2','tdb2'],'backgroundColor','E0F0FF','');
// legend.on('tda0')
// legend.off('tda0')
// legend.highlight('tda2')
// legend.highlight(this.id)
// legend.init()
// legend.addStyle('color','FF0000','')
// legend.addStyle('textDecoration','underline','none')
// legend.addStyle('margin','10','')

function styleSwitcher(elements,selector,on,off) {
 var stylesets = new Array([selector,on,off]);
 this.on = function(element) {
  for(var n = 0; n < stylesets.length; n++) {
   if (document.getElementById(element)) {
    document.getElementById(element).style[stylesets[n][0]] = stylesets[n][1];
   }
  }
 }
 this.off = function(element) {
  for(var n = 0; n < stylesets.length; n++) {
   if (document.getElementById(element)) {
    document.getElementById(element).style[stylesets[n][0]] = stylesets[n][2];
   }
  }
 }
 this.init = function() {
  for(var n = 0; n < elements.length; n++) {
   this.off(elements[n]);
  }
 }
 this.highlight = function(element) {
  this.init();
  this.on(element);
 }
 this.addStyle = function(selector,on,off) {
  stylesets.push([selector,on,off])
 }
}

// offset function required for mapMaker
// find position of mouse event over image
// usage onmousedown="alert(offset(event,this))";
// usage onmousedown="alert(offset(event,this,'x'))";
function offset(e,obj,xy) {
 var x = 0;
 var y = 0;
 if (typeof(e.offsetX) != 'undefined') {
  x = e.offsetX;
  y = e.offsetY;
 } else {
  x = e.clientX;
  y = e.clientY;
  var xOff = obj.offsetLeft;
  var yOff = obj.offsetTop;
  while ((obj = obj.offsetParent) && (obj.nodeType == 1)) {
   xOff += obj.offsetLeft;
   yOff += obj.offsetTop;
  }
  x = x - xOff;
  y = y - yOff;
 }
 if ( xy == 'x') {
  return x;
 }else if (xy == 'y') {
  return y;
 }else {
  return new Array(x, y); // mouse position relative to the image
 }
}