var Loaded = false;

var SessionId;// = Math.floor(Math.random()*100000000)

var MapScript, MapPath;

var MapWidth, MapHeight;

var State="ZoomInX2";

var PreState='';

var Hint;

var timeId = 0;

var InfoWindow, LocateWindow, GotoWindow, OrientationWindow, SuggestRouteWindow, EnlargeWindow, FavoritesWindow;

var key='';

var test;

var Capture;

var mydiv;

var x1,y1,x2,y2;

var leftmousedown = false;

var elmImage=new Image();

var Access;

var Count = 0;

elmImage.src="dotgreen7x7.gif"



  if(document.all) {

    var bg='IEloadingbg';

  }else {

    var bg='loadingbg';

  }



function SetSrc(id, url)

{

  if (Loaded) {

    if (document.all) {

      eval("document.all." + id + "img").src = url;

    } else {

      document.getElementById(id+"img").src = url;

    }

  }

}



 function SetQuery(Query) {

   document.getElementById('markers').className=bg;

   document.getElementById('loading').className='loading';

   //alert(Query);

   d=Math.floor(Math.random()*100000000);

   test = MapScript+MapPath+"?"+Query+"&width="+MapWidth+"&height="+MapHeight+"&sessionid="+SessionId+"&killcache="+d;

   if (Loaded) {

     var elm=document.getElementById("MarqueeDiv");

	 if(elm.hasChildNodes()){
	   while ( elm.childNodes.length >= 1 ){
         elm.removeChild( elm.firstChild );       
	   } 
	 }
	  Marquee=document.createElement('DIV');
      Marquee.style.border="1px dashed black";
      Marquee.style.position="absolute";
      Marquee.style.visibility="hidden";
      Marquee.id="Marquee";
      document.getElementById("MarqueeDiv").appendChild(Marquee);
     

     if(Query=='Action=ZoomAll&'&&document.getElementById('search')) {

       if(Capture)

         document.getElementById('search').src='index.php?SID='+SessionId+'&view=usersearch&provID=&cityID=&burbID=';

       else

         document.getElementById('search').src='index.php?SID='+SessionId+'&type=search&provID=&cityID=&burbID=';  

     }

   }

   

   if(Access=="register"&&Count>=2) {

     //window.location="index.php";

     SetSrc("MapArea", MapScript+MapPath+"?Action=ZoomAll&width="+MapWidth+"&height="+MapHeight+"&sessionid="+SessionId+"&killcache="+d);

     document.getElementById('notice').className=bg;

     document.getElementById('markers').innerHTML='';

     document.getElementById('notice').innerHTML='<div align="center" style="position:absolute;top:20;left:40;color:#ffffff;background-color:#000000"><b>Please login or <br> register for FREE to <br>view more of the map</b></div>';

   } else {

     SetSrc("MapArea", test);

   }

   Count++;

   //alert(Count);

   //alert(State);

 }



function SetAlt(id, alt)

{

  if (Loaded)

  {

    if (document.all) {eval("document.all." + id + "img").alt = alt}

    else { document.getElementById(id + "img").alt = alt}

  }

}



function SetState(S)

{

  if (Loaded)

  {

    State=S;

    //alert(State)

    //SetSrc("Info", (State=="Info")?"/mapicons/info_2.gif":"/mapicons/info_0.gif");

    SetSrc("ZoomInX2", (State=="ZoomInX2")?"/mapicons/zoomx2_2.gif":"/mapicons/zoomx2_0.gif");

    SetSrc("ZoomInX5", (State=="ZoomInX5")?"/mapicons/zoomx5_2.gif":"/mapicons/zoomx5_0.gif");

    SetSrc("ZoomOutX2", (State=="ZoomOutX2")?"/mapicons/zoomo2_2.gif":"/mapicons/zoomo2_0.gif");

    SetSrc("ZoomOutX5", (State=="ZoomOutX5")?"/mapicons/zoomo5_2.gif":"/mapicons/zoomo5_0.gif");

    if(Capture==true)

      SetSrc("Capture", (State=="Capture")?"/mapicons/pushpinin.bmp":"/mapicons/pushpinover.bmp");

    SetSrc("Pan", (State=="Pan")?"/mapicons/pan_2.gif":"/mapicons/pan_0.gif");

    //if (State=="Info") SetHint('Click on the map to get information about an object', true)

    if ((State=="ZoomInX2") || (State=="ZoomInX5")) {

      SetHint('Click or click and drag on the map to zoom in', true)

      if(Capture==true) {

        if(document.all) {

          //document.all.MapAreaimg.onmousedown = down;

          //document.all.MapAreaimg.onmouseup = up;

        } else {

          //document.getElementById('markers').addEventListener('mousedown', down, false);

          //document.getElementById('markers').addEventListener('mouseup', up, false);

        }

      }

    }

    else if ((State=="ZoomOutX2") || (State=="ZoomOutX5")) { SetHint('Click on the map to zoom out', true)}

    else if ((State=="Capture")) {

      SetHint('Click on the map to capture your location.', true)

      if(document.all) {

        document.all.MapAreaimg.onclick=MapClick;

        document.all.MapAreaimg.onmousedown = null;

        document.all.MapAreaimg.onmouseup = null;

      } else {

        document.getElementById('markers').addEventListener('click', MapClick, false);

        //document.getElementById('markers').removeEventListener('mousedown', down, false);

        //document.getElementById('markers').removeEventListener('mouseup', up, false);

      }

    }

    else if (State=="Pan") SetHint('Click on the map to center that position', true);

  }

}



function SetHint(Text, Permanent)

{

  if (Loaded)

  {

    if (timeId>0) clearTimeout(timeId);

    timeId=0;

    /*if (NS4)

    {

      with (document.map.document.hint.document) {

        write('<FONT Size=2 Face="Arial">'+Text+'</FONT>');

        close();

      }

    }

    else document.all.hint.innerHTML=Text;*/

    if (document.all) document.all.hint.innerHTML=Text;

    else document.getElementById('hint').innerHTML=Text;

    if (Permanent)

    {

      Hint=Text;

      SetAlt("MapArea", Text);

    }

    window.status=Text;

  }

}



function RestoreHint()

{

  if (Loaded)

  {

    if (timeId==0) timeId=setTimeout("SetHint('"+Hint+"')", 50);

  }

}



function PreloadImg(URL)

{

  img = new Image();

  img.src = URL;

}



function CreateButton(ID, NormalURL, HighlightURL, ClickedURL, Width, Height, Alt, X, Y, onClick)

{

  PreloadImg(NormalURL);

  PreloadImg(HighlightURL);

  PreloadImg(ClickedURL);

  return '<STYLE TYPE="text/css">'+

    '#'+ID+' {'+

      'position:absolute;'+

      'left:'+X+';'+

      'top:'+Y+';'+

      'width:'+Width+';'+

      'height:'+Height+';'+

      'z-index:1'+

    '}'+

    '</STYLE>'+

    '<DIV ID="'+ID+'">'+

    /*'<A HREF="javascript:'+

    ((ClickedURL)?"SetSrc('"+ID+"','"+ClickedURL+"');":"")+

    onClick+'"'+

    ((HighlightURL)?

      ' onMouseOver="alert(State);SetHint('+"'"+Alt+"', false); "+'if (State!='+"'"+ID+"') "+"SetSrc('"+ID+"','"+HighlightURL+"')"+'"'+

      ' onMouseOut="RestoreHint(); if (State!='+"'"+ID+"') "+"SetSrc('"+ID+"','"+NormalURL+"')"+'"':'')+

    '>'+*/

    '<IMG NAME="'+ID+'img" ID="'+ID+'img" SRC="'+((State==ID)?ClickedURL:NormalURL)+'" ALT="'+Alt+

    '" BORDER="0" HEIGHT="'+Height+'" WIDTH="'+Width+'"'+

    ' onClick="'+

    ((ClickedURL)?"SetSrc('"+ID+"','"+ClickedURL+"');":"")+

    onClick+'"'+

    ((HighlightURL)?

      ' onMouseOver="SetHint('+"'"+Alt+"', false); "+'if (State!='+"'"+ID+"') "+"SetSrc('"+ID+"','"+HighlightURL+"')"+'"'+

      ' onMouseOut="RestoreHint(); if (State!='+"'"+ID+"') "+"SetSrc('"+ID+"','"+NormalURL+"')"+'"':'')+'>'+

    /*'</A>*/'</DIV>';

}



//key added

function MapClick(e) {

 //alert(State);

  //SetHint(State, true)

  if(document.all) {

    x=window.event.offsetX;

    y=window.event.offsetY;

  } else {

    x=e.layerX;

    y=e.layerY;

  }

  if(State=="Info") 

    DoInfo(x, y, key)

  else if(State=="Capture")

    DoCapture(x,y);

  else 

    SetQuery("Action="+State+"&clickX="+x+"&clickY="+y+'&key=');



}



function afterImageLoaded() {//markers wil be drawn after map is loaded

  //alert('a');
  if (document.all) {

    if(eval("document.all.trackingmapframe")) 

      eval("document.all.trackingmapframe").src = "index.php?SID="+SessionId+"&view=trackingmapframe&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("trackingmapframe")) 

      document.getElementById("trackingmapframe").src = "index.php?SID="+SessionId+"&view=trackingmapframe&killcache="+Math.floor(Math.random()*100000000);

  }
  if (document.all) {

    if(eval("document.all.tripmonframe")) 

      eval("document.all.tripmonframe").src = "index.php?SID="+SessionId+"&view=tripmonframe&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("tripmonframe")) 

      document.getElementById("tripmonframe").src = "index.php?SID="+SessionId+"&view=tripmonframe&killcache="+Math.floor(Math.random()*100000000);

  }

  if (document.all) {

    if(eval("document.all.loc8frame")) 

      eval("document.all.loc8frame").src = "index.php?SID="+SessionId+"&view=loc8frame&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("loc8frame")) 

      document.getElementById("loc8frame").src = "index.php?SID="+SessionId+"&view=loc8frame&killcache="+Math.floor(Math.random()*100000000);

  }

  if (document.all) {

    if(eval("document.all.paniclocateframe")) 

      eval("document.all.paniclocateframe").src = "index.php?SID="+SessionId+"&view=paniclocframe&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("paniclocateframe")) 

      document.getElementById("paniclocateframe").src = "index.php?SID="+SessionId+"&view=paniclocframe&killcache="+Math.floor(Math.random()*100000000);

  }

  if (document.all) {

    if(eval("document.all.locateframe")) 

      eval("document.all.locateframe").src = "index.php?view=locateframe&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("locateframe")) 

      document.getElementById("locateframe").src = "index.php?view=locateframe&killcache="+Math.floor(Math.random()*100000000);

  }

  if (document.all) {

    if(eval("document.all.incidentframe")) 

      eval("document.all.incidentframe").src = "index.php?SID="+SessionId+"&view=incidentsearchingmap&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("incidentframe")) 

      document.getElementById("incidentframe").src = "index.php?SID="+SessionId+"&view=incidentsearchingmap&killcache="+Math.floor(Math.random()*100000000);

  }
  
  if (document.all) {

    if(eval("document.all.cleanupframe")) 

      eval("document.all.cleanupframe").src = "index.php?SID="+SessionId+"&view=incidentsearchingmap2&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("cleanupframe")) 

      document.getElementById("cleanupframe").src = "index.php?SID="+SessionId+"&view=incidentsearchingmap2&killcache="+Math.floor(Math.random()*100000000);

  }
  
  if (document.all) {

    if(eval("document.all.tbframe")) 

      eval("document.all.tbframe").src = "index.php?SID="+SessionId+"&view=tbmap&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("tbframe")) 

      document.getElementById("tbframe").src = "index.php?SID="+SessionId+"&view=tbmap&killcache="+Math.floor(Math.random()*100000000);

  }
  
  if (document.all) {

    if(eval("document.all.vframe")) 

      eval("document.all.vframe").src = "index.php?SID="+SessionId+"&view=vmaplist&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("vframe")) 

      document.getElementById("vframe").src = "index.php?SID="+SessionId+"&view=vmaplist&killcache="+Math.floor(Math.random()*100000000);

  }

  if (document.all) {  

    if(eval("document.all.rectangleframe")) 

      eval("document.all.rectangleframe").src = "index.php?SID="+SessionId+"&view=strsearch&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("rectangleframe")) 

      document.getElementById("rectangleframe").src = "index.php?SID="+SessionId+"&view=strsearch&killcache="+Math.floor(Math.random()*100000000);

  }

  if (document.all) {  

    if(eval("document.all.homemap")) 

      eval("document.all.homemap").src = "index.php?SID="+SessionId+"&view=homemap&killcache="+Math.floor(Math.random()*100000000);

  } else {

    if(document.getElementById("homemap")) 

      document.getElementById("homemap").src = "index.php?SID="+SessionId+"&view=homemap&killcache="+Math.floor(Math.random()*100000000);

  }

    document.getElementById('markers').className='doneloadingbg';

    document.getElementById('loading').className='doneloadingbg';

}





function CreateMapImage(ID, X, Y, Width, Height, URL)

{

  return '<STYLE TYPE="text/css">'+

         '#'+ID+' {'+

           'position:absolute;'+

           'left:'+X+';'+

           'top:'+Y+';'+

           'width:'+Width+';'+

           'height:'+Height+';'+

           'cursor: pointer; cursor: hand;'+

           'z-index:1'+

         '}'+

         '</STYLE>'+

         '<DIV ID="'+ID+'">'+

         '<IMG onLoad="afterImageLoaded();" NAME="'+ID+'img" ID="'+ID+'img" SRC="'+URL+

         '" BORDER="1" HEIGHT="'+Height+'" WIDTH="'+Width+' STYLE="z-index:3; cursor: hand;}">'+

         '</DIV>'+

         '<div class="loading" id="loading" style="position:absolute;'+

             'left:'+Width/2+';'+

             'top:'+Height/2+';"></div>'+

         '<DIV class="'+bg+'" style="position:absolute;'+

             'left:'+(X+1)+';'+

             'top:'+(Y+1)+';'+

             'width:'+Width+';'+

             'height:'+Height+';'+

             'cursor: pointer; cursor: hand;'+

             'z-index:1;" ID="markers">'+

         '</DIV>'+

         '<DIV class="" style="position:absolute;'+

             'left:'+(X+1)+';'+

             'top:'+(Y+1)+';'+

             'width:'+Width+';'+

             'height:'+Height+';'+

             'cursor: pointer; cursor: hand;'+

             'z-index:1;" id="notice">'+

         '</DIV>'+
		 '<DIV style="position:absolute;'+
      'left:'+(X)+';'+
      'top:'+(Y)+';'+
      'width:'+Width+';'+
      'height:'+Height+';'+
      'cursor: pointer;'+
      'z-index:2;" ID="MarqueeDiv" oncontextmenu="return false;">'+
    '</DIV>';

}



function CreateHint(ID, X, Y, Width, Height, Text)

{

  Hint=Text;

  return '<STYLE TYPE="text/css">'+

    '#'+ID+' {'+

      'position: absolute;'+

      'left: '+X+';'+

      'top: '+Y+';'+

      'width: '+Width+';'+

      'height: '+Height+';'+

      'z-index: 1;'+

      'font: 10pt Arial'+

    '}'+

    '</STYLE>'+

    '<DIV ID="'+ID+'">'+

    Text+

    '</DIV>';

}



//MapScript+MapPath+

function DoInfo(x, y, key) {

  if (!(InfoWindow) || (InfoWindow.closed)) 

    InfoWindow=window.open("index.php?type=entitydetails&key="+key, "InfoWindow", "top=1, left=1,width=450,height=620,resizable=no,scrollbars=no")

  else {

    //InfoWindow.location=MapScript+MapPath+"?info&clickX="+x+"&clickY="+y+"&sessionid="+SessionId;

		  InfoWindow.location="index.php?type=entitydetails&key="+key;

    InfoWindow.focus();

  }

}



function ZoomScale(Scale) {

  SetQuery("Action=Zoom&scale="+Scale);

}



function Redraw() {

  SetQuery("Action=Redraw");

}



function DoLocate()

{

  if (!(LocateWindow) || (LocateWindow.closed)) LocateWindow=window.open(MapScript+MapPath+"?findstreet", "LocateWindow", "width=400,height=300,resizable=yes,scrollbars=yes")

  else

  {

    LocateWindow.location=MapScript+MapPath+"?findstreet";

    LocateWindow.focus();

  }

}



function DoGoto()

{

  if (!(GotoWindow) || (GotoWindow.closed)) GotoWindow=window.open(MapScript+MapPath+"?goto", "GotoWindow", "width=400,height=300,resizable=yes,scrollbars=yes")

  else

  {

    GotoWindow.location=MapScript+MapPath+"?goto";

    GotoWindow.focus();

  }

}



function DoOrientate()

{

  d=new Date();

  if (!(OrientationWindow) || (OrientationWindow.closed)) OrientationWindow=window.open(MapScript+MapPath+"?noupdate&Action=orientate&factor=5&width=400&height=300&time="+d.getTime(), "OrientationWindow", "width=440,height=340,resizable=yes,scrollbars=yes")

  else

  {

    OrientationWindow.location=MapScript+MapPath+"?noupdate&Action=orientate&factor=5&width=400&height=300&time="+d.getTime();

    OrientationWindow.focus();

  }

}



function DoEnlarge()

{

  d=new Date();

  if (!(EnlargeWindow) || (EnlargeWindow.closed)) EnlargeWindow=window.open(MapScript+MapPath+"?noupdate&Action=Redraw&width=550&height=450&time="+d.getTime(), "EnlargeWindow", "width=580,height=470,resizable=yes,scrollbars=yes")

  else

  {

    EnlargeWindow.location=MapScript+MapPath+"?noupdate&Action=Redraw&width=550&height=450&time="+d.getTime();

    EnlargeWindow.focus();

  }

}



function DoSuggestRoute()

{

  if (!(SuggestRouteWindow) || (SuggestRouteWindow.closed)) SuggestRouteWindow=window.open(MapScript+MapPath+"?suggestroute", "SuggestRouteWindow", "width=400,height=300,resizable=yes,scrollbars=yes")

  else SuggestRouteWindow.location=MapScript+MapPath+"?suggestroute";

  SuggestRouteWindow.focus();

}



function DoFavorites()

{

  if (!(FavoritesWindow) || (FavoritesWindow.closed)) FavoritesWindow=window.open(MapScript+MapPath+"?favorites", "FavoritesWindow", "width=400,height=300,resizable=yes,scrollbars=yes")

  else

  {

    FavoritesWindow.location=MapScript+MapPath+"?favorites";

    FavoritesWindow.focus();

  }

}



function Pan(X,Y)

{

  SetQuery("Action=Pan&X="+X+"&Y="+Y);

}



function DoHelp()

{

  if (!(HelpWindow) || (HelpWindow.closed)) HelpWindow=window.open("/h0.htm", "HelpWindow", "innerWidth=300,innerHeight=200,resizable=yes,scrollbars=yes")

  else HelpWindow.location="/h0.htm";

  HelpWindow.focus();

}



function DoCapture(x,y) {

   mylongitude = x*(rect[2]-rect[0])/350+rect[0];

   if (document.all) {

     eval("document.all.longitude").value = mylongitude;

   } else {

     document.getElementById("longitude").value = mylongitude;

   }

   mylatitude = -(y*(rect[3]-rect[1])/350-rect[3]);

   if (document.all) {

     eval("document.all.latitude").value = mylatitude;

   } else {

     document.getElementById("latitude").value = mylatitude;

   }

   if (document.all) {

     var elm=eval("document.all.markers");

   } else {

     var elm=document.getElementById("markers");

   }

   

   if(elm) elm.innerHTML="";

 		if(typeof(w)=="undefined" || w==null) w=7;

 		if(typeof(h)=="undefined" || h==null) h=7;

 		elmImage.style.position="absolute";

 		if(typeof(name)=="undefined" || name==null || name.length==0) name="dotgreen7x7.gif";

 		

 		if(typeof(title)=="undefined") title="";

 		//elmImage.title=title;

 		//elmImage.id=id;

 		elmImage.width=w;

 		elmImage.height=h;

 		elmImage.style.left=String(x-(w>>1)-2)+"px";

 		elmImage.style.top=String(y-(h>>1)-2)+"px";

 		//elmImage.onmouseover=marker_onmouseover;

 		//elmImage.onmouseout=marker_onmouseout;

 		//elmImage.onclick=noeffect;

 		elmImage.style.borderStyle="none";

 		elmImage.style.borderWidth="2px";

 		elmImage.style.borderColor="red";

 		elmImage.style.margin="2px";

 		if (document.all) {

     var elmMarkers=eval("document.all.markers");

   } else {

     var elmMarkers=document.getElementById("markers");

   }

 		elmMarkers.appendChild(elmImage);

}



function CreateMap(Script, Path, Query, Style, Width, Height, Buttons,sesid, capture, access)

{



  Access=access;

  Capture = capture;

  SessionId=sesid;

  State = "ZoomInX2";

  //SetState("ZoomInX2");

  MapScript=Script;

  MapPath=Path;

  MapWidth=Width;

  MapHeight=Height;

  d=new Date();

  MapQuery=Script+Path+"?width="+Width+"&height="+Height+((Query!="")?"&"+Query:"")+"&sessionid="+SessionId;

  TopButtons="";

  L=32;

  Buttons=Buttons.toLowerCase();

//  if (Buttons.indexOf("locate")>=0) { TopButtons+=CreateButton("Locate", "/mapicons/locate0.gif", "/mapicons/locate1.gif", "/mapicons/locate2.gif", 64, 32, "Locate", L, 0, "DoLocate()"); L+=64; }

//  if (Buttons.indexOf("goto")>=0) { TopButtons+=CreateButton("Goto", "/mapicons/goto0.gif", "/mapicons/goto1.gif", "/mapicons/goto2.gif", 58, 32, "Goto", L, 0, "DoGoto()"); L+=58; }

//  TopButtons+=CreateButton("Favorites", "/mapicons/favor0.gif", "/mapicons/favor1.gif", "/mapicons/favor2.gif", 81, 32, "Favorites", L, 0, "DoFavorites()"); L+=81;

//  if (Buttons.indexOf("route")>=0) { TopButtons+=CreateButton("SuggestRoute", "/mapicons/short_0.gif", "/mapicons/short_1.gif", "/mapicons/short_2.gif", 82, 32, "Suggested route", L, 0, "DoSuggestRoute()"); L+=82; }

//  if (Buttons.indexOf("orientation")>=0) { TopButtons+=CreateButton("Orientation", "/mapicons/orient0.gif", "/mapicons/orient1.gif", "/mapicons/orient2.gif", 84, 32, "Orientation", L, 0, "DoOrientate()"); L+=84; }

//  TopButtons+=CreateButton("Enlarge", "/mapicons/enlarge0.gif", "/mapicons/enlarge1.gif", "/mapicons/enlarge2.gif", 75, 32, "Enlarge", L, 0, "DoEnlarge()");

//  L+=75;

  //if (Buttons.indexOf("help")>=0) { TopButtons+=CreateButton("Help", "/mapicons/help0.gif", "/mapicons/help1.gif", "/mapicons/help2.gif", 48, 32, "Help", L, 0, "DoHelp()"); }

  document.write(

    '<STYLE TYPE="text/css">',

    '#map {', Style,

      'width:', Width+32, ';',//was64

      'height:', Height+20, ';',

    '}',

    '</STYLE>',

    '<DIV ID="map">',

  TopButtons,

  CreateButton("ZoomInX2", "/mapicons/zoomx2_0.gif", "/mapicons/zoomx2_1.gif", "/mapicons/zoomx2_2.gif", 32, 32, "Zoom In", 0, 0, "SetState('ZoomInX2')"),

  CreateButton("ZoomInX5", "/mapicons/zoomx5_0.gif", "/mapicons/zoomx5_1.gif", "/mapicons/zoomx5_2.gif", 32, 32, "Zoom In", 0, 32, "SetState('ZoomInX5')"),

  CreateButton("ZoomOutX2", "/mapicons/zoomo2_0.gif", "/mapicons/zoomo2_1.gif", "/mapicons/zoomo2_2.gif", 32, 32, "Zoom out", 0, 64, "SetState('ZoomOutX2')"),

  CreateButton("ZoomOutX5", "/mapicons/zoomo5_0.gif", "/mapicons/zoomo5_1.gif", "/mapicons/zoomo5_2.gif", 32, 32, "Zoom out", 0, 96, "SetState('ZoomOutX5')"),

  CreateButton("Pan", "/mapicons/pan_0.gif", "/mapicons/pan_1.gif", "/mapicons/pan_2.gif", 32, 32, "Pan", 0, 128, "SetState('Pan')"),

  CreateButton("ZoomAll", "/mapicons/zoomall_0.gif", "/mapicons/zoomall_1.gif", "", 32, 32, "Zoom all", 0, 160, "SetQuery('Action=ZoomAll&')"),

  CreateButton("ZoomPrev", "/mapicons/zoomp_0.gif", "/mapicons/zoomp_1.gif", "", 32, 32, "Zoom previous", 0, 192, "SetQuery('Action=ZoomPrev')"),

  (Capture?CreateButton("Capture", "/mapicons/pushpin.bmp", "/mapicons/pushpinover.bmp", "/mapicons/pushpinin.bmp", 32, 32, "Capture", 0, 224, "SetState('Capture')"):''),

  CreateMapImage("MapArea", 32, 0, Width, Height, MapQuery),

  CreateHint("hint", 32, Height+0, Width, 0, "Click on the map to zoom in"),

  CreateButton("PanLeft", "/mapicons/left.gif", "/mapicons/left_h.gif", "", 17, 15, "Pan left", 32, 0+Height/2-8, "Pan(-90,0)"),

  CreateButton("PanLeftUp", "/mapicons/nw.gif", "/mapicons/nw_h.gif", "", 16, 16, "Pan left and up", 32, 0, "Pan(-90,90)"),

  CreateButton("PanUp", "/mapicons/up.gif", "/mapicons/up_h.gif", "", 15, 17, "Pan up", 32+Width/2-8, 0, "Pan(0,90)"),

  CreateButton("PanRightUp", "/mapicons/ne.gif", "/mapicons/ne_h.gif", "", 16, 16, "Pan right and up", Width+16, 0, "Pan(90,90)"),

  CreateButton("PanRight", "/mapicons/right.gif", "/mapicons/right_h.gif", "", 17, 15, "Pan right", 32+Width-17, 0+Height/2-8, "Pan(90,0)"),

  CreateButton("PanRightDown", "/mapicons/se.gif", "/mapicons/se_h.gif", "", 16, 16, "Pan right and down", Width+16, Height-15, "Pan(90,-90)"),

  CreateButton("PanDown", "/mapicons/down.gif", "/mapicons/down_h.gif", "", 15, 17, "Pan down", 32+Width/2-8, 0+Height-17, "Pan(0,-90)"),

  CreateButton("PanLeftDown", "/mapicons/sw.gif", "/mapicons/sw_h.gif", "", 16, 16, "Pan left and down", 32, Height-15, "Pan(-90,-90)"),

  '</DIV>');

}


var x, y, x0, y0, x1, y1;
var MouseDown = false;
var Marquee = null;

function onMouseDown(e)
{
  if(document.all)
  {
    x=event.offsetX;
    y=event.offsetY;
  }
  else
  {
    x=e.layerX;
    y=e.layerY;
  }
  x0=x1=x;
  y0=y1=y;
  if (State=="ZoomInX2" || State=="ZoomInX5")
  {
    MouseDown = true;
    if (!Marquee)
    {
      Marquee=document.createElement('DIV');
      Marquee.style.border="1px dashed black";
      Marquee.style.position="absolute";
      Marquee.style.visibility="hidden";
      Marquee.id="Marquee";
      document.getElementById("MarqueeDiv").appendChild(Marquee);
    }
    Marquee.style.left=x;
    Marquee.style.top=y;
    Marquee.style.width=0;
    Marquee.style.height=0;
/*    if(document.all)
      mydiv.className='IEloadingbg';
    else
      mydiv.className='loadingbg';*/
  }
}

function onMouseMove(e)
{
  if (MouseDown)
  {
    if(document.all)
    {
      x=event.offsetX;
      y=event.offsetY;
      event.cancelBubble = true;
      event.returnValue = false;
    }
    else
    {
      x=e.layerX;
      y=e.layerY;
    }
    if(document.all)
      elm=window.event.srcElement.id
    else
      elm=e.target.id;
    if (elm=="Marquee")
    {
      if (document.all)
        return;
      x=Math.min(x0,x1)+x;
      y=Math.min(y0,y1)+y;
    }
    else if (elm!="MapAreaimg" && elm!="MarqueeDiv")
      return;
    if (x>MapWidth-1) x=MapWidth-1;
    if (y>MapHeight-1) y=MapHeight-1;
    //SetHint(x0+"; "+y0+"; "+x1+"; "+y1+"; "+elm, false);
    x1=x;
    y1=y;
    Marquee.style.left=Math.min(x0,x1);
    Marquee.style.top=Math.min(y0,y1);
    Marquee.style.width=Math.abs(x1-x0);
    Marquee.style.height=Math.abs(y1-y0);
    Marquee.style.visibility="visible";
  }
}

function onMouseUp(e)
{
  if (Marquee)
    Marquee.style.visibility="hidden";
  right=false;
  if (document.all)
  {
    if (event.button==2) right=true;
  }
  else if (e.which==3)
    right=true;
  if (right)
  {
    //if (State=="ZoomInX2" || State=="ZoomInX5")
      SetQuery("Action=zoomoutx2&ClickX="+x0+"&ClickY="+y0);
  }
  else
  {
    if (State=="Info")
    {
      DoInfo(x0, y0);
      // or write your own handler eg.:
      // F = new GetFeatureAt(x0, y0);
      // alert(F.Key);
    }
    else if (State=="Capture") DoCapture(x0, y0)
    else if ((x1>x0+2) && (y1>y0+2) && (State=="ZoomInX2" || State=="ZoomInX5"))
      SetQuery("Action=zoomrect&x0="+x0+"&y0="+y0+"&x1="+x1+"&y1="+y1)
    else
      SetQuery("Action="+State+"&ClickX="+x0+"&ClickY="+y0);
  }
  MouseDown = false;
}

function onLoad()
{
  if (document.all) {
    //document.all.MapAreaimg.onclick=MapClick;
    document.getElementById('MapAreaimg').attachEvent('onmousedown', onMouseDown);
    document.getElementById('MapAreaimg').attachEvent('onmousemove', onMouseMove);
    document.getElementById('MapAreaimg').attachEvent('onmouseup', onMouseUp);
  } else {
    //document.getElementById('markers').addEventListener('click', MapClick, false);
    document.getElementById('MarqueeDiv').addEventListener('mousemove', onMouseMove, false);
    document.getElementById('MarqueeDiv').addEventListener('mousedown', onMouseDown, false);
    document.getElementById('MarqueeDiv').addEventListener('mouseup', onMouseUp, false);
  }
  Loaded=true;
  SetState(State);
}

window.onload=onLoad;