/*
*	
*	Code & comments are written by @author Giovanni Vivanco, Nansen 2011
*	For any question please contact giovanni.vivanco@nansen.se
*	
*/
var fbmaps = fbmaps || {};

$(function(){
	fbmaps.init();
});

fbmaps = {

	init: function () {

		// This if-statement looks if the page we are in is the start page by looking if #map_canvas_start exists
		if ($("#map_canvas_start").length != 0)
			fbmaps.createStartMap();

		// This if-statement looks if the page we are in is the search-for-objects page by looking if #map_canvas_object exists
		$(".objectMapTabLink").live("click", function () {
			if ($("#map_canvas_object").length != 0)
				fbmaps.createObjectMap();
		})
		if ($(".officeMap").length != 0)
			fbmaps.officeMap();

		// This function is used to avoid hiding the infoBox on the google maps when clicking on it
		$(".infoBox").click(function (event) {
			event.stopPropagation();
		})

		// This function provides to the user the possibility to hide the infoBox when clicking outside it..
		$("html").click(function () {
			$(".infoBox").hide();
		});

	},
	/*
	*
	*	The function 'createStartMap' is used to create the google map on the start page.
	*	This specific Google map has an modified & personalized grey color layout.
	*	To reuse the style copy the whole variable 'stylez' where every specific element on map is modified.
	*	to add a new marker pleaser use the code below, 
		
	!IMPORTANT to specify:
	- nameOfMarker, 
	- Lat/ Lng values on LatLng object, 
	- title,
	- content
		
	--- CODE ---
	
	var nameOfMarker = new google.maps.Marker({  
	position: new google.maps.LatLng(x, y),  
	map: map,
	title: 'TitleOfMarker/OftenToBeSameAsNameOfMarker ',  
	clickable: true,
	icon: '/Templates/Images/Spanien/Images/marker.png' 
	});
		
	google.maps.event.addListener(nameOfMarker, "click", function (e) {
	        
	var boxText = ib.getContent();
	var heading = '<h4>TitleForObject/ Marker</h4>';
	var email = '<p><a href="mailto:mail@mail.com">skicka e-post till kontoret</a></p>';
	var phone_1 = '<p><strong>Tel:</strong> 000000000 </p>';
	var phone_2 = '<p><strong>Från Spanien:</strong> 000000000 </p>';
	var site_url = '<p><a href="http://linkOfOfficePlace">Till kontorets sida</a></p>';
	var content = '<div class="highlighted"><img class="map_image" src="URLTOIMAGE"><div class="innerArea cf"><div class="map_info">' + heading + email + phone_1 + phone_2 + site_url + '</div><img src="/_upload/Karta/map/img/bottom.png"></div><div class="bottomEdge"></div></div>';
	        				
	ib.setContent(content);
	ib.open(map, this);
	
	map.setCenter(nameOfMarker.position);
	map.panBy(0, -160);
	  
	});
		
	---
	
	
	
	
	
	
	
	
	*/
	createStartMap: function () {

		var map;
		var spain = new google.maps.LatLng(39.13006, -2.731934);
		var MY_MAPTYPE_ID = 'fastighetsbyrån';
		var boxText = document.createElement("div");
		var myOptions = {
			content: boxText,
			alignBottom: true,
			disableAutoPan: false,
			maxWidth: 0,
			pixelOffset: new google.maps.Size(-116, -44),
			zIndex: null,
			boxStyle: {
				width: "230px"
			},
			closeBoxMargin: "-19px -19px 0 0",
			closeBoxURL: "/Templates/Images/Spanien/Images/close.png",
			boxClass: "infoBox start",
			infoBoxClearance: new google.maps.Size(1, 1),
			isHidden: false,
			pane: "floatPane",
			enableEventPropagation: false
		};


		var ib = new InfoBox(myOptions);

		var mapOptions = {
			zoom: 5,
			center: spain,
			mapTypeControlOptions: {
				mapTypeIds: [google.maps.MapTypeId.SATELLITE, MY_MAPTYPE_ID]
			},
			mapTypeId: MY_MAPTYPE_ID
		};

		map = new google.maps.Map(document.getElementById("map_canvas_start"), mapOptions);

		var styledMapOptions = {
			name: "The Real Estate Agency View"
		};

		$(".marker").each(function () {

			var markerName = $(this).find(".name").html(); 
			var markerLatitude = $(this).find(".lat").html();
			var markerLongitude = $(this).find(".lng").html();
			var markerImage = $(this).find("img").attr("src");
			var markerHeading = $(this).find(".heading").html();
			var markerMail = $(this).find(".mail").html();
			var markerPhone = $(this).find(".phone").html();
			var markerPhoneSpain = $(this).find(".phoneSpain").html();
			var markerLink = $(this).find(".link").html();

			var markerOffice = new google.maps.Marker({
				position: new google.maps.LatLng(markerLatitude, markerLongitude),
				map: map,
				title: markerName,
				clickable: true,
				icon: '/Templates/Images/Spanien/Images/marker.png'
			});

			google.maps.event.addListener(markerOffice, "click", function (e) {

				var boxText = ib.getContent();
				var heading = '<h4>' + markerHeading + '</h4>';
				var email = '<p><a href="mailto:' + markerMail + '">Skicka e-post till kontoret</a></p>';
				var phone_1 = '<p><strong>Tel: </strong>' + markerPhone + '</p>';
				var phone_2 = '<p><strong>Från Spanien: </strong>' + markerPhoneSpain + '</p>';
				var site_url = '<p><a href="' + markerLink + '">Till kontorets sida</a></p>';
				var content = '<div class="highlighted"><img class="map_image" src="' + markerImage + '"><div class="innerArea cf"><div class="map_info">' + heading + email + phone_1 + phone_2 + site_url + '</div></div><div class="bottomEdge"></div></div>';

				ib.setContent(content);
				ib.open(map, this);

				map.setCenter(markerName.position);
				map.panBy(0, -160);

			});

		});

		var jayzMapType = new google.maps.StyledMapType(styledMapOptions);
		map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);

	},

	createObjectMap: function () {

		var map;
		var spain = new google.maps.LatLng(39.859155, -4.046631);
		var MY_MAPTYPE_ID = 'fastighetsbyrån';
		var boxText = document.createElement("div");
		var myOptions = {
			content: boxText,
			alignBottom: true,
			disableAutoPan: false,
			maxWidth: 0,
			pixelOffset: new google.maps.Size(-116, -44),
			zIndex: null,
			boxStyle: {
				width: "230px"
			},
			closeBoxMargin: "-19px -19px 0 0",
			closeBoxURL: "/Templates/Images/Spanien/Images/close.png",
			infoBoxClearance: new google.maps.Size(1, 1),
			isHidden: false,
			pane: "floatPane",
			enableEventPropagation: false
		};


		var ib = new InfoBox(myOptions);

		var mapOptions = {
			zoom: 6,
			center: spain,
			mapTypeControlOptions: {
			    mapTypeIds: [google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
			},
			mapTypeId: MY_MAPTYPE_ID
		};

		map = new google.maps.Map(document.getElementById("map_canvas_object"), mapOptions);

		var styledMapOptions = {
			name: "The Real Estate Agency View"
		};

		$(".marker").each(function () {

			
			var markerLatitude = $(this).find(".lat").html();
			var markerLongitude = $(this).find(".lng").html();
			var markerImage = $(this).find("img").attr("src");
			var markerHeading = $(this).find(".heading").html();
			
			var markerPrice = $(this).find(".price").html();
			var markerRooms = $(this).find(".rooms").html();
			var markerSqm = $(this).find(".sqm").html();
			var markerLink = $(this).find(".link").html();

			var markerPriceLbl = $(this).find(".priceLbl").html();
			var markerRoomsLbl = $(this).find(".roomsLbl").html();
			var markerSqmLbl = $(this).find(".sqmLbl").html();
			

			var markerName = new google.maps.Marker({
				position: new google.maps.LatLng(markerLatitude, markerLongitude),
				map: map,
				title: markerHeading,
				clickable: true,
				icon: '/Templates/Images/Spanien/Images/marker.png'
			});

			google.maps.event.addListener(markerName, "click", function (e) {

				var boxText = ib.getContent();
				var heading = '<h4>' + markerHeading + '</h4>';
				
				var price = '<p><strong>' + markerPriceLbl + '</strong> ' + markerPrice + '</p>';
				var rooms = '<p><strong>' + markerRoomsLbl + '</strong> ' + markerRooms + '</p>';
				var sqm = '<p><strong>' + markerSqmLbl + '</strong> ' + markerSqm + '</p>';



				
				var site_url = '<p><a href="' + markerLink + '">Till kontorets sida</a></p>';
				var content = '<div class="highlighted"><a href="' + markerLink + '"><img class="map_image" src="' + markerImage + '"><div class="innerArea cf"><div class="map_info">' +
													heading + price + rooms + sqm + '</div></div><div class="bottomEdge"></div></a></div>';

				ib.setContent(content);
				ib.open(map, this);

				map.setCenter(markerName.position);
				map.panBy(0, -160);

			});

		});

		var jayzMapType = new google.maps.StyledMapType(styledMapOptions);
		map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);

	},
	officeMap: function () {

		var map;
		var spain = new google.maps.LatLng(37.009937, -4.886352);
		var MY_MAPTYPE_ID = 'fastighetsbyrån';
		var boxText = document.createElement("div");
		var myOptions = {
			content: boxText,
			alignBottom: true,
			disableAutoPan: false,
			maxWidth: 0,
			pixelOffset: new google.maps.Size(-116, -44),
			zIndex: null,
			boxStyle: {
				width: "230px"
			},
			closeBoxMargin: "-19px -19px 0 0",
			closeBoxURL: "/Templates/Images/Spanien/Images/close.png",
			infoBoxClearance: new google.maps.Size(1, 1),
			isHidden: false,
			pane: "floatPane",
			enableEventPropagation: false
		};


		var ib = new InfoBox(myOptions);

		var mapOptions = {
			zoom: 14,
			center: spain,
			mapTypeControlOptions: {
				mapTypeIds: [google.maps.MapTypeId.SATELLITE, MY_MAPTYPE_ID]
			},
			mapTypeId: MY_MAPTYPE_ID
		};

		map = new google.maps.Map(document.getElementById("map_canvas_object"), mapOptions);

		var styledMapOptions = {
			name: "The Real Estate Agency View"
		};

		$(".marker").each(function () {

			var markerName = $(this).find(".name").html();
			var markerLatitude = $(this).find(".lat").html();
			var markerLongitude = $(this).find(".lng").html();


			var markerName = new google.maps.Marker({
				position: new google.maps.LatLng(markerLatitude, markerLongitude),
				map: map,
				title: markerName,
				clickable: false,
				icon: '/Templates/Images/Spanien/Images/marker.png'
			});


			map.setCenter(markerName.position);

		});

		var jayzMapType = new google.maps.StyledMapType(styledMapOptions);
		map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
	}
}