var imgdir = imgdir === undefined ? "CARMAG_MAP" : imgdir;

var base = "img/"+imgdir+"/BASE.jpg";

var oldColor = "";

// preload rollovers
var ib = new Image(); ib.src = base;
var i1 = new Image(); i1.src = "img/"+imgdir+"/BC.jpg";
var i2 = new Image(); i2.src = "img/"+imgdir+"/AB.jpg";
var i3 = new Image(); i3.src = "img/"+imgdir+"/SK.jpg";
var i4 = new Image(); i4.src = "img/"+imgdir+"/MB.jpg";
var i5 = new Image(); i5.src = "img/"+imgdir+"/ON.jpg";

$(function() {
	// var p = Array("SK", "AB", "MB", "BC", "ON");
	
	var p = Array("ON");
	for (var i=0; i < p.length; i++) {
		var mapElementSelector = $("#map_" + p[i]);
		mapElementSelector.data("provinceAbbreviation", p[i]);
		$("#map_"+p[i]).click(function(e) {
			return provinceClick(e, $(this));
		});
	};
});

function provinceClick (e, $clickedElement) {
	var p = $("#" + $clickedElement.data("provinceAbbreviation"));
	
	hideAll();
	var x_offset = 10;
	
	// not far enough to the left
	var left = (e.pageX+(x_offset*2)+p.width() > $(window).width()) ? $(window).width() - p.width() - x_offset : e.pageX + x_offset;
	var top = Math.floor(e.pageY - (p.height() * 0.8)); // 80% of the object is above the mouse click
	
	p.css({"left":left+"px","top":top+"px"}).show();
}

function showLinks (province) {
	var divs = new Array("BC", "AB", "SK", "MB", "ON");
	
	for (var i=0; i < divs.length; i++) {
		document.getElementById(divs[i]).className = document.getElementById(divs[i]).className.replace(/( invisible)|( invisible)/i, "") + " invisible";
	};
	
	document.getElementById(province).className = document.getElementById(province).className.replace(/ invisible/i, "");
}

function hideAll () {
	// $("[id$=_coming_soon], .coming_soon").hide();
	// $("[id$=_cities]").css({"display":"block"});
	
	$(".city_left, .city_right").hide();
	base = ib.src;
	$("#map").attr({"src":base});
}

function hideAll_old () {
	var divs = new Array("BC", "AB", "SK", "MB", "ON");
	
	// adjust for coming soon text
	if (document.getElementById("coming_soon")) {
		document.getElementById("coming_soon").style.display = "none";
		document.getElementById("on_cities").style.display = "block";
	}
	
	for (var i=0; i < divs.length; i++) {
		document.getElementById(divs[i]).className = document.getElementById(divs[i]).className.replace(/( invisible)|( invisible)/i, "") + " invisible";
	};
	
	base = ib.src;
	document.getElementById("map_pic").src = base;
}

function showHide (name) {
	var el = document.getElementById("map_pic");
	
	switch (name) {
		case 'bc': el.src = i1.src; break;
		case 'ab': el.src = i2.src; break;
		case 'sk': el.src = i3.src; break;
		case 'mb': el.src = i4.src; break;
		case 'on': el.src = i5.src; break;
		default: el.src = base; break;
	}
}

function clicked (name) {
	// adjust for coming soon text
	if (document.getElementById("coming_soon")) {
		// document.getElementById("coming_soon").style.display = "none";
		// document.getElementById("on_cities").style.display = "block";
	}
	
	switch (name) {
		case 'bc': base = i1.src; break;
		case 'ab': base = i2.src; break;
		case 'sk': base = i3.src; break;
		case 'mb': base = i4.src; break;
		case 'on': base = i5.src; break;
		default: base = ib.src; break;
	}
}

function comingsoon () {
	document.getElementById("on_cities").style.display = "none";
	document.getElementById("coming_soon").style.display = "block";
	return false;
}

function highlightArea (el) {
	if (navigator.appVersion.indexOf("MSIE 6") != -1) {
		// el.className = "area area_highlight";
		el.childNodes[0].className = "area_highlight";
		return true;
	
		// var children = el.childNodes[1].childNodes[0].childNodes; //  all [ul.area li ul.cities li]
		// for (var i=0; i < children.length; i++) {
		// 	if (children[i].tagName != undefined && children[i].tagName.toUpperCase() == "LI") { // change styles of the <a> tags
		// 		children[i].childNodes[0].style.color = "#000";
		// 		children[i].childNodes[0].style.backgroundColor = "#fff";
		// 	}
		// };
	}
}

function nonHighlightArea (el) {
	if (navigator.appVersion.indexOf("MSIE 6") != -1) {
		// el.className = "area";
		el.childNodes[0].className = "area";
		return true;

		// var children = el.childNodes[1].childNodes[0].childNodes; //  all [ul.area li ul.cities li]
		// for (var i=0; i < children.length; i++) {
		// 	if (children[i].tagName != undefined && children[i].tagName.toUpperCase() == "LI") {
		// 		children[i].childNodes[0].style.color = "#fff";
		// 		children[i].childNodes[0].style.backgroundColor = "#2c383e";
		// 	}
		// };
	}
}