﻿// JScript File
// This file controls the Google map on our Locations' page
//Must have proper G api key to work on site
//key is generated for the url where map is being used.

var businesses = [
{ name: 'Knight Engineering - PA.',
    street: '4998 Mechanicsville Road',
    Suite: 'P.O. Box 247',
    city: 'Mechanicsville',
    state: 'PA.',
    zip: '18934',
    country: 'USA',
    phone: 'Phone: (215)-794-5958',
    fax: 'Fax: (215)-794-8930',
    email: 'Email: info@kei-eng.com',
    lat: 40.344230, lng: -75.075619}];

/**
 * The map object, null until script loads in.
 * @type {GMap2}
 */
var map = null;  

/**
 * The bounds of the markers once loaded in.
 * @type {GLatLngBounds}
 */
var bounds = null;

/**
 * The marker with currently opened info window.
 * @type {GMarker}
 */
var currentMarker = null;

/**
 * The dom element that the map is loaded into
 * @type {Element}
 */
var mapDiv = null;

/**
 * The dom element that everything is a child of.
 * @type {Element}
 */
var containerDiv = null;

/**
 * Position of mouse click (clientX) on map div when in static mode.
 * @type {Number}
 */
var clickedX = 0;

/**
 * Position of mouse click (clientY) on map div when in static mode.
 * @type {Number}
 */
var clickedY = 0;


function loadMap() {
  if (GBrowserIsCompatible()) {
      mapDiv.style.background = '#fff';
    mapDiv.style.cursor = '';
    map = new GMap2(mapDiv, {logoPassive: true});
   //Added by PBT 
    map.addControl(new GScaleControl());
            //map.addControl(new GOverviewMapControl());
    //map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setMapType(G_NORMAL_MAP); 
    //map.enableScrollWheelZoom();
    //map.enableDoubleClickZoom();
    // add zoom control....
            var boxStyleOpts = { opacity: .2, border: "2px solid yellow" };
            var otherOpts = {
              buttonHTML: "<img src='images/zoom-control-inactive.png' alt='Click here and drag your cursor over an area to zoom.' />",
              buttonZoomingHTML: "<img src='images/zoom-control-active.png' alt='Click here and drag your cursor over an area to zoom.' />",
              buttonStartingStyle: {width: '17px', height: '17px'},
              overlayRemoveTime: 0 };
            map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}),
                new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(17,7)));
            // add small map control under the zoom control since the large map control has different sizes...
            map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,32)));
    
    bounds = new GLatLngBounds();
    for (var i = 0; i < businesses.length; i++) {
      bounds.extend(new GLatLng(businesses[i].lat, businesses[i].lng));
    }
    var latSpan = bounds.toSpan().lat();
    //Maps Kansas city as center for our purposes
    map.setCenter(new GLatLng(40.344230,-75.075619),12);
    //map.setCenter(bounds.getCenter(),12);

    // The static map server gives markers more space when calculating
    // bounds and zoom level, so sometimes the API will give a higher
    // zoom level than was used by the static map server.
    // The .98 value is just a guess right now, may need tweaking.
    var newBounds = map.getBounds();
    var newLatSpan = newBounds.toSpan().lat();
    if (latSpan/newLatSpan > .000001) { map.zoomOut(); }

    for (var i = 0; i < businesses.length; i++) {
      var marker = createMarker(i);
      var latlng = marker.getLatLng();
      var pixel = map.fromLatLngToDivPixel(latlng);
      if (Math.abs(pixel.x - clickedX) < 12 && Math.abs(pixel.y - clickedY) < 20) {
        GEvent.trigger(marker, 'click');
      }
      map.addOverlay(marker);
    }
  }
}

function zoomToAll() {
   //Maps Kansas city as center for our purposes
    map.setCenter(new GLatLng(40.344230,-75.075619),11);
//map.setCenter(bounds.getCenter(),11);
  //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}

/**
 * Creates a marker for the given business.
 * @param {Number} ind
 * @return {GMarker}
 */
function createMarker(ind) {
  var business = businesses[ind];
  var marker = new GMarker(new GLatLng(business.lat, business.lng));
  GEvent.addListener(marker, 'click', function() {
         map.closeInfoWindow();
        });
  GEvent.addListener(marker, 'click', function() {
    marker.html = ['<div style="height:160px; width:250px;"><strong>', business.name, '</strong><br />', 
                 business.street, '<br /> ',
                 business.Suite, '<br /> ',
                 business.city, ', ',business.state, ' ', business.zip, '<br />',
                 business.phone, '<br />',
                 business.fax, '<br />',
                 business.email, '<br /><br /><strong>Get directions:</strong> ',
                 '<a target="_blank" ',
                 'href="http://maps.google.com/maps?saddr=&daddr=',
                 formatAddressForMaps(business), '"><br />To this location</a> - ', 
                 '<a target="_blank" ',
                 'href="http://maps.google.com/maps?saddr=',
                 formatAddressForMaps(business), '&daddr=', '"> From this location<br /><br />',
                 '<a href="javascript:zoomToAll(); map.closeInfoWindow()"><strong>Close and return to map</strong></a></div>'].join('');
     
     currentMarker = marker;
    marker.openInfoWindowHtml(marker.html);
    //Use this to adjust height of the marker window
    
    
 });
  return marker;
}

/**
 * Formats business info into a URL-friendly version for maps url.
 * @param {Object} business
 * @return {String}
 */
function formatAddressForMaps(business) {
  var address = business.street + ' ' + business.city + ' ' + business.state + ' ' + business.zip;
  return escape(address.replace(' ', '+'));
}


function loadMapGadget() {
 containerDiv = document.getElementById('mapcontainer');
  mapDiv = document.getElementById('map');
  loadMap();

  mapDiv.style.cursor = 'pointer';

  var urlString = ['http://maps.google.com/staticmap?markers='];
  var markerString = [];
  for (var i = 0; i < businesses.length; i++) {
    markerString.push(businesses[i].lat + ',' + businesses[i].lng + ',red');
  }
  urlString.push(markerString.join('|'));
  urlString.push('&size=445x300');
  mapDiv.style.background = 'url(\'' + urlString.join('') + '\')';
  //urlString.push('&key=ABQIAAAAuubdnqjTUifSxrbMJBAW9hQAGp1wbEmj5BkuTwEP5YXAMzIPOhT_3etv6yhXkklKBGtZlEkgNQxP9w');
  urlString.push('&key=ABQIAAAAuubdnqjTUifSxrbMJBAW9hSHHTG3R3t5cbhBE6pfmIGl33fYChRPwrmfDlY-db_gPeSRVPVfDQRv6w');
  mapDiv.style.background = 'url(\'' + urlString.join('') + '\')';
}

addLoadEvent(loadMapGadget);
