/*
 * 本著作係依據創用 CC 姓名標示-相同方式分享 2.5 台灣 授權條款進行授權。
 * 如欲瀏覽本授權條款之副本，請造訪 http://creativecommons.org/licenses/by-sa/2.5/tw/
 * 或寄信至 Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA。
 *
 * This work is licensed under the Creative Commons Attribution-Share Alike 2.5 Taiwan License.
 * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/2.5/tw/
 * or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
 *
 * Google Map 座標工具 1.1
 * http://app.essoduke.org/google:google-map-tool
 * http://app.essoduke.org/gmap/
 *
 * Changlog
 *  1.1 加入搜尋地圖及顯示地址功能
 *  1.0 release
 */
// 定義初始置中的座標值
var defaultCenter = {'x':'22.619958075292246', 'y':'120.31145095825195'};

// 宣告 obj 陣列
var obj = new Array();

// 定義 mymap 物件
var myMap = {
  init: function(){
    try{
      var gmap = $('#gmap')[0];
      var map = '';
      var geocoder = '';
      var point = new GLatLng(defaultCenter['x'], defaultCenter['y']);
      var myIcon = new GIcon(G_DEFAULT_ICON);
      myMap.map = new GMap2(gmap);
      myMap.map.addControl(new GLargeMapControl());
      myMap.map.addControl(new GMapTypeControl());
      myMap.map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
      myMap.map.addMapType(G_PHYSICAL_MAP);
      myMap.map.setCenter(point, 14);
      myMap.map.setUIToDefault();
      myMap.geocoder = new GClientGeocoder();
      /* 建立 map 物件的 click 事件以加入標記、標記訊息及座標清單 */
      GEvent.addListener(myMap.map, "click", function(overlay, point){
        if(point){
          var myMarker = new GMarker(point, {draggable: true});
          /* 使用 FlyDOM Plugni 建立 DOM */
          $('#xyz').createAppend(
            'li', { 'id': 'g-' + obj.length, 'class': 'marker' }, [
              'span', { 'class': 'latlng', 'onclick': 'myMap.highLightMarker(this, ' + obj.length + ')'}, myMap.getData(myMarker, false),
              'a', { 'href': '#', 'onclick': 'myMap.removeMarker(this, ' + obj.length + ')'}, '[刪除]',
              'address', null, null
              ]);
          myMap.map.addOverlay(myMap.addPointText(myMarker));
          myMap.addDrag(myMarker, point);
          /* 將座標儲存至 array */
          obj.push(myMarker);
          /* GClientGeocoder Class */
          myMap.geocoder.getLocations(point, myMap.getAddress);
        }
      });
    }catch(e){ alert('Google Map 初始化錯誤'); }
  },

  /* getData: 取得標記物件的座標 (template: 是否返回包含樣板的字串 [true|false]) */
  getData: function(thisPoint, template){
    if(thisPoint){
      try{
        // 格式化類型
        var formatted = $('input[name=formatted][checked]').val();
        var html = ('<div class="pointInfo"><h2>#LATLNG#</h2></div>');
        var v = (formatted == -1)? thisPoint.getLatLng().toString(): thisPoint.getLatLng().toUrlValue();
        var result = (template)? html.replace('#LATLNG#', v): v;
        return result;
      }catch(e){ alert(e); }
    }
  },
  /* getAddress: 取得標記物件的詳細地址並顯示於清單內 */
  getAddress: function(response){
    if(!response || response.Status.code != 200) {
      alert("Status Code:" + response.Status.code);
    }else{
      var place = response.Placemark[0];
      var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
      var myMarker = new GMarker(point, {draggable: true});
      var addr =  place.address;
      $('#xyz').children('li').eq(obj.length).find('address').html(addr);
      myMarker.openInfoWindowHtml(myMap.getData(myMarker, true) + '<p>' + addr + '</p>');
    }
  },
  /* addPointText: 建立標記物件的 infowindow */
  addPointText: function(thisPoint){
    GEvent.addListener(thisPoint, "click", function() {
      var thisObj = obj.indexOf(thisPoint);
      var addr = $('#xyz').children('li').eq(obj.length).find('address').html();
      $('#g-' + thisObj).children('.marker').css({'background':'#060', 'color':'#fff'});
      thisPoint.openInfoWindowHtml(myMap.getData(thisPoint, true) + '<p>' + addr + '</p>');
    });
    GEvent.addListener(thisPoint, "infowindowclose", function() {
      var thisObj = obj.indexOf(thisPoint);
      $('#g-' + thisObj).children('.marker').css({'background':'#fff', 'color':'#000'});
    });
    return thisPoint;
  },

  /* addDrag: 建立標記物件的拖曳事件 */
  addDrag: function(marker, point){
    /* 拖曳起始 */
    GEvent.addListener(marker, "dragstart", function() {
      var thisObj = obj.indexOf(marker);
      $('#g-' + thisObj).children('span').css({'background':'#060', 'color':'#fff'});
    });
    /* 拖曳 */
    GEvent.addListener(marker, "drag", function() {
      var thisObj = obj.indexOf(marker);
      $('#g-' + thisObj).children('span').html(myMap.getData(marker, false));
      marker.closeInfoWindow();
    });
    /* 拖曳結束 */
    GEvent.addListener(marker, "dragend", function(point) {
      var thisObj = obj.indexOf(marker);
      $('#g-' + thisObj).children('span').css({'background':'#fff', 'color':'#000'});
      myMap.geocoder.getLocations(point, myMap.getAddress);
    });
  },

  /* highLightMarker: 點選右側座標清單可同步顯示地圖上的標記 */
  highLightMarker: function(latobj, idx){
    if(obj[idx]){
      var marker = obj[idx];
      marker.openInfoWindow(myMap.getData(marker, true));
      $(latobj).css({'background':'#060', 'color':'#fff'});
    }
  },

  /* removeMarker: 移除點選的標記物件 */
  removeMarker: function(latobg, idx){
    if(obj[idx]){
      var marker = obj[idx];
      myMap.map.removeOverlay(marker);
      $('#g-' + idx).remove();
    }
  },

  /* formatData: 格式化右側座標清單 */
  formatData: function(){
    var $xyz = $('#xyz').children('li');
    for(var i=0; i<obj.length; i++){
      var v = $xyz.eq(i + 1).find('span');
      v.html(myMap.getData(obj[i], false));
    }
  },

  /* data2JSON: 將座標清單轉換為 JSON */
  data2JSON: function(){
    var $xyz = $('#xyz');
    var template = 'var latlng = {\n#LIST#\n};';
    var latlng = symbol = '';
    var i = 0;
    $xyz.find('li:not(.hide)').each(function(){
      var txt = $(this).children('span').html().replace(/(\(|\)|\s| )+/gi, '');
      var data = txt.split(',');
      symbol = (latlng == '')? '': ',\n';
      latlng += symbol + '\'' + i + '\': {\'x\':\'' + data[0] + '\', \'y\':\'' + data[1] + '\'}';
      i++;
    });
    $('#json').html('<pre>' + template.replace('#LIST#', latlng) + '</pre>');
  },

  /* release: 釋放資源 */
  release: function(){GUnload();}
};

/* 建立 google map、綁定事件  */
$(function(){
  if(GBrowserIsCompatible()){ myMap.init(); }
  $('#generateJson').click(function(){ myMap.data2JSON(); });
  $('input[name=formatted]').click(function(){ myMap.formatData(); });
});

/* 釋放資源 */
$(window).unload(function(){ if(GBrowserIsCompatible()){ myMap.release(); } });