/* Copyright (c) Hoseasons Holidays Limited
* Author: Chris O'Brien
* Date: 16 August 2009
*/

// Attraction format :- { lat: 0, lng: 0, name: '', description: '', url: '', distance: 0, category: '' }

jQuery.fn.inTheAreaMap = function(categoryDDL_id, options) {
  return this.each(function() {
    var settings = jQuery.extend({
      minZoom: 5,
      maxZoom: 14,
      zoom: 10,
      site: {
        lat: 0,
        lng: 0,
        siteCode: '',
        accommodationCode: '',
        name: '',
        sleepText: '',
        introText: '',
        image: ''
      },
      attractions: []
    }, options);

    var map;
    var obj = $(this);
    obj.data("markers", []);

    if (GBrowserIsCompatible()) {
      map = new GMap2(this);
      GEvent.addListener(map, "load", addLoadingReport);
      map.addControl(new GMapTypeControl());
      map.addControl(new GLargeMapControl());
      map.addControl(new GScaleControl());
      G_PHYSICAL_MAP.getMinimumResolution = function() { return settings.minZoom };
      G_NORMAL_MAP.getMinimumResolution = function() { return settings.minZoom };
      G_SATELLITE_MAP.getMinimumResolution = function() { return settings.minZoom };
      G_HYBRID_MAP.getMinimumResolution = function() { return settings.minZoom };
      G_PHYSICAL_MAP.getMaximumResolution = function() { return settings.maxZoom };
      G_NORMAL_MAP.getMaximumResolution = function() { return settings.maxZoom };
      G_SATELLITE_MAP.getMaximumResolution = function() { return settings.maxZoom };
      G_HYBRID_MAP.getMaximumResolution = function() { return settings.maxZoom };
      PlotPointOnMap();
      plotAttractions(settings.attractions);
      bMapLoaded = true;
    }

    function addLoadingReport() {
      // Text to display 
      var loadingText = 'Loading Map...';

      // Create a new element 
      var info = document.createElement('div');
      info.appendChild(document.createTextNode(loadingText));

      // Add an id to the element, in case you want to access it later 
      info.setAttribute('id', 'mapLoading');

      // Alternatively, you could apply the styles through a CSS stylesheet, using the #mapLoading selector 
      info.style.position = 'relative';
      info.style.padding = '2em';
      info.style.fontWeight = 'bold';
      info.style.fontSize = '12px';
      info.style.color = '#000';

      // Insert into map container 
      this.getContainer().insertBefore(info, this.getContainer().firstChild);
    }

    function PlotPointOnMap() {
      var latLng = new GLatLng(parseFloat(settings.site.lat), parseFloat(settings.site.lng));
      map.setCenter(latLng, settings.zoom);
      var marker = new GMarker(latLng, getSiteIcon());
      var handler = createMarkerClickHandler(marker);
      GEvent.addListener(marker, "click", handler);
      map.addOverlay(marker);
    }

    function getSiteIcon() {
      var icon = new GIcon();
      icon.image = "../../Images/EUVilla/GoogleMapIcons/Complex.png";
      icon.iconAnchor = new GPoint(24, 15);
      icon.infoWindowAnchor = new GPoint(16, 0);
      icon.iconSize = new GSize(49, 31);
      return icon;
    }

    function createMarkerClickHandler(marker) {
      return function() {
        marker.openInfoWindowHtml(
          '<table id="balloon">\
            <tr>\
              <td>\
                <a id="balloonTitle" href="ProductDetailPage.aspx?ISDLNK=1&amp;SCODE=' + settings.site.siteCode + '&ACODE=' + settings.site.accommodationCode + '&TID=villaComplex\
                  ">' + settings.site.name + '</a>\
                <br/>\
                <span class="SleepLbl">Sleeps: </span><span class="SleepText">' + settings.site.sleepText + '</span>\
                <p id="introText">' + settings.site.introText + '</p>\
              </td>\
              <td>\
                <a href="ProductDetailPage.aspx?ISDLNK=1&amp;SCODE=' + settings.site.siteCode + '&ACODE=' + settings.site.accommodationCode + '&TID=villaComplex\
                   "><img id="searchResultImage"\ src="' + settings.site.image + '"></a>\
              </td>\
            </tr>\
            <tr >\
              <td>\
                <div id="viewComplex">\
                  <a href="ProductDetailPage.aspx?ISDLNK=1&amp;SCODE=' + settings.site.siteCode + '&ACODE=' + settings.site.accommodationCode + '&TID=villaComplex">Read more>></a>\
                </div>\
              </td>\
            </tr>\
          </table>'
        );
        return false;
      };
    }

    function plotAttractions(attractions) {
      var baseIcon = new GIcon();
  
      baseIcon.iconAnchor = new GPoint(16, 16);
      baseIcon.infoWindowAnchor = new GPoint(16, 0);
      baseIcon.iconSize = new GSize(41, 42);
      
      var clickHandlers = [];

      for (var k = 0; k < attractions.length; k++) {
        var icon = new GIcon(baseIcon);
        icon.image = "../../Images/EUVilla/GoogleMapIcons/" +
            (attractions[k].category == "FD" ? "foodDrink.png" :
            attractions[k].category == "HH" ? "historyHeritage.png" :
            attractions[k].category == "SA" ? "sportsActivities.png" :
            attractions[k].category == "GC" ? "gardensCountryside.png" :
            attractions[k].category == "B" ? "beaches.png" :
            attractions[k].category == "CW" ? "cyclingWalking.png" :
            attractions[k].category == "N" ? "nature.png" :
            attractions[k].category == "TV" ? "townVillageAttractions.png" : "greatDaysOut.png");
        var marker = new GMarker(new GLatLng(attractions[k].lat, attractions[k].lng), icon);
        var handler = createClickHandler(marker, attractions[k]);
        GEvent.addListener(marker, "click", handler);
        map.addOverlay(marker);
        clickHandlers[k] = handler;
      }
      obj.data("handlers", clickHandlers);
      function createClickHandler(marker, attraction) {
        return function() {
          marker.openInfoWindowHtml(
            '<div class="activityMapPopup" style="width:540px;"><h5>' + attraction.name
              + ' - ' + attraction.distance + ' miles away.</h5>'
              + '<p>' + attraction.description + '</p>'
              + (attraction.hasValidURL ? '<p><a href="' + attraction.url + '" target="_new" onclick="openInNewWindow(this);'
              + ';return false">Visit Website</a></p></div>' : '')
          );
        }
      }
      function openInNewWindow(anchor) {
        window.open(anchor.href, "", "location=1,status=1,scrollbars=1,menubar=1,resizable=1,width=800,height=400");
      }
    }

  });
};

function openInNewWindow(anchor) {
  window.open(anchor.href, "", "location=1,status=1,scrollbars=1,menubar=1,resizable=1,width=800,height=400");
}