'use strict';

var initMap = function initMap() {

  var coords = {
    lat: 51.495000,
    lng: -0.078739
  };

  var map = new google.maps.Map(document.getElementById('map-container'), {
    center: coords, 
    zoomControl: true,
    zoom: 15,
    disableDefaultUI: true,
    styles: [{
      "featureType": "landscape",
      "stylers": [{
        "color": "#e5e4e4"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.icon",
      "stylers": [{
        "color": "#787878"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#787878"
      }, {
        "visibility": "off"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#bcdaa6"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels.text.fill",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "poi.sports_complex",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": 65
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": -20
      }, {
        "weight": 1
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": 100
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": -20
      }, {
        "weight": 1
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#e5e4e4"
      }, {
        "lightness": 60
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": -5
      }, {
        "weight": 1
      }]
    }, {
      "featureType": "road.local",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": 30
      }]
    }, {
      "featureType": "road.local",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "weight": 0.5
      }]
    }, {
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [{
        "lightness": 50
      }, {
        "visibility": "on"
      }]
    }]
  });



  // ICON SETUP
  var iconBase = '/images/global/';

  var icons = {
    foodDrink: {
      icon: iconBase + 'map-icon-food-drink.png'
    },
    culture: {
      icon: iconBase + 'map-icon-culture.png'
    },
    wellbeing: {
      icon: iconBase + 'map-icon-wellbeing.png'
    },
    foodMarkets: {
      icon: iconBase + 'map-icon-food-markets.png'
    },
    zipcar: {
      icon: iconBase + 'map-icon-zipcar.png'
    },
    cycle: {
      icon: iconBase + 'map-icon-cycle.png'
    }
  };



  // LIST MAP MARKER LOCATIONS
  /* ADDED NEXT TO MAPS
  var locations = [

    ['First marker', 51.546237, -0.117999, 'foodDrink', 1],
    ['Second marker', 51.545237, -0.110999, 'culture', 3],
    ['Third marker', 51.553237, -0.117999, 'wellbeing', 2],
    ['Fourth marker', 51.546237, -0.117099, 'foodMarkets', 4],
    ['Fifth marker', 51.536237, -0.117899, 'zipcar', 5],
    ['Sixth marker', 51.538237, -0.117969, 'cycle', 6]
  
  ];
  */
 

  // INFO WINDOW INIT


  var infoBoxOptions = {    
    disableAutoPan: false,
    maxWidth: 0,
    zIndex: null,
    closeBoxMargin: "10px 20px 2px 2px",
    closeBoxURL: "/images/global/map-close.gif",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };


  var infoWindow = new google.maps.InfoWindow(infoBoxOptions);


  /* MARKER PINS ON MAP LOOP */
  for (var i = 0; i < locations.length; i++) {


    //console.log("loop number" + i);
    //console.log("icon" + locations[i][3]); 


    // CREATE MARKER
    var marker = new google.maps.Marker({

      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      //icon: locations[i][3],
      icon: icons[locations[i][3]].icon,
      title: locations[i][0], 
      map: map      

    });      



    // POPUP LISTENER
    google.maps.event.addListener(marker, 'click', (function(marker, i) {    

      return function() {

          var popupString = '<div class="map-popup"><h4>' + locations[i][0] + '</h4></div>'; 

          infoWindow.setContent(popupString);
          infoWindow.open(map, marker);
      }

    })(marker, i));



    // INFO WINDOW COLOUR SCHEME OVERWRITE
    google.maps.event.addListener(infoWindow, 'domready', function() {    

        // HIDE POPUP CLOSE BUTTON
        var closePopup = $(".gm-style-iw button");
        closePopup = $(".gm-style-iw button").css("display", "none");


        // STUPID NONSENSE TO OVERRIDE COLOUR SCHEMES OF POPUPS
        var l = $('.map-popup').parent().parent().parent();

        for (var i = 0; i < l.length; i++) {
          
                $(l[i]).css('background', '#000000');
                $(l[i]).css('border-radius', '0px');
                $(l[i]).css('border', '1px solid #000000');
        }

        // STUPID NONSENSE TO OVERRIDE COLOUR SCHEMES OF POPUPS
        var popupInner = $('.map-popup').parent().parent();

        for (var i = 0; i < popupInner.length; i++) {
          
                $(popupInner[i]).css('overflow', 'hidden');
                $(popupInner[i]).css('padding', '0 15px 15px 0');
                $(popupInner[i]).css('border', '1px sold #000000');
        }

    });


    // CLOSE MAP ON MAP TAP/ CLICK
    google.maps.event.addListener(map, "click", function(event) {

      infoWindow.close();

    });




    /*


    for (var i = 0; i < locations.length; i++) {


    console.log("loop number" + i);

    var marker = new google.maps.Marker({

      position: locations[i].position,
      icon: icons[locations[i].type].icon,
      title: locations[i].title,
      map: map      

    });      

    console.log("Marker title" + marker.title);



    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
          infoWindow.setContent("test" + locations[i][0]);
          infoWindow.open(map, marker);
      }

    })(marker, i));




    marker.addListener('click', function(marker, i) {

     console.log ("Clickeed" + marker.latLng );
     console.log ("Clickeed" + marker.title );

     infoWindow.setPosition(marker.latLng);   

     var popupString = '<div class="test"><b>' + marker.title + '</b></div>'; 

     infoWindow.setContent(popupString);

     infoWindow.open(map);
  
    });


    */
  



  };

  

  /* DEVELOPMENT MARKER POPUP */

  /* SEPRATE COORDS TO CENTER OF MAP */  
  var devPopupCoords = {
    lat: 51.494650,
    lng: -0.078739
  };


  var popupContent = document.createElement('div');
  popupContent.innerHTML = '<header>The Crosse</header>';
  var Popup = createPopupClass();
  var popup = new Popup(new google.maps.LatLng(devPopupCoords.lat, devPopupCoords.lng), popupContent);
  popup.setMap(map);  

};


/**
 * Returns the Popup class.
 *
 * Unfortunately, the Popup class can only be defined after
 * google.maps.OverlayView is defined, when the Maps API is loaded.
 * This function should be called by initMap.
 */

function createPopupClass() {

  console.log("Run POPUP CLASS");

  /**
   * A customized popup on the map.
   * @param {!google.maps.LatLng} position
   * @param {!Element} content The bubble div.
   * @constructor
   * @extends {google.maps.OverlayView}
   */
  function Popup(position, content) {
    this.position = position;
    content.classList.add('popup-bubble'); // This zero-height div is positioned at the bottom of the bubble.

    var bubbleAnchor = document.createElement('div');
    bubbleAnchor.classList.add('popup-bubble-anchor');
    bubbleAnchor.appendChild(content); // This zero-height div is positioned at the bottom of the tip.

    this.containerDiv = document.createElement('div');
    this.containerDiv.classList.add('popup-container');
    this.containerDiv.appendChild(bubbleAnchor); // Optionally stop clicks, etc., from bubbling up to the map.

    google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
  } // ES5 magic to extend google.maps.OverlayView.


  Popup.prototype = Object.create(google.maps.OverlayView.prototype);
  /** Called when the popup is added to the map. */

  Popup.prototype.onAdd = function () {
    this.getPanes().floatPane.appendChild(this.containerDiv);
  };
  /** Called when the popup is removed from the map. */


  Popup.prototype.onRemove = function () {
    if (this.containerDiv.parentElement) {
      this.containerDiv.parentElement.removeChild(this.containerDiv);
    }
  };
  /** Called each frame when the popup needs to draw itself. */


  Popup.prototype.draw = function () {
    var divPosition = this.getProjection().fromLatLngToDivPixel(this.position); // Hide the popup when it is far out of view.

    var display = Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ? 'block' : 'none';

    if (display === 'block') {
      this.containerDiv.style.left = divPosition.x + 'px';
      this.containerDiv.style.top = divPosition.y + 'px';
    }

    if (this.containerDiv.style.display !== display) {
      this.containerDiv.style.display = display;
    }
  };

  return Popup;
}