google.maps.event.addDomListener(window, 'load', initialize);

var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
	
	// map styles
	var MY_MAPTYPE_ID = 'hiphop';
	
	var stylez = [
		{ 
		featureType: "water", 
		elementType: "all", 
		stylers: [ 
				  { visibility: "on" }, 
				  { hue: "#000000" }, 
				  { saturation: -79 }, 
				  { gamma: 0.84 } ] },
		{ 
		featureType: "landscape.man_made", 
		elementType: "all", 
		stylers: [ 
				  { saturation: -100 }, 
				  { hue: "#000000" }, 
				  { visibility: "off" } ] },
		{ 
		featureType: "landscape", 
		elementType: "all", 
		stylers: [ 
				  { saturation: -100 }, 
				  { lightness: 20 },
				  { hue: "#FFFFFF" } ] },
		{ 
		featureType: "administrative.land_parcel", 
		elementType: "all", 
		stylers: [ 
				  { visibility: "off" } ] },
		{ 
		featureType: "road.local", 
		elementType: "all", 
		stylers: [ 
				  { saturation: -100 }, 
				  { lightness: 20 },
				  { visibility: "on" } ] },
		{ 
		featureType: "poi.park", 
		elementType: "geometry", 
		stylers: [ 
				  { hue: "#000000" }, 
				  { saturation: -100 }, 
				  { lightness: 46 } ] },
		{ 
		featureType: "poi", 
		elementType: "labels", 
		stylers: [ 
				  { hue: "#ffc300" }, 
				  { saturation: -100 }, 
				  { visibility: "off" } ] },
		{ 
		featureType: "road", 
		elementType: "labels", 
		stylers: [ 
				  { hue: "#FFFFFF" },
				  { saturation: -100 },
				  { gamma: 1.5 },
				  { visibility: "on" } ] },
		{ 
		featureType: "landscape", 
		elementType: "labels", 
		stylers: [ 
				  { visibility: "off" } ] },
		{ 
		featureType: "water", 
		elementType: "labels", 
		stylers: [ 
				  { visibility: "off" } ] },
		{ 
		featureType: "water", 
		elementType: "geometry", 
		stylers: [ 
				  { saturation: -100 },
				  { visibility: "on" } ] },
		{ 
		featureType: "road.arterial", 
		elementType: "all", 
		stylers: [ 
				  { hue: "#ffcc00" }, 
				  { lightness: 30 }, 
				  { saturation: -100 } ] },
		{ 
		featureType: "road.highway", 
		elementType: "geometry", 
		stylers: [ 
				  { hue: "#ffc300" }, 
				  { saturation: -100 }, 
				  { lightness: 10 } ] },
		{ 
		featureType: "landscape.natural", 
		elementType: "all", 
		stylers: [ 
				  { visibility: "off" } ] },
		{ 
		featureType: "all", 
		elementType: "all", 
		stylers: [ ] },
		{ 
		featureType: "poi", 
		elementType: "geometry",
		stylers: [ 
				  { visibility: "off" } ] },
		{ 
		featureType: "transit", 
		elementType: "labels", 
		stylers: [ 
				  { visibility: "off" } ] },
		{ 
		featureType: "transit.line", 
		elementType: "geometry", 
		stylers: [ 
				  { visibility: "off" } ] },
		{ 
		featureType: "all", 
		elementType: "all", 
		stylers: [ ] }
	  ];
	
	
	var latlng = new google.maps.LatLng(-37.845833,144.950405);
	directionsDisplay = new google.maps.DirectionsRenderer();
	var settings = {
		zoom: 16,
		center: latlng,
		mapTypeControl: true,
		mapTypeControlOptions: {
		   mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, MY_MAPTYPE_ID],
		   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		navigationControl: true,
		navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
		backgroundColor: '#EEEEEE',
		mapTypeId: MY_MAPTYPE_ID
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
	
	
	var styledMapOptions = {
		name: "G&C"
	};
	var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
	map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
	
	
	directionsDisplay.setMap(map);
	var contentString = '<div id="infowindow">'+
	'<div id="siteNotice">'+
	'</div>'+
	'<div id="bodyContent">'+
	'<p class="infowindow-copy"><strong>G&amp;C</strong><br />6 Little Page St<br />Albert Park<br />Vic 3206</p>'+
	/*'<div class="infowindow-directions">Find your way here from:</div>'+
	'<form action="../s/index.html" onsubmit="calcRoute();return false;">'+
	'<input type="text" id="start" value="" class="infowindow-input">'+
	'<input type="submit" value="" class="infowindow-submit"></form>'+*/
	'</div>'+
	'</div>';

	
	var infowindow = new google.maps.InfoWindow({
		content: contentString,
		maxWidth:300
	});

	var companyImage = new google.maps.MarkerImage('i/marker-g.png',
		new google.maps.Size(48,64),
		new google.maps.Point(0,0),
		new google.maps.Point(0,64)
	);

	var companyShadow = new google.maps.MarkerImage('i/marker-shadow.png',
		new google.maps.Size(72,64),
		new google.maps.Point(0,0),
		new google.maps.Point(0,64));

	var companyPos = new google.maps.LatLng(-37.845833,144.950405); //Albert Park

	var companyMarker = new google.maps.Marker({
		position: companyPos,
		map: map,
		icon: companyImage,
		shadow: companyShadow,
		title:"G&C's new office!",
		zIndex: 3});
	
	google.maps.event.addListener(companyMarker, 'click', function() {
		infowindow.open(map,companyMarker);
	});

}


function calcRoute() {
	var start = document.getElementById("start").value;
	var end = "-37.845833,144.950405";
	var request = {
		origin:start,
		destination:end,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	});
}