function getWindowWidth(){
  if(window.innerWidth) return window.innerWidth; // Mozilla, Opera, NN4
  if(document.documentElement && document.documentElement.clientWidth){ // 以下 IE
   return document.documentElement.clientWidth;
  }
  else if(document.body && document.body.clientWidth){
   return document.body.clientWidth;
  }
  return 0;
}
function getWindowHeight(){
  if(window.innerHeight) return window.innerHeight; // Mozilla, Opera, NN4
  if(document.documentElement && document.documentElement.clientHeight){ // 以下 IE
   return document.documentElement.clientHeight;
  }
  else if(document.body && document.body.clientHeight){
   return document.body.clientHeight;
  }
  return 0;
}

function detect_window(){
  // ブラウザ範囲取得
  disp_w = getWindowWidth();
  disp_h = getWindowHeight();
}

// イベントリスナー解除
function removeListener(elem, eventType, func, cap) {
    if(elem.removeEventListener) {
        elem.removeEventListener(eventType, func, cap);
    } else if(elem.detachEvent) {
        elem.detachEvent('on' + eventType, func);
    }
}

// イベントリスナー登録
function addListener(elem, eventType, func, cap) {
    if(elem.addEventListener) {
        elem.addEventListener(eventType, func, cap);
    } else if(elem.attachEvent) {
        elem.attachEvent('on' + eventType, func);
    } else {
        alert('ご利用のブラウザーはサポートされていません。');
        return false;
    }
}
// バブリングとデフォルトイベントアクションの停止
function stopDefaultAndPropagation(e) {
    // バブリング停止
    if(e.stopPropagation) {
         e.stopPropagation();
    }
    if(window.event) {
        window.event.cancelBubble = true;
    }
    // デフォルトイベントアクションを停止する
    if(e.preventDefault) {
        e.preventDefault();
    }
    if(window.event) {
        window.event.returnValue = false;
    }
}

var clays;
var request_task;
var mouse_x;
var mouse_y;
var disp_w;
var disp_h;
var clay_w;
var clay_h;
var delta_w;
var delta_h;

var geo_min_x;
var geo_max_x;
var geo_min_y;
var geo_max_y;
var clay_min_x;
var clay_max_x;
var clay_min_y;
var clay_max_y;

var drag_base_x;
var drag_base_y;

var drag_base_x_ini;
var drag_base_y_ini;

var drag_count_x;
var drag_count_y;

var clayclass;
var json_url;
var json_opt;

var mini_size;
var mini_sum;

function init_load(){
  detect_window();
  clays = new Array();
  request_task = new Array();

  json_url = '/index.php';
  json_opt = '';
  page_init_var();

  // 初期リクエストする左上のインデックスを決める
  var p = Position.positionedOffset($("contents"));
  drag_obj.drag_target = $("contents");
  
  var from_x;
  var from_y;

  var url = location.href;
  var h = url.substring(url.indexOf('?')).toQueryParams();

  drag_base_x_ini = p[0];
  drag_base_y_ini = p[1];
  drag_count_x = 0;
  drag_count_y = 0;

  if(h["x"] != null && h["y"] != null){
      from_x = h["x"]-2;
      from_y = h["y"]-2;
      to_x = from_x + Math.floor(disp_w/delta_w)+4;
      to_y = from_y + Math.floor(disp_h/delta_h)+4;
  }else{
      from_x = -2;
      from_y = -2;
      to_x = Math.floor(disp_w/delta_w)+2;
      to_y = Math.floor(disp_h/delta_h)+2;
  }
  geo_from_x = -delta_w*2;
  geo_from_y = -delta_h*2;

  geo_min_x = geo_from_x;
  geo_max_x = geo_from_x + (to_x-from_x)*delta_w;
  geo_min_y = geo_from_y;
  geo_max_y = geo_from_y + (to_y-from_y)*delta_h;

  clay_min_x = from_x;
  clay_max_x = to_x;
  clay_min_y = from_y;
  clay_max_y = to_y;

  // clay index x,yで取得
  load_clay(from_x,to_x,from_y,to_y,geo_from_x,geo_from_y,(new Date()).getMilliseconds());

  document.onmousedown = mouse_down;
  document.oncontextmenu= function(){return false;}
}

function shrink_map(e){
  if (document.all) {  // IE
    if(event.srcElement.id == "") return true;
  }else{
    if(Event.element(e).id == "") return true; 
    event = e;
  }

  mouse_x = Event.pointerX(event);
  mouse_y = Event.pointerY(event);
  var p = Position.positionedOffset(drag_obj.drag_target);
  var click_x;
  var click_y;
  if(mini_size < 0){
      click_x = clay_min_x + Math.floor((mouse_x - p[0] - geo_min_x)/delta_w);
      click_y = clay_min_y + Math.floor((mouse_y - p[1] - geo_min_y)/delta_h);
      click_x = Math.floor(click_x/2);
      click_y = Math.floor(click_y/2);
      location.href = 'index.php?x='+click_x+'&y='+click_y+'&s=128';
  }else if(mini_size > 8){
      click_x = (clay_min_x)*mini_sum + Math.floor((mouse_x - p[0] - geo_min_x)/mini_size);
      click_y = (clay_min_y)*mini_sum + Math.floor((mouse_y - p[1] - geo_min_y)/mini_size);
      click_x = Math.floor(click_x/(mini_sum*2));
      click_y = Math.floor(click_y/(mini_sum*2));
      location.href = 'index.php?x='+click_x+'&y='+click_y+'&s='+(mini_size/2);
  }else{
      return false;
  }
}	

function mouse_down(e){
  // ドラッグ登録
    if (navigator.appName == "Microsoft Internet Explorer") {
	if (event.button & 2) {
	    shrink_map(e);
	    return(false);
	}
    } else if (navigator.appName == "Netscape") {
	if (e.which == 3) {
	    shrink_map(e);
	    return(false);
	}
    }
    drag_obj.drag_start(e);
}
function load_clay_success(o){
    var xml;
    var items = eval('('+o.responseText+')');

    var clays_ = items["clays"];
    var adds_ = items["adds"];
    for (var i in clays_) { 
    	var c = clays_[i];
	c[1] = parseInt(c[1]);
	c[2] = parseInt(c[2]);
	c[5] = parseInt(c[5]);
	c[6] = parseInt(c[6]);
	var e = document.getElementById("c"+c[0]);
	if(e == null){
           create_one(c);
	}
	clays[c[0]] = c;
    }
    for (var i in adds_) {
     	var a = adds_[i];
	var e = document.getElementById("a"+a[0]+a[3]);
	if(e == null){
           create_adds(a);
	}
    }
    myLightbox.updateImageList();
}

function remove_one(id){
  e = document.getElementById("c"+id);
  if(e != null){
    $("contents").removeChild(e);
  }
}
function create_adds(a){
  o = document.createElement('div');
  o.setAttribute("id","a"+a[0]+a[3]);
  o.className = "adds";
  o.style.left = a[1];
  o.style.top = a[2];
  o.innerHTML = '<a href="edit.php?x='+a[5]+'&y='+a[6]+'">+</a>';
  $("contents").appendChild(o);  
}
function remove_adds(id){
  e = document.getElementById("a"+id);
  if(e != null){
    $("contents").removeChild(e);
  }
}

window.onresize = resize_window;
var resize_flag = 0;
function resize_window(){
  if(resize_flag == 0){
    resize_flag = 1;
    setTimeout('resize_window_do()',500);
  }
}
function resize_window_do(){
  init_load();
  resize_flag = 0;
}

function return_false(){
	return false;
}
drag_obj = new Object();
drag_obj.drag_flag = false;
drag_obj.drag_target = null
drag_obj.drag_start = function (e){
  if (document.all) {  // IE
    if(event.srcElement.id == "") return true;
  }else{
    if(Event.element(e).id == "") return true; 
    event = e;
  }

  mouse_x = Event.pointerX(event);
  mouse_y = Event.pointerY(event);
  drag_obj.drag_flag = true;

  var p = Position.positionedOffset(drag_obj.drag_target);
  
  drag_obj.offset_x = mouse_x - p[0];
  drag_obj.offset_y = mouse_y - p[1];

  addListener(document, 'mousemove', drag_obj.drag_proc, false);
  addListener(document, 'mouseup', drag_obj.drag_end, false);
  addListener(document, 'selectstart', return_false, false);

  stopDefaultAndPropagation(event);
  return false;
}
drag_obj.drag_end = function(e){
  if (document.all) {  // IE
    if(event.srcElement.id == "") return true;
  }else{
    if(Event.element(e).id == "") return true;
    event = e;
  }

  drag_obj.drag_flag = false;

  var p = Position.positionedOffset(drag_obj.drag_target);
  removeListener(document, 'mousemove', drag_obj.drag_proc, false);
  removeListener(document, 'mouseup', drag_obj.drag_end, false);
  removeListener(document, 'selectstart', return_false, false);
  stopDefaultAndPropagation(event);

  return false;
}

function load_clay(from_x,to_x,from_y,to_y,geo_from_x,geo_from_y,t){
    var k = from_x+"."+to_x+"."+from_y+"."+to_y+"."+geo_from_x+"."+geo_from_y;
    if(request_task[k] != null){
	return;
    }
    request_task[k] = 1;

    var ajax =
      new Ajax.Request(json_url,
		       {
			 method:'get',
			       parameters: 'mode=json&fx='+from_x+'&tx='+to_x+'&fy='+from_y+'&ty='+to_y+'&gfx='+geo_from_x+'&gfy='+geo_from_y+'&t='+t+json_opt,
			 onSuccess : load_clay_success,
			 onComplete: function(){request_task[from_x+"."+to_x+"."+from_y+"."+to_y+"."+geo_from_x+"."+geo_from_y] = null;}
		       });
}

drag_obj.drag_proc = function(e){
  if (document.all) {  // IE
    if(event.srcElement.id == "")return true;
  }else{
    if(Event.element(e).id == "") return true; 
    event = e;
  }

  mouse_x = Event.pointerX(e);
  mouse_y = Event.pointerY(e);
  // マウスがブラウザー表示領域から外れたら終了
  if(
            mouse_x >= disp_w - 20 || mouse_x <= 10 ||
            mouse_y >= disp_h - 30 || mouse_y <= 10
        ) {
	    stopDefaultAndPropagation(event);
            drag_obj.drag_end(e);
            return false;
  }

  if (!drag_obj.drag_flag) return true;

  var target_x = mouse_x - drag_obj.offset_x;
  var target_y = mouse_y - drag_obj.offset_y;
  
  drag_obj.drag_target.style.left = target_x;
  drag_obj.drag_target.style.top = target_y;
  
  var p = Position.positionedOffset(drag_obj.drag_target);

  //  $("status").innerHTML = p[0] + "x" + p[1] + "<br>";
  
  if(p[0] - drag_base_x_ini > (drag_count_x+1)*delta_w){ // 右スクロール
      drag_count_x+=2;
      clay_min_x-=2;
      geo_min_x -= delta_w*2;
      clay_max_x-=2;
      geo_max_x -= delta_w*2;

      // 左に追加
      var fx = clay_min_x;
      var tx = clay_min_x+1;
      var fy = clay_min_y;
      var ty = clay_max_y;
      load_clay(fx,tx,fy,ty,geo_min_x,geo_min_y,"");

      // 右削除
      for (var i in clays) {
	  var c = clays[i];
	  if(c[5] > clay_max_x+2){
	      remove_one(c[0]);
	  }
      }
  }
  
  if(p[0] - drag_base_x_ini < (drag_count_x-1)*delta_w){ // 左スクロール
      drag_count_x-=2;
      clay_min_x+=2;
      geo_min_x += delta_w*2;
      clay_max_x+=2;
      geo_max_x += delta_w*2;

      // 右追加
      var fx = clay_max_x-1;
      var tx = clay_max_x;
      var fy = clay_min_y;
      var ty = clay_max_y;
      load_clay(fx,tx,fy,ty,geo_max_x-delta_w,geo_min_y,"");

      // 左削除
      for (var i in clays) {
	  var c = clays[i];
	  if(c[5] < clay_min_x-2){
	      remove_one(c[0]);
	  }
      }
  }
  updown_check(p);

  stopDefaultAndPropagation(event);
  return false;
}

if (window.addEventListener) { //for W3C DOM
  window.addEventListener("load", init_load, false);
} else if (window.attachEvent) { //for IE
  window.attachEvent("onload", init_load);
} else  {
  window.onload = init_load;
}

function updown_check(p){
  if(p[1] - drag_base_y_ini > (drag_count_y+1)*delta_h){ // 下スクロール
      drag_count_y+=2;
      clay_min_y-=2;
      geo_min_y-=delta_h*2;
      clay_max_y-=2;
      geo_max_y-=delta_h*2;

      // 上に追加
      var fx = clay_min_x;
      var tx = clay_max_x;
      var fy = clay_min_y;
      var ty = clay_min_y+1;
      load_clay(fx,tx,fy,ty,geo_min_x,geo_min_y,"");

      // 下削除
      for (var i in clays) {
	  var c = clays[i];
	  if(c[6] > clay_max_y+2){
	      remove_one(c[0]);
	  }
      }
  }
  if(p[1] - drag_base_y_ini < (drag_count_y-1)*delta_h){ // 上スクロール
      drag_count_y-=2;
      clay_min_y+=2;
      geo_min_y+=delta_h*2;
      clay_max_y+=2;
      geo_max_y+=delta_h*2;

      // 下追加
      var fx = clay_min_x;
      var tx = clay_max_x;
      var fy = clay_max_y-1;
      var ty = clay_max_y;
      load_clay(fx,tx,fy,ty,geo_min_x,geo_max_y-delta_h,"");

      // 上削除
      for (var i in clays) {
	  var c = clays[i];
	  if(c[6] < clay_min_y-2){
	      remove_one(c[0]);
	  }
      }
  }
}
function wheelhandle(delta) {
  var p = Position.positionedOffset(drag_obj.drag_target);
  if (delta < 0)
      p[1] -= 30;
  else
      p[1] += 30;
  drag_obj.drag_target.style.top = p[1];
  updown_check(p);
}

function wheel(event){
      var delta = 0;
      if (!event) /* For IE. */
	  event = window.event;
      if (event.wheelDelta) { /* IE/Opera. */
	  delta = event.wheelDelta/120;    
	  if (window.opera)    
	      delta = -delta;  
      } else if (event.detail) { /** Mozilla case. */
	  delta = -event.detail/3;        }   
      /** If delta is nonzero, handle it.
       * Basically, delta is now positive if wheel was scrolled up,  
       * and negative, if wheel was scrolled down.
       */   
      if (delta)
	  wheelhandle(delta);  
      if (event.preventDefault) {
	  event.preventDefault();  
      }    
      event.returnValue = false;
}
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;