Maps Javascript

<html>
  <head>
     <title>Ajaxian Maps</title>
  <style type="text/css">
     h1{
     font:20pt sans-serif;
  }
  #outerDiv{
     height:600px;
     width:800px;
     border:1px solid black;
     position:relative;
     overflow:hidden;
  }
  #innerDiv{
     position:relative;
     left:0px;
     top:0px;
  }
  #toggleZoomDiv{
     position:absolute;
     top:10px;
     left:10px;
     z-index:1
     width:72px;
     height:30px;
  }
  #togglePushPinDiv{
     position:absolute;
     top:10px;
     left:87px;
     z-index:1;
     width:72px;
     height:30px
  }
  </style>
  <script language="javascript" src="resource/js/browserdetect_lite.js" type="text/javascript"></script>
  <script language="javascript" src="resource/js/opacity.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript">
     //常数
  var viewportWidth=800;
  var viewportHeight=600;
  var tileSize=100;
  var zoom=0;
  var zoomSizes=[["2000px","1400px"],["1500px","1050px"]];
  //用来控制地图div的移动
  var dragging=false;
  var top;
  var left;
  var dragStartTop;
  var dragStartLeft;

     function init(){
     //让inner div足够大，以正确显示出地图
     setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]);
     //为拖曳操作绑定鼠标监听器
     var outerDiv=document.getElementById("outerDiv");
     outerDiv.onmousedown=startMove;
     outerDiv.onmousemove=processMove;
     outerDiv.onmouseup=stopMove;
     //在IE中支持拖曳所必须
     outerDiv.ondragstart=function()
     { return false;}
     //解决在IE中触发器div的透明度问题
     new OpacityObject('toggleZoomDiv','resource/images/zoom').setBackground();
     new OpacityObject('togglePushPinDiv','resource/images/pushpin').setBackground();
     checkTiles();
  }

  function startMove(event){
  //针对IE必需
     if(!event)event=window.event;
     dragStartLeft=event.clientX;
     dragStartTop=event.clientY;
     var innerDiv=document.getElementById("innerDiv");
     innerDiv.style.cursor="-moz-grab";

top=stripPx(innerDiv.style.top);
left=stripPx(innerDiv.style.left);

     dragging=true;
     return false;
  }

  function processMove(event){
     if(!event)event=window.event; //for IE
     var innerDiv=document.getElementById("innerDiv");
     if(dragging){
       innerDiv.style.top=parseFloat(top)+(event.clientY-dragStartTop);
    innerDiv.style.left=parseFloat(left)+(event.clientX-dragStartLeft);
     }
     checkTiles();
  }

  function stopMove(){
     var innerDiv=document.getElementById("innerDiv");
     innerDiv.style.cursor="";
     dragging=false;
  }

  function stripPx(value){
     if(value=="")return 0;
     return parseFloat(value.substring(0,value.length-2));
  }

  function setInnerDivSize(width,height){
     var innerDiv=document.getElementById("innerDiv");
     innerDiv.style.width=width;
     innerDiv.style.height=height;
  }

  function toggleZoom(){
     zoom=(zoom==0)?1:0;
     var innerDiv=document.getElementById("innerDiv");
     var imgs=innerDiv.getElementsByTagName("img");
     while(imgs.length>0)innerDiv.removeChild(imgs[0]);
     setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]);
     if(document.getElementById("pushPin"))togglePushPin();
     checkTiles();
  }

  function togglePushPin(){
     var pinImage=document.getElementById("pushPin");
     if(pinImage){
        pinImage.parentNode.removeChild(pinImage);
     var dialog=document.getElementById("pinDialog");
     dialog.parentNode.removeChild(dialog);
     return;
     }

     var innerDiv=document.getElementById("innerDiv");
     pinImage=document.createElement("div");
     pinImage.style.position="absolute";
     pinImage.style.left=(zoom==0)?"850px":"630px";
     pinImage.style.top=(zoom==0)?"570px":"420px";
     pinImage.style.width="37px";
     pinImage.style.height="34px";
     pinImage.zIndex=1;
     pinImage.setAttribute("id","pushPin");
     innerDiv.appendChild(pinImage);

     new OpacityObject("pubshPin","resource/images/pin").setBackground();
     var dialog=document.createElement("div");
     dialog.style.position="absolute";
     dialog.style.left=(stripPx(pinImage.style.left)-90)+"px";
     dialog.style.top=(stripPx(pinImage.style.top)-210)+"px";
     dialog.style.width="309px";
     dialog.style.height="229px";
     dialog.style.zIndex=2;
     dialog.setAttribute("id","pinDialog");
     dialog.innerHTML="<table height='80%' width='100%'>"+"<tr><td align='center'>The capital of Spain</td></tr></table>";
     innerDiv.appendChild(dialog);
     new OpacityObject('pinDialog','resource/images/dialog').setBackground();
       }
  </script>
   </head>
   <body onload="init()">
       <p>
       <h1>Ajaxian Maps</h1>
    </p>
    <div id="outerDiv">
       <div id="toggleZoomDiv" onclick="toggleZoom()">
    </div>
    <div id="togglePushPinDiv" onclick="togglePushPin()">
    </div>
    <div id="innerDiv" style="z-index:0">
            The rain in Spain falls mainly in the plains.
    </div>
    </div>
   </body>
</html>