$(document).ready(function () {
	//mark as using javascript - for the css
	$("#interactive-map").addClass("js")

	//set up locations map
	$("#map-locations em, #map-locations p").hide();
	$("#map-locations h3 a").wrapInner("<span class=\"name\"></span>").each( function(){
		$(this).prepend("<span class=\"num\">"+($("#map-locations h3 a").index(this)+1)+"</span>")
	}).attr("title","");
	$("#map-locations").append("<div class=\"label\"></div>")

	//create list of unique themes from the list of locations
	$("#map-intro").append("<ul class=\"clearfix\"></ul>").append("<div></div>");//
	arThemes = new Array();//create empty array
	$("#map-locations em").each( function(){
		stTheme = $(this).text().substring(3); //trim unwanted characters from the front of the theme
		bUnique = true;//set location as unique by default
		for (i in arThemes){ //loop through all items currently in the locations array
			if (arThemes[i]==stTheme){ //does the them match an existing value in the array? If so, mark as not unique and stop searching
				bUnique = false;
				break;
			}
		}
		if (bUnique){ //is it unique? If so, add it to the locations array
			arThemes.push(stTheme);
		}
	});
	for (i in arThemes){ //add the array items to the html 
		$("#map-intro ul").append("<li>"+arThemes[i]+"</li>");
	}
	$("#map-intro ul").append("<li class=\"reset\">View all</li>");

	//Highlight	relevant theme on map rollover
	$("#map-locations h3 a").mouseover(function(){
		$("#map-locations h3").removeClass("on");
		$("#map-intro li:contains('"+$(this).parent().addClass("on").find("em").text().substring(3)+"')")//.css("background","red");
		$("#map-intro div").html("<strong class=\"head\">"+$(this).parent().find("em").text().substring(3)+"</strong>"+$(this).parent().parent().find("p").html()).show();
	}).hover(
		function(){
			//show the label
			$("#map-locations .label")
				.text($(this).find(".name").text())
				.css("left",$(this).parent().parent().css("left"))
				.css("top",$(this).parent().parent().css("top"))
				.show();
		},
		function(){
			$("#map-locations .label").hide();
		}
	)
	
	// When click themes, only the pins for that theme are shown
	$("#map-intro li").click(function(){
		if ($(this).hasClass("reset")){
			//remove all on states, hide the intro text
			$("#map-locations h3").removeClass("on").show();
			$("#map-intro li").removeClass("on");
			$("#map-intro div").hide();
		} else {
			//get the theme text
			stTheme = $(this).text();

			//show mathcing locations
			$("#map-locations h3").removeClass("on").hide();
			$("#map-locations h3:contains('"+stTheme+"')").show();
			
			//put correct text in the description box
			$("#map-intro div").show().html("<strong class=\"head\">"+stTheme+"</strong>"+$("#map-locations li h3:contains('"+stTheme+"')").eq(0).parent().find("p").html());
			
			//highlight the list item
			$("#map-intro li").removeClass("on");
			$(this).addClass("on");
		}
	}).hover(
		function () {
			$(this).addClass("over");
		}, 
		function () {
			$(this).removeClass("over");
		}
	);
	
	//show the map (hidden on load via css on page)
	$("#interactive-map").show();
});