var search_url = '';
var img_url = '';
var map = null;
var markers = [];
var circle = null;
var infowindow = null;
var loading = false;

$(document).ready(function(){
  var map_canvas = $('#map_canvas');
  search_url = map_canvas.attr('search_url');
  img_url = map_canvas.attr('img_url');

  var myOptions = {
    "zoom": parseInt(map_canvas.attr('zoom')),
    "center": new google.maps.LatLng(map_canvas.attr('lat'), map_canvas.attr('lng')),
    "scaleControl": true,
    "mapTypeId": google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(map_canvas.get(0), myOptions);

  google.maps.event.addListener(map, 'dragend', reloadItems);
  google.maps.event.addListener(map, 'zoom_changed', reloadItems);

  $("#loading").bind("ajaxSend", function(){
    $(this).show();
  }).bind("ajaxComplete", function(){
    $(this).hide();
  });

  // ☆[当日宿泊可]チェックをON／OFFしたら再読み込みします
  $('#today_check').change(function(){
    reloadItems();
  });

  reloadItems();
});

function reloadItems(exparam) {
  if (loading == true) return;
  loading = true;

  $.each(markers, function(i, marker){
    marker.setMap(null);
  });
  markers = [];
  if (circle != null) {
    circle.setMap(null);
  }
  $('#items').html('');

  var latlng = map.getCenter();
  var range = (map.getZoom() > 14 ? 1000 : 2000);
  var circle_option = {
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.05,
    map: map,
    center: latlng,
    radius: range
  };

  var option = {
    "lat": latlng.lat(),
    "lng": latlng.lng(),
    "range": (range / 1000.0),
    "order": "",
    "count": 100,
    "type": "ajax"
  };

  // ☆[当日宿泊可]チェックがONの場合は宿泊開始日を設定
  if ($('#today_check').attr('checked') == true) {
    var today = new Date();
    option['stay_date'] = today.getFullYear() + ('00' + (today.getMonth() + 1)).substr(-2, 2) + ('00' + today.getDate()).substr(-2, 2);
  }

  if (typeof exparam != 'undefined') {
    $.each(exparam.split('&'), function(i, keyvalue){
      var pieces = keyvalue.split('=', 2)
      option[pieces[0]] = pieces[1];
    });

    circle_option.center = new google.maps.LatLng(option.lat, option.lng);
  }

  circle = new google.maps.Circle(circle_option);

  $.get(search_url, option, function(data) {
    $('#items').html(data);

    $.each($('.item'), function(i, value){
      var latlng = new google.maps.LatLng($(this).attr('lat'), $(this).attr('lng'));
      var title = $(this).attr('title');

      var marker = new google.maps.Marker({
        "position": latlng,
        "map": map,
        "title": title,
        "icon": img_url + 'number_' + (i + 1) + '.png'
      });

      marker['balloon'] = $(this).find('.balloon').html();

      marker.item_offset = $(this).offset().top
      markers.push(marker);
    });

    $.each(markers, function(i, marker){
      google.maps.event.addListener(marker, 'click', function(){
        if (infowindow != null) {
          infowindow.close();
          infowindow = null;
        }

        var content = '<div class="balloon">' + this.balloon.replace(/javascript:jump\(0\);/gi, 'javascript:jump(' + marker.item_offset + ');'); + '</div>';
        
        infowindow = new google.maps.InfoWindow({
          "position": this.getPosition(),
          "content": content
        });
        infowindow.open(map, this);
      });
    });

    loading = false;
  });
}

function jump(offset) {
  $('html').animate({"scrollTop": offset}, 800, 'swing'); 
}