FSB.howToBuy = {
    markers: [],
    gMapsLoaded: false,
    init: function() {
      $(document).foundation();
      this.loadGoogleMaps();
      this.initDealersMenuSwiper();
      this.getDealersLocation();
    },
    initDealersMenuSwiper: function() {
      var self = this;
      self.dealersMenuSwiper = new Swiper ('#dealers-menu-swiper', {
        loop: false,
        paginationClickable: true,
        slidesPerView: 5,
        slidesPerGroup: 5,
        spaceBetween: 0,
        pagination: '#dealers-menu-swiper .swiper-pagination',
        breakpoints: {
          2560: {
            slidesPerView: 7,
            slidesPerGroup: 7,
            spaceBetween: 0
          },
          1920: {
            slidesPerView: 5,
            slidesPerGroup: 5,
            spaceBetween: 0
          },
          1440: {
            slidesPerView: 3,
            slidesPerGroup: 3,
            spaceBetween: 0
          },
          1024: {
            slidesPerView: 2,
            slidesPerGroup: 2,
            spaceBetween: 0
          },
          750: {
            slidesPerView: 1,
            slidesPerGroup: 1,
            spaceBetween: 0
          }
        }
      })  
    },
    getDealersLocation: function() {
      var self = this;
      self.dealersLocationData = [];

      var  dealersMenuItems = $('#dealers-menu-swiper .swiper-slide'); 

      for (var i = 0; i < dealersMenuItems.length; i++) {
        var currItem = dealersMenuItems.eq(i);
        var currData = {
          title: currItem.data('title'),
          contactInfo: currItem.data('contact-info'),
          address: currItem.data('address'),
          latitude: currItem.data('latitude'),
          longitude: currItem.data('longitude')
        }
        self.dealersLocationData.push(currData);
      }
    },
    gMapsCallback: function() {
      FSB.howToBuy.gMapsLoaded = true;
      $(window).trigger('FSB.howToBuy.gMapsLoaded');
      FSB.howToBuy.initMap();
    },
    loadGoogleMaps: function() {
      if(FSB.howToBuy.gMapsLoaded) {
        return window.FSB.howToBuy.gMapsCallback();
      } else {
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.setAttribute("src","http://ditu.google.cn/maps/api/js?key=AIzaSyCqXJmSRZntV52LKsleNMGmxHAfqm_qP9k&callback=FSB.howToBuy.gMapsCallback");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);
      }
    },
    initMap: function() {
      var self = this;

      self.infowindow = new google.maps.InfoWindow();
      
      self.mapCenter = {lat: self.dealersLocationData[0].latitude, lng: self.dealersLocationData[0].longitude};

      self.map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: false,
        navigationControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        zoomControl: true,
        zoomControlOptions: {
          position: google.maps.ControlPosition.RIGHT_TOP
        },
        center: self.mapCenter,
        zoom: 10
      });

      if (self.dealersLocationData.length > 0) {
        for (i in self.dealersLocationData) {
            var marker = self.createMarkers(self.dealersLocationData[i], i);
            self.markers.push(marker);
        };
      };

      self.triggerDealersMenuClick();

    },
    createMarkers: function(dealer, index) {
      index = parseInt(index)+1;
      var icon = {
        url: '/workspace/assets/img/icons/marker@2x.png',
        size: new google.maps.Size(27, 45),
        origin: new google.maps.Point(0, 0),
        scaledSize: new google.maps.Size(27,45),
        anchor: new google.maps.Point(0, 45)
      };
      var latLng = new google.maps.LatLng( dealer.latitude, dealer.longitude);
      var marker = new google.maps.Marker({
        position : latLng,
        label: {
          text: ''+ index +'',
          color: '#FFF',
        },
        map: FSB.howToBuy.map,
        icon: icon
      });
      google.maps.event.addListener(marker, 'click', function(){
          FSB.howToBuy.map.setCenter(marker.getPosition());
          FSB.howToBuy.infowindow.close(); // Close previously opened infowindow
          FSB.howToBuy.infowindow.setContent(
            '<div class="infowindow">'+
              '<h4>'+ dealer.title +'</h4>'+
              '<p>'+ dealer.address +'<br/>'+ dealer.contactInfo +'</p>'+
            '</div>'
          );
          FSB.howToBuy.infowindow.open(FSB.howToBuy.map, marker);
      });
      return marker;
    },
    triggerDealersMenuClick: function() {
      var self = this;
      $('#dealers-menu-swiper .swiper-slide').on('click', function() {
        var i = $(this).index();
        google.maps.event.trigger(self.markers[i], "click");
      })
    }
}