var gmap = document.getElementById('map');
var map;
var settings = {
  home: {
    latitude: 43.92025,
    longitude: 12.90030
  },
  icon_url: '',
  zoom: 16
}

var coords = new google.maps.LatLng(settings.home.latitude, settings.home.longitude);

var options = {
  zoom: settings.zoom,
  scrollwheel: false,
  center: coords,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: false,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.DEFAULT
  },
  overviewMapControl: true,
  styles: [{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{
      "color": "#e9e9e9"
    }, {
      "lightness": 17
    }]
  }, {
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [{
      "color": "#f5f5f5"
    }, {
      "lightness": 20
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [{
      "color": "#ffffff"
    }, {
      "lightness": 17
    }]
  }, {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#ffffff"
    }, {
      "lightness": 29
    }, {
      "weight": 0.2
    }]
  }, {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [{
      "color": "#ffffff"
    }, {
      "lightness": 18
    }]
  }, {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [{
      "color": "#ffffff"
    }, {
      "lightness": 16
    }]
  }, {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [{
      "color": "#f5f5f5"
    }, {
      "lightness": 21
    }]
  }, {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [{
      "color": "#dedede"
    }, {
      "lightness": 21
    }]
  }, {
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#ffffff"
    }, {
      "lightness": 16
    }]
  }, {
    "elementType": "labels.text.fill",
    "stylers": [{
      "saturation": 36
    }, {
      "color": "#333333"
    }, {
      "lightness": 40
    }]
  }, {
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [{
      "color": "#f2f2f2"
    }, {
      "lightness": 19
    }]
  }, {
    "featureType": "administrative",
    "elementType": "geometry.fill",
    "stylers": [{
      "color": "#fefefe"
    }, {
      "lightness": 20
    }]
  }, {
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [{
      "color": "#fefefe"
    }, {
      "lightness": 17
    }, {
      "weight": 1.2
    }]
  }]
};

map = new google.maps.Map(gmap, options);

var end = new google.maps.Marker({
  position: new google.maps.LatLng(43.92127, 12.89816),
  map: map,
  icon: {
    url: 'http://www.supah.it/dribbble/020/end.png?v=3',
    origin: new google.maps.Point(0, 0)
  },
  draggable: false
});

var start = new google.maps.Marker({
  position: new google.maps.LatLng(43.92000, 12.89788),
  map: map,
  icon: {
    url: 'http://www.supah.it/dribbble/020/start.png?v=3',
    origin: new google.maps.Point(0, 0)
  },
  draggable: false
});

var info = new google.maps.InfoWindow({
  content: settings.text
});

var runningCoords = [{
  lat: 43.92003,
  lng: 12.89786
}, {
  lat: 43.91992,
  lng: 12.89796
}, {
  lat: 43.91937,
  lng: 12.89887
}, {
  lat: 43.91929,
  lng: 12.89890
}, {
  lat: 43.91928,
  lng: 12.89904
}, {
  lat: 43.91906,
  lng: 12.89927
}, {
  lat: 43.91883,
  lng: 12.89973
}, {
  lat: 43.91785,
  lng: 12.90166
}, {
  lat: 43.91868,
  lng: 12.90242
}, {
  lat: 43.91875,
  lng: 12.90252
}, {
  lat: 43.91878,
  lng: 12.90262
}, {
  lat: 43.91886,
  lng: 12.90261
}, {
  lat: 43.91959,
  lng: 12.90254
}, {
  lat: 43.92024,
  lng: 12.90243
}, {
  lat: 43.92114,
  lng: 12.90215
}, {
  lat: 43.92230,
  lng: 12.90177
}, {
  lat: 43.92244,
  lng: 12.90163
}, {
  lat: 43.92251,
  lng: 12.90137
}, {
  lat: 43.92236,
  lng: 12.90056
}, {
  lat: 43.92205,
  lng: 12.89938
}, {
  lat: 43.92133,
  lng: 12.89819
}];

/* No Animation */
/*
var runPath = new google.maps.Polyline({
  path: runningCoords,
  geodesic: true,
  strokeColor: '#58a7e2',
  strokeOpacity: 1.0,
  strokeWeight: 3
});
runPath.setMap(map);
*/

/* Animation */
var i = 0;

function animPath() {

  if (i > runningCoords.lenght) {
    return false;
  }

  dept_lat = runningCoords[i].lat;
  dept_lng = runningCoords[i].lng;
  arr_lat = runningCoords[i + 1].lat;
  arr_lng = runningCoords[i + 1].lng;

  var departure = new google.maps.LatLng(dept_lat, dept_lng); //Set to whatever lat/lng you need for your departure location
  var arrival = new google.maps.LatLng(arr_lat, arr_lng); //Set to whatever lat/lng you need for your arrival location
  var line = new google.maps.Polyline({
    path: [departure, departure],
    strokeColor: "#58a7e2",
    strokeOpacity: 1,
    strokeWeight: 3,
    geodesic: true, //set to false if you want straight line instead of arc
    map: map,
  });
  var step = 0;
  var numSteps = 25; //Change this to set animation resolution
  var timePerStep = 5; //Change this to alter animation speed
  var interval = setInterval(function() {
    step += 1;
    if (step > numSteps) {
      clearInterval(interval);
      i++;
      animPath();
    } else {
      var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure, arrival, step / numSteps);
      line.setPath([departure, are_we_there_yet]);
    }
  }, timePerStep);
}

google.maps.event.addListenerOnce(map, 'idle', function() {
  setTimeout(init, 300);
});

function init(){
  animPath();
  /* Number animation */
  $('.info-box mark span').each(function() {
    $(this).prop('Counter', 0).animate({
      Counter: parseFloat($(this).text()).toFixed(1)
    }, {
      duration: 3000,
      easing: 'easeInOutQuart',
      step: function(now) {
        $(this).text(Math.round(now * 10) / 10);
      }
    });
  });
}

$('.reload').click(function(){
  location.href = location.href;
});