// JavaScript Document

var gmarkers;
var map;
var map_zoom;
var mapzoomControl = new GSmallMapControl();
var mapzoomOnder = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,190));
var tempMarker = null;
var openMarker = null;
var openMarkerID = 0;
var loadcat;
var popupImages = new Array();
var popupMovies = new Array();
var curImage = 0;
var topPopup = '';

var baseIcon = new GIcon();
baseIcon.shadow = "none";
baseIcon.iconSize = new GSize(50, 50);
baseIcon.iconAnchor = new GPoint(25, 25);
	
// Create our marker icon
var curIcon = new GIcon(G_DEFAULT_ICON);
curIcon.image = themeUrl + "/images/marker-last.png";
curIcon.imageMap = [0,0,0,38,38,38,38,0,0,0];
curIcon.shadow = "none";
curIcon.iconSize = new GSize(38, 38);
curIcon.shadowSize = new GSize(0,0);
curIcon.iconAnchor = new GPoint(2, 19);
curIcon.infoWindowAnchor = new GPoint(9, 2);

// Create our marker icon
var redIcon = new GIcon(G_DEFAULT_ICON);
redIcon.image = themeUrl + "/images/marker-normal.png";
redIcon.shadow = "none";
redIcon.iconSize = new GSize(18, 19);
redIcon.shadowSize = new GSize(0,0);
redIcon.iconAnchor = new GPoint(2, 10);
redIcon.infoWindowAnchor = new GPoint(9, 2);

// Create our marker icon
var transIcon = new GIcon(G_DEFAULT_ICON);
transIcon.image = themeUrl + "/images/marker-trans.png";
transIcon.shadow = "none";
transIcon.iconSize = new GSize(18, 19);
transIcon.shadowSize = new GSize(0,0);
transIcon.iconAnchor = new GPoint(2, 10);
transIcon.infoWindowAnchor = new GPoint(9, 2);

// Create our BIG marker icon
var redIconBig = new GIcon(G_DEFAULT_ICON);
redIconBig.image = themeUrl + "/images/marker-bottom.png";
redIconBig.iconSize = new GSize(53, 53);
redIconBig.shadowSize = new GSize(0,0);
redIconBig.iconAnchor= new GPoint(50,25);

// Function to bind events for switching between movie and info popup
function addJQueryEvents(id){
	// Reorder the info and movie window is the movie is behind
	if(topPopup=='info'){
		$('.moviePopup').click(function(){
			openMarker.closeinfoWindow();
			openMarker.closemovieWindow();
			openMarker.closeaudioWindow();
			openMarker.openinfoWindow(popupHTML[id]);
			if(audioHTML[id]!=""){
				openMarker.openaudioWindow(audioHTML[id]);
				topPopup = 'audio';
			}else if(movieHTML[id]!=""){
				openMarker.openmovieWindow(movieHTML[id]);
				topPopup = 'movie';
			}
			
			addJQueryEvents(id);
			$(".infoPopup .summary").jScrollPane({ showArrows:true });
		});
	}
	// Reorder the info and movie window is the info is behind
	if(topPopup=='movie'){
		$('.infoPopup').click(function(){
			openMarker.closeaudioWindow();
			openMarker.closemovieWindow();
			openMarker.closeinfoWindow();
			if(audioHTML[id]!=""){
				openMarker.openaudioWindow(audioHTML[id]);
			}else if(movieHTML[id]!=""){
				openMarker.openmovieWindow(movieHTML[id]);
			}
			openMarker.openinfoWindow(popupHTML[id]);
			topPopup = 'info';
			addJQueryEvents(id);
			$(".infoPopup .summary").jScrollPane({ showArrows:true });
		});
	}
	// Remove the dragging on mouseover of the popups
	$('.infoPopup').mouseover(function(){
		map_zoom.disableDragging();
	}).mouseout(function(){
		map_zoom.enableDragging();
	});
	$('.moviePopup').mouseover(function(){
		map_zoom.disableDragging();
	}).mouseout(function(){
		map_zoom.enableDragging();
	});
	$('.moviePopup embed').mouseover(function(){
		map_zoom.disableDragging();
	}).mouseout(function(){
		map_zoom.enableDragging();
	});
	$('.moviePopup object').mouseover(function(){
		map_zoom.disableDragging();
	}).mouseout(function(){
		map_zoom.enableDragging();
	});
	$('.imagePopup').mouseover(function(){
		map_zoom.disableDragging();
	}).mouseout(function(){
		map_zoom.enableDragging();
	});
}

function drawPopups(id){
	// Close previous markers
	if(openMarker){
		openMarker.closeimageWindow();
		openMarker.closemovieWindow();
		openMarker.closeaudioWindow();
		openMarker.closeinfoWindow();
	}
	
	// Draw image popup
	if(imageHTML[id]!=""){
		openMarker.openimageWindow(imageHTML[id]);
		// Add image navigation
		curImage = 0;
		$('.imagePopup .prev a').click(function(){
			curImage = curImage - 1
			if(curImage == -1) curImage = popupImages.length - 1;
			$('.imagePopup #curimage').attr('src', popupImages[curImage]);
			imageNumber = curImage + 1;
			$('.imagePopup .count').html('Foto ' + imageNumber + ' van ' + popupImages.length);
		});
		$('.imagePopup .next a').click(function(){
			curImage = curImage + 1
			if(curImage == (popupImages.length)) curImage = 0;
			$('.imagePopup #curimage').attr('src', popupImages[curImage]);
			imageNumber = curImage + 1;
			$('.imagePopup .count').html('Foto ' + imageNumber + ' van ' + popupImages.length);
		});
	}
	// Draw info popup
	if(popupHTML[id]!=""){
		openMarker.openinfoWindow(popupHTML[id]);
		// Add custom scrollbar
		$(".infoPopup .summary").jScrollPane({ showArrows:true });
		// Overwrite current top window
		topPopup = 'info';
	}
	// Draw movie popup
	if(movieHTML[id]!=""){
		openMarker.openmovieWindow(movieHTML[id]);
		// Overwrite current top window
		topPopup = 'movie';
	}
	// Draw movie popup
	if(audioHTML[id]!=""){
		openMarker.openaudioWindow(audioHTML[id]);
		// Overwrite current top window
		topPopup = 'audio';
	}
	// Bind JQuery events to elements
	addJQueryEvents(id);
}

// Function to place POI's on the MAP
function createMarker(point, index, label, id, categorie, datum, soort, lon, lat, desc, files, icon, movie) {
	if(icon!=""){
		customIcon = new GIcon(baseIcon,icon);
		tooltipHTML[id] = '';
		var marker = new GMarker(point, customIcon);
		gmarkers[id] = marker;
	}else{
		// Recent locations
		if(index==1){
			customIcon = new GIcon(curIcon);
			tooltipHTML[id] = '<div class="tooltip">'+label+'</div>';
		// Older locations
		}else if(index<6){
			customIcon = new GIcon(redIcon);
			tooltipHTML[id] = '<div class="tooltip">'+label+'</div>';
		// Older locations
		}else{
			customIcon = new GIcon(transIcon);
			tooltipHTML[id] = '<div class="tooltip trans">'+label+'</div>';
		}
		var marker = new GMarker(point, customIcon);
		gmarkers[id] = marker;
	}

	
	// Add city label to marker
	if(tooltipHTML[id]!=""){
		marker.openToolTip(tooltipHTML[id],index);
	}
	
	// Create popup html for top map mouseover effect
	topPopupHTML[id] = '';
	if(desc!=""){
		// Strip HTML
		new_desc = desc.replace(/(<([^>]+)>)/ig,"");
		topPopupHTML[id] = '<div class="mousePopup">';
		topPopupHTML[id] = topPopupHTML[id] + '<div class="summary">' + new_desc.substring(0,100) + '</div>';
		topPopupHTML[id] = topPopupHTML[id] + '</div>';
	}
	
	// Add mouseover popup
	if(topPopupHTML[id]!=""){
		GEvent.addListener(marker,'mouseover',function() { marker.openmouseWindow(topPopupHTML[id],index); });
		GEvent.addListener(marker,'mouseout',function() { marker.closemouseWindow(); });
	}
	
	// Get all files and place them in an array
	popupImages = new Array();
	popupMovies = new Array();
	var aFiles = files.split(",");
	for(var i=0; i<aFiles.length; i++){
		// Check the file extension
		var filename = aFiles[i];
		lastDot = filename.lastIndexOf(".");
		files_ext = '';
		if( lastDot != -1 ){ 
			files_ext = filename.substr(lastDot+1,filename.length);
		}
		// Check if the file is an image and add to array
		if(files_ext=='jpg' || files_ext=='jpeg' || files_ext=='gif' || files_ext=='png' || files_ext=='bmp'){
			popupImages.push(filename);
		}
	}
	
	// Create all HTML for popups in bottom map
	popupHTML[id] = '';
	if(desc!=""){
		popupHTML[id] = popupHTML[id] + '<div class="infoPopupWrapper">';
		popupHTML[id] = popupHTML[id] + '<div class="infoPopup">';
		popupHTML[id] = popupHTML[id] + '<h2>' + label + '</h2>';
		popupHTML[id] = popupHTML[id] + '<div class="summary">' + desc + '</div>';
		popupHTML[id] = popupHTML[id] + '<div class="slider"></div>';
		popupHTML[id] = popupHTML[id] + '</div>';
		popupHTML[id] = popupHTML[id] + '</div>';
	}

	imageHTML[id] = '';
	if(popupImages.length){
		imageHTML[id] = imageHTML[id] + '<div class="imagePopup">';	
		imageHTML[id] = imageHTML[id] + '<div class="image"><img src="' + popupImages[0] + '" id="curimage"></div>';
		imageHTML[id] = imageHTML[id] + '<div class="prev"><a href="#"><img src="/wp-content/themes/hierisministerverhagen/images/arrow-prev.png" alt="Vorige"></a></div>';
		imageHTML[id] = imageHTML[id] + '<div class="count">Foto 1 van ' + popupImages.length + '</div>';
		imageHTML[id] = imageHTML[id] + '<div class="next"><a href="#"><img src="/wp-content/themes/hierisministerverhagen/images/arrow-next.png" alt="Volgende"></a></div>';
		imageHTML[id] = imageHTML[id] + '</div>';
	}

	movieHTML[id] = '';
	audioHTML[id] = '';
	if(movie!="" && movie.search('class="audio"')!=-1){
		audioHTML[id] = audioHTML[id] + '<div class="moviePopup">';
		audioHTML[id] = audioHTML[id] + '<div class="audio">' + movie + '</div>';
		audioHTML[id] = audioHTML[id] + '</div>';
	}else if(movie!=""){
		movieHTML[id] = movieHTML[id] + '<div class="moviePopup">';
		movieHTML[id] = movieHTML[id] + '<div class="movie">' + movie + '</div>';
		movieHTML[id] = movieHTML[id] + '</div>';
	}
	
	
	// Laat popup zien als je klikt
	GEvent.addListener(marker,'click',function() {
		if(openMarker){
			openMarker.closeimageWindow();
			openMarker.closemovieWindow();
			openMarker.closeaudioWindow();
			openMarker.closeinfoWindow();
		}	

		moveUp();
		map_zoom.addControl(mapzoomControl, mapzoomOnder);
		map_zoom.clearOverlays();
		
		// Set the center of the map a little to the bottom
		var centerLocation = map_zoom.fromLatLngToDivPixel(new GLatLng(lat, lon));
		centerLocation.y = centerLocation.y - 100;
		var map_center = map_zoom.fromDivPixelToLatLng(centerLocation);
		map_zoom.setCenter(map_center,18);
		
		// Add the marker
		var tempMarker = createMarkerBig(point, label, id, categorie, datum, soort, lon, lat, desc, files, icon); 
		map_zoom.addOverlay(tempMarker);
		
		// Get all files and place them in an array
		popupImages = new Array();
		popupMovies = new Array();
		var aFiles = files.split(",");
		for(var i=0; i<aFiles.length; i++){
			// Check the file extension
			var filename = aFiles[i];
			lastDot = filename.lastIndexOf(".");
			files_ext = '';
			if( lastDot != -1 ){ 
				files_ext = filename.substr(lastDot+1,filename.length);
			}
			// Check if the file is an image and add to array
			if(files_ext=='jpg' || files_ext=='jpeg' || files_ext=='gif' || files_ext=='png' || files_ext=='bmp'){
				popupImages.push(filename);
			}
		}
		
		openMarkerID = id;
		openMarker = tempMarker;

		// Open the popups
		drawPopups(id);
		
	});
	
	// Auto open popup for nu_twittert category
	if(categorie == "nu_twittert"){
		if(openMarker){
			openMarker.closeimageWindow();
			openMarker.closemovieWindow();
			openMarker.closeinfoWindow();
		}	
		//map.checkResize();
		moveUp();
		map_zoom.clearOverlays();
		
		// Set the center of the map a little to the bottom
		var centerLocation = map_zoom.fromLatLngToDivPixel(new GLatLng(lat, lon));
		centerLocation.y = centerLocation.y - 25;
		var map_center = map_zoom.fromDivPixelToLatLng(centerLocation);
		map_zoom.setCenter(map_center,18);
		// Add the marker
		var tempMarker = createMarkerBig(point, label, id, categorie, datum, soort, lon, lat, desc, files, icon); 
		map_zoom.addOverlay(tempMarker);
		// Open the popup
		tempMarker.openinfoWindow(popupHTML[id]);
		topPopup = 'info';
		// Add custom scrollbar
		$(".infoPopup .summary").jScrollPane({ showArrows:true });
		// Overwrite current top window
		topPopup = 'info';
		// Bind JQuery events to elements
		addJQueryEvents(id);
		
		openMarkerID = id;
		openMarker = tempMarker;
		
		// set the center of upper map to click point		
		/*window.setTimeout(function() {	
			map.checkResize();		   
			map.setCenter(new GLatLng(lat, 1.0),2);
		}, 500);*/
	}
	
	return marker;
}

function createMarkerBig(point, index, label, id, categorie, datum, soort, lon, lat, desc, files, icon, movie) {
	
	var marker = new GMarker(point, redIconBig);
	gmarkers[id] = marker;
		
	return marker;
}

function getNewPois(categorie) {
	map.clearOverlays();
	
	gmarkers = [];
	topPopupHTML = [];
	popupHTML = [];
	imageHTML = [];
	audioHTML = [];
	movieHTML = [];
	tooltipHTML = [];
	mouseHTML = [];
	
	GDownloadUrl(wpUrl + "/cat-xml.php?cat="+categorie, function(data, responseCode) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			var datum = '';
			var id = '';
			var label = '';
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
			if(markers[i].getAttribute("lat")!=''&&markers[i].getAttribute("lng")!=''){
				categorie = markers[i].getAttribute("categorie");
				datum = markers[i].getAttribute("datum");
				soort = markers[i].getAttribute("soort");
				id = markers[i].getAttribute("objectid");
				lat = markers[i].getAttribute("lat");
				lon = markers[i].getAttribute("lng");
				label = markers[i].getAttribute("label");
				desc = markers[i].getAttribute("description");
				files = markers[i].getAttribute("files");
				icon = markers[i].getAttribute("icon");
				movie = markers[i].getAttribute("movie");
				
				map.addOverlay(createMarker(point, i, label, id, categorie, datum, soort, lon, lat, desc, files, icon, movie));
			}
		}
		if(categorie=='nu_beeld' || categorie=='geweest_beeld'){
			$("#map_canvas [id^=mtgt]").css('border', '2px solid white');
			$(".gmnoprint").css('border', '0px');
		}
	});
}


// Functions to create an object with marker data
function gmarkerData(label, id, categorie, datum, soort, lon, lat, label, desc, files, icon, movie){
	this.label=label;
	this.id=id;
	this.categorie=categorie;
	this.datum=datum;
	this.soort=soort;
	this.lon=lon;
	this.lat=lat;
	this.label=label;
	this.desc=desc;
	this.files=files;
	this.icon=icon;
	this.movie=movie;
}


//show geo xml from ex Picasa:
//geoXml = new GGeoXml("http://picasaweb.google.com/data/feed/base/user/picasateam/albumid/5080138758345059425?kind=photo&alt=kml&hl=en_US");
//map.addOverlay(geoXml);
		
function initialize() {
	if (GBrowserIsCompatible()) {

		//initialize map
		map = new GMap2(document.getElementById("map_canvas"));
		map.setCenter(new GLatLng(45.0, 12.0), 3);
		map.setMapType(G_SATELLITE_MAP);
		//map.disableDragging();

		//standard controls 
		//map.addControl(new GSmallZoomControl());
		map.addControl(mapzoomControl);	
			
		//initialize map_zoom
		map_zoom = new GMap2(document.getElementById("map_canvas_zoom"));
		map_zoom.setCenter(new GLatLng(52.08317980227112, 4.326167106628418), 18);
		map_zoom.setMapType(G_SATELLITE_MAP);
		GEvent.addListener(map_zoom, "zoomend", function() { drawPopups(openMarkerID); });
		//map_zoom.disableDragging();

		//standard controls 
		map_zoom.addControl(mapzoomControl, mapzoomOnder);

		//load feed
		getNewPois(loadcat);
		
	}
}