
function ZangWorldMap(){
 this.mapWidth=300;
 this.mapHeight=300;
 this.editAreaWidth=20;
 this.editAreaHeight=20;
 var self=this;
 Event.observe(window,"load",function(){self._initialize();});
}


ZangWorldMap.prototype._initialize=function(){
 Element.hide($('cursorbox'),$('markbox')); 
 var self=this;
 ["mapimage","cursorbox","markbox"].each(function(v,i){
  var elem=v;
  [["mousemove","_cursorBoxMove"]
  ,["mouseover","_cursorBoxSwitch"]
  ,["mouseout","_cursorBoxSwitch"]
  ,["click","_cursorBoxSet"]
  ].each(function(v,i){
   Event.observe(elem,v[0],function(e){self[v[1]](e);});
  });
 });
 var map_pos=Position.cumulativeOffset($('mapimage'));
 var posX=(map_pos[0])+"px";
 var posY=(this.mapHeight-this.editAreaHeight+map_pos[1])+"px";
 var markBoxDom=$('markbox');
// var cursorBoxDom=$('cursorbox');
 Element.show(markBoxDom);
 markBoxDom.style.left=posX;
 markBoxDom.style.top=posY;
}


ZangWorldMap.prototype._cursorBoxMove=function(e){
 this._cursorBoxSwitch(e);
 var map_pos=Position.cumulativeOffset($('mapimage'));
 var boxDom=$('cursorbox');
 this.cursorX=Event.pointerX(e)-map_pos[0]-Math.round(this.editAreaWidth/2);
 this.cursorY=Event.pointerY(e)-map_pos[1]-Math.round(this.editAreaHeight/2);
 this.cursorX=limitVal(0,this.mapWidth-this.editAreaWidth,this.cursorX);
 this.cursorY=limitVal(0,this.mapHeight-this.editAreaHeight,this.cursorY);
 boxDom.style.left=(this.cursorX+map_pos[0])+"px";
 boxDom.style.top=(this.cursorY+map_pos[1])+"px";
}
ZangWorldMap.prototype._cursorBoxSwitch=function(e){
 if(Position.within($('mapimage'),Event.pointerX(e),Event.pointerY(e))){
  Element.show($('cursorbox'));
 }else{
  Element.hide($('cursorbox'));
 }
}
ZangWorldMap.prototype._cursorBoxSet=function(e){
 var map_pos=Position.cumulativeOffset($('mapimage'));
 var markBoxDom=$('markbox');
 Element.show(markBoxDom);
 markBoxDom.style.left=(this.cursorX+map_pos[0])+"px";
 markBoxDom.style.top=(this.cursorY+map_pos[1])+"px";
 $('map_x').innerHTML=this.cursorX;
 $('map_y').innerHTML=this.mapHeight-this.editAreaHeight-this.cursorY;
}