var currentYaw = 180;
var currentPitch = 0;
var timer;
var svp;
var svc;
var lat = 53;
var lon = -2;
var panoramaOptions;
var map;
var mapLocate;
var info;
var cluster;
var markersArray;
var currentOpinions;

function initialize() {
if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("mapDiv"),{size:new GSize(680,600)});
	map.setCenter(new GLatLng(lat, lon),2);
	map.enableScrollWheelZoom();
	map.enableGoogleBar();
	map.setUIToDefault();
	//map.addControl(new GLargeMapControl());
	//map.addControl(new GMapTypeControl());
	map.setMapType(G_HYBRID_MAP);
	map.addOverlay(new GStreetviewOverlay());
	//var panoramaOptions = { latlng:new GLatLng(lat, lon) };
	svc = new GStreetviewClient();
	
	panoramaOptions = { latlng:new GLatLng(lat, lon) };
	svp = new GStreetviewPanorama(document.getElementById("panorama2"), panoramaOptions);
	svp.hide();
	var dirn = new GDirections();
	timer = window.setInterval(spiral, 75);
	
if (google.loader.ClientLocation != null){
		lat = google.loader.ClientLocation.latitude;
		lon = google.loader.ClientLocation.longitude;
	}	
	mapLocate = new GMap2(document.getElementById("mapLocate"),{size:new GSize(350,350)});
	var center = new GLatLng(lat, lon);
	mapLocate.setCenter(center, 9);
	mapLocate.addControl(new GLargeMapControl());
	mapLocate.addControl(new GMapTypeControl());
	mapLocate.enableScrollWheelZoom();
	mapLocate.enableGoogleBar();
	mapLocate.setMapType(G_HYBRID_MAP);
	
	scapeMarker = new GMarker(center, {draggable: true});
	
	GEvent.addListener(mapLocate, "moveend", function() {
		mapLocate.closeInfoWindow();
		mapLocate.clearOverlays();		
		scapeMarker = new GMarker(new GLatLng(mapLocate.getCenter().lat() ,mapLocate.getCenter().lng()), {draggable: true});		
		mapLocate.addOverlay(scapeMarker);
		document.getElementById("latitude").value = scapeMarker.getPoint().lat();
		document.getElementById("longitude").value = scapeMarker.getPoint().lng();
		GEvent.addListener(scapeMarker, "dragend", draggedEnd);
	});
	
	GEvent.addListener(scapeMarker, "dragend", draggedEnd);
	
	mapLocate.addOverlay(scapeMarker);
	
	GDownloadUrl("http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/genXML.php", function(data) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		markersArray=[];
		var sampleID;
		var quality;
		var overallQuality;
		var time;
		var date;
		var model;
		var pleasant;
		var exciting;
		var eventful;
		var chaos;
		var fileName;
		var opinion;
		var point;
		var marker;
		var flagged;
		var positive;
		var negative;
		var randomNumber = Math.floor(Math.random()*markers.length);
		
		for (var i = 0; i < markers.length; i++) {
			positive = markers[i].getAttribute("positive");
			negative = markers[i].getAttribute("negative");
			flagged = markers[i].getAttribute("flagged");
			sampleID = markers[i].getAttribute("sampleID");
			quality = markers[i].getAttribute("quality");
			overallQuality = markers[i].getAttribute("overallQuality");
			time = markers[i].getAttribute("time");
			date = markers[i].getAttribute("date");
			model = markers[i].getAttribute("model");
			pleasant = markers[i].getAttribute("pleasant");
			exciting = markers[i].getAttribute("exciting");
			eventful = markers[i].getAttribute("eventful");
			chaos = markers[i].getAttribute("chaos");
			fileName = markers[i].getAttribute("fileName");
			opinion = markers[i].getAttribute("opinion");
			point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
			if(flagged == 0){
				if(i == randomNumber){
					createRandomScape(opinion,fileName);
					}
				info = createHTML(sampleID,fileName,quality,overallQuality,time,date,model,pleasant,exciting,eventful,chaos,opinion);
				
				var opinions = createOpinions(sampleID,quality,overallQuality,time,date,model,pleasant,exciting,eventful,chaos,positive,negative);
				
				marker = createMarker(point, info, fileName,sampleID,opinions);
				markersArray.push(marker);
				
				
			}
		}
		cluster=new ClusterMarker(map, { markers:markersArray } );
		cluster.refresh();
		//causing FF to zoom out and die!!!!!??????
		//cluster.fitMapToMarkers();
		svp.hide();	
		});
		svp.hide();	
	}
	svp.hide();
}
//initialise end point

function createRandomScape(text,uniqueCode){
document.getElementById('randomDiv').innerHTML = "Random soundscape:<p></p><object type=\"application/x-shockwave-flash\" data=\"http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/player.swf\" id=\"audioplayer1\" height=\"24\" width=\"290\"><param name=\"movie\" value=\"http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/player.swf\"><param name=\"FlashVars\" value=\"playerID=1&amp;soundFile=http://www.soundaroundyou.com/Soundscapes/"+uniqueCode+".mp3\"><param name=\"quality\" value=\"high\"><param name=\"menu\" value=\"false\"><param name=\"wmode\" value=\"transparent\"></object><img src=\"http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/x.gif\" alt=\"http://www.soundaroundyou.com/Soundscapes/"+uniqueCode+".mp3\"/><p style=\"padding:10px 10px 10px 10px; width:300px; font-style:italic;\">\""+text+"\"</p>";
}

function spiral() {
		if(svp){
			currentYaw += 0.5;
			svp.panTo({yaw:currentYaw, pitch:0});
		}
}

function streetviewclient_callback(streetviewdata){
    if(streetviewdata.code==200){		
			svp.setLocationAndPOV(streetviewdata.location.latlng);
		}else{
			svp.hide();	
		}
  }

  
  var moveListener;
  var currentMarker;
  var curentInfo;
  var currentID;
  function panEnded(){
  currentMarker.openInfoWindowTabsHtml([new GInfoWindowTab("Reasons",currentInfo), new GInfoWindowTab("Opinions",currentOpinions)]);

		//currentMarker.openInfoWindowHtml(currentInfo);
		document.getElementById("phpFrame").innerHtml = currentID;
		
		GEvent.removeListener(moveListener);
  }

function createMarker(point, info, fileName,ID,opinions) {
	marker = new GMarker(point);
	GEvent.addListener(marker, 'click', function(point)
	{
		var result = map.fromLatLngToContainerPixel(point);
		var xShift = 456 - result.x;
		var yShift = (parseInt(document.getElementById("mapDiv").style.height)-25) - result.y;
		
		map.panBy(new GSize(xShift,yShift));
		currentID = ID;
		currentMarker = this;
		currentInfo = info;
		currentOpinions = opinions;
		moveListener = GEvent.addListener(map, "moveend", panEnded);	
		
		//marker.openInfoWindowHtml(info);
		
		svc.getNearestPanorama(point,streetviewclient_callback);
		
	});
	GEvent.addListener(map, "infowindowclose", function() {
		if(svp){
			svp.hide();
		}
        }); 
	return marker;
}

function ratingSaved(){
	//document.getElementById("rateMe").style.display = "none";
}

function createOpinions(sampleID,quality,overallQuality,time,date,model,pleasant,exciting,eventful,chaos,positive,negative){

if (model=="")
	{
	model = "No device info";
	}
if (positive.length > 25){
	positive = positive.substr(0,25);
}
if (negative.length > 25){
	negative = negative.substr(0,25);
}
var opins = "<div class='infoTextData'><span style='font-size:1.1em;'>Soundscape "+sampleID+" responses</span><br>";
opins = opins  + "<img src='http://www.soundaroundyou.com/wp-content/themes/QuikTab/images/swirl.png' alt=''/><br>";
	opins = opins  + "Overall location quality: <b>"+overallQuality+"</b><br>";
	opins  = opins  + "Soundscape quality: <b>"+quality +"</b><br>";
	opins  = opins  + "Time captured: <b>"+time +"</b><br>";
	opins  = opins  + "Date Captured: <b>"+date +"</b><br>";
	opins  = opins  + "Device used: <b>"+model +"</b><br>";
	opins  = opins + "How pleasant: <b>"+pleasant +"</b><br>";
	opins  = opins  + "How exciting: <b>"+exciting +"</b><br>";
	opins  = opins  + "How eventful: <b>"+eventful +"</b><br>";
	opins  = opins  + "How tranquil: <b>"+chaos +"</b><br>";
	opins  = opins  + "Positive sound: <b>"+positive +"</b><br>";
	opins  = opins  + "Negative sound: <b>"+negative +"</b><br>";
	opins = opins + "<img style='z-index:-1;' src='http://www.soundaroundyou.com/wp-content/themes/QuikTab/images/miniLogo.png' alt=''/>";
	return opins +"</div>";
}
function createHTML(sampleID,fileName,quality,overallQuality,time,date,model,pleasant,exciting,eventful,chaos,opinion) {
	var newLine  = "<br style='line-height:8px;'>";
	
	var html = "<div style='width:325px; height:400px;'>";
	html = html + "<div style='width:325px; height:140px;'>";
	html = html + "<span class ='infoText' style='font-size:1.1em;'>   Recorded at "+time+" on "+date+"</span>";
	html = html + newLine;
	html = html + newLine;
	html = html + "<span style='font-size:1.1em;'>Reason for capturing</span>";
	html = html + newLine;
	html = html + newLine;
	html = html + "<span>"+opinion+"</span>";
	html = html + newLine;
	html = html +"<a href=\"http://www.soundaroundyou.com/Soundscapes/" +fileName+ ".mp3\" target=\"_blank\">Download soundscape<br style=\"line-height:8px;\">(right click & save as)</a>";
	html = html + "<span><a style='float:right; text-decoration:underline;' onclick='abuseWindow("+sampleID+")'>Report an issue</a></span>";

	
	html = html + "</div>";
	html = html + "<img style='float:right; left:260px; top:150px; z-index:-1;' src='http://www.soundaroundyou.com/wp-content/themes/QuikTab/images/miniLogo.png' alt=''/>";
	
	var rating ="<span id=\"rateStatus\">Rate this soundscape</span><span id=\"ratingSaved\">Rating Saved!</span><div id=\"rateMe\" title=\"Rate Me...\"><a onclick=\"rateIt(this)\" id=\"_1\" title=\"1\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_2\" title=\"2\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_3\" title=\"3\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_4\" title=\"4\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_5\" title=\"5\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_6\" title=\"6\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_7\" title=\"7\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_8\" title=\"8\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a><a onclick=\"rateIt(this)\" id=\"_9\" title=\"9\" onmouseover=\"rating(this)\" onmouseout=\"off(this)\"></a></div>";
	html = html + rating;
		
	var audio = "<div style=\"margin-top:230px;\"><object type=\"application/x-shockwave-flash\" data=\"http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/player.swf\" id=\"audioplayer1\" height=\"40\" width=\"325\"><param name=\"movie\" value=\"http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/player.swf\"><param name=\"FlashVars\" value=\"playerID=1&amp;soundFile=http://www.soundaroundyou.com/Soundscapes/"+fileName+".mp3\"><param name=\"quality\" value=\"high\"><param name=\"menu\" value=\"false\"><param name=\"wmode\" value=\"transparent\"></object></div>";
	
	html = html + audio;
	html = html + "</div>";
	return html;
}

function abuseWindow(id){
	var message = "If you think this soundscape entry is inappropriate in any way, click OK and it'll be removed for review";
	if(confirm(message)){
		//Abuse confirmed
		
		var serverScript = "http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/flagScape.php?scapeID=" + id;
		
		// update server
	
		document.getElementById("phpFrame").src = serverScript;
		setTimeout("clearSRC()",6000);
		alert("Scape flagged: "+id);
		//document.write("<script type='text/javascript' src='"+serverScript+"'></script>");

		
		map.closeInfoWindow();
		currentMarker.hide();
	}else{
		//Abuse cancelled
		
	}
}
function clearSRC(){
document.getElementById("phpFrame").src = "";
reloadMarkers();
}

function reloadMarkers(){
cluster.removeMarkers();
GDownloadUrl("http://www.soundaroundyou.com/wp-content/themes/QuikTab/jsfiles/genXML.php", function(data) {
		var xml = GXml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		markersArray=[];
		var sampleID;
		var quality;
		var overallQuality;
		var time;
		var date;
		var model;
		var pleasant;
		var exciting;
		var eventful;
		var chaos;
		var fileName;
		var opinion;
		var point;
		var marker;
		var flagged;
		var positive;
		var negative;
		for (var i = 0; i < markers.length; i++) {
			positive = markers[i].getAttribute("positive");
			negative = markers[i].getAttribute("negative");
			flagged = markers[i].getAttribute("flagged");
			sampleID = markers[i].getAttribute("sampleID");
			quality = markers[i].getAttribute("quality");
			overallQuality = markers[i].getAttribute("overallQuality");
			time = markers[i].getAttribute("time");
			date = markers[i].getAttribute("date");
			model = markers[i].getAttribute("model");
			pleasant = markers[i].getAttribute("pleasant");
			exciting = markers[i].getAttribute("exciting");
			eventful = markers[i].getAttribute("eventful");
			chaos = markers[i].getAttribute("chaos");
			fileName = markers[i].getAttribute("fileName");
			opinion = markers[i].getAttribute("opinion");
			point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
			if(flagged == 0){
				info = createHTML(sampleID,fileName,quality,overallQuality,time,date,model,pleasant,exciting,eventful,chaos,opinion);
				var opinions = createOpinions(sampleID,quality,overallQuality,time,date,model,pleasant,exciting,eventful,chaos,positive,negative);
				marker = createMarker(point, info, fileName, sampleID,opinions);
				markersArray.push(marker);
			}
		}
		cluster=new ClusterMarker(map, { markers:markersArray } );
		cluster.refresh();
		svp.hide();
		//causing FF to zoom out and die!!!!!??????
		//cluster.fitMapToMarkers();
		});
}

function hideStreet(){
svp.hide();
}