var map;
var timerID;
var chara = new Array("A", "B", "C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
var rangeCatch,rangeStart;

// データ最大数
var datamax = 50;
var koukokumax = 10;
var htmls = new Array(datamax);
var urls = new Array(koukokumax);
var details = new Array(datamax+koukokumax);

window.onload = function() {
  
  childrenClose();
  $("searching").style.visibility = 'hidden';
  $("information").style.visibility = 'hidden';
  
  $("area_select").value = lng + ":" + lat;
  
  map = new GMap2($("gmap"));  
  map.setCenter(new GLatLng(lat, lng), 14);
  map.addControl(new GScaleControl());
  map.enableContinuousZoom();
  //map.enableScrollWheelZoom();
  gGeo = new GClientGeocoder();
  
  $$("h3.Bgenre").each(function(obj){
    Event.observe(obj, "mouseover", overbig, false);
    Event.observe(obj, "mouseout", outbig, false);
    Event.observe(obj, "click", clickbig, false);
  });
  
  $$("li.Sgenre").each(function(obj){
    Event.observe(obj, "mouseover", oversmall, false);
    Event.observe(obj, "mouseout", outsmall, false);
    Event.observe(obj, "mousedown", downsmall, false);
    Event.observe(obj, "mouseup", upsmall, false);
    Event.observe(obj, "click", clicksmall, false);
  });
  
  Event.observe($("geoName"), "keydown", function pressReturn(event){
    if (event.keyCode == Event.KEY_RETURN) searchPoint();
  }, false);
  Event.observe($("submit"), "click", searchPoint, false);
  
  // 再検索ボタン
  Event.observe($("research"), "mouseover", function(){
    $("research").style.backgroundPosition = '1px 1px';
  }, false);
  Event.observe($("research"), "mousedown", function(){
    $("research").style.backgroundPosition = '2px 2px';
  }, false);
  Event.observe($("research"), "mouseout", function(){
    $("research").style.backgroundPosition = '0 0';
  }, false);
  Event.observe($("research"), "mouseup", function(){
    $("research").style.backgroundPosition = '0 0';
  }, false);
  //Event.observe($("research"), "click", research, false);
  
  // ズームコントローラーのクリックイベント
  Event.observe($("zoom"), "click", function(event){
    var zoomlevel = Math.round((Event.pointerX(event) - 435) / 28) + 10;
    map.setZoom(zoomlevel);
    $("range").style.left = ((zoomlevel - 10) * 28) + 'px';
  }, false);
  
  // ズームレンジのドラッグイベント
  Event.observe($("range"), "mousedown", function(event){
    rangeCatch = true;
    rangeStart = Event.pointerX(event);
  }, false);
  
  Event.observe($("zoom"), "mouseup", function(){
    if(rangeCatch){
      rangeCatch = false;
      map.setZoom(($("range").style.left.replace(/px$/, "") / 28) + 10);
    }
  }, true);
  
  Event.observe($("toolbar"), "mousemove", moveRange, false);
  
  if(defaultsearch){
    research();
  }
  
  // 移動開始イベント
  GEvent.addListener(map, "movestart", function(){clearTimeout(timerID); }, false);
  
  // 移動終了イベント
  GEvent.addListener(map, "moveend", researchAd, false);
}

// カーソル移動
function moveRange(event){
  if(rangeCatch == true){
    rangeLeft = (((map.getZoom() - 10) * 28)) + Event.pointerX(event) - rangeStart;
    
    if(rangeLeft < 0) rangeLeft = 0;
    if(rangeLeft > 252) rangeLeft = 252;
    
    var roundLeft = (Math.round(rangeLeft / 28)) * 28;
    $("range").style.left = roundLeft + 'px';
  }
}

// ジャンル操作
function overbig(event){
  var eID = Event.element(event);
  $(eID.id).style.textDecoration = 'underline';
}
function outbig(event){
  var eID = Event.element(event);
  $(eID.id).style.textDecoration = '';
}
function clickbig(event){
  var eID = Event.element(event);
  
  if($(eID.id+'_children').style.display == 'none'){
    childrenClose();
    $(eID.id+'_children').style.display = '';
    $(eID.id).style.backgroundPosition = '0 -18px';
  } else {
    $(eID.id+'_children').style.display = 'none';
    $(eID.id).style.backgroundPosition = '0 0';
  }
}
function childrenClose(){
  $$("div.children").each(function(obj){
    $(obj.id).style.display = 'none';
  });
  $$("h3.Bgenre").each(function(obj){
    $(obj.id).style.backgroundPosition = '0 0';
  });
}
function oversmall(event){
  var eID = Event.element(event);
  $(eID.id).style.backgroundPosition = '0 -17px';
  $(eID.id).style.textDecoration = 'underline';
}
function outsmall(event){
  var eID = Event.element(event);
  $(eID.id).style.backgroundPosition = '0 0';
  $(eID.id).style.textDecoration = '';
}
function downsmall(event){
  var eID = Event.element(event);
  $(eID.id).style.backgroundPosition = '0 -34px';
}
function upsmall(event){
  var eID = Event.element(event);
  $(eID.id).style.backgroundPosition = '0 -17px';
}
function clicksmall(event){
  var eID = Event.element(event);
  var code = eID.id.replace(/Sgenre_/,"");
  var genre;
  
  for(var i=0; i<$("genre_select").options.length; i++){
    if($("genre_select").options[i].value.replace(/Sgenre_/,"") == code){
      $("genre_select").options[i].selected = true;
      genre = $("genre_select").options[i].innerHTML;
      break;
    }
  }
  
  searchshop(code,genre);
}

function researchAd(){
  timerID = setTimeout(function(){ researchAd2() }, 1000);
}


function researchAd2(){
  
  var x = (map.getCenter()).lng();
  var y = (map.getCenter()).lat();
  
  $("area_select").value = x + ":" + y;
  
  var code,genre;
  for(var i=0; i<$("genre_select").options.length; i++){
    if($("genre_select").options[i].selected){
      code = $("genre_select").options[i].value.replace(/Sgenre_/,"");
      genre = $("genre_select").options[i].innerHTML;
      break;
    }
  }
  
  searchshop(code,genre);
}

function searchshop(code,genre){
  var Mcode;
  $$("li.Sgenre").each(function(obj){
    if(obj.id == "Sgenre_"+code){
      Mcode = $(obj.id).parentNode.id.replace(/Mgenre_/g,"");
    }
  });
  
  $("searching").style.visibility = 'visible';
  $("information").style.visibility = 'hidden';
  
  regeocode(genre);
  
  var x = Math.round((map.getCenter()).lng() * 10000) / 10000;
  var y = Math.round((map.getCenter()).lat() * 10000) / 10000;
  var rectObj = map.getBounds();
  var ne = rectObj.getNorthEast();
  var eastpoint = new GLatLng(y,ne.lng());
  var centerpoint = new GLatLng(y,x);
  var radius = Math.floor(eastpoint.distanceFrom(centerpoint));
  
  var xrange = Math.round(rectObj.toSpan().lng() * 10000) / 10000;
  var yrange = Math.round(rectObj.toSpan().lat() * 10000) / 10000;
  
  map.clearOverlays();
  $("result").innerHTML = "";
  
  var koukokujson = 'http://112.78.114.111/dokoiku/koukoku.php?x='+x+'&y='+y+'&pageid=chizulla&callback=koukokulist&keyword='+encodeURI(genre);
  var scriptTag = document.createElement("script");
  scriptTag.setAttribute("type", "text/javascript");
  scriptTag.setAttribute("src", koukokujson);
  document.getElementsByTagName("head").item(0).appendChild(scriptTag);
  
  if(Mcode > 0){
    var shopjson = 'http://112.78.114.111/dokoiku/shoplist.php?g1='+Mcode+'&g2='+code+'&x='+x+'&y='+y+'&xrange='+xrange+'&yrange='+yrange+'&format=json&callback=shoplist';
    
    var scriptTag = document.createElement("script");
    scriptTag.setAttribute("type", "text/javascript");
    scriptTag.setAttribute("src", shopjson);
    document.getElementsByTagName("head").item(0).appendChild(scriptTag);
  } else {
    //var shopjson = 'http://api.doko.jp/extlightv1/getShopList.do?method=getShopList&key=4717c7ae2d0458766258b888da8e243d&pagesize=20&genre='+code+'&lat_jgd='+y+'&lon_jgd='+x+'&order=distance&format=json&callback=shoplist&radius='+radius;
    $("searching").style.visibility = 'hidden';
  }
  
  var mobileurl = 'http://mob.chizulla.jp/'+code+'/13/'+y+'/'+x;
  $("qr").innerHTML = '<a href="'+mobileurl+'" target="_blank"><img src="http://chart.apis.google.com/chart?cht=qr&chl='+encodeURI(mobileurl)+'&chs=140x140" width="140" height="140" alt="地図羅モバイル" /></a>';
}

function koukokulist(data){
  var shops = data.results.shops.shop;
  var i = 0;
  var j = 0;
  
  var table = '<table cellpadding="0" cellspacing="0" border="0" class="listtable">';
  table += '<tr><td class="tag">オススメ情報[PR]</td></tr>';
  
  while(shops[i]){
    if(shops[i].positionX){
      var adTitle = shops[i].adTitle;
      var adText1 = shops[i].adText1;
      var adText2 = shops[i].adText2;
      var adUrl = shops[i].adUrl;
      var picUrl = shops[i].picUrl;
      var positionX = shops[i].positionX;
      var positionY = shops[i].positionY;
      
      var key = (positionY*1000)+':'+(positionX*1000);
      
      urls[key] = adUrl;
      details[key] = '<strong><a href="'+adUrl+'" target="_blank">'+adTitle+'</a></strong><br />'+adText1+adText2+'<br /><a href="'+adUrl+'" target="_blank"><img src="'+picUrl+'" /></a>';
      
      var Number;
      if(j < 9){Number = '0'+(j + 1);} else {Number = j + 1;}
      var pngs = "http://www.chizulla.jp/pin/red_"+Number+".png";
      
      var marker = new PdMarker(new GLatLng(positionY, positionX));
      marker.setTooltip('<div class="info">'+adTitle+'</div>');
      marker.ttLeft = 50;
      marker.ttTop = 150;
      map.addOverlay(marker);
      marker.setImage(pngs);
      
      // クリックしたらジャンプ
      GEvent.addListener(marker, "click", function(markerObj) {
        var key = (markerObj.y*1000)+':'+(markerObj.x*1000);
        window.open(urls[key], null);
      });
        
      // マウスオーバーで詳細を表示
      GEvent.addListener(marker, "mouseover", function(markerObj) {
        var key = (markerObj.y*1000)+':'+(markerObj.x*1000);
        $("detailp").innerHTML = details[key];
      });
      
      if(j<3){
        table += '<tr class="pointer" onclick="jumpURL(\''+adUrl+'\')"><td><span class="marker" style="background-image: url('+pngs+')"></span><a href="'+adUrl+'" target="_blank">'+adTitle+'</a><br />'+adText1+adText2+'</td></tr>';
      }
      
      j++;

    }
    
    i++;
  }
  
  table += '</table>';
  $("adresult").innerHTML = table;
}

function shoplist(data){
  htmls.clear();
  
  var shops = data.results.shops.shop;
  var i = 0;
  var j = 0;
  var lastX,lastY;
  
  var table = '<table cellpadding="0" cellspacing="0" border="0" class="listtable">';
  table += '<tr><td class="tag">名前</td><td class="tag" style="width: 100px;">種別</td><td class="tag" style="width: 80px;">電話番号</td><td class="tag">住所</td></tr>';
  
  if(data.results.totalcount > 0){
    while(shops[i]){
      
      var mcode = shops[i].code;
      var mname = shops[i].name;
      var my = shops[i].lat_jgd;
      var mx = shops[i].lon_jgd;
      var maddress = shops[i].addr.replace(/ |　/g,"");
      var mtel = shops[i].tel;
      var mgenre = shops[i].genres.genre[0].genre2.name;
      
      var key = (my*1000)+':'+(mx*1000);
      
      if(lastX == mx && lastY == my){
        table += '<tr><td><span class="no_marker"></span><a href="http://www.chizulla.jp/shop/'+encodeURI(mname+':'+mtel)+'.html" target="_blank">'+mname+"</a></td><td>"+mgenre+"</td><td>"+mtel+'</td><td class="next">&nbsp;</td></tr>';
      } else {
        
        htmls[key] = "<br />\n";
        details[key] = '<strong>'+mname+'</strong><br />'+maddress+'<br />TEL:'+mtel;
        
        if(shops[i].images.image){
          details[key] += '<br /><img src="'+shops[i].images.image[0].src+'" height="60" />';
        }
        
        var Lower;
        if(chara[j]){Lower = chara[j].toLowerCase();} else {Lower = "";}
        var pngs = "http://www.chizulla.jp/pin/blue_"+Lower+".png";
        
        var marker = new PdMarker(new GLatLng(my, mx));
        marker.setTooltip('<div class="info">'+mname+'</div>');
        marker.ttLeft = 50;
        marker.ttTop = 150;
        map.addOverlay(marker);
        marker.setImage(pngs);
        
        // クリックしたら情報を表示
        GEvent.addListener(marker, "click", function(markerObj) {
          var key = (markerObj.y*1000)+':'+(markerObj.x*1000);
          openinfo(key);
        });
        
        // マウスオーバーで詳細を表示
        GEvent.addListener(marker, "mouseover", function(markerObj) {
          var key = (markerObj.y*1000)+':'+(markerObj.x*1000);
          $("detailp").innerHTML = details[key];
        });
        
        table += '<tr><td><span class="marker" style="background-image: url('+pngs+')"></span><a href="http://www.chizulla.jp/shop/'+encodeURI(mname+':'+mtel)+'.html" target="_blank">'+mname+"</a></td><td>"+mgenre+"</td><td>"+mtel+'</td><td>'+maddress+"</td></tr>";
        j++;
      }
      
      htmls[key] += '<span id="name"><a href="http://www.chizulla.jp/shop/'+encodeURI(mname+':'+mtel)+'.html" target="_blank">' + mname + "</a></span><br />\n";
      htmls[key] += maddress + "<br />\n";
      htmls[key] += mtel + "<br />\n";
      if(shops[i].images.image){
        htmls[key] += '<a href="http://www.chizulla.jp/shop/'+encodeURI(mname+':'+mtel)+'.html" target="_blank"><img src="'+shops[i].images.image[0].src+'" height="60" /></a>' + "<br />\n";
      }
      htmls[key] += "<br />\n";
      
      lastX = mx;
      lastY = my;
      i++;
    }
  }
  
  if(i == 0){
    table += '<tr><td colspan="4">情報がありません</td></tr>';
  }
  
  table += '</table>';
  $("result").innerHTML = table;
  
  $("searching").style.visibility = 'hidden';
}

// 逆ジオコード
function regeocode(genre){
  geocoder = new GClientGeocoder();
  var x = (map.getCenter()).lng();
  var y = (map.getCenter()).lat();
  
  var latlng = new GLatLng(y, x);
  
  geocoder.getLocations(latlng, function dispResult(addresses){
    if (addresses.Status.code == G_GEO_SUCCESS){
      $("h1").innerHTML = addresses.Placemark[0].address.replace(/^日本/,"").replace(/Japan/,"").replace(/,/g,"").replace(/Prefecture/,"") + "周辺付近の"+genre;
    }
  });
}

function openinfo(key){
  $("information_main").innerHTML = htmls[key];
  $("information").style.visibility = 'visible';
}

function closeinfo(){
  $("information").style.visibility = 'hidden';
}

function closepr(){
  $("pr_box").style.visibility = 'hidden';
}

// 再検索
function research(){
  var code,genre;
  for(var i=0; i<$("genre_select").options.length; i++){
    if($("genre_select").options[i].selected){
      code = $("genre_select").options[i].value.replace(/Sgenre_/,"");
      genre = $("genre_select").options[i].innerHTML;
      break;
    }
  }
  
  if(code){
    searchshop(code,genre);
  }
}

// 表示場所検索
function searchPoint() {
  var address = $("geoName").value;
  gGeo.getLatLng(address, function checkGeo(point) {
 　 if (point) {
      map.setCenter(point, 15);
 　 }
 });
}

function jumpURL(url){
  //window.open(url, null);
  document.location = url;
}

function print_r(object){
  for (var i in object){
    $("result").innerHTML += (i +" => "+object[i] + "<br />");
  }
}