$(window).load(function () {
	var colours = {off:"#ffffff", enabled:"#bfcbd9", hover:"#ffed00", on:"orange", stroke:"#356383"};
	var mode = "bilateral";
	var paper, zones, groups, xml, currentZoom, currentMapData;
	var mapData = [];
	// predefined map zoom areas as an associative array
	var offsets = [];
		offsets["default"] = {zoom: 1, x:-1, y:-79};
		offsets["sea"] = {zoom:2.845, x:-516, y:-731};
		//offsets["northpacific"] = {zoom:2.7, x:-798, y:-479};
		//offsets["southpacific"] = {zoom:2.7, x:-1016, y:-856};

	
	// load xml
	$.get("data.xml", function(data) {
		xml = data;
		
		// init draw area
		paper = Raphael("fta-map-svg", 960, 405);

		// load map js
		$.get("js/map-data-default.js", function(data) {
			var o, offset, i, z, q, shift, path, newPath, pair;
			
			// loop through zoom areas and translate x,y and zoom
			for (o in offsets) {
				offset = offsets[o];

				mapData[o] = [];
				
				for (i=0; i<mapSVG.length; i++) {
					path = mapSVG[i].p.split(" ");
					newPath = [];
					
					for (z=0; z<path.length; z++) {
						pair = path[z].split(",");
						
						for (q=0; q<pair.length; q++) {
							if (q==0) {
								shift = offset.x;
							} else {
								shift = offset.y;
							}
							if (parseFloat(pair[q]) == pair[q]) {
								pair[q] = pair[q] * offset.zoom + shift;
							} else if (pair[q].substr(0, 1) == "M") {
								pair[q] = "M" + (pair[q].substr(1) * offset.zoom + shift);
							} else if (pair[q].substr(pair[q].length-1, 1) == "z") {
								pair[q] = (pair[q].substr(0, pair[q].length-2) * offset.zoom + shift) + " z";
							}
						}
						newPath.push(pair);
					}
					// keep tags and labels from original data
					mapData[o][i] = {l:mapSVG[i].l, t:mapSVG[i].t};
					mapData[o][i].p = newPath.join(" ");
				}
			}
			
			// set default map to first zoom
			currentMapData = mapData["default"];
			
			// load default tab
			loadTab(mode);
		});
	});
	
	
	// loading a tab
	function loadTab(tab) {		
		// clear out the tray
		var tray = 	$("#fta-map li.tray");
		tray.html("");
		
		closeZone();
		
		// store current tab (mode) for later
		mode = tab;
		
		switch (mode) {
			case "bilateral":
				$("#fta-map-thumbnail").animate({right:0}, 1000);
				var output = '<ul class="flags">';
				break;
			case "plurilateral":
				$("#fta-map-thumbnail").animate({right:-230}, 1000);
				var output = '<ul class="buttons">';
				break;				
		}

		// output flags/buttons
		$(xml).find(tab + " partner").each(function () {
			output += '<li class="' + $(this).attr("id") + '">';
			output += '<a href="#" id="fta-zone-' + $(this).attr("id") + '" title="' + $(this).attr("fta") + '"';
			if (mode == "bilateral") output += ' style="background: url(images/flags/' + $(this).attr("flags").split(",")[1] + ') no-repeat;"';
			output += '>' + $(this).attr("label") + '</a></li>';
		});
		output += "</ul>";
		tray.append(output);
		
		// zoom out
		if (currentZoom != "default") {
			zoomRegion("default");
		} else {
			resetMap();
		}
		
		// make flags/buttons click and hover
		tray.find("a").click(function (e) {
			loadZone($(this).attr("id"));
			e.preventDefault();
		}).hover(function () {
			hoverZone($(this).attr("id"));
		}, function () {
			hoverZone("");
		});
	}
	
	
	// hovering over a zone or flag/button	
	function hoverZone(zone){
		zone = zone.replace('fta-zone-', '');
		// switch off all zones before setting current zone to hover colour
		if (mode == "bilateral") {
			for (var z in zones) {
				if (zones[z].attr("fill") != colours.on) zones[z].attr("fill", colours.enabled);
			}
			if (zones[zone].attr("fill") != colours.on) zones[zone].attr("fill", colours.hover);
		} else {
			for (var group in groups) {
				for (var i=0; i<groups[group].length; i++) {
					if (groups[group][i].id == "australia") {
						if (groups[group][i].attr("fill") != colours.on) groups[group][i].attr("fill", colours.enabled);
					} else {
						if (groups[group][i].attr("fill") != colours.on) groups[group][i].attr("fill", colours.off);
					}
				}
			}
			for (var i=0; i<groups[zone].length; i++) {
				if (groups[zone][i].attr("fill") != colours.on && groups[zone][i].id != "australia") groups[zone][i].attr("fill", colours.hover);
			}
		}
	}
	

	// loading a zone
	function loadZone(zone) {
		closeZone();
		
		zone = zone.replace('fta-zone-', '');
		var partner = $(xml).find("partner[id='" + zone + "']");
		
		zoomRegion(partner.attr("zoom"));
		
		// if we have an arrow defined, show it
		if (partner.attr("arrowPos")) {
			var arrowPos = partner.attr("arrowPos").split(",");
			$("#fta-map-arrows").attr("src", "images/arrows/arrows-" + partner.attr("id") + ".png").css({top:arrowPos[1] + "px", left:arrowPos[0] + "px"}).show();
		}
		
		resetMap();
		
		if (mode == "bilateral") {
			for (var i=0; i<currentMapData.length; i++) {
				if (currentMapData[i].l == partner.attr("id") || currentMapData[i].l == "australia") {
					currentMapData[i].clip.attr("fill", colours.on);
				}
			}			
		} else {
			for (var i=0; i<groups[zone].length; i++) {
				groups[zone][i].attr("fill", colours.on);
			}
		}
		
		var popup = $("#fta-map-popup");

		var flags = partner.attr("flags").split(",");
		$("#fta-map-flags").html("");
		for (i=0; i<flags.length; i++) {
			$("#fta-map-flags").append('<img src="images/flags/' + flags[i] + '" />');
		}
		
		var pos = partner.attr("pos").split(",");
		popup.css({top:pos[1] + "px", left:pos[0] + "px"})
		
		$("#fta-map-heading").html(partner.attr("fta").toUpperCase());
		$("#fta-map-description").html(partner.attr("description"));
		$("#fta-map-readmore a").attr("href", partner.attr("readmore"));
		$("#fta-map-export").html("$" + partner.find("export").attr("value") + "b");
		$("#fta-map-import").html("$" + partner.find("import").attr("value") + "b");
		$("#fta-map-aust").html("" + $(xml).find("data").attr("austGDP") + "" + $(xml).find("data").attr("austPop") + "");
		$("#fta-map-other").html("" + partner.find("gdp").attr("value") + "" + partner.find("population").attr("value") + "");
		
		popup.show();
	}
	
	
	// hide the popup
	function closeZone() {
		resetMap();	
		$("#fta-map-arrows").attr("src", "").hide();
		$("#fta-map-popup").hide();
	}
	
	
	// draw the svg
	function drawMap(){
		var i, clip;
		paper.clear();
		zones = {};
		groups = {};
		for (i = 0; i < currentMapData.length; i++) {
			// draw the clip
			clip = paper.path(currentMapData[i].p);
			
			clip.attr({
				fill: colours.off,
				"stroke": colours.stroke,
				"stroke-width": .25
			});
			
			currentMapData[i].clip = clip;
			
			if (currentMapData[i].l) {
				clip.id = currentMapData[i].l;
				zones[currentMapData[i].l] = clip;
				if (currentMapData[i].l != "australia") {
					clip.hover(function(e){
						if (mode == "bilateral" && this.attr("fill") != colours.on) 
							this.attr("fill", colours.hover);
					}, function(e){
						if (mode == "bilateral" && this.attr("fill") != colours.on) 
							this.attr("fill", colours.enabled);
					});
					
					clip.click(function(e){
						if (mode == "bilateral") loadZone(this.id)
					});
				}
			}
			
			// if the clip has tags, add it to associate array
			if (currentMapData[i].t) {
				var tags = currentMapData[i].t.split(",");
				for (var tag in tags) {
					if (!groups[tags[tag]]) groups[tags[tag]] = [];
					groups[tags[tag]].push(clip);
				}
			}
		}
		
		$("#fta-map-loading").hide();
		$("#fta-map-all, #fta-map-svg").show();
		
		resetMap();
	}
	
	
	function resetMap() {
		for (var group in groups) {
			for (var i=0; i<groups[group].length; i++) {
				groups[group][i].attr("fill", colours.off);
			}
		}		
		for (var z in zones) {
			if (zones[z].attr("fill") != colours.on) zones[z].attr("fill", colours.off);
		}


		if (mode == "bilateral") {
			for (var z in zones) {
				zones[z].attr("fill", colours.enabled);
			}
		} else {
			for (var group in groups) {
				for (var i=0; i<groups[group].length; i++) {
					if (groups[group][i].id == "australia") {
						groups[group][i].attr("fill", colours.enabled);
						break; break;
					}
				}
			}
		}
	};
	

	// zoom region
	function zoomRegion(region) {
		if (currentZoom == region) return;
		
		if ($("#fta-map-popup").is(':visible')) closeZone();

		// hide all supplimentary png maps
		$("#fta-map-all img").hide();
		// show the right png map
		$("#fta-map-" + region).show();
		
		// update pointer to correctly offset map data
		currentMapData = mapData[region];

		$("#fta-map-loading").show();
		$("#fta-map-svg").hide();
		
		//if (redraw) setTimeout(drawMap, 100);
		drawMap();
		
		currentZoom = region;
	}
	
	
	// connect up stage elements with functions
		
	// handle tab change
	$("#fta-map li.tab").click(function (e) {	
		$(this).parent().find("li a.on").removeClass("on");
		$(this).find("a").addClass("on");

		if ($(this).hasClass("bilateral")) {
			loadTab("bilateral");
		} else {
			loadTab("plurilateral");
		}
		e.preventDefault();
	});
	
	// close popup
	$("#fta-map-closebtn").click(function () {
		closeZone();
	});
	
	// clicking on a zoom area
	$("#fta-map area").click(function (e) {
		var id = $(this).attr("id").replace('fta-map-', '');
		if (currentZoom == id) return;
		if (id == "sea") {
			$("#fta-map-overlay").fadeIn('slow').delay(500).hide(0, function () {
				zoomRegion(id);
			});
		} else {
			zoomRegion(id);
		}
		e.preventDefault();
	});
});