window.onload=go;

var tilew=100;
var tileh=tilew;
var imgw=400;
var imgh=300;
var dragging=false;
var mc=new Array();
var pmc=new Array();
var dmc=new Array();
var timer_drag;
var notiles_x=0;
var notiles_y=0;
var movedelay=25;
var selectedselector=null;
var zoomlevels=new Array(0,4,9,16);
var zoom=0;
var tnoimgs_x=(imgw/tilew)*(Math.sqrt(zoom));
var tnoimgs_y=(imgh/tileh)*(Math.sqrt(zoom));
var keysaffectpic=false;
var movestep=20;
var mc=new Array();
var pmc=new Array();
var dmc=new Array();
var tracking=new Array();
tracking['x']=0;
tracking['y']=0;

function go() {
   if (bulidzoombuttons()) {
      buildscrollcontrols();
      addeventhandlers();
      createpadcover();
      createimgs(0,0,0,0);
      var transgif=document.createElement("img");
      transgif.setAttribute("src","images/wait.gif");
   }
}

function addeventhandlers() {
   if (document.addEventListener) {
      var lis=document.getElementById("zoomselector").getElementsByTagName("li");
      for (var i=0;i<lis.length;i++) {
         lis[i].addEventListener("click",zoombuttonclicked,false);
         if (lis[i].className=="selected") selectedselector=lis[i];
      }
      document.addEventListener("keydown",keypress,false);
      document.addEventListener("keyup",keyrelease,false);
      return true;
   }
   return false;
}

function zoombuttonclicked() {
   var z=parseInt(this.id);
   setzoom(z);
}

function scrollcontroldown(e) {
   switch (this.id) {
         case "l" : movesmimgs(movestep,0);break;
         case "r" : movesmimgs(0-movestep,0);break;
         case "u" : movesmimgs(0,movestep);break;
         case "d" : movesmimgs(0,0-movestep);break;
         case "ul" : movesmimgs(movestep,movestep);break;
         case "ur" : movesmimgs(0-movestep,movestep);break;
         case "dl" : movesmimgs(movestep,0-movestep);break;
         case "dr" : movesmimgs(0-movestep,0-movestep);break;
         case "c" : setzoom(zoom);break;
   }
   this.setAttribute("class","scrollcontrol selected");
}

function scrollcontrolup(e) {
// don't need to check value of dragging, you can't do both at once.
   clearTimeout(timer_drag);
   this.setAttribute("class","scrollcontrol");
}

function setselectedzoombutton(o) {
   if (selectedselector) selectedselector.setAttribute("class","");
   o.setAttribute("class","selected");
   selectedselector=o;
}

function setzoom(z) {
   var zz=zoomlevels[z];
   tnoimgs_x=(imgw/tilew)*(Math.sqrt(zz));
   tnoimgs_y=(imgh/tileh)*(Math.sqrt(zz));
   findcenterimgs();
   destroyimages();
   var fox=(tnoimgs_x-(imgw/tilew))/2;
   var foy=(tnoimgs_y-(imgh/tileh))/2;
   var ox=parseInt(fox);
   var oy=parseInt(foy);
   var aox=fox-ox;
   var aoy=foy-oy;
   zoom=z;
   createimgs(ox,oy,aox,aoy);
   setselectedzoombutton(document.getElementById(z));
   var vis=(zoom>0) ? "visible" : "hidden";
   document.getElementById("scrollcontrolcontain").style.visibility=vis;
   tracking['x']=0;
   tracking['y']=0;
}

function createpadcover() {
   var pc=document.createElement("div");
   pc.setAttribute("id","picpad");
   pc.addEventListener("mousedown",dragging_start,false);
   pc.addEventListener("mouseup",dragging_stop,false);
   pc.addEventListener("mouseout",mouseoutpic,false);
   pc.addEventListener("mouseover",mouseoverpic,false);
   document.getElementById("piccontain").appendChild(pc);
}

function keypress(e) {
//  up 38
//  down 40
// w 87
// s 83
// a 65
// d 68
   if (keysaffectpic && !dragging) {
      var z=zoom;
      var kc=e.keyCode
//debug("down:"+kc+":"+e.type);
      switch (kc) {
         case 65 : z--;if (z>-1) setzoom(z);break;
         case 81 : z++;if (z<zoomlevels.length) setzoom(z);break;
         case 37 : movesmimgs(movestep,0);break;
         case 39 : movesmimgs(0-movestep,0);break;
         case 38 : movesmimgs(0,movestep);break;
         case 40 : movesmimgs(0,0-movestep);break;
      }
   }
   e.stopPropagation();
}

function keyrelease(e) {
   var kc=e.keyCode;
// debug("up:"+kc);
   if (!dragging) {
      if (kc==37 || kc==38 || kc==39 || kc==40) clearTimeout(timer_drag);
   }
   e.stopPropagation();
}

function createimgs(offset_x,offset_y,adjust_x,adjust_y) {
  // var xid=0;
  // var yid=0;
 //  var os_x=(offset_x) ? offset_x : 0;
 //  var os_y=(offset_y) ? offset_y : 0;
   var zz=zoomlevels[zoom];
   notiles_x=0;
   notiles_y=0;
   var con=document.getElementById("piccontain");
   var x=5-(adjust_x*tilew); // 5 is padding. really should be read out of stylesheet
   if (zz>0) {
      while (x<(imgw+tilew)-(adjust_y*tileh)) {
         var y=5-(adjust_y*tileh);
         while (y<=(imgh+tileh)-(adjust_y*tileh)) {
   //   debug("(imgh+tileh)-(adjust_y*tileh):"+((imgh+tileh)-adjust_y)+"::y:"+y);
            var i=document.createElement("img");
            i.setAttribute("class","sm");
            i.setAttribute("style","top:"+y+"px; left:"+x+"px;");
            //i.setAttribute("src","images/"+zoom+"x/glow_"+zoom+"_"+notiles_x+"_"+notiles_y+".jpg");
            i.setAttribute("src","images/"+zz+"x/glow_"+zz+"_"+(notiles_x+offset_x)+"_"+(notiles_y+offset_y)+".jpg");
            i.setAttribute("id","smimg_"+notiles_x+"_"+notiles_y);
            con.appendChild(i);
            y+=tileh;
          //  yid++;
            notiles_y++;
         }
         x+=tilew;
        // xid++;
         notiles_x++;
      //   var tmp=yid;
      //   yid=0;
          var tmp=notiles_y;
          notiles_y=0;
      }
     // yid=tmp;
        notiles_y=tmp;
     // notiles_y=notiles_y/notiles_x;
   } else {
         var i=document.createElement("img");
         i.setAttribute("class","smbig");
         i.setAttribute("style","top:5px; left:5px;");
         i.setAttribute("src","images/glow.jpg");
         i.setAttribute("id","smimg_big");
         con.appendChild(i);
   }
}

function destroyimages() {
   var con=document.getElementById("piccontain");
   var imgs=con.getElementsByTagName("img");
   while (imgs.length>0) {
      con.removeChild(imgs[imgs.length-1]);
   }
}

function changecursor() {
   document.getElementById("mainpic").style.cursor="move";
}

function mouseoutpic(e) {
   dragging_stop(e);
   keysaffectpic=false;
}

function mouseoverpic(e) {
   keysaffectpic=true;
}



function dragging_start(e) {
   changecursor("move");
   getmousepos(e)
   pmc['x']=mc['x'];
   pmc['y']=mc['y'];
   document.addEventListener("mousemove",getmousepos,false)
   timer_drag=setTimeout("movesmimgs()",movedelay);
   dragging=true;
}

function dragging_stop(e) {
   changecursor("normal");
   document.removeEventListener("mousemove",getmousepos,false)
   clearTimeout(timer_drag);
   dragging=false;
  // hidelimitreached();
}

function movesmimgs(fx,fy) {
   var oktomove=true;
   dmc['x']=(fx) ? fx : mc['x']-pmc['x'];
   dmc['y']=(fy) ? fy : mc['y']-pmc['y'];
   pmc['x']=mc['x'];
   pmc['y']=mc['y'];
   for (var xi=0;xi<notiles_x;xi++) {
      for (var yi=0;yi<notiles_y;yi++) {
         var o=document.getElementById("smimg_"+xi+"_"+yi);
         var x=parseInt(o.style.left,10);
         var y=parseInt(o.style.top,10);
         x+=dmc['x'];
         y+=dmc['y'];
         if (x>imgw && dmc['x']>0) {
            x=x-(imgw+tilew);
            swapimage_x(1,o,yi);
         } else if (x<5-tilew && dmc['x']<0) {
            x=x+(imgw+tilew);
            swapimage_x(-1,o,yi);
         } else if (y>imgh && dmc['y']>0) {
            //y=y-(imgh+tileh);
            y=y-(tileh*notiles_y);
            swapimage_y(1,o,xi);
         } else if (y<5-tileh && dmc['y']<0) {
            y=y+(tileh*notiles_y);
//y=y+(imgh+tileh);
            swapimage_y(-1,o,xi);
         }
         if (oktomove) {
            o.style.left=x+"px";
            o.style.top=y+"px";
         }
      }
   }
   tracking['x']+=dmc['x'];
   tracking['y']+=dmc['y'];
   if (fx || fy) timer_drag=setTimeout("movesmimgs("+fx+","+fy+")",movedelay);
   else timer_drag=setTimeout("movesmimgs()",movedelay);
}

function swapimage_x(d,o,yi) {
   var zz=zoomlevels[zoom];
// if (o.id=="smimg_0_0") debug ("Xswap:"+o.src);
   var tx=x_from_id(o);
   var nx=tx+d;
   if (nx<0) nx=notiles_x-1;
   else if (nx==notiles_x) nx=0;
   var to=document.getElementById("smimg_"+nx+"_"+yi);
   var tx=x_from_src(to);
   var nx=tx+(0-d);
   if (nx==tnoimgs_x) nx=0;
   else if (nx<0) nx=tnoimgs_x-1;
   var yi=y_from_src(o);

   o.setAttribute("src","images/wait.gif");
   o.setAttribute("src","images/"+zz+"x/glow_"+zz+"_"+nx+"_"+yi+".jpg");
 //  o.setAttribute("title","images/"+zoom+"x/glow_"+zoom+"_"+nx+"_"+yi+".jpg:::"+o.id);
}


function swapimage_y(d,o,xi) {
   var zz=zoomlevels[zoom];
 //  if (o.id=="smimg_0_0") debug ("Yswap:"+o.src);
   var ty=y_from_id(o);
 //  if (o.id=="smimg_0_0") debug ("Yswap:ty:"+ty);
   var ny=ty+d;
  // if (o.id=="smimg_0_0") debug ("Yswap:ny:"+ny);
  // if (o.id=="smimg_0_0") debug ("Yswap:ny:"+notiles_y);
   if (ny<0) ny=notiles_y-1;
   else if (ny==notiles_y) ny=0;
  // if (o.id=="smimg_0_0") debug ("Yswap:ny:"+ny);

   var to=document.getElementById("smimg_"+xi+"_"+ny);
 //  if (o.id=="smimg_0_0") debug ("Yswap:to:smimg_"+xi+"_"+ny);

   var ty=y_from_src(to);
 //  if (o.id=="smimg_0_0") debug ("Yswap:ty:"+ty);
   var ny=ty+(0-d);
   if (ny==tnoimgs_y) ny=0;
   else if (ny<0) ny=tnoimgs_y-1;
  // if (o.id=="smimg_0_0") debug ("Yswap:ny:"+ny);

   var xi=x_from_src(o);

   o.setAttribute("src","images/wait.gif");
   o.setAttribute("src","images/"+zz+"x/glow_"+zz+"_"+xi+"_"+ny+".jpg");
 //  o.setAttribute("title","images/"+zoom+"x/glow_"+zoom+"_"+xi+"_"+ny+".jpg:::"+o.id);
//   if (o.id=="smimg_0_0") debug ("Yswap:"+o.src);
//   if (o.id=="smimg_0_0") debug("Yswap:------------------------");
}

function x_from_id(o) {
   var fi=o.id.indexOf('_');
   var li=o.id.lastIndexOf('_');
   var x=parseInt(o.id.substr(fi+1,(li-fi)-1),10);
// if (o.id=="smimg_0_0") debug("x_from_id:"+x);
   return x;
}

function x_from_src(o) {
   var fi=o.src.indexOf('_',o.src.indexOf('_',o.src.lastIndexOf('/'))+1);
   var li=o.src.lastIndexOf('_');
   var x=parseInt(o.src.substr(fi+1,(li-fi)-1),10);
// if (o.id=="smimg_0_0") debug("x_from_src:"+x);
   return x;
}

function y_from_id(o) {
   var fi=o.id.lastIndexOf('_');
   var li=o.id.length;
   var y=parseInt(o.id.substr(fi+1,(li-fi)-1),10);
// if (o.id=="smimg_0_0") debug("y_from_id:"+y);
   return y;
}

function y_from_src(o) {
   var fi=o.src.lastIndexOf('_');
   var li=o.src.lastIndexOf('.');
   var y=parseInt(o.src.substr(fi+1,(li-fi)-1),10);
// if (o.id=="smimg_0_0") debug("y_from_src:"+y);
   return y;
}

function getmousepos(e) {
   mc['x']=parseInt(e.pageX,10);
   mc['y']=parseInt(e.pageY,10);
}

function changecursor(s) {
   if (s=="move") {
      var ss="drag";
   } else {
      var ss="";
   }
   document.getElementById("picpad").setAttribute("class",ss);
}

function showlimitreached(side) {
// not used
   var o=document.getElementById("picpad");
   switch (side) {
      case "top": o.style.borderTopColor="red";break;
      case "right": o.style.borderRightColor="red";break;
      case "bottom": o.style.borderBottomColor="red";break;
      case "left": o.style.borderLeftColor="red";break;
   }
}

function hidelimitreached() {
// not used
   document.getElementById("picpad").style.borderColor="white";
}

function hidemarker(e) {
// not used
   coords=getClickCoordsWithinTarget(e);
   if (10<coords['x']>400 && 10<coords['y']>300) {
      var marker=document.getElementById("zoommarker")
      marker.style.visibility="hidden";
   }
}

function getClickCoordsWithinTarget(event) {
   var coords=new Array();
   if (!event) {// then we're in a non-DOM (probably IE) browser
      even =window.event;
      coords['x']=event.offsetX;
      coords['y']=event.offsetY;
   } else {		// we assume DOM modeled javascript
      var Element=event.target ;
      var CalculatedTotalOffsetLeft=0;
      var CalculatedTotalOffsetTop=0 ;
      while (Element.offsetParent) {
         CalculatedTotalOffsetLeft+=Element.offsetLeft;
         CalculatedTotalOffsetTop+=Element.offsetTop;
         Element=Element.offsetParent;
      }
   coords['x']=event.pageX-CalculatedTotalOffsetLeft;
   coords['y']=event.pageY-CalculatedTotalOffsetTop;
   }
   return coords;
}


function positionmarker(e) {
// not used
  coords=getClickCoordsWithinTarget(e);
  var cw=parseInt(parseInt(document.getElementById("mainpic").width,10)/4,10)// 4 chunks by 4 chunks;
  var ch=parseInt(parseInt(document.getElementById("mainpic").height,10)/4,10);
  var ml=parseInt(coords['x']/cw,10); 
  var mt=parseInt(coords['y']/ch,10);
  var coords=new Array();
  coords['x']=(ml*cw);
  coords['y']=(mt*ch);
  return coords;
}

function findcenterimgs() {
   var con=document.getElementById("piccontain");
   var imgs=con.getElementsByTagName("img");
   var id="none";
   for (var i=0;i<imgs.length;i++) {
      var l=parseInt(imgs[i].style.left);
      var t=parseInt(imgs[i].style.top);
      if (l==105 && t==105) {
         id=imgs[i].id;
         break;
      }
   }
  // debug ("center is "+id);
}

function bulidzoombuttons() {
   var dl=document.createElement("dl");
   dl.setAttribute("id","zoomselector");
   var dt=document.createElement("dt");
   var tn=document.createTextNode("Zoom Level");
   dt.appendChild(tn);
   dl.appendChild(dt);
   var dd=document.createElement("dd");
   dl.appendChild(dd);
   var ul=document.createElement("ul");
   dd.appendChild(ul);
   for (var i=0;i<zoomlevels.length;i++) {
      var li=document.createElement("li");
      var litn=document.createTextNode(zoomlevels[i]+"x");
      if (i==zoom) li.setAttribute("class","selected");
      li.setAttribute("id",i);
      li.setAttribute("title","Select zoom level of "+zoomlevels[i]+"x");
      li.appendChild(litn);
      ul.appendChild(li);
   }
   if (document.getElementsByTagName("body")[0].insertBefore(dl,document.getElementById("instruct"))) { //meh
      return true;
   } else {
      return false;
   }
}

function buildscrollcontrols() {
   var ids=new Array("ul","u","ur","l","c","r","dl","d","dr");
   var idsp=0;
   var cc=document.createElement("div");
   cc.setAttribute("id","scrollcontrolcontain");
   var y=0;
   for (var i=0;i<3;i++) {
      var x=0;
      for (var j=0;j<3;j++) {
         var c=document.createElement("div");
         c.setAttribute("id",ids[idsp]);
         c.setAttribute("class","scrollcontrol");
         c.setAttribute("style","top:"+y+"px; left:"+x+"px");
         c.addEventListener("mousedown",scrollcontroldown,false);
         c.addEventListener("mouseup",scrollcontrolup,false);
         c.addEventListener("mouseout",scrollcontrolup,false);
         cc.appendChild(c);
         var si=document.createElement("div");
         si.setAttribute("class","scrollicon");
         switch (ids[idsp]) {
            case "ul" : var s="border-top-color:black; border-left-color:black";var t="up and left";break;
            case "u" : var s="border-bottom:solid black 30px; border-top:none";var t="up";break;
            case "ur" : var s="border-top-color:black; border-right-color:black";var t="up and right";break;
            case "l" : var s="border-right:solid black 30px; border-left:none";var t="left";break;
            case "c" : var s="border-color:black";var t="Center image";break;
            case "r" : var s="border-left:solid black 30px; border-right:none";var t="right";break;
            case "dl" : var s="border-bottom-color:black; border-left-color:black";var t="down and left";break;
            case "d" : var s="border-top:solid black 30px; border-bottom:none";var t="down";break;
            case "dr" : var s="border-bottom-color:black; border-right-color:black";var t="down and right";break;
            default: var s="";var t="";break;
         }
         si.setAttribute("style","top:"+(y+5)+"px; left:"+(x+5)+"px; "+s);
         if (ids[idsp]=="c") c.setAttribute("title",t);
         else c.setAttribute("title","Scroll image "+t);
         cc.appendChild(si);
         x+=41;
         idsp++;
      }
      y+=41;
   }
 //  document.getElementsByTagName("body")[0].appendChild(cc);
(document.getElementsByTagName("body")[0].insertBefore(cc,document.getElementById("instruct")))
}

function debug(s) {
   document.getElementById("debug").innerHTML+=s+"<br />";
}