'use strict';

/* Controllers */

function FrontPageCtrl($scope, $http) {
  $http({method: 'GET', url: '/data/model.json'}).
    success(function(data, status, headers, config) {
      $scope.data = data;
      createMap(data.sections[1].map);
      startCarousel();
    }).
    error(function(data, status, headers, config) {
      $scope.data = 'Error!'
    });


  function createMap(mapParam) {
    // circle options
    var circleMarkerOpt = {
      stroke: true,
      weight: 6,
      color: '#eee',
      fillColor: '#f60',
      fillOpacity: 1
    };
    // create map
    var map = L.mapbox.map('map', 'alexbirkett.map-t0fodlre', {zoomControl:false});
    map.setView([mapParam.lat, mapParam.lng], mapParam.zoomLevel);

    // add circles to map

    addMarkers();

    function randomBetween(min, max) {
      return (Math.random()*(max - min))+min;
    };

    function getRandomVisibleLatLng() {
        var bounds = map.getBounds();
        var lat = randomBetween(bounds.getNorth(), bounds.getSouth());
        var lng = randomBetween(bounds.getWest(), bounds.getEast());
        return [lat,lng];
    };
    // add startpoint
    var startPoint = L.circleMarker(mapParam.polyLine[0], circleMarkerOpt).addTo(map);
    // add polyline
    var polyLine = addPolyline([]);
    // begin twinkle the start point of polyline
    //pathEffect();

    function pathEffect() {
      twinkleCircle(startPoint, function() {
        animatePolyline(polyLine, mapParam.polyLine, pathEffect);
      });
    }

    function addPolyline(points) {
      var polyOption = {
        stroke: true,
        weight: 2,
        color: '#f60',
        dashArray: '3,4'
      };
      var polyLine = L.polyline(points, polyOption).addTo(map);
      return polyLine;
    }

    function addMarkers() {
      for (var i = 0; i < mapParam.numberOfTrackers; i++) {
        var latlng = getRandomVisibleLatLng();
        var circle= L.circleMarker(latlng, circleMarkerOpt).addTo(map);
        map.addLayer(circle);
      };
    }

    // twinkling effects func for a circle
    function twinkleCircle(circle, callback) {
      var radius = [
            10, 13, 16, 19,
            22, 21, 20, 19,
            18, 17, 16, 15,
            14, 13, 12, 11];
      var index = 0;
      var twinkleTimes = 0;
      var maxTime = 3;

      var intervalId = setInterval(function() {
        if (index == (radius.length - 1)) {
          index = 0;
          twinkleTimes++;
        } else {
          index++;
        }

        // when twinkled max time, stop
        if (twinkleTimes == maxTime) {
          clearInterval(intervalId); 
          callback();
        } else {
          circle.setRadius(radius[index]);
        }
      }, 100);
    }

    // animate polylines func
    function animatePolyline(polyLine, pointArr, callback) {
      var index = 0;
      var intervalId = setInterval(function() {
        index++;

        if (index == pointArr.length) {
          polyLine.spliceLatLngs(0, index);
          index = 0;
          clearInterval(intervalId);
          callback();
        } else {
          polyLine.addLatLng(pointArr[index]);
        }
      }, 700);
    }

  }

  function startCarousel() {
    $(function(){
      $('.carousel').carousel();
    });
  }

}


@@ -754,27 +754,113 @@
 ap%0A%0A    
-addMarkers(
+var markers = addMarkers();%0A%0A%0A    setInterval(function() %7B%0A          updateMarkers();%0A    %7D, 1000
 );%0A%0A    
@@ -1430,24 +1430,28 @@
 hEffect();%0A%0A
+%0A%0A  
     function
@@ -1462,24 +1462,24 @@
 hEffect() %7B%0A
-
       twinkl
@@ -1870,24 +1870,48 @@
 Markers() %7B%0A
+      var markers = %5B%5D;%0A
       for (v
@@ -2017,22 +2017,23 @@
     var 
-circle
+marker 
 = L.circ
@@ -2103,25 +2103,542 @@
 yer(
-circle);%0A      %7D;
+marker);%0A        markers.push(marker);%0A      %7D;%0A      return markers;%0A    %7D%0A%0A    function getDelta() %7B%0A          var random = (Math.random() - 0.5) * 2 / 1000;%0A          return random;%0A    %7D;%0A%0A    function moveMarker(marker) %7B%0A        var currentLatLng = marker.getLatLng();%0A        marker.setLatLng(%5BcurrentLatLng.lat + getDelta(), currentLatLng.lng + getDelta()%5D);%0A%0A    %7D%0A    function updateMarkers() %7B%0A        for (var i = 0; i %3C markers.length; i++) %7B%0A            var marker = markers%5Bi%5D;%0A            moveMarker(marker);%0A        %7D
 %0A   

Make trackers move randomly