$(window).resize(function() {
  	google.maps.event.trigger(myMap, 'resize');
  	$("#map").height($(document).height());
  	$("#footer").css('bottom', '32px');
});

var myMap = {
	map: null,
	bounds: null
}

myMap.init = function(selector, latLng, zoom) {
	var myOptions = {
		zoom:zoom,
		center: latLng,
		mapTypeId: google.maps.MapTypeId.SATELLITE,
		navigationControlOptions: {
	        style: google.maps.NavigationControlStyle.SMALL
    	}
	}
	this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}

myMap.drawBox = function () {
  var boundingBox = [
    new google.maps.LatLng(48.11304,16.22),
    new google.maps.LatLng(48.11304,16.52137),
    new google.maps.LatLng( 48.3,16.52137),
    new google.maps.LatLng( 48.3,16.22)
  ];
  var flightPath = new google.maps.Polygon({
    path: boundingBox,
    strokeColor: "#FFFFFF",
    strokeOpacity: 0.3,
    strokeWeight: 4,
    fillOpacity: 0
  });
  flightPath.setMap(myMap.map);	
}

var openedInfoWindow =  new google.maps.InfoWindow();

myMap.placeMarkers = function(filename) {
		$.get(filename, function(xml) {
		if ($(xml) == "") {
			alert("leer!");
		}
		$(xml).find("audio_clip").each(function() {
			$audioClip = $(this);
			$(this).find('normalised_tag').each(function() {
				if ($(this).text() == 'audiokarte') {
					addMarker($audioClip);
				}
			});
		});
	});
}

function addMarker(xmlAudioClip) {
	var booTitle = xmlAudioClip.find('title').text();
	var mp3URL =  xmlAudioClip.find('high_mp3').text();
	var booURL = xmlAudioClip.find('detail').text();
	var countComments = xmlAudioClip.find('comments').text();
	var userName = xmlAudioClip.find('username').text();
	var userURL = xmlAudioClip.find('profile').text();
	var booDateTime = timeStampToString(xmlAudioClip.find('recorded_at').text());

	// create a new LatLng point for the marker
	var lat = xmlAudioClip.find('latitude').text();
	var lng = xmlAudioClip.find('longitude').text();
	var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
	
	// extend the bounds to include the new point
	if (((lat<48.3) && (lat>48.11304)) && ((lng<16.52137) && (lng>16.22))) {
			myMap.bounds.extend(point);
	}
		
	var marker = new google.maps.Marker({
		position: point,
		title: booTitle,
		map: myMap.map,
		icon: 'http://www.audiokarte.at/js/marker_blue.png',
		shadow: 'http://www.audiokarte.at/js/shadow51.png'
	});
	
	var html='<h2><a href="'+booURL+'">'+booTitle+'</a></h2><br />';
	html = html+'<a href="'+userURL+'">'+userName+'</a><br />';
	html = html+booDateTime+'<br />';
	html = html+'Kommentare: <a href="'+booURL+'#comments">'+countComments+'</a>';
	var infoWindow = new google.maps.InfoWindow({content: html});
	
	google.maps.event.addListener(marker, 'click', function() {
		openedInfoWindow.close();
		infoWindow.open(myMap.map, marker);
		openedInfoWindow = infoWindow;
		$('#url').text(mp3URL);
		$("#jquery_jplayer").jPlayer("setFile", mp3URL).jPlayer("play");
	});
	myMap.map.fitBounds(myMap.bounds);
}

function timeStampToString(xmlDate)
{
    var dtS = xmlDate.slice(xmlDate.indexOf('T')+1, xmlDate.indexOf('.'))
    var TimeArray = dtS.split(":");
    var myTime = (TimeArray[0]+':'+TimeArray[1]);
    dtS = xmlDate.slice(0, xmlDate.indexOf('T'));
    TimeArray = dtS.split("-");
    var myDate = (TimeArray[2]+'.'+TimeArray[1]+'.'+TimeArray[0]);
    return (myDate+' '+myTime);
}

$(document).ready(function() {
	$("#map").height($(document).height());
  	google.maps.event.trigger(myMap, 'resize');

	var myLatLng = new google.maps.LatLng(48.206482, 16.399584);
	myMap.init('#map', myLatLng, 11);
	myMap.placeMarkers('data.xml');
	myMap.drawBox();
    
	var jpPlayTime = $("#jplayer_play_time");
	var jpTotalTime = $("#jplayer_total_time");
	$("#jquery_jplayer").jPlayer({
		volume: 100
	})
	.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		jpPlayTime.text($.jPlayer.convertTime(playedTime));
		jpTotalTime.text($.jPlayer.convertTime(totalTime));
	})
	.jPlayer("onSoundComplete", function() {
		this.stop();
	});
	$('#info').hide();
	$('#toggleInfo').toggle(function() {
		$('#info').fadeIn(300);
		$('#toggleInfo').css('text-decoration', 'line-through');
	}, function() {
		$('#info').fadeOut(300);
		$('#toggleInfo').css('text-decoration', 'none');
	});
});