var ob;
var X;
var Y;
var Xrel=0;
var Yrel=0;
var sz = 353;
window.status='Ready';
N = (document.all) ? 0 : 1;

if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}
// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page

function captureMousePosition(e) {
    if (document.layers) {
        // When the page scrolls in Netscape, the event's mouse position
        // reflects the absolute position on the screen. innerHight/Width
        // is the position from the top/left of the screen that the user is
        // looking at. pageX/YOffset is the amount that the user has
        // scrolled into the page. So the values will be in relation to
        // each other as the total offsets into the page, no matter if
        // the user has scrolled or not.
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } else if (document.all) {
        // When the page scrolls in IE, the event's mouse position
        // reflects the position from the top/left of the screen the
        // user is looking at. scrollLeft/Top is the amount the user
        // has scrolled into the page. clientWidth/Height is the height/
        // width of the current page the user is looking at. So, to be
        // consistent with Netscape (above), add the scroll offsets to
        // both so we end up with an absolute value on the page, no
        // matter if the user has scrolled or not.
        xMousePos = window.event.x+document.body.scrollLeft;
        yMousePos = window.event.y+document.body.scrollTop;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    }

 if(ob) {
   for (i=0;i<3;i++){
    for (j=0;j<3;j++){

     if (document.all) { //IE
       document.getElementById('r' + i + 'c' + j).style.pixelLeft += xMousePos-X;
       document.getElementById('r' + i + 'c' + j).style.pixelTop += yMousePos-Y;
       if(document.getElementById('r' + i + 'c' + j).style.pixelLeft>2*sz){
         document.getElementById('r' + i + 'c' + j).style.pixelLeft += -3*sz+1;
       } 
       if(document.getElementById('r' + i + 'c' + j).style.pixelLeft<-1*sz){
         document.getElementById('r' + i + 'c' + j).style.pixelLeft += 3*sz-1;
       } 
       if(document.getElementById('r' + i + 'c' + j).style.pixelTop>2*sz){
         document.getElementById('r' + i + 'c' + j).style.pixelTop += -3*sz+1;
       } 
       if(document.getElementById('r' + i + 'c' + j).style.pixelTop<-1*sz){
         document.getElementById('r' + i + 'c' + j).style.pixelTop += 3*sz-1;
       } 
     }else{ //Firefox
       document.getElementById('r' + i + 'c' + j).style.left = parseInt(document.getElementById('r' + i + 'c' + j).style.left) + xMousePos-X;
       document.getElementById('r' + i + 'c' + j).style.top = parseInt(document.getElementById('r' + i + 'c' + j).style.top) + yMousePos-Y;
       if(parseInt(document.getElementById('r' + i + 'c' + j).style.left)>2*sz){
         document.getElementById('r' + i + 'c' + j).style.left = parseInt(document.getElementById('r' + i + 'c' + j).style.left) -3*sz+1;
       } 
       if(parseInt(document.getElementById('r' + i + 'c' + j).style.left)<-1*sz){
         document.getElementById('r' + i + 'c' + j).style.left = parseInt(document.getElementById('r' + i + 'c' + j).style.left) +3*sz-1;
       } 
       if(parseInt(document.getElementById('r' + i + 'c' + j).style.top)>2*sz){
         document.getElementById('r' + i + 'c' + j).style.top = parseInt(document.getElementById('r' + i + 'c' + j).style.top) -3*sz+1;
       } 
       if(parseInt(document.getElementById('r' + i + 'c' + j).style.top)<-1*sz){
         document.getElementById('r' + i + 'c' + j).style.top = parseInt(document.getElementById('r' + i + 'c' + j).style.top) +3*sz-1;
       } 

      }
    }
  }

 }

   X=xMousePos;
   Y=yMousePos;
   window.status = "xMousePos=" + xMousePos + ", yMousePos=" + yMousePos + ", xMousePosMax=" + xMousePosMax + ", yMousePosMax=" + yMousePosMax;
   window.parent.document.getElementById('coord').innerHTML = xMousePos + ", " + yMousePos;
   return false;
}

function drawgrid(){
 for (i=0;i<3;i++){
  for (j=0;j<3;j++){
   xi=-1*sz/2+i*sz;
   yj=-1*sz/2+j*sz;
   ii=i*4
   jj=j*4
   document.getElementById('grid').innerHTML += '<div id=r' + i + 'c' + j + ' class=ib style=\'cursor:crosshair;position:absolute; left: ' + xi + 'px; top: ' + yj + 'px; BACKGROUND-COLOR: #000000; WIDTH: ' + sz + 'px; HEIGHT: ' + sz + 'px;\'><img ondblclick="alert(\'Howdy!\');" width=100% height=100% src=images/' + j + i + '.gif></div>';
  }
 }
}

function resize(mul){
sz=mul*353;
document.getElementById('grid').innerHTML ='';
drawgrid();
}

function MD() {
  ob=1;
  return false;
}

function MU() {
 ob = 0;
}

document.onmousedown = MD;
document.onmousemove = captureMousePosition;
document.onmouseup = MU;