// This is a program for putting a small map with the location of 
// your business on your website. It comes with a route planner.
//
// Copyright (C) 2010 Oscar den Uijl, odu@xs4all.nl.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License at http://www.gnu.org/licenses/ for more
// details.

function map() {
  var mapWidth = "740px"                                        //Width of the map
  var mapHeight = "250px"                                       //Height of the map
  var mapWidthDirections = "740px"                              //Width of the map when directions are shown
  var mapHeightDirections = "400px"                             //Height of the map when directions are shown
  var name = "Psychotherapie Meppel";                           //Name of place
  var image = "psimeppel.png";                                  //Icon to show on map for this place
  var location = new google.maps.LatLng(52.6976749, 6.1850045); //Location of place
  var locationAddress = "Prins Hendrikkade 98 Meppel";          //Address of place
  var backgroundColour = "#E66524";                             //Set the background colour
  var textColour = "#FFFFFF";                                   //Set the text/foreground colour
  var zoomLevel = 15;                                           //Initial zoomlevel of map
  var geocoder = new google.maps.Geocoder();                    //Initialise a geocoder
  var directionsService = new google.maps.DirectionsService();  //Initialise the directions service
  var directionsDisplay = new google.maps.DirectionsRenderer(); //Initialise the directions displayer
  
  //Set the options for the map
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false
  }
  
  //Change the colours of the map (buildings and local roads) to shades of the background colour
  var styles = [
    {featureType: "landscape.man_made", elementType: "all", stylers: [
	  {hue: backgroundColour},{saturation: 75},{lightness: -43}
	]},
	{featureType: "road.local", elementType: "all", stylers: [
	  {hue: backgroundColour},{saturation: 100},{lightness: 10}
	]}
  ];
  var styledMapOptions = {map: map, name: name};
  var mapType =  new google.maps.StyledMapType(styles,styledMapOptions);
  
  //Initialise the map
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
  //Set the map styles
  map.mapTypes.set(name, mapType);
  map.setMapTypeId(name);
  
  //Put the icon on the map
  var marker = new google.maps.Marker({
    position: location,
    icon: image,
    title: name,
  });
  marker.setMap(map);
  
  //(Re)set the directions, the background colour, create the directions button, show the map
  reset();
  function reset() {
    document.getElementById("map").style.width = mapWidth;
    document.getElementById("map").style.height = mapHeight;
    google.maps.event.trigger(map, "resize");
    directionsDisplay.setMap(null);
    document.getElementById("messageArea").innerHTML = "";
    document.getElementById("messageArea").style.backgroundColor = backgroundColour;
    document.getElementById("addressField").innerHTML = '<p style="font-size: 11pt;">Uw adres: <input type="text" id="address" size="60"></p>';
    document.getElementById("route").innerHTML = '<p style="font-size: 11pt;"><button type="button" id="routeButton" style="background-color:' + backgroundColour + '; color:' + textColour + ';">Routebeschrijving</button></p>';
    document.getElementById("routeButton").onclick = function() {route()};
    map.setCenter(location);
    map.setZoom(zoomLevel);
  }
  
  //When the directions button is clicked, get an address, get its coordinates, and get directions to get here from there
  function route() {
    //Get an address from the user
    var address = document.getElementById("address").value;
    if (address == "" || address == null) {return false};
    directionsRequest = {origin: address, destination: locationAddress, travelMode: google.maps.DirectionsTravelMode.DRIVING};
    directionsService.route(directionsRequest, function(result, status) {
      if (status != google.maps.DirectionsStatus.OK) { 
        alert("Routebeschrijving niet gevonden.");
      } else { //If getting directions was successful, show them, and create a "remove directions" button that calls reset() when clicked
        document.getElementById("addressField").innerHTML = "";
        document.getElementById("map").style.width = mapWidthDirections;
	 document.getElementById("map").style.height = mapHeightDirections;
        google.maps.event.trigger(map, "resize");
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("messageArea"));
	 document.getElementById("messageArea").style.backgroundColor = "#F6D13B";
	 directionsDisplay.setDirections(result);
	 document.getElementById("route").innerHTML = '<p style="font-size: 11pt;"><button type="button" id="removeButton" style="background-color:' + backgroundColour + ';color:' + textColour + ';">Verwijder route</button></p>';
	 document.getElementById("removeButton").onclick = function() {reset()};
      }
    });
  }
  
}