start_icon = new GIcon();
start_icon.iconSize = new GSize(15, 34);
start_icon.shadowSize = new GSize(19, 47);
start_icon.iconAnchor = new GPoint(19, 20);
start_icon.image = "/img/map/start_icon.png";
start_icon.iconAnchor = new GPoint(6, 20);
start_icon.infoWindowAnchor = new GPoint(5, 1);

end_icon = new GIcon();
end_icon.iconSize = new GSize(15, 34);
end_icon.shadowSize = new GSize(19, 47);
end_icon.iconAnchor = new GPoint(19, 20);
end_icon.image = "/img/map/end_icon.png";
end_icon.iconAnchor = new GPoint(6, 20);
end_icon.infoWindowAnchor = new GPoint(5, 1);

function getUrlVars() { 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for(var i = 0; i < hashes.length; i++) { 
        hash = hashes[i].split('='); 
        vars.push(hash[0]); 
        vars[hash[0]] = hash[1]; 
    } 
    return vars;
}

/* ================================================================ */

function CreateCommentIcon(target, map_obj, map) {
  var lat = 0;
  var lng = 0;

  //var default_x = target.offset().left();
  //var default_y = target.offset().top();

  var CommentIcon = document.createElement("div");
  var img = document.createElement('img');
  img.src = "/img/i18n/ja/main/item/comment_by_drag.gif";
  CommentIcon.appendChild(img);
  target.append(CommentIcon);
  var CommentIconObj = new GDraggableObject(CommentIcon);

  var openInfoWindow = function(latlng) {
    var id = map_id;
    var html = "<form id='new_comment' action='/comment/create/" + id + "' action='' method=post enctype='multipart/form-data'>"
      + "<textarea name='comment'></textarea><br />"
      + "<input type='file' name='photo' /><br />"
      + "<input type='hidden' name='latitude' value='" + latlng.lat() + "' />"
      + "<input type='hidden' name='longitude' value='" + latlng.lng() + "' />"
      + "<input type='submit' value='投稿' />"
      + "</form>";
    map.openInfoWindowHtml(latlng, html);
  };
  

  GEvent.addListener(CommentIconObj,"dragend", function(event) {
    var $obj = $(map_obj);
    var $drag_obj =$(CommentIcon);
    var drag_obj_x = $drag_obj.offset().left + 25;
    var drag_obj_y = $drag_obj.offset().top + 2;
    //alert($obj.offset().left + ' >> ' + event.pageX + ' >> ' + ($obj.offset().left + $obj.width()));
    //alert($obj.offset().top + ' >> ' + event.pageY + ' >> ' + ($obj.offset().top + $obj.height()));
    if (drag_obj_x > $obj.offset().left
        && drag_obj_x < ($obj.offset().left + $obj.width())
        && drag_obj_y > $obj.offset().top
        && drag_obj_y < ($obj.offset().top + $obj.height())){
      var x = drag_obj_x - $obj.offset().left;
      var y = drag_obj_y - $obj.offset().top;
      //alert(map.fromContainerPixelToLatLng(new GPoint(x, y)));
      var latlng = map.fromContainerPixelToLatLng(new GPoint(x, y));
      openInfoWindow(latlng);
    }
    target.html('');
    CreateCommentIcon(target, map_obj, map);
  });
}

/* ================================================================ */

function createMarker(point,html) {
   var marker = new GMarker(point);
   GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(html);
   });
   return marker;
};

function adjustView(map, geodata, zoom){
  zoom = zoom || 0;
  // adjust rectsize and center
  var min_latitude = geodata['min_latitude'];
  var min_longitude = geodata['min_longitude'];
  var max_latitude = geodata['max_latitude'];
  var max_longitude = geodata['max_longitude'];
  var center_latitude = geodata['center_latitude'];
  var center_longitude = geodata['center_longitude'];
  
  var rectObj = new GLatLngBounds(new GLatLng(min_latitude,min_longitude)
                                  ,new GLatLng(max_latitude,max_longitude));
  map.setCenter(new GLatLng(center_latitude, center_longitude)
		,map.getBoundsZoomLevel(rectObj) + zoom);
}

function showline(map, geodata){
  var encodedPoints = geodata['encoded_points'];
  var encodedLevels = geodata['encoded_levels'];

  var encodedPolyline = new GPolyline.fromEncoded({
    color: "#FF4422",
    weight: 5,
    opacity: 0.8,
    points: encodedPoints,
    levels: encodedLevels,
    zoomFactor: 32,
    numLevels: 4
  });
  map.addOverlay(encodedPolyline);
  
}

function showStart(map, geodata){
  var point_start = new GMarker(new GLatLng(geodata['start_latitude'], geodata['start_longitude']), start_icon);
  map.addOverlay(point_start);
}

function showEnd(map, geodata){
  var point_end   = new GMarker(new GLatLng(geodata['end_latitude'], geodata['end_longitude']), end_icon);
  map.addOverlay(point_end);
}
function showIcons(map, geodata){
  showStart(map, geodata);
  showEnd(map, geodata);
}

function showStreetView(map, geodata){
  var start = new GLatLng(geodata['start_latitude'], geodata['start_longitude']);
  var end = new GLatLng(geodata['end_latitude'], geodata['end_longitude']);
  
  var opts = {
    mainContent : "MAP",
    controlStatus : "NORMAL",
    latlng : start
  };

  var extStreetviewControl = new ExtStreetviewControl(opts);
  /*
  var pov = {yaw: extStreetviewControl.computeAngle_(start, end),
             pitch : -10}
  extStreetviewControl.setLocationAndPOV(start, pov);
  */
  map.addControl(extStreetviewControl);
  map.addOverlay(new GStreetviewOverlay());
}

function showExtMapTypes(map){
  // Add ExtMapTypeControl with posRight option
  map.addControl(new ExtMapTypeControl( { posRight: 210, showTraffic: true, showTrafficKey: true, showMore: true } ));
}

function showNewCommentIcon(map_obj, map){
  CreateCommentIcon($("#add_comment"), map_obj, map);
}

focus_comment = new Object();

function showComments(map){
  var url = '/comment/list_json/' + map_id;
  $.getJSON(url, function(data) {
    for (var i = 0; i < data.length; i = i + 1){
        var callback;
        var marker;
        if (data[i]['has_photo']){
            var img_url = '/img/comment/comment_'
                + data[i]['id'] + '.' + data[i]['photo_format'];
            var marker_url = '/img/comment/comment_'
                + data[i]['id'] + '.marker.png';
            var marker_shadow_url = '/img/map/photo_marker.shadow.png';
            var icon = new GIcon();
            icon.image = marker_url;
            icon.shadow = marker_shadow_url;
            icon.iconSize = new GSize(70, 77);
            icon.iconAnchor = new GPoint(20, 77);
            icon.infoWindowAnchor = new GPoint(20, 77);
            marker = new GMarker(new GLatLng(data[i]['latitude'],
                                                 data[i]['longitude']),
                                     icon);
            callback = function(marker, username, comment, img_url){
                return function() {
                    marker.openInfoWindowHtml('<h4>' + username + '</h4>'
                                              + '<img src="' + img_url + '" height="200" " />'
                                              + '<p>' + comment + '</p>');
                };
            }(marker, data[i]['username'], data[i]['comment'], img_url);
        }else{
            marker = new GMarker(new GLatLng(data[i]['latitude'], data[i]['longitude']));
            callback = function(marker, username, comment){
                return function() {
                    marker.openInfoWindowHtml('<h4>' + username + '</h4>' + '<p>' + comment + '</p>');
                };
            }(marker, data[i]['username'], data[i]['comment']);
        }
        GEvent.addListener(marker, 'click', callback);
        map.addOverlay(marker);
        focus_comment[data[i]['id']] = function(gpoint, callback){
            return function(){
                map.setCenter(gpoint);
                callback();
            };
        }(new GLatLng(data[i]['latitude'], data[i]['longitude']), callback);
    }
  });
}

function showGmap(target, geodata){
    if(GBrowserIsCompatible()) {
        var map = new GMap2(target);
        Gmaps[target.id] = map;
    
        if(navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPod") != -1){
            map.setUIToDefault(); 
            map.setMapType(G_NORMAL_MAP);
            adjustView(map, geodata);
            showline(map, geodata);
            showIcons(map, geodata);
        }else{
            /*
              map.addControl(new GSmallMapControl());
              map.addControl(new GMapTypeControl());
              map.addControl(new GOverviewMapControl());
            */
            map.setUIToDefault(); 
            map.setMapType(G_HYBRID_MAP);
            adjustView(map, geodata);
            showline(map, geodata);
            showIcons(map, geodata);
            //showStreetView(map, geodata);
            showExtMapTypes(map);
            if ($.cookie('username'))
                showNewCommentIcon(target, map);
            if (typeof map_id !== 'undefined'){
                showComments(map);
            }
            var params = getUrlVars();
            var comment_id = params['comment_id'];
            if (comment_id){
                setTimeout(function() {
                    focus_comment[comment_id]();
                }, 3000);
            }
        }
    }
}