// JavaScript Document
/**
 *Super special thanks to urbanjost@comcast.net for this code on the web:
 *<http://home.comcast.net/~urbanjost/semaphore.html> 
 *
 */



   GLOBAL_AREAS= new Array();
   GLOBAL_WIDTH=-1;
   GLOBAL_HEIGHT=-1;
   GLOBAL_NEW_AREAS= new Array();

   function setglobal(){
      // place original AREA coordinate strings into a global array, called first time setXY is called
      var arrayAreas = document.body.getElementsByTagName("AREA");
      GLOBAL_WIDTH= document.getElementById("bgimg").width;   // get original width
      GLOBAL_HEIGHT= document.getElementById("bgimg").height; // get original height
      for(var i = 0; i < arrayAreas.length; i++) {
         GLOBAL_AREAS[i]= arrayAreas[i].coords;
      }
      document.body.onresize=setXY('bgimg',XSIZE(),YSIZE());
      // alert("GLOBAL_AREAS" + GLOBAL_AREAS );
   }

   function setXY(elementid,newwidth,newheight){
      if (GLOBAL_WIDTH == -1 ){
         setglobal();
      }
      document.getElementById(elementid).width=newwidth;
      document.getElementById(elementid).height=newheight;
      scaleArea();
   }

   function XSIZE(){ // get browser window.innerWidth , dealing with ie
     var myWidth = 0;
     if( typeof( window.innerWidth ) == 'number' ) {
       //Non-IE
       myWidth = window.innerWidth;
     } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
       //IE 6+ in 'standards compliant mode'
       myWidth = document.documentElement.clientWidth;
     } else if( document.body && ( document.body.clientWidth ) ) {
       //IE 4 compatible
       myWidth = document.body.clientWidth;
     }
     return myWidth;
  }

   function YSIZE(){  // get browser window.innerHeight, dealing with ie
     var myHeight = 0;
     if( typeof( window.innerHeight ) == 'number' ) {
       //Non-IE
       myHeight = window.innerHeight;
     } else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
       //IE 6+ in 'standards compliant mode'
       myHeight = document.documentElement.clientHeight;
     } else if( document.body && ( document.body.clientHeight ) ) {
       //IE 4 compatible
       myHeight = document.body.clientHeight;
     }
     return myHeight;
  }


function scaleArea() {   // using values stored at load, recalculate new values for the current size
        var arrayAreas = document.body.getElementsByTagName("AREA");
	message = ""
        for(var i = 0; i < arrayAreas.length; i++) {
           ii=i+1;
           rescaleX= document.getElementById("bgimg").width/GLOBAL_WIDTH ;
           rescaleY= document.getElementById("bgimg").height/GLOBAL_HEIGHT ;
           sarray=GLOBAL_AREAS[i].split(",");      // convert coordinates to a numeric array assuming comma-delimited values
           var rarray =new Array();
           for(var j = 0; j < sarray.length; j += 2) {
              rarray[j]=parseInt(sarray[j])*rescaleX;  // rescale the values
              rarray[j]=Math.round(rarray[j]);
              rarray[j+1]=parseInt(sarray[j+1])*rescaleY;  // rescale the values
              rarray[j+1]=Math.round(rarray[j+1]);
           }
	   message = message + rarray.join(",") + '\n';
           arrayAreas[i].coords=rarray.join(",");    // put the values back into a string
           GLOBAL_NEW_AREAS[i]= arrayAreas[i].coords;
       }
      // alert(rescaleX + " " + rescaleY + "\n" + GLOBAL_WIDTH + " " + GLOBAL_HEIGHT + "\n" + "GLOBAL_AREAS" + GLOBAL_AREAS +  "\nSCALED AREAS" + message);
   }

// do something when differents are clicked; could be any ECMAScript function, or simply use URLs instead )
    function dosomething(element,string){
       alert( string + '\n Scaled Coordinates=' + element.split(","));
       // all coordinates, scaled and unscaled 
       //alert( 'GLOBAL_AREAS:\n' + GLOBAL_AREAS + '\n' + 'GLOBAL_NEW_AREAS:\n' + GLOBAL_NEW_AREAS + '\n');
    }

$(window).bind('resize', function() {
    // resize the button here
   setXY('bgimg',XSIZE(),YSIZE()); 
    });