function JRClass(){
 var cname = navigator.appName;
 if(cname.indexOf("Microsoft") != -1) this.appName = 1;
 if(cname.indexOf("Netscape") != -1) this.appName = 2;
 if(cname.indexOf("Opera") != -1) this.appName = 3;
 this.x = x;
 this.y = y;
 this.srcElement = srcElement;
 this.clientX = clientX;
 this.clientY = clientY;
} 
 function x(e){
  return this.appName != 2 ? event.x+document.documentElement.scrollLeft : e.pageX;
 }
 function y(e){
  return this.appName != 2 ? event.y+document.documentElement.scrollTop : e.pageY;
 }
 function srcElement(e){
  return this.appName != 2 ? event.srcElement : e.target;
 }
 function clientX(e){
  return this.appName != 2 ? event.offsetX : e.layerX - 1 - parseInt(e.target.style.borderLeft);
 }
 function clientY(e){
  return this.appName != 2 ? event.offsetY : e.layerY - 1 - parseInt(e.target.style.borderTop);
 }

var navTest = new JRClass();

function ImageZoom(img)
{
 this.Image   = img;
 this.Zoom    = 2;
 this.MWidth  = 160;
 this.MHeight = 120;
 this.MBorder1= "2px #333333 solid";
 this.MBorder2= "2px #99FF66 solid";
 this.HotArea = [];
 this.Init = Init;
 this.AddHotArea = AddHotArea;
 this.IsInHotArea = false;
  
 function Init()
 {
  this.MDiv = document.createElement("div")
  this.MDiv.innerHTML = "<img src='"+img.src+"' style='position:absolute; left:0px; top:0px; width:"+img.clientWidth*this.Zoom+"px; height:"+img.clientHeight*this.Zoom+"px' />";
  with(this.MDiv.style){
   position = "absolute";
   left = "0px";
   top = "0px";
   width = this.MWidth+"px";
   height = this.MHeight+"px";
   border = this.MBorder1;
   overflow = "hidden";
   display = "none";
  }
  document.body.appendChild(this.MDiv);
  var MImage = this.MDiv.childNodes[0];
  var This = this;
 
  // 图片鼠标事件
  this.MDiv.onmousemove = function(e){
   if(isInElement(e, img)){
    var x = clientX(e, img);
    var y = clientY(e, img);
    MImage.style.left = -x*This.Zoom+This.MWidth/2+"px";
    MImage.style.top  = -y*This.Zoom+This.MHeight/2+"px";
    This.MDiv.style.left = (navTest.x(e)-This.MWidth/2) + "px";
    This.MDiv.style.top = (navTest.y(e)-This.MHeight/2) + "px";
    window.status = x+","+y+","+document.body.scrollLeft+","+document.body.scrollTop;
    
    // 热区操作
    This.IsInHotArea = false;
    for(var i=0; i<This.HotArea.length; i++){
     if(x>=This.HotArea[i][0][0] && x<=This.HotArea[i][1][0] && y>=This.HotArea[i][0][1] && y<=This.HotArea[i][1][1]){
      var k = i;
      This.MDiv.style.border = This.MBorder2;
      This.MDiv.style.cursor = "pointer";
      This.IsInHotArea = true;
      This.MDiv.onclick = function(e){
       try{
        (This.HotArea[k][2]);
       }
       catch(e){
        new This.HotArea[k][2](e);
       }
      }
     }
    }
    if(!This.IsInHotArea){
     This.MDiv.onclick = null;
     This.MDiv.style.border = This.MBorder1;
     This.MDiv.style.cursor = "default";
    }
   }
   else{
    This.MDiv.style.display = "none";
   }
  }
  
  img.onmousemove = function(e){
   This.MDiv.style.display = "block";
   This.MDiv.onmousemove(e);
  }
 }
 
 function isInElement(e, obj){
  if(navTest.x(e) <= obj.offsetLeft || navTest.x(e) >= obj.offsetLeft+obj.offsetWidth) return false;
  if(navTest.y(e) <= obj.offsetTop || navTest.y(e) >= obj.offsetTop+obj.offsetHeight) return false;
  return true;
 }
 
 function clientX(e, obj){
  return navTest.x(e) - obj.offsetLeft - (obj.style.borderLeft==""?0:parseInt(obj.style.borderLeft));
 }
 
 function clientY(e, obj){
  return navTest.y(e) - obj.offsetTop - (obj.style.borderTop==""?0:parseInt(obj.style.borderTop));
 }
 
 // 添加热区
 function AddHotArea(p1, p2, func){
  this.HotArea[this.HotArea.length] = [p1, p2, func];
 }
}
// 测试
function mouse(imgs){
var imgZoomer = new ImageZoom(document.getElementById(imgs));
 imgZoomer.AddHotArea([273,208], [306,255], "alert('发现了^-^');");
  imgZoomer.AddHotArea([190,17], [211,40], "alert('你发现了一盏灯~~~');");
imgZoomer.Zoom = 2.5;
imgZoomer.MWidth = 260;
imgZoomer.MHeight =220;
imgZoomer.Init();
}



function showImg(imgss,imgs){ 

	document.getElementById(imgs).style.display="block";
}
function hideImg(imgs,imgss){
	document.getElementById(imgs).style.display="none";
	
}