google.load('maps','2');
google.load('search' , '1');

// constructing map
var map;
var geocoder;
var searcher;
var searchResults = [];
var searchForm;
var markerCluster;
var markers = [];
var styles = [];
var pepCluster;
var peps = [];
var pepStyles = [];
var luisterCluster;
var luisterpunten = [];
var luisterStyles = [];
var sterrenArray = [];
var studioCoords;
var targetIdentifier;

var gSmallIcon = null;


function initialize() {
	
	gSmallIcon = new google.maps.Icon();
    gSmallIcon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
    gSmallIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    gSmallIcon.iconSize = new google.maps.Size(12, 20);
    gSmallIcon.shadowSize = new google.maps.Size(22, 20);
    gSmallIcon.iconAnchor = new google.maps.Point(6, 20);
    gSmallIcon.infoWindowAnchor = new google.maps.Point(5, 1);
	
	
	studioCoords = new google.maps.LatLng(52.238930,5.168874);

	// initializing variables
	geocoder = new google.maps.ClientGeocoder(); 

	// setting init options and map
	map = new google.maps.Map2(document.getElementById("map_canvas"));
	map.setMapType(G_PHYSICAL_MAP);	
//	map.setMapType(G_SATELLITE_MAP);	
//	map.setMapType(G_HYBRID_MAP);	
//	map.setMapType(G_NORMAL_MAP);	
	map.setCenter(studioCoords, 8);
//	map.enableGoogleBar();
	searchForm = new google.search.SearchForm(false, document.getElementById("pep_location"));	
//	searchForm.setOnSubmitCallback(null, CaptureForm);
	
    // Initialize the local searcher
    searcher = new google.search.LocalSearch();
//	searcher.setNoHtmlGeneration();
    searcher.setCenterPoint(map);
    searcher.setSearchCompleteCallback(null, OnLocalSearch);	
		     
      		
	// skin googlebar
	$('.gmnoprint').css('bottom','36px');

	// top2000 marker (webcam)
	var icon  = new google.maps.Icon(G_DEFAULT_ICON);
	icon.iconSize = new google.maps.Size(104, 25);
	icon.image = "img/iconTop2000.png";
//	icon.shadow = "img/iconTop2000Shadow.png";
	
	var studiomarker = new google.maps.Marker(studioCoords, { icon: icon });	
	map.addOverlay(studiomarker);
	
	// re-position map-controls
 	var topLeft = new google.maps.ControlPosition(G_ANCHOR_TOP_LEFT, new GSize(20,80));
	var topRight = new google.maps.ControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(20,80));
    var mapControl3D = new google.maps.LargeMapControl3D();
//  var mapTypeControl = new google.maps.MapTypeControl();
    map.addControl(mapControl3D, topLeft);
//  map.addControl(mapTypeControl, topRight);	

	// set up markerclusterer
	styles = [[{
        url: 'img/blue_cluster_middle.png',
        height: 20,
        width: 20,
        opt_anchor: [20, 0],
        opt_textColor: '#FFF'
      },
      {
        url: 'img/blue_cluster_bigmiddle.png',
        height: 32,
        width: 32,
        opt_anchor: [35, 0],
        opt_textColor: '#FFF'
      },
      {
        url: 'img/blue_cluster_big.png',
        height: 52,
        width: 52,
        opt_anchor: [52, 0],
        opt_textColor: '#FFF'
      }]];	

	// set up markerclusterer
	pepStyles = [[{
        url: 'img/orange_cluster_middle.png',
        height: 20,
        width: 20,
        opt_anchor: [20, 0],
        opt_textColor: '#FFF'
      },
      {
        url: 'img/orange_cluster_bigmiddle.png',
        height: 40,
        width: 40,
        opt_anchor: [40, 0],
        opt_textColor: '#FFF'
      },
      {
        url: 'img/orange_cluster_big.png',
        height: 52,
        width: 52,
        opt_anchor: [52, 0],
        opt_textColor: '#FFF'
      }]];	
      
 	// set up markerclusterer
	luisterStyles = [[{
        url: 'img/purple_cluster_middle.png',
        height: 20,
        width: 20,
        opt_anchor: [20, 0],
        opt_textColor: '#FFF'
      },
      {
        url: 'img/purple_cluster_bigmiddle.png',
        height: 40,
        width: 40,
        opt_anchor: [40, 0],
        opt_textColor: '#FFF'
      },
      {
        url: 'img/purple_cluster_big.png',
        height: 52,
        width: 52,
        opt_anchor: [52, 0],
        opt_textColor: '#FFF'
      }]];	     
      
	
	onMapLoaded();

}

function onMapLoaded() {
	var hashID = document.location.hash.replace('#','');
	if (hashID != '') {				
		getHashData(hashID);				
	} else {
		searchSong(null,'init');	
//		var randArray = [44,75,937,148,5393,329,1720, 1191, 1547, 1846, 259];
//		var numRand = Math.floor(Math.random()*11);
//		getHashData(randArray[numRand]);				
	}	
	getPlaatsEenPlaat();
	getLuisterpunten();
	getSterren();
	
//	toggleSongPicker();	
	
}


// Called when Local Search results are returned, we clear the old
// results and load the new ones.
function OnLocalSearch() {

	if (targetIdentifier == 'pep') {
		$('#' + targetIdentifier + '_form').animate({height: "318px", duration: 1000});	
	} else {
		$('#' + targetIdentifier + '_form').animate({height: "288px", duration: 1000});			
	}

	$('#' + targetIdentifier + '_form_part3').fadeOut();	
	$('#' + targetIdentifier + '_location_content').slideDown();										
	
	if (!searcher.results) return;
//	if (targetIdentifier == 'pep') {
//		var searcherResultContainer = document.getElementById("pep_location_content");
//	} else {
//		var searcherResultContainer = document.getElementById("luister_location_content");		
//	}
	var searcherResultContainer = $('#' + targetIdentifier + '_location_content');

	// Clear the map and the old search well
	searcherResultContainer.innerHTML = "";
	$('#' + targetIdentifier + '_location_content').html("");
	for (var i = 0; i < searchResults.length; i++) {
  		map.removeOverlay(searchResults[i].marker());
	}

	searchResults = [];
	if (searcher.results.length > 0) {
		for (var i = 0; i < searcher.results.length; i++) {
			searchResults.push(new LocalResult(searcher.results[i]));
		}
		
		var attribution = searcher.getAttribution();
		if (attribution) {
			$('#' + targetIdentifier + '_location_content').append(attribution);
//			document.getElementById("pep_location_content").appendChild(attribution);
		}
	
		$('#' + targetIdentifier + '_location_list').jScrollPane();		
	
		// move the map to the first result
		var first = searcher.results[0];
		map.panTo(new google.maps.LatLng(first.lat, first.lng));
	} else {
	
		$('#' + targetIdentifier + '_location_content').html("<p style='font-size:11px; width: 180px'>De door U opgegeven lokatie kan helaas niet gevonden worden. <br /><br />Om gerichter te zoeken, typ de plaatsnaam achter uw zoekopdracht.<br /><br />Bijvoorbeeld:<br />'Stationsplein, Hilversum'<br/>'Paradiso, Amsterdam'.</p>");
		
	}
		
//	map.setZoom(13);
//	searcher.setCenterPoint(map);	
}

 // Cancel the form submission, executing an AJAX Search API search.
function CaptureForm(value, target) {
	targetIdentifier = target;
	searcher.setCenterPoint(map);	
	searcher.execute(value);
	return false;
}


// A class representing a single Local Search result returned by the
// Google AJAX Search API.
function LocalResult(result) {
	this.resultObj = result;
	
	var lat = this.resultObj.lat;
	var lng = this.resultObj.lng;

	var container = document.createElement("ul");
	container.className = targetIdentifier + "_location_list";
//	container.appendChild(this.resultObj.html.cloneNode(true));
	$(container).append('<li><a class="set_location_link" href="javascript:dummy()" onclick="selectLocation(' + lat + ',' + lng + ')"><span class="' + targetIdentifier + '_title">' + this.resultObj.title + '</span><br /><span class="' + targetIdentifier + '_city">' + this.resultObj.city + '</span></a></li>');

	$('#' + targetIdentifier + '_location_content').append(container);	
//	document.getElementById("pep_location_content").appendChild(container);
	map.addOverlay(this.marker(gSmallIcon));
}

// Returns the GMap marker for this result, creating it with the given
// icon if it has not already been created.
LocalResult.prototype.marker = function(opt_icon) {
	if (this.marker_) return this.marker_;
	var marker = new google.maps.Marker(new google.maps.LatLng(parseFloat(this.resultObj.lat), parseFloat(this.resultObj.lng)),opt_icon);
	GEvent.bind(marker, "click", this, function() {
//		marker.openInfoWindow(this.unselectedHtml());
		var lat = marker.getLatLng().lat();
		var lng = marker.getLatLng().lng();
		selectLocation(lat, lng);
	});
	this.marker_ = marker;
	return marker;
}

function toggleMarkers(target) {
	
	var markerArray = [];
	var cluster;
	
	switch (target) {
		case 'vote':
			markerArray = markers;
			cluster = markerCluster;
			break;	
		case 'plaat':
			markerArray = peps;
			cluster = pepCluster;
			break;	
		case 'luister':
			markerArray = luisterpunten;
			cluster = luisterCluster;
			break;	
	}
	
	if ($('#switch_' + target).attr('class') == 'off') {
		
		cluster.showMarkers();
		$('#switch_' + target).removeClass('off');	
				
		if (target == 'vote') {
			$('#growl').fadeIn();
		}

	} else {

		cluster.hideMarkers();
		
		 $('#switch_' + target).addClass('off');	
		 
		if (target == 'vote') {
			$('#growl').fadeOut();
		}
	}
	
}