var map = null; // map object
var xmlDoc = null; // xml doc to load data into
var dataUrl = "service.php?type=getgeoxml"; // url of data
var locations = null;
var timer = null; //timer used to make map rotate

//var iconSoundUrl = "http://ibmrocks.bluehost.ibm.com/ibmrocks/static/style/images/iconsound.png";
var iconSoundUrl = "";
var locationInfoUrl = "service.php?type=getlocationhtml&locationname="


var marker;
/*
-------------------------------------------------------------------------------
	Location class
-------------------------------------------------------------------------------
*/
function Location(id, code, displayname, lat, lon, html){
	this.id = id;
	this.code = code;
	this.displayname = displayname;
	this.lat = lat;
	this.lon = lon;
	this.html = html;

	this.tracks = new Array();
}

function locationAddTrack(track){
	this.tracks[this.tracks.length] = track;
}

Location.prototype.addTrack = locationAddTrack;


/*
-------------------------------------------------------------------------------
	Track class
-------------------------------------------------------------------------------
*/
function Track(playlistid, userid, lastfmid, ibmid, userdisplayname, timestamp, track){
	this.playlistid = playlistid;
	this.userid = userid;
	this.lastfmid = lastfmid;
	this.ibmid = ibmid;
	this.userdisplayname = userdisplayname;
	this.timestamp = timestamp;
	this.track = track;
}





function loadData(){
	multiThreadLoad(dataUrl,onDataLoad,xmlDoc)
}


function loadMap(){
	iconSoundUrl = BASE_URL + "static/style/images/iconsound.png"
	map = new FE.Map(document.getElementById("map"));
    map.onLoad = onMapLoad;
   	map.load();
}


function onMapLoad() {
	map.setTargetLatLng(new FE.LatLng(30,-38));
	map.zoomTo(16000000);
	loadData();
	
}


function onDataLoad(){

	locations = new Array();
	
	var locationelements = xmlDoc.getElementsByTagName("location");
	
	if(locationelements == null){
		return;
	}
	
	for(var i=0; i < locationelements.length; i++){
		var locationelement = locationelements[i];
		var contentelements = locationelement.getElementsByTagName("content");
		var contentHtml= "";
		
		var location = new Location(locationelement.getAttribute("id"), locationelement.getAttribute("code"), locationelement.getAttribute("displayname"), locationelement.getAttribute("lat"), locationelement.getAttribute("lon"), contentHtml);
				
		// add tracks for this locaiton
		var trackelements = locationelement.getElementsByTagName("trackplayed");
		
		for(var j=0; j < trackelements.length; j++){
			var trackelement = trackelements[j];
			var tracknode = trackelement.firstChild;		
			var track = new Track(trackelement.getAttribute("playlistid"), trackelement.getAttribute("userid"), trackelement.getAttribute("lastfmid"), trackelement.getAttribute("ibmid"), trackelement.getAttribute("userdisplayname"), trackelement.getAttribute("timestamp"), tracknode.nodeValue);
			location.addTrack(track);
		}
		
		locations[locations.length] = location;
	}
	
	addDataMarkers();
	
}


function addDataMarkers(){
	markerIcon = new FE.Icon(iconSoundUrl);
	
	for(var i=0; i < locations.length; i++){
		var location = locations[i];
        var marker = new FE.Pushpin(new FE.LatLng(location.lat, location.lon), markerIcon);
        marker.ibmlocation = location;
        FE.Event.addListener(marker, 'click', selectLocation);
        FE.Event.addListener(marker, 'mouseover', hoverLocation);
        map.addOverlay(marker);
	}
	
	//start spinning
	//timer = setInterval(rotateWorld, 100);
}


function selectLocation(marker){
//	alert("location clicked: " + marker.ibmlocation.displayname);
//	marker.openInfoWindowHtml("location: <b>"+marker.ibmlocation.displayname+"</b>",200,200);
	updateInfoPanel(marker.ibmlocation.code);
}

function hoverLocation(marker){
	alert("hover!");
}


function updateInfoPanel(location){
	//alert("getting info for:" + location);
	//document.getElementById("info").innerHTML = content;
	var infoPanelText = document.getElementById("page-bottom-content-text");
	var updateUrl = locationInfoUrl + location;
	htmlUpdate(updateUrl, infoPanelText);
}


function rotateWorld() {
	var target = map.getTargetLatLng();
  	target.lng = target.lng - 0.1;
  	if (target.lng < -180){
  		target.lng = 180;
  	}
  	map.setTargetLatLng(target);
 }