MSIE = navigator.userAgent.indexOf("MSIE")!=-1;
Safari = navigator.userAgent.indexOf("Safari")!=-1;
document.onkeypress = keyExec;
if (Safari) document.onkeydown = keyExec;
self.focus();

function getKEYCODE(e){  

  if (document.getElementById && !MSIE )  
    return  e.charCode||e.keyCode;
  else if(document.all)       return  event.keyCode;
  else if(document.layers)    return  e.which;
}
function getimg() {
  return document.getElementById("x");
}
function replMag(link, mag) {
  if (!link) return;
  var orig = link.getAttribute("href");
  var argp = orig.indexOf("?");
  if (argp != -1) orig = orig.substring(0, argp);
  link.setAttribute("href", orig+"?"+pcnt+"%25");
}
function setImgSize() {
  var obj = getimg();
  obj.style.width = imgx*pcnt/100;
  obj.style.height = imgy*pcnt/100;
  // Update PREV/NEXT Links
  replMag(document.getElementById("prev"), pcnt);
  replMag(document.getElementById("next"), pcnt);
  var info = document.getElementById("info");
  if (!info) return;

  var mg = document.getElementById("mag");
  mg.innerHTML = pcnt+"% "
}
function setClickHandler(obj, hdString) {
  obj.setAttribute("onclick", hdString);
  if (MSIE) obj.onclick = new Function(hdString);
}
function createBTN() {
  var sp = document.getElementById("resizebtn");
  if (sp)
    return sp;
  var mag = document.createElement("span");
  mag.setAttribute("id", "mag");
  mag.innerHTML = pcnt+"% "
  var b1 = document.createElement("button");
  setClickHandler(b1, "fitWin();")
  b1.innerHTML = "fitToWindow";
  var b2 = document.createElement("button");
  setClickHandler(b2, "setWidth(400);")
  b2.innerHTML = "400";
  var b3 = document.createElement("button");
  setClickHandler(b3, "setWidth(640);")
  b3.innerHTML = "640";
  var b4 = document.createElement("button");
  setClickHandler(b4, "setWidth(800);")
  b4.innerHTML = "800";
  var b5 = document.createElement("button");
  setClickHandler(b5, "set100();")
  b5.innerHTML = "100%";
  var b6 = document.createElement("button");
  setClickHandler(b6, "shrink();")
  b6.innerHTML = "-10%";
  var b7 = document.createElement("button");
  setClickHandler(b7, "enlarge();")
  b7.innerHTML = "+10%";
  sp = document.createElement("span");
  sp.setAttribute("id", "resizebtn")
  sp.appendChild(mag);
  sp.appendChild(b1);
  sp.appendChild(b2);
  sp.appendChild(b3);
  sp.appendChild(b4);
  sp.appendChild(b5);
  sp.appendChild(b6);
  sp.appendChild(b7);
  return sp;
}
function frameWidth() {
  return document.getElementsByTagName("body")[0].offsetWidth;
  // setWidth(window.innerWidth);
}
function frameHeight() {
  return window.height ||
    (document.body&&document.body.clientHeight) ||
    (document.documentElement&&document.documentElement.clientHeight) ||
    480;
}
function setWidth(x) {
  var r = 100*x/imgx;
  pcnt = Math.floor(r);
  setImgSize();
}
function setHeight(y) {
  var r = 100*y/imgy;
  pcnt = Math.floor(r);
  setImgSize();
}
function fitWin() {
  var img = getimg()
  var w = frameWidth();
  var h = frameHeight()-(img.offsetTop||60);
  if (1.2 * getimg().getAttribute("width") > w)
    setWidth(w);
  if (getimg().getAttribute("height") > h)
    setHeight(h);
}
function shrink() {
  init();
  if (pcnt > 10) {
    pcnt -= 10;
    setImgSize();
    if (MSIE) window.scrollTo(0, 0);
  }
}
function set100() {
  pcnt=100;
  setImgSize();
}
function enlarge() {
  init();
  if (pcnt < 100) {
    pcnt += 10;
    setImgSize();
  }
}
function moveHrefID(id) {
  var cur = location.pathname;
  var file = cur.substring(cur.lastIndexOf("/")+1);
  var next = document.getElementById(id);
  if (!next) return;
  next = next.getAttribute("href");
//alert(next);
  if (pcnt != 100 && next.indexOf("?") == -1)
    next = next + "?"+pcnt+"%";
  location.replace(next);
  //location.href = next;
  img = getimg();
  img.setAttribute("onLoad", "init();");
  img.onload = "init();"
  return;
  alert(pcnt);
  //setImgSize();
  obj = getimg();
  obj.style.width = imgx*pcnt/100;
  obj.style.height = imgy*pcnt/100;

}

function keyExec(e) {
  key = getKEYCODE(e);
  mods = null;
  // if (!MSIE) mods = e.shiftKey|e.ctrlKey|e.altKey;
//alert(e.shiftKey)
  if (!MSIE) mods = e.shiftKey|e.ctrlKey|e.altKey;

  //d=new Date();
  // alert(e.type+", "+d.getSeconds())
  switch (key) {
  case 40: case 63233:		// down
    if (e.shiftKey)
      shrink();
    break;
  case 38: case 63232:		// up
    if (e.shiftKey) enlarge();
    break;
  case 37: case 63234:		// left
    if (e.shiftKey) moveHrefID("prev");
    break;
  case 39: case 63235:		// right
    if (e.shiftKey) moveHrefID("next");
    break;
  default:
    numericarg = 0;
  }
  return;
}

function removeAllChild(obj) {
  cs = obj.childNodes;
  var element_node = obj.nodeType;
  var i=0;
  while (i<cs.length) {
    if (cs[i].nodeType == element_node) {
      obj.removeChild(cs[i]);           // remove したらiはそのままでよい
    } else {
      i++;
    }
  }
}

/* 要らないはず
function adjIdx() {
  //Adjust #index's height
  var stageHeight = document.getElementById("stage").offsetHeight;
  var idx;
  var height = (MSIE ? document.body.clientHeight : innerHeight);;
  var indexHeight = (idx=document.getElementById("index")).offsetHeight;
  if (height-stageHeight > indexHeight) {
    idx.style.height = height-stageHeight;
  }
}
*/
function getCSSproperty(element, prop) {
  // http://www.quirksmode.org/dom/getstyles.html
  if (element.currentStyle)
     return element.currentStyle[prop];
  if (window.getComputedStyle)
     return document.defaultView.getComputedStyle(element, null).getPropertyValue(prop);
  return null;
}

var lastelement, lastX;
function stage(ev) {
  me = MSIE ? ev.srcElement : ev.target;
  if (me == lastelement || lastX == ev.screenX) return;
  var src = me.getAttribute("src");
  var stg = document.getElementById("stage");
  var stx = stg.style.width || parseInt(getCSSproperty(stg, "width")) ||
	/* There's no way to get effective element's width on `Safari 1.3'.
	 * So use offsetWidth for Safari.
	 *  -20 is ugly workaround for padding */
            stg.offsetWidth-20 || 320;
  var sty = parseInt(getCSSproperty(stg, "height") || stx*.75);

  removeAllChild(stg);
  climg = document.createElement("img");
  climg.setAttribute("src", me.getAttribute("src"));
  var newst = stg.appendChild(climg);
  
  var ox = me.getAttribute("width");
  var oy = me.getAttribute("height");
  newst.style.height=sty;
  newst.style.width= oy ? sty/oy*ox : stx;

  lastelement = me;
  lastX = ev.screenX;
  /* adjIdx(); */
  //document.getElementById("index").style.height = "auto";
}

var imgx=0, imgy;
var pcnt = 100;
function init() {
  if (imgx == 0) {
    var img=getimg();
    imgx = parseInt(img.width);
    imgy = parseInt(img.height);
    // alert(location.href)
    if (!document.getElementById("button")) {
      var info = document.getElementById("info");
      if (info) info.appendChild(createBTN());
    }
    if (MSIE) {
      var b = document.getElementsByTagName("body")[0];
      b.onkeydown = new Function("keyExec(event);");
    }
    if (location.href.match(/(.*)\?(\d+)%/) && imgx > frameWidth()) {
      pcnt = parseInt(RegExp.$2);
      setImgSize();
    } else {
      fitWin();
    }
  }
}