"use strict";

var Backbone = require('backbone');
var $ = require('jquery');
Backbone.$ = $;


module.exports = Backbone.View.extend({
  tagName: 'div',
  id: 'map-canvas',

  initialize: function(options) {
    this.businesses = options.businesses;
    var mapOptions = {
      zoom: this.model.get('zoom'),
    };

    var map = new google.maps.Map(this.el, mapOptions);
    this.map = map;
    this.getDirections(map);

    this.listenTo(this.businesses, 'sync', this.createMarker);

    this.render();
  },

  getDirections: function(map) {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);

    var mytravelMode = this.model.get('travelMode') === "WALKING" ?
      mytravelMode = google.maps.TravelMode.WALKING : google.maps.TravelMode.DRIVING;

    var request = {
      origin: this.model.get('start'),
      destination: this.model.get('end'),
      travelMode: mytravelMode
    };

    directionsService.route(request, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
    this.render();
  },

  createMarker: function() {

    var self = this;
    var geocoder = new google.maps.Geocoder();
    var i = 0,
    delay = 100,
    successCounter = 0;

    function recurse() {
      var highlight = self.businesses.models[i].get('name');

      if (self.businesses.models[i].attributes.coordinates) {
        // Yelp available
        var marker = new google.maps.Marker({
          map: self.map,
          position: self.businesses.models[i].attributes.coordinates,
          title: highlight
        });
        if (i++ < self.businesses.length - 1) {
          setTimeout(recurse, delay);
        }
      } else {
        // Geocoder :(
        geocoder.geocode({
          'address': self.businesses.models[i].attributes.address
        }, function(results, status) {
          try {
            if (status === google.maps.GeocoderStatus.OK) {
              // console.log('success!');
              var marker = new google.maps.Marker({
                map: self.map,
                position: results[0].geometry.location,
                title: highlight
              });
              if (i++ < self.businesses.length - 1) {
                setTimeout(recurse, delay);
              }
            } else {
              throw status;
            }
          }
          catch(err) {
            // console.log(err);
            setTimeout(recurse, delay);
          }
        });
      }
    }

    recurse(); // Kick off the function for the first time
    this.render();
    return false;
  },

  render: function() {
    $('#map-canvas').replaceWith(this.$el);
    return this;
  }
});

@@ -1370,16 +1370,196 @@
 r = 0;%0A%0A
+    var addMarker = function(position, name) %7B%0A      var marker = new google.maps.Marker(%7B%0A        map: self.map,%0A        position: position,%0A        title: name%0A      %7D);%0A    %7D;%0A%0A
     func
@@ -1571,24 +1571,24 @@
 recurse() %7B%0A
-
       var hi
@@ -1695,24 +1695,25 @@
 rdinates) %7B%0A
+%0A
         // Y
@@ -1738,91 +1738,18 @@
     
-var marker = new google.maps.Marker(%7B%0A          map: self.map,%0A          position: 
+addMarker(
 self
@@ -1797,45 +1797,18 @@
 tes,
-%0A          title: highlight%0A        %7D
+ highlight
 );%0A 
@@ -1909,32 +1909,33 @@
 %0A      %7D else %7B%0A
+%0A
         // Geoco
@@ -2167,223 +2167,57 @@
     
-// console.log('success!');%0A              var marker = new google.maps.Marker(%7B%0A                map: self.map,%0A                position: results%5B0%5D.geometry.location,%0A                title: highlight%0A              %7D
+addMarker(results%5B0%5D.geometry.location, highlight
 );%0A 

Move repeated code into functions