/*
 * guimap.route.js
 * Route module
 */

/* jslint
 */

/* global $, guimap */

guimap.route = (function () {
  // ---------- MODULE SCOPE VARIABLES ----------
  var
    configMap = {
      routetool_html: String()
        + '<div style="margin-top:4px;"><div class="btn-toolbar"><div class="btn-group"><a class="btn btn-xs btn-default btnroutenew">새 항로</a><a class="btn btn-xs btn-default btnrouteopen">불러오기</a><a class="btn btn-xs btn-default btnroutesave">저장</a><a class="btn btn-xs btn-default btnroutecart">장바구니담기</a></div><div class="btn-group"><a class="btn btn-xs btn-primary btnroutesearch">해도검색</a></div></div></div>',
      routestatus_html: String()
        + '<div><div class="panel panel-default"><div id="routestatus" class="panel-body" style="width:333px;padding:0 10px;"><div class="row"><div class="col-sm-5">거리(m) <span class="lblroutedistance">0</span></div><div class="col-sm-7 text-right">좌표 <span class="lblpointercoord"></span></div></div></div></div></div>',
      settable_map: {
        center_lat: true,
        center_lng: true,
        zoom: true,
        show_coord: true
      },
      center_lat: 37.566535,
      center_lng: 126.977969,
      zoom: 5,
      show_coord: false
    },
    stateMap = {
      $append_target: null,
      map: null,
      option: null,
      mapmousemovelistener: null,
      routedistance: 0
    },
    jqueryMap = {},
    setJqueryMap, initMap, initModule, getMap, setCenter, setViewport, drawRoute,
    clearRoute, newRoute, addRoutePoint, searchRouteMap, cartRouteMap,
    poly, path, shapemarker, drawingshape;

  // ---------- UTILITY METHODS ----------

  updateRouteDistance = function () {
    var distance = 0;
    if (poly) {
      var path = poly.getPath();
      for (var i = 0; i < path.getLength()-1; i++) {
        distance += google.maps.geometry.spherical.computeDistanceBetween(path.getAt(i), path.getAt(i+1));
      }
    }
    stateMap.routedistance = distance / 1000;
    jqueryMap.$routestatus.find('.lblroutedistance').html(guimap.util.number_format(distance));
  }

  clearRoute = function () {
    if (path) {
      path.clear();
    }
    if (poly) {
      poly.setMap(null);
    }
    poly = null;
    path = null;
    if (shapemarker) { 
      for (var i = 0; i < shapemarker.length; i++) {
        shapemarker[i].setMap(null);
        shapemarker[i] = null;
      }
      shapemarker.length = 0;
      shapemarker = null
    }
    updateRouteDistance();
  }

  newRoute = function () {
    if (stateMap.option.hasOwnProperty('clearcallback')) {
      stateMap.option['clearcallback']();
    }

    clearRoute();
    drawingshape = true;

    path = new google.maps.MVCArray();
    shapemarker = [];
    poly = new google.maps.Polyline({ strokeWeight: 2, strokeColor: 'maroon', icons: [{ icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}, offset: '100%'}] });
    poly.setMap(stateMap.map);
    poly.setPath(path);

    google.maps.event.addListener(poly, 'click', onRouteMapPolyClick);
/*function(e){
      var idx = null;
      for (var i = 0; i < shapemarker.length; i++) {
        if (shapemarker[i] == this) idx = i;
      }
      if (idx !== null) path.removeAt(idx);
      shapemarker[idx].setMap(null);
      shapemarker.splice(idx,1);
  }*/

    stateMap.map.setOptions({ draggableCursor: 'crosshair' });
    google.maps.event.addListener(stateMap.map, 'click', onRouteMapClick);
  }

  addRoutePoint = function (latLng) {
    if (drawingshape === true) {
      path.insertAt(path.length, latLng);
      var marker = new google.maps.Marker({ position: latLng, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 3, strokeWeight: 2 }, map: stateMap.map, draggable: true });
      shapemarker.push(marker);
      google.maps.event.addListener(marker, 'click', function(e){
        var idx = null;
        for (var i = 0; i < shapemarker.length; i++) {
          if (shapemarker[i] == this) idx = i;
        }
        if (idx !== null) path.removeAt(idx);
        shapemarker[idx].setMap(null);
        shapemarker.splice(idx,1);
      });
      google.maps.event.addListener(marker, 'drag', function(e){
        var idx = null;
        for (var i = 0; i < shapemarker.length; i++) {
          if (shapemarker[i] == this) idx = i;
        }
        if (idx !== null) path.setAt(idx, this.getPosition());
      });
      updateRouteDistance();
    }
  };

  searchRouteMap = function() {
    if (stateMap.option.hasOwnProperty('searchcallback')) {
      stateMap.option['searchcallback'](poly);
    }
  };

  cartRouteMap = function() {
    if (stateMap.option.hasOwnProperty('cartcallback')) {
      stateMap.option['cartcallback'](poly);
    }
  };

  // ---------- DOM METHODS ----------
  setJqueryMap = function () {
    jqueryMap.$map = $('#map_canvas');
  };
  onRouteMapClick = function (e) {
    addRoutePoint(e.latLng);
  };
  onRouteMapPolyClick = function (e) {
    var point = e.latLng;
    var info = bdccGeoDistanceToPolyMtrs(poly, point);
    //alert("clicked on latlng:"+e.latLng+",segment="+info.index+",dist="+info.distance);
    poly.getPath().insertAt(info.index, point);

    var marker = new google.maps.Marker({ position: point, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 3, strokeWeight: 2 }, map: stateMap.map, draggable: true });
    shapemarker.splice(info.index, 0, marker);
    google.maps.event.addListener(marker, 'click', function(e){
      var idx = null;
      for (var i = 0; i < shapemarker.length; i++) {
        if (shapemarker[i] == this) idx = i;
      }
      if (idx !== null) path.removeAt(idx);
      shapemarker[idx].setMap(null);
      shapemarker.splice(idx,1);
    });
    google.maps.event.addListener(marker, 'drag', function(e){
      var idx = null;
      for (var i = 0; i < shapemarker.length; i++) {
        if (shapemarker[i] == this) idx = i;
      }
      if (idx !== null) path.setAt(idx, this.getPosition());
    });

    updateRouteDistance();
  };
  // ---------- EVENT HANDLERS ----------

  // ---------- PUBLIC METHODS ----------
  initModule = function(option) {
    stateMap.option = option || {};
    setJqueryMap();
    stateMap.map = guimap.map.getMap();

    return true;
  };

  startRoute = function() {
    var div = $('<div>').html(configMap.routetool_html);
    var controlDiv1 = div[0];
    stateMap.map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv1);

    var div = $('<div>').html(configMap.routestatus_html);
    var controlDiv2 = div[0];
    stateMap.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controlDiv2);

    jqueryMap.$routestatus = $('#routestatus');

    $(document).on('click', '.btnroutenew', function(e){ e.preventDefault(); newRoute();});
    $(document).on('click', '.btnrouteopen', function(e){ e.preventDefault(); alert('routeopen');});
    $(document).on('click', '.btnroutesave', function(e){ e.preventDefault(); alert('routesave');});
    $(document).on('click', '.btnroutecart', function(e){ e.preventDefault(); cartRouteMap();});
    $(document).on('click', '.btnroutesearch', function(e){ e.preventDefault(); searchRouteMap();});

    if (configMap.show_coord) {
      stateMap.mapmousemovelistener = google.maps.event.addListener(stateMap.map, 'mousemove', function(event) {
        var pointercoord = Geo.toLat(event.latLng.lat()) + ' ' + Geo.toLon(event.latLng.lng());
        jqueryMap.$routestatus.find('.lblpointercoord').html(pointercoord);
      });
      jqueryMap.$routestatus.find('.lblpointercoord').parent().show();
    } else {
      jqueryMap.$routestatus.find('.lblpointercoord').parent().hide();
    }

    newRoute();
  }

  endRoute = function() {
    if (drawingshape !== true) return false;

    drawingshape = false;

    clearRoute();
    stateMap.map.setOptions({ draggableCursor: 'null' });

    stateMap.map.controls[google.maps.ControlPosition.TOP_CENTER].clear();
    stateMap.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].clear();
    if (stateMap.mapmousemovelistener) google.maps.event.removeListener(stateMap.mapmousemovelistener);
  }

  return { 
    initModule: initModule,
    startRoute: startRoute,
    endRoute: endRoute,
  };
} ());