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

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

    var map;

    if (GBrowserIsCompatible()) {
      map = new GMap2(this);
      GEvent.addListener(map, "load", addLoadingReport);
      map.enableScrollWheelZoom();
      map.addControl(new GMapTypeControl());
      map.addControl(new GLargeMapControl());
      map.addControl(new GScaleControl());
      G_PHYSICAL_MAP.getMinimumResolution = function() { return 4 };
      G_NORMAL_MAP.getMinimumResolution = function() { return 4 };
      G_SATELLITE_MAP.getMinimumResolution = function() { return 4 };
      G_HYBRID_MAP.getMinimumResolution = function() { return 4 };
      G_PHYSICAL_MAP.getMaximumResolution = function() { return 12 };
      G_NORMAL_MAP.getMaximumResolution = function() { return 12 };
      G_SATELLITE_MAP.getMaximumResolution = function() { return 12 };
      G_HYBRID_MAP.getMaximumResolution = function() { return 12 };
      PlotPointOnMap();
      plotAirportsAndPorts(settings.airportsAndPorts);
      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);
      GEvent.trigger(marker, "click");
    }

    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" target="_parent" href="../EUVilla/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 target="_parent" href="../EUVilla/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 target="_parent" href="../EUVilla/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 plotAirportsAndPorts(airportsAndPorts) {
      var baseIcon = new GIcon(G_DEFAULT_ICON);
      baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      baseIcon.iconSize = new GSize(24, 24);
      baseIcon.shadowSize = new GSize(37, 24);
      baseIcon.iconAnchor = new GPoint(12, 12);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);

      for (var k = 0; k < airportsAndPorts.length; k++) {
        var icon = new GIcon(baseIcon);
        icon.image = airportsAndPorts[k].type == "airport" ? "../../Images/EUVilla/GoogleMapIcons/airportIcon.png" : "../../Images/EUVilla/GoogleMapIcons/ferryIcon.png";
        var marker = new GMarker(new GLatLng(airportsAndPorts[k].lat, airportsAndPorts[k].lng), icon);
        GEvent.addListener(marker, "click", createClickHandler(marker, airportsAndPorts[k]));
        map.addOverlay(marker);
      }
      function createClickHandler(marker, airportOrPort) {
        return function() {
          marker.openInfoWindowHtml(
            '<table id="balloon">\
              <tr>\
                <td>\
                  <h3>' + airportOrPort.name + (airportOrPort.code ? ' (' + airportOrPort.code + ')' : '') + '</h3>\
                  <p>Distance: ' + airportOrPort.distance + ' miles.</p>\
                </td>\
              </tr>\
            </table>'
          );
        }
      }
    }

  });
}