// Add site spesific javascript here

//Class to make google map
FkraGoogleMap = Class.create({

	//divelement
	mapElement : "",
	
	//map obj
	gmapObj: "",
	
	//map info
	centerLatitude: "",
	centerLongitude: "",
	zoom: "",
	markerTitle: "",
	
	//json array with coordinates and infoWindowHtml, given in corepublish-articles
	markersArray: [],
	
	markerObj: "",
	
	//icon
	iconObj: "",

	initialize : function(centerLatitude, centerLongitude, zoom, markersArray){
		this.centerLatitude = centerLatitude;
		this.centerLongitude = centerLongitude;
		this.zoom = zoom;
		this.markersArray = markersArray;
		this.markerTitle = "FKRA";
		
		if (GBrowserIsCompatible()) {
			this.mapElement = $('map');
			
			//set up map object
			this.gmapObj = new GMap2(this.mapElement);
			this.gmapObj.addControl(new GLargeMapControl());
			this.gmapObj.addControl(new GMapTypeControl());
			this.gmapObj.setCenter(new GLatLng(this.centerLatitude, this.centerLongitude), this.zoom);
			
			//add point-markers to the map
			this.addMarkers();
			
		} else {
			$('map').innerHTML = "<p>We're sorry, but your browser doesn't support the Google Maps API.</p>";
		}
		
	},
	//create marker icons, with our own icon images
	createIcon : function() {
		this.iconObj = new GIcon();

		this.iconObj.image = "/images/googlemap/FKRAico.png";
		this.iconObj.shadow = "/images/googlemap/FKRA_shadow.png";
		
		this.iconObj.iconSize = new GSize(18, 27);
		this.iconObj.shadowSize = new GSize(1, 20);
		
		this.iconObj.iconAnchor = new GPoint(8, 27);
		this.iconObj.infoWindowAnchor = new GPoint(5, 1); 

	},
	//get one single marker to place on a given map-point. 
	//The marker uses our own icon, and adds given html into a info window shown on marker click
	getMarker : function(point, markerTitle, infoWindowHtml) {
		var marker = new GMarker(point,{ title:markerTitle, icon:this.iconObj });

        GEvent.addListener(marker, "click", function()  { 
               marker.openInfoWindowHtml(infoWindowHtml); 
        });
		
		return marker;

	},
	//take all marker-points given to the class and place them on the google map
	addMarkers : function(){
		this.createIcon();
		
		gMarkerManagerObj = new GMarkerManager(this.gmapObj); 

		//array with all markers, contains point and html for info-window
		var markers = [];
		
		
		var point = "";

		//loop through markersArray and get array of map-markers
		for (var i = 0; i < this.markersArray.length; i++) {
			point = "";
			
			point = new GLatLng(this.markersArray[i]['latitude'],this.markersArray[i]['longitude']);
			markers.push(this.getMarker(point,this.markersArray[i]['title'],this.markersArray[i]['articles']));
		}
		
		//add all markers to the map
		gMarkerManagerObj.addMarkers(markers, 0,0); 
		gMarkerManagerObj.refresh(); 
			
	}

});