var canvas = null;
var context = null;
var imageData = false;
var flashCompleted = false;
var activeHover = null;
var images = {};

$(function()
{	
	if (browser.isIE)
	{
		var div = $("<div id='flash_map_ie'>")
		//.html("No flash installed!")
		//.appendTo("body");
		
		var flashVars = {
			basedir: g_baseDir,
			imagePath: "/images/color_map.png",
			project: "BRTG001_Bridging_the_Gulf"
		};
		
		var params = {
			menu: "false",
			allowscriptaccess: "sameDomain",
			allowfullscreen: "false"
		}
		
		var attributes = {};
		
		swfobject.embedSWF(g_baseDir + "/assets/externalinterface.swf",
			"flash_map_ie",
			1,
			1,
			"9.0.0",
			g_baseDir + "/assets/expressInstall.swf",
			flashVars,
			params,
			attributes);
	}
	else
	{
		var colorMap = new Image();
		colorMap.src = g_baseDir + "/images/color_map.png";
		colorMap.onload = function()
		{
			canvas = $("<canvas>")
			.attr({
				width: this.width,
				height: this.height
			});
			
			context = canvas.get(0).getContext("2d");
			
			context.drawImage(colorMap, 0, 0);
			
			imageData = context.getImageData(0, 0, canvas.attr("width"), canvas.attr("height")).data;
		}
	}
	
	$(".gulf-map .viewport").mousemove(function(event)
	{	
		var country = getCountry(getColor(event));
		
		addHover(country);
	})
	.click(function(event)
	{
		var country = getCountry(getColor(event));
		
		if (country.link)
		{
			window.open(g_baseDir + country.link, "_self");
		}
	});
	
	$("gulf-map .viewport").mouseleave(function(event)
	{
		removeHover();
	});
	
});

function removeHover()
{
	$(".gulf-map .viewport .rollover").each(function()
	{
		images[$(this).attr("alt")] = $(this).detach();
	});
}

function addHover(country)
{
	if (activeHover != country.name)
	{
		removeHover();
		
		$(".gulf-map .viewport").css({ cursor: "auto" });
		
		if (country.name)
		{
			if (country.link != "")
			{
				$(".gulf-map .viewport").css({ cursor: "pointer" });
			}
			
			var image;
			
			if (!images[country.name])
			{
				image = $("<img>")
				.addClass("rollover")
				.css({
					position: "absolute",
					top: 0,
					left: 0
				})
				.attr({
					src: g_baseDir + "/images/rollover_" + country.name + ".png",
					alt: country.name,
					title: ""
				});
			}
			else
			{
				image = images[country.name];
			}
			
			image.appendTo(".gulf-map .viewport");
		}
		
		activeHover = country.name;
	}
}

function getColor(event)
{
	var pos = $(".gulf-map .viewport").offset();
	var coords = {
		x: parseInt(event.pageX - pos.left),
		y: parseInt(event.pageY - pos.top)
	};
	
	return browser.isIE ? document.getElementById("flash_map_ie").getPixel(coords) : getPixel(coords);
}

function getCountry(color)
{
	if (countries[color] != undefined)
	{
		return countries[color];
	}
	
	return false;
}

function onFlashComplete()
{
	flashCompleted = true;
}

function getPixel(coords)
{
	if (canvas)
	{
		var x = coords.x;
		var y = coords.y;
		
		var red = imageData[(y * canvas.attr("width") + x) * 4 + 0];
		var green = imageData[(y * canvas.attr("width") + x) * 4 + 1];
		var blue = imageData[(y * canvas.attr("width") + x) * 4 + 2];
		var alpha = imageData[(y * canvas.attr("width") + x) * 4 + 3];
		
		return ((red << 16) | (green << 8) | blue).toString(16);
	}
	
	return false
}