//
// IRORIBATA IMAGE VIEWER Javascript Part; Ver1.25 / 2015-11-21 by kiyoshi@kuragane.jp
// 旧ブラウザにも対応版。気にいっていただけましたら自由に改造してお使いください。
// img.htmlとセットになっております。こちらは表示スクリプト部です。
// img.htmlを表示したい名前でコピーし、それに表示設定を行ってください。
//

// パラメータチェック。
if(!image_src) {
 document.write('<table style="margin:auto;color:red;font-size:large;font-weight:bold;"><tr><td></td><td><br />な、なぜか画像が表示できません。<br />画像の指定を再度ご確認ください。</td><td></td></tr></table>');
 document.close();
}
if(image_center_rx > 1) { image_center_rx /= 100; } // 1より大ならパーセント値とみなす。
if(image_center_ry > 1) { image_center_ry /= 100; } // 1より大ならパーセント値とみなす。
if(image_zoom > 2)      { image_zoom /= 100; } // 2より大ならパーセント値とみなす。2にしたのは多少の拡大を許す場合にも対応するため。
if(image_zoom_max > 2)  { image_zoom_max /= 100; }
if(image_zoom_min > 2)  { image_zoom_min /= 100; }

// 基本的な関数。
// マウスの座標を取得。スクロールによらず単に画面の左上を(0, 0)とした値。
// get_mousepos()を呼び出した時点のマウス座標がmousepos_x,mousepos_yに入る。
mousepos_x = mousepos_y = 0;
function get_mousepos(evt) {
 if(evt) {
  mousepos_x = evt.clientX;
  mousepos_y = evt.clientY;
 } else {
  mousepos_x = event.clientX;
  mousepos_y = event.clientY;
 }
}
// 画面のスクロール値の取得。get_scroll()を呼んだ時点のスクロール値がscroll_left,scroll_top,...に入る。
scroll_left = scroll_top = scroll_height = scroll_width = 0;
function get_scroll() {
 (scroll_left   = document.documentElement.scrollLeft)   || (scroll_left   = document.body.scrollLeft);
 (scroll_top    = document.documentElement.scrollTop)    || (scroll_top    = document.body.scrollTop);
 (scroll_height = document.documentElement.scrollHeight) || (scroll_height = document.body.scrollHeight);
 (scroll_width  = document.documentElement.scrollWidth)  || (scroll_width  = document.body.scrollWidth);
}
// ブラウザの画面サイズの取得。できるだけスクロールバーを含まない画面の寸法をとる。
// ブラウザによってはbodyの寸法を取得するのでbodyを書き出したあと書くように言われたがほんとにそうなのかはよくわからない。
function getWindowWidth() {
 var width = 0;
 if(document.documentElement && document.documentElement.clientWidth) {
  width = document.documentElement.clientWidth; // 概ねこれでとれる。スクロールバーは含まない。
 }
 else if(window.innerWidth) {
  width = window.innerWidth; // 概ねスクロールバー含む。
 }
 else if(document.body && document.body.clientWidth) {
  width = document.body.clientWidth; // bodyの内容(幅)に影響される。
 }
 return(width);
}
function getWindowHeight() {
 var height = 0;
 if(document.documentElement && document.documentElement.clientHeight) {
  height = document.documentElement.clientHeight; // 概ねこれでとれる。スクロールバーは含まない。
 } else if(window.innerHeight) {
  height = window.innerHeight; // 概ねスクロールバー含む。
 } else if(document.body && document.body.clientHeight) {
  height = document.body.clientHeight; // bodyの内容(高さ)に影響される。
 }
 return(height);
}

// 表示用タグ書き出し。あとで位置や大きさを変えるがとりあえずここでみな書き出しておく。
// 画像。
document.write('<img id="IMG" src="" style="visibility:hidden;position:absolute;top:0px;left:0px;" />');
// タイトル等の情報エリア。
document.write('<table id="TITLEAREA" style="position:fixed;top:0px;left:0px;" role="presentation"><tr><td id="TITLE" style="padding:0px 2px;color:'+title_color+';background:'+title_background+';font-size:small;font-weight:bold;"></td></tr></table>');
document.write('<table id="INFOAREA" style="position:fixed;top:0px;right:0px;" role="presentation"><tr><td id="INFO" style="padding:0px 2px;color:'+info_color+';background:'+info_background+';font-size:small;"></td></tr></table>');
// アンカーマーク。現在テキストを使っておりブラウザによって少し位置がずれる。厳密にやりたいなら画像に変更してください。
document.write('<div id="ANCHOR" style="visibility:hidden;position:absolute;top:0px;left:0px;width:24px;height:24px;border:24px transparent solid;font-size:24px;color:red;" onselectstart="return false;">'+anchormark+'</div>');
// 画像をそっくり同じ大きさでカバー。各種アクション領域。
document.write('<div id="ACTIONAREA" style="position:absolute;top:0px;left:0px;"></div>');
// さらにボタン表示ボタン、拡大・縮小、スクロールボタンなど。
// 通常はボタン表示ボタンを除いて初期非表示。+を指定すると初期表示。
if(button_align.match(/\+/)) {
 // ボタン初期表示。
 document.write('<form name="FORM"><table id="BTNAREA" style="display:none;position:fixed;bottom:0px;border:1px silver dotted;"><tr><td id="BTNAREA1"><input name="BTNBTN" type="button" value="'+(button_align.match(/right/i)?">":"<")+'" /></td><td id="BTNAREA2"><input name="ZOOMOUTBTN" type="button" value="-" /></td><td id="BTNAREA3" style="white-space:nowrap;"><input name="ZOOMINBTN" type="button" value="+" /><input name="SCROLLLEFTBTN" type="button" value="←" /><input name="SCROLLRIGHTBTN" type="button" value="→" /><input name="SCROLLUPBTN" type="button" value="↑" /><input name="SCROLLDOWNBTN" type="button" value="↓" /></td></tr></table></form>');
} else {
 // ボタン初期非表示。
 document.write('<form name="FORM"><table id="BTNAREA" style="display:none;position:fixed;bottom:0px;border:1px silver dotted;"><tr><td id="BTNAREA1"><input name="BTNBTN" type="button" value="'+(button_align.match(/right/i)?"<":">")+'" /></td><td id="BTNAREA2" style="display:none;"><input name="ZOOMOUTBTN" type="button" value="-" /></td><td id="BTNAREA3" style="display:none;white-space:nowrap;"><input name="ZOOMINBTN" type="button" value="+" /><input name="SCROLLLEFTBTN" type="button" value="←" /><input name="SCROLLRIGHTBTN" type="button" value="→" /><input name="SCROLLUPBTN" type="button" value="↑" /><input name="SCROLLDOWNBTN" type="button" value="↓" /></td></tr></table></form>');
}

// 画像、タイトルなどを設定。
document.getElementById("IMG").onload = function(){ setTimeout("init_set();",100); }
document.getElementById("IMG").src    = image_src;
document.getElementById("IMG").title  = title.replace(/<[^>]+>/g,"");
document.getElementById("IMG").alt    = info.replace(/<[^>]+>/g,"");
document.getElementById("TITLE").innerHTML = title;
if(title.match(/<a /i)) {
 document.getElementById("TITLEAREA").style.zIndex = "2";
}
document.getElementById("INFO").innerHTML = info;
if(info.match(/<a /i)) {
 document.getElementById("INFOAREA").style.zIndex = "2";
}

// 表示や動作などの設定。初期あるいは各アクションで使用。
// 各アクション用には余計なものも含まれているが、各アクションに個別に書いていたらわけがわからなくなったのでこれでよしとする。
function set_documents() {
 // 画面サイズ取得。
 showarea_width  = getWindowWidth();
 showarea_height = getWindowHeight();
 // 表示する画像サイズと位置の決定。
 // 画像サイズ。縮小は最小指定値か画面内にちょうど収まる値まで。以後はimage_zoom_minは使わずimage_zoom_outを使う。
 image_zoom_out = Math.max(image_zoom_min, Math.min(image_zoom_max, showarea_width/sourceimage_width, showarea_height/sourceimage_height));
 image_zoom     = Math.min(image_zoom_max, Math.max(image_zoom_out, image_zoom));
 image_width    = Math.round(sourceimage_width  * image_zoom);
 image_height   = Math.round(sourceimage_height * image_zoom);
 // 画像位置。中央に。(スクロール以前の初期値。画像が画面より小さい場合に有効。)
 image_top  = Math.max(0, Math.round((showarea_height - image_height)/2));
 image_left = Math.max(0, Math.round((showarea_width - image_width)/2));
 // 画像の位置をセット。
 document.getElementById("IMG").style.top  = image_top+"px";
 document.getElementById("IMG").style.left = image_left+"px";
 document.getElementById("IMG").style.width  = image_width+"px";
 document.getElementById("IMG").style.height = image_height+"px";
 // アンカーマークの位置をセット。
 set_anchor_mark();
 // 画像の指定位置をなるべく画面中央に。(こちらはスクロールで。画像が画面より大きい場合に有効。)
 scrollto_x = Math.max(0, Math.min(image_width  - showarea_width,  Math.round(image_width  * image_center_rx - showarea_width/2)));
 scrollto_y = Math.max(0, Math.min(image_height - showarea_height, Math.round(image_height * image_center_ry - showarea_height/2)));
 window.scrollTo(scrollto_x, scrollto_y);
 // アクション関係。スクロール等のマウスアクションをセット。
 document.getElementById("ACTIONAREA").style.top  = image_top+"px";
 document.getElementById("ACTIONAREA").style.left = image_left+"px";
 document.getElementById("ACTIONAREA").style.width  = image_width+"px";
 document.getElementById("ACTIONAREA").style.height = image_height+"px";
 // 古いブラウザではbodyからでないとうまくイベントを取得できないものがあり、ACTIONAREAではなくbodyにアクションを設置。
 if(sourceimage_width * image_zoom_max > showarea_width || sourceimage_height * image_zoom_max > showarea_height) {
  document.body.style.cursor = "pointer";
  document.body.onmousedown  = start_dragscroll;
  // シングルクリックへのアクション割当。
  if(sclick_action == "togglescroll") {
   document.body.onmouseup   = (image_zoom > image_zoom_out) ? togglescroll : stop_dragscroll;
  } else if(sclick_action == "centerscroll") {
   document.body.onmouseup   = centerscroll;
  } else if(sclick_action == "zoominstep") {
   document.body.onmouseup   = zoominstep;
  } else if(sclick_action == "zoominstep_center") {
   document.body.onmouseup   = zoominstep_center;
  } else if(sclick_action == "zoominout") {
   document.body.onmouseup   = zoominout;
  } else if(sclick_action == "zoominout_center") {
   document.body.onmouseup   = zoominout_center;
  } else {
   document.body.onmouseup   = stop_dragscroll;
  }
  // ダブルクリックへのアクション割当。
  if(dclick_action == "centerscroll") {
   document.body.ondblclick  = centerscroll;
  } else if(dclick_action == "zoominstep") {
   document.body.ondblclick  = zoominstep;
  } else if(dclick_action == "zoominstep_center") {
   document.body.ondblclick  = zoominstep_center;
  } else if(dclick_action == "zoominout") {
   document.body.ondblclick  = zoominout;
  } else if(dclick_action == "zoominout_center") {
   document.body.ondblclick  = zoominout_center;
  } else {
   document.body.ondblclick  = null;
  }
 } else {
  document.body.style.cursor = "default";
  document.body.onmousedown  = null;
  document.body.onmouseup    = null;
  document.body.onmouseout   = null;
  document.body.ondblclick   = null;
 }
 // ボタンの有効無効の設定。
 if(sourceimage_width * image_zoom_max <= showarea_width && sourceimage_height * image_zoom_max <= showarea_height) {
  document.getElementById("BTNAREA").style.display   = "none";
 } else {
  document.getElementById("BTNAREA").style.display   = "table";
  if(image_zoom <= image_zoom_out) {
   document.FORM.ZOOMOUTBTN.disabled = true;
  } else {
   document.FORM.ZOOMOUTBTN.disabled = false;
  }
  if(image_zoom >= image_zoom_max) {
   document.FORM.ZOOMINBTN.disabled = true;
  } else {
   document.FORM.ZOOMINBTN.disabled = false;
  }
  get_scroll();
  if(image_width <= showarea_width) {
   document.FORM.SCROLLLEFTBTN.disabled  = true;
   document.FORM.SCROLLRIGHTBTN.disabled = true;
  } else {
   document.FORM.SCROLLLEFTBTN.disabled  = (scroll_left > 0) ? false : true;
   document.FORM.SCROLLRIGHTBTN.disabled = (image_width - scroll_left > showarea_width) ? false : true;
  }
  if(image_height <= showarea_height) {
   document.FORM.SCROLLUPBTN.disabled    = true;
   document.FORM.SCROLLDOWNBTN.disabled  = true;
  } else {
   document.FORM.SCROLLUPBTN.disabled    = (scroll_top > 0) ? false : true;
   document.FORM.SCROLLDOWNBTN.disabled  = (image_height - scroll_top > showarea_height) ? false : true;
  }
 }
 // 結果の実際の画像位置を記憶しておく。画面サイズとの関係で必ずしも指定どおりになっているとは限らない。
 get_image_center();
}

// 最初のセット。こちらは最初に１回だけやればいいもの。
function init_set() {
 // スクロールバー。画面サイズ取得の都合で"auto"はやらない。
 if(scrolling == "no") {
  document.body.style.overflow = "hidden";
 } else {
  document.body.style.overflow = "scroll";
 }
 // ボタン位置の設定。
 if(button_align.match(/right/i)) {
  document.getElementById("BTNAREA").style.right = "0px"; // 右に設置。
 } else {
  document.getElementById("BTNAREA").style.left  = "0px"; // 左に設置。
 }
 // 元画像の幅と高さ(単位px)。
 sourceimage_width  = document.getElementById("IMG").width;
 sourceimage_height = document.getElementById("IMG").height;
 // 画像の位置、表示サイズ、その他いろいろ設定。
 set_documents();
 // 位置等設定したら画像等を表示。
 document.getElementById("IMG").style.visibility = "visible";
 if(anchormark) {
  document.getElementById("ANCHOR").style.visibility = "visible";
 }
 // ズームボタンのアクション。
 document.FORM.ZOOMOUTBTN.onmousedown = zoomout;
 document.FORM.ZOOMOUTBTN.onmouseup   = zoomstop;
 document.FORM.ZOOMOUTBTN.onmouseout  = zoomstop;
 document.FORM.ZOOMINBTN.onmousedown  = zoomin;
 document.FORM.ZOOMINBTN.onmouseup    = zoomstop;
 document.FORM.ZOOMINBTN.onmouseout   = zoomstop;
 // スクロールボタンのアクション。
 document.FORM.SCROLLLEFTBTN.onmousedown  = scrollleft;
 document.FORM.SCROLLLEFTBTN.onmouseup    = scrollstop;
 document.FORM.SCROLLLEFTBTN.onmouseout   = scrollstop;
 document.FORM.SCROLLRIGHTBTN.onmousedown = scrollright;
 document.FORM.SCROLLRIGHTBTN.onmouseup   = scrollstop;
 document.FORM.SCROLLRIGHTBTN.onmouseout  = scrollstop;
 document.FORM.SCROLLUPBTN.onmousedown    = scrollup;
 document.FORM.SCROLLUPBTN.onmouseup      = scrollstop;
 document.FORM.SCROLLUPBTN.onmouseout     = scrollstop;
 document.FORM.SCROLLDOWNBTN.onmousedown  = scrolldown;
 document.FORM.SCROLLDOWNBTN.onmouseup    = scrollstop;
 document.FORM.SCROLLDOWNBTN.onmouseout   = scrollstop;
 // マウスがボタン上にあるのを記憶しボタン動作以外のよけいな動作を抑止。都度判定は面倒。
 mouse_on_button = false;
 document.getElementById("BTNAREA").onmouseover    = function(){ mouse_on_button = true; }
 document.getElementById("BTNAREA").onmouseout     = function(){ mouse_on_button = false; }
 document.getElementById("ACTIONAREA").onmouseover = function(){ mouse_on_button = false; }
 // ボタンの表示非表示切替。
 if(sclick_action == "zoominstep" || dclick_action == "zoominstep"
   || sclick_action == "zoominstep_center" || dclick_action == "zoominstep_center") {
  document.getElementById("BTNAREA2").style.display = "table-cell";
 }
 document.FORM.BTNBTN.onclick = function() {
  if(document.FORM.BTNBTN.value == ">") {
   if(sclick_action == "zoominstep" || dclick_action == "zoominstep"
     || sclick_action == "zoominstep_center" || dclick_action == "zoominstep_center") {
    document.getElementById("BTNAREA2").style.display = "table-cell";
   } else {
    document.getElementById("BTNAREA2").style.display = (button_align.match(/right/i) ? "none" : "table-cell");
   }
   document.getElementById("BTNAREA3").style.display  = (button_align.match(/right/i) ? "none" : "table-cell");
   document.FORM.BTNBTN.value = "<";
  } else {
   if(sclick_action == "zoominstep" || dclick_action == "zoominstep"
     || sclick_action == "zoominstep_center" || dclick_action == "zoominstep_center") {
    document.getElementById("BTNAREA2").style.display = "table-cell";
   } else {
    document.getElementById("BTNAREA2").style.display = (button_align.match(/right/i) ? "table-cell" : "none");
   }
   document.getElementById("BTNAREA3").style.display  = (button_align.match(/right/i) ? "table-cell" : "none");
   document.FORM.BTNBTN.value = ">";
  }
 }
 document.body.onresize = set_documents;
}

// 以下スクロールやズームなどのアクションの定義。
// マウスによるドラッグスクロール。
scroll_action = "stop";
function start_dragscroll(evt) {
 if(mouse_on_button) { return false; }
 if(zoom_action != "stop" || slide_action != "stop") { stop_dragscroll(evt); return false; }
 // アクションを開始した瞬間のスクロール値とマウス位置を取得。
 get_scroll();
 get_mousepos(evt);
 if(scroll_action == "stop") {
  scroll_action = "start";
  set_image_anchor(evt);
  document.body.style.cursor = "move";
  document.body.onmousemove  = dragscroll;
 } else if(scroll_action == "start") {
  scroll_action = "continue";
 }
 return false;
}
function dragscroll(evt) {
 if(scroll_action == "start") {
  scroll_action = "continue";
  document.body.onmouseout = stop_dragscroll;
 } else if(scroll_action == "continue") {
  b_mousepos_x = mousepos_x;
  b_mousepos_y = mousepos_y;
  get_scroll();
  get_mousepos(evt);
  move_x = b_mousepos_x - mousepos_x;
  move_y = b_mousepos_y - mousepos_y;
  move_x = Math.min(image_width - scroll_left - showarea_width,  move_x);
  move_y = Math.min(image_height - scroll_top - showarea_height, move_y);
  window.scrollBy(move_x, move_y);
 }
 return false;
}
function stop_dragscroll(evt) {
 scroll_action = "stop";
 document.body.style.cursor = "pointer";
 document.body.onmousemove  = null;
 document.body.onmouseout   = null;
 get_image_center();
 set_documents();
 return false;
}
function togglescroll(evt) {
 if(scroll_action == "stop") {
  start_dragscroll(evt);
 } else if (scroll_action == "continue") {
  stop_dragscroll(evt);
 }
 return false;
}

// ズームアクション。画像の拡大・縮小。
// サイズボタンによる拡大・縮小。
// [＋]ボタンによる拡大。
function zoomin() {
 if(btnzoom_action.match(/jump/i)) {
  // 大きなsvg画像など書き直しに時間のかかる場合に使用。
  jump_zoomin();
 } else {
  // jpgなど通常の画像は連続ズームアクションで。
  zoom_action   = "in";
  zoom_time     = fullzoom_time;
  zoom_start    = image_zoom;
  zoom_target   = image_zoom_max;
  zooming_timer = 0;
  zoom();
 }
}
// ワンステップで拡大。
function jump_zoomin() {
 document.FORM.ZOOMINBTN.style.cursor = "wait";
 zoom_action = "jump_in";
 if(btnzoom_action.match(/full/i)) {
  image_zoom = image_zoom_max;
 } else {
  image_zoom = Math.max(image_zoom_out, Math.min(image_zoom_max, image_zoom * (1 + zoom_step)));
 }
 set_documents();
 zoom_action = "stop";
 setTimeout("document.FORM.ZOOMINBTN.style.cursor='default';", 100);
}
// [－]ボタンによる縮小。
function zoomout() {
 if(btnzoom_action.match(/jump/i)) {
  // 大きなsvg画像など書き直しに時間のかかる場合に使用。
  jump_zoomout();
 } else {
  // jpgなど通常の画像は連続ズームアクションで。
  zoom_action   = "out";
  zoom_time     = fullzoom_time;
  zoom_start    = image_zoom;
  zoom_target   = image_zoom_out;
  zooming_timer = 0;
  zoom();
 }
}
// ワンステップで縮小。
function jump_zoomout() {
 document.FORM.ZOOMOUTBTN.style.cursor = "wait";
 zoom_action = "jump_out";
 if(btnzoom_action.match(/full/i)) {
  image_zoom = image_zoom_out;
 } else {
  image_zoom = Math.max(image_zoom_out, Math.min(image_zoom_max, image_zoom / (1 + zoom_step)));
 }
 set_documents();
 zoom_action = "stop";
 setTimeout("document.FORM.ZOOMOUTBTN.style.cursor='default';", 100);
}
// 連続ズームアクションでボタンを離したら停止。
function zoomstop() {
 zoom_action = "stop";
}

// 連続ズームで段階的にズームアップ。ズームアウトはボタンで。
function zoominstep(evt) {
 if(mouse_on_button) { return false; }
 if(zoom_action != "stop") { return false; }
 if(scroll_action == "continue") { stop_dragscroll(evt); return false; } else { stop_dragscroll(evt); }
 zoom_action   = "in";
 zoom_time     = stepaction_time;
 zoom_start    = image_zoom;
 zoom_target   = Math.max(image_zoom_out, Math.min(image_zoom_max, image_zoom * (1 + zoom_step)));
 zooming_timer = 0;
 zoom();
 return false;
}
// 連続ズームで段階的にズームアップしながらクリック位置を中央にスクロール。ズームアウトはボタンで。
function zoominstep_center(evt) {
 if(mouse_on_button) { return false; }
 if(zoom_action != "stop") { return false; }
 if(scroll_action == "continue") { stop_dragscroll(evt); return false; } else { stop_dragscroll(evt); }
 zoom_action   = "in";
 zoom_time     = stepaction_time;
 zoom_start    = image_zoom;
 zoom_target   = Math.max(image_zoom_out, Math.min(image_zoom_max, image_zoom * (1 + zoom_step)));
 zooming_timer = 0;
 zoom();
 // 同時にクリックした点をなるべく中央に。
 slide_action    = "any";
 slide_time      = zoom_time; // ズームの時間と合わせる。
 slide_start_rx  = image_center_rx;
 slide_start_ry  = image_center_ry;
 slide_target_rx = Math.min(1.0, Math.max(0.0, (scroll_left + mousepos_x - image_left) / image_width));
 slide_target_ry = Math.min(1.0, Math.max(0.0, (scroll_top  + mousepos_y - image_top)  / image_height));
 sliding_timer   = 0;
 slidescroll();
 return false;
}
// 連続ズームで最大・最小ズーム切替。
function zoominout(evt) {
 if(mouse_on_button) { return false; }
 if(zoom_action != "stop") { return false; }
 if(scroll_action == "continue") { stop_dragscroll(evt); return false; } else { stop_dragscroll(evt); }
 if(image_zoom < image_zoom_max) {
  zoom_action   = "in";
  zoom_time     = fullzoom_time;
  zoom_start    = image_zoom;
  zoom_target   = image_zoom_max;
  zooming_timer = 0;
  zoom();
 } else {
  zoom_action   = "out";
  zoom_time     = fullzoom_time;
  zoom_start    = image_zoom;
  zoom_target   = image_zoom_out;
  zooming_timer = 0;
  zoom();
 }
 return false;
}
// 連続ズームで最大・最小ズーム切替。ズームアップ時はクリック位置を中央にスクロール。
function zoominout_center(evt) {
 if(mouse_on_button) { return false; }
 if(zoom_action != "stop") { return false; }
 if(scroll_action == "continue") { stop_dragscroll(evt); return false; } else { stop_dragscroll(evt); }
 if(image_zoom < image_zoom_max) {
  zoom_action   = "in";
  zoom_time     = fullzoom_time;
  zoom_start    = image_zoom;
  zoom_target   = image_zoom_max;
  zooming_timer = 0;
  zoom();
  // 同時にクリックした点をなるべく中央に。ズーム範囲が大きいと動きが少し干渉することもあるが。
  slide_action    = "any";
  slide_time      = zoom_time;
  slide_start_rx  = image_center_rx;
  slide_start_ry  = image_center_ry;
  slide_target_rx = Math.min(1.0, Math.max(0.0, (scroll_left + mousepos_x - image_left) / image_width));
  slide_target_ry = Math.min(1.0, Math.max(0.0, (scroll_top  + mousepos_y - image_top)  / image_height));
  sliding_timer   = 0;
  slidescroll();
 } else {
  zoom_action   = "out";
  zoom_time     = fullzoom_time;
  zoom_start    = image_zoom;
  zoom_target   = image_zoom_out;
  zooming_timer = 0;
  zoom();
 }
 return false;
}

// ズーム
zoom_action   = "stop"; // 状態記憶だが"stop"にのみ意味あり。
zoom_time     = 0; // ズームを完了させる時間。msec。
zoom_timetick = 30; // ズーム動作の時間間隔。msec。
zooming_timer = 0;
function zoom() {
 // start set
 if(zooming_timer == 0) {
  zoom_starttime = (new Date()).getTime();
  zooming_timer = 1; // startした印。
  setTimeout("zoom();", 10); // 同時スタートする他のアクションに初期化時間を与えるため。
  return;
 }
 // zooming
 zooming_timer = Math.min(zoom_time, (new Date()).getTime() - zoom_starttime);
 if(zoom_action != "stop" && zooming_timer < zoom_time) {
  image_zoom_from = image_zoom;
  image_zoom = Math.exp(Math.log(zoom_start) + (Math.log(zoom_target) - Math.log(zoom_start)) * zooming_timer / zoom_time);
  // image_anchorの位置を変えないように表示中心位置を修正。
  image_center_rx = image_center_rx + (image_anchor_rx - image_center_rx) * (image_zoom - image_zoom_from) / image_zoom;
  image_center_ry = image_center_ry + (image_anchor_ry - image_center_ry) * (image_zoom - image_zoom_from) / image_zoom;
  set_documents();
  setTimeout("zoom();", zoom_timetick);
  return;
 }
 // finish
 if(zoom_action != "stop") {
  image_zoom    = zoom_target;
  set_documents();
 }
 zoom_action   = "stop";
 zooming_timer = 0;
 return;
}

// スクロールボタンによる移動。
// [↑]ボタンで上へ。
function scrollup() {
 slide_action    = "up";
 slide_time      = fullscroll_time;
 slide_start_rx  = image_center_rx;
 slide_start_ry  = image_center_ry;
 slide_target_rx = image_center_rx;
 slide_target_ry = 0.0;
 sliding_timer   = 0;
 slidescroll();
}
// [↓]ボタンで下へ。
function scrolldown() {
 slide_action    = "down";
 slide_time      = fullscroll_time;
 slide_start_rx  = image_center_rx;
 slide_start_ry  = image_center_ry;
 slide_target_rx = image_center_rx;
 slide_target_ry = 1.0;
 sliding_timer   = 0;
 slidescroll();
}
// [←]ボタンで左へ。
function scrollleft() {
 slide_action    = "left";
 slide_time      = fullscroll_time;
 slide_start_rx  = image_center_rx;
 slide_start_ry  = image_center_ry;
 slide_target_rx = 0.0;
 slide_target_ry = image_center_ry;
 sliding_timer   = 0;
 slidescroll();
}
// [→]ボタンで右へ。
function scrollright() {
 slide_action    = "right";
 slide_time      = fullscroll_time;
 slide_start_rx  = image_center_rx;
 slide_start_ry  = image_center_ry;
 slide_target_rx = 1.0;
 slide_target_ry = image_center_ry;
 sliding_timer   = 0;
 slidescroll();
}
// ボタンを離したら停止。
function scrollstop() {
 slide_action    = "stop";
}

// 単に中央へ移動。
function centerscroll(evt) {
 if(mouse_on_button) { return false; }
 if(slide_action != "stop") { return false; }
 if(scroll_action == "continue") { stop_dragscroll(evt); return false; } else { stop_dragscroll(evt); }
 slide_action    = "any";
 slide_time      = stepaction_time;
 slide_start_rx  = image_center_rx;
 slide_start_ry  = image_center_ry;
 slide_target_rx = Math.min(1.0, Math.max(0.0, (scroll_left + mousepos_x - image_left) / image_width));
 slide_target_ry = Math.min(1.0, Math.max(0.0, (scroll_top  + mousepos_y - image_top)  / image_height));
 sliding_timer   = 0;
 slidescroll();
 return false;
}

// スライドスクロール。
slide_action   = "stop"; // 状態記憶だが"stop"にのみ意味あり。
slide_time     = 0; // スクロールを完了させる時間。msec。
slide_timetick = 30; // スクロール動作の時間間隔。msec。
sliding_timer  = 0;
function slidescroll() {
 // start set
 if(sliding_timer == 0) {
  slide_starttime = (new Date()).getTime();
  sliding_timer   = 1; // startした印。
  setTimeout("slidescroll();", 10);
  return;
 }
 // sliding
 sliding_timer = Math.min(slide_time, (new Date()).getTime() - slide_starttime);
 if(slide_action != "stop" && sliding_timer < slide_time) {
  image_center_rx = slide_start_rx + (slide_target_rx - slide_start_rx) * sliding_timer / slide_time;
  image_center_ry = slide_start_ry + (slide_target_ry - slide_start_ry) * sliding_timer / slide_time;
  set_documents();
  setTimeout("slidescroll();", slide_timetick);
  return;
 }
 // finish
 if(slide_action != "stop") {
  image_center_rx = slide_target_rx;
  image_center_ry = slide_target_ry;
  set_documents();
 }
 slide_action = "stop";
 sliding_timer = 0;
 return;
}

// 画像の指定位置(画像左上からの座標)を画像位置比率(image_center_rx, image_center_ry)に変換、記憶。
// このあとset_documents()を呼ぶことによってその位置へスクロールされる。
function set_image_center(imagepos_x, imagepos_y) {
 image_center_rx = Math.min(1.0, Math.max(0.0, imagepos_x / image_width));
 image_center_ry = Math.min(1.0, Math.max(0.0, imagepos_y / image_height));
}
// 現在の画像の中心位置を画像位置比率(image_center_rx, image_center_ry)に変換、記憶。
// 実際のスクロール値を取得するのでスクロールして位置が決まってから呼ぶ。
function get_image_center() {
 get_scroll();
 centerpos_x = scroll_left + showarea_width/2  - image_left;
 centerpos_y = scroll_top  + showarea_height/2 - image_top;
 image_center_rx  = Math.min(1.0, Math.max(0.0, centerpos_x / image_width));
 image_center_ry  = Math.min(1.0, Math.max(0.0, centerpos_y / image_height));
}
// アンカー。
// スクロール、ズームなどの基準点。初期値は中央。指定されればここにアンカーマークを表示。
image_anchor_rx = image_center_rx;
image_anchor_ry = image_center_ry;
// クリックされた点にアンカーを設定する。スクロールやズームの基準点。
function set_image_anchor(evt) {
 get_scroll();
 get_mousepos(evt);
 image_anchor_rx = Math.min(1.0, Math.max(0.0, (scroll_left + mousepos_x - image_left) / image_width));
 image_anchor_ry = Math.min(1.0, Math.max(0.0, (scroll_top  + mousepos_y - image_top)  / image_height));
 set_anchor_mark();
}
// アンカーマークの表示。
function set_anchor_mark() {
 if(anchormark) {
  markerpos_x = Math.round(image_width * image_anchor_rx + image_left);
  markerpos_y = Math.round(image_height * image_anchor_ry + image_top);
  document.getElementById("ANCHOR").style.top  = (markerpos_y-24-15)+"px";
  document.getElementById("ANCHOR").style.left = (markerpos_x-24-12)+"px";
 }
}