// forked from canvastag's "Image map to canvas " http://jsdo.it/canvastag/9UQB
//Global mouse object
 
var MOUSE={x:0,y:0}
       document.onmousemove=function(e){ 
          e = !e ? window.event : e ; 
          MOUSE={x:(e.pageX||e.clientX),y:(e.pageY||e.clientY)} 
            }


//IE point in poly function
function pnpoly(xp, yp, x, y) {
        var c = 0;
        for (i=0;i< xp.length-1;i++) {
            j = (i + 1)% xp.length

            if( (  (yp[i]<=y && y<yp[j])  ||  ( yp[j] <= y && y < yp[i])  )&&(   x<(xp[j]-xp[i])*(y-yp[i])/(yp[j]-yp[i]) + xp[i]  ) 
              ){c = !c}
               }
        return c
        }



    window.onload=function(){
         window.canvas=document.getElementById("canvas")
         ctx=canvas.getContext("2d")
         render()
   }


     var colors=[ "#faa", "#faa", "#fda", "#faa", "#faa","#fda", "#fda", "#fda", "#afa", "#fda", "#afa", "#fda", "#fda", "#ffa", "#faa", "#faa", "#faa", "#ffa", "#fda", "#ffa", "#faa", "#afa", "#afa", "#fda", "#ffa", "#faa", "#afa", "#ffa", "#afa", "#ffa", "#ffa", "#afa", "#faa", "#ffa", "#fda","#afa", "#afa", "#faa", "#ffa", "#ffa","#fda", "#afa", "#fda", "#afa", "#ffa","#ffa", "#ffa", "#afa", "#ffa", "#ffa" ]


/*
 
var states=[
            "Alabama",    "Alaska",   "Arizona",   "Arkansas",   "California", 
           "Colorado", "Connecticut", "Delaware",  "Florida",    "Georgia", 
            "Hawaii",    "Idaho",    "Illinois",   "Indiana",    "Iowa", 
            "Kansas",   "Kentucky", "Louisiana",   "Maine",     "Maryland", 
        "Massachusetts","Michigan", "Minnesota", "Mississippi", "Missouri", 
             "Montana", "Nebraska",   "Nevada", "New Hampshire","New Jersey", 
        "New Mexico", "New York", "North Carolina","North Dakota", "Ohio", 
          "Oklahoma", "Oregon",    "Pennsylvania", "Rhode Island", "South Carolina", 
        "South Dakota","Tennessee", "Texas",       "Utah",        "Vermont", 
          "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"  
            ]
*/

var unemployment_sept_2010=[
"Alabama 8.9",    
"Alaska 7.8",   
"Arizona 9.7",   
"Arkansas 7.7",   
"California 12.4", 
"Colorado 8.2", 
"Connecticut 9.1", 
"Delaware 8.4",  
"Florida 11.9",    
"Georgia 10.0", 
"Hawaii 6.3",    
"Idaho 9.0",    
"Illinois 9.9",   
"Indiana 10.1",    
"Iowa 6.8", 
"Kansas 6.6",   
"Kentucky 10.1", 
"Louisiana 7.8",   
"Maine 7.7",     
"Maryland 7.5", 
"Massachusetts 8.4",
"Michigan 13.0", 
"Minnesota 7.0", 
"Mississippi 9.8", 
"Missouri 9.3", 
"Montana 7.4", 
"Nebraska 4.6",  
 "Nevada 14.4", 
"New Hampshire 5.5",
"New Jersey 9.4", 
"New Mexico 8.2", 
"New York 8.3", 
"North Carolina 9.6",
"North Dakota 3.7", 
"Ohio 10.0", 
"Oklahoma 6.9", 
"Oregon 10.6",    
"Pennsylvania 9.0", 
"Rhode Island 11.5", 
"South Carolina 11.0", 
"South Dakota 4.4",
"Tennessee 9.4", 
"Texas 8.1",       
"Utah 7.5",        
"Vermont 5.8", 
"Virginia 6.8", 
"Washington 9.0", 
"West Virginia 9.2", 
"Wisconsin 7.8", 
"Wyoming 6.8" 
]

 function render(){

   //var colors=["#faa","#aaf","#afa","#fdc","#ffa"]
     var A=document.getElementsByTagName("area")
     var arry=[]
     for(i=0;i<A.length;i++){
     var obj={}
     obj.poly=[]
     var str=A[i].coords.split(",")
     for(z=0;z<str.length;z++)obj.poly.push( parseFloat(str[z]))
     obj.id=A[i].alt
     arry.push(obj)
     }
     
    function run(){
     canvas.width=canvas.width
     for(i=0;i< arry.length; i++ ){
     ctx.save()
     ctx.beginPath()
     ctx.moveTo(arry[i].poly[arry[i].poly.length-2],arry[i].poly[arry[i].poly.length-1])
     j=0
     while(j < arry[i].poly.length-2){
     ctx.lineTo(arry[i].poly[j],arry[i].poly[j+1])
     j+=2
     }
     ctx.closePath()

  if(!ctx.isPointInPath){ 
  // internet explorer doesn't do isPointInPath
       var xp=[] 
       var yp=[]
  //build arrays for xpoints, ypoints for pnpoly function
  for(z=0; z < arry[i].poly.length-1 ;z++ ){
      z%2==0 ? xp.push(arry[i].poly[z]) : yp.push(arry[i].poly[z])
  
      }

   //test each poly for mouse inside, turn color lime if inside
   //works for the ploys that render
ctx.fillStyle = pnpoly(xp,yp,MOUSE.x-ctx.canvas.offsetLeft,MOUSE.y-ctx.canvas.offsetTop) ? "lime" : colors[i%colors.length];
 
  //text function makes script run too slow with IE.
  // to do: Use div for textContent
 // ctx.fillText(unemployment_sept_2010[i]+"% unemployment",100,350)
}

else {   //Use chrome, firefox, opera with isPointInPath

   
if( ctx.isPointInPath(MOUSE.x-ctx.canvas.offsetLeft,MOUSE.y-ctx.canvas.offsetTop)){
    ctx.shadowOffsetX =  -1
    ctx.shadowOffsetY =  1
    ctx.shadowBlur = 2
    ctx.shadowColor = "black"
    ctx.fillStyle="black"
    ctx.font="16px arial black"

if(!ctx.fillText){
                 //opera doesn't do text on canvas
                //to do: make div for textContent
   }else{
         ctx.fillText(unemployment_sept_2010[i]+"% unemployment",100,350)
        }
        
     }
     //set fill style of poly 
     ctx.fillStyle = ctx.isPointInPath(MOUSE.x-ctx.canvas.offsetLeft,MOUSE.y-ctx.canvas.offsetTop) ? "lime": colors[i%colors.length];


   } //end Use chrome, firefox, opera with isPointInPath


ctx.fill();
ctx.stroke();
ctx.restore();
}

setTimeout(arguments.callee,50);
}

run();

}