// DynoMapUSA
// by Jason Yee - 20081008
// Copyright 2008 Uncommon Solutions, Inc. (www.uncommonsolutions.net)
// This javascript file will create clickable map of the United States
// based on a parse of the parent html document or a predefined list
//
// This javascript requires the JSON library (www.json.org)
//


// ----- USER SETTINGS & VARIABLES ----- //
// Use the included id helper function. This function is called by $('id') and returns the value of document.getElementById('id')
// If you have already defined a function called $ with the same functionality, then you should set this to false, so it is not redeclared
var useIDHelper = true;
// The css class for mouse over and mouse off state initials
var overClass = 'dynomapOver';
var outClass = 'dynomapOut';
// The css class for inactive (non-linked) states
var noClickClass = 'dynomapNoClick';
// The image directory containing the map image file, include trailing slash.
var imageDir = '/tournaments/dynomap/img/';
// The display size of the map in percent. You can use this to scale the DynoMap up or down
var scaleMultiplier = 100; 
// Show all state labels, including those without a corresponding link.
// When set to false, the map will only label states that have valid link destinations
var showAllStates = true; 
// Parse the html document for internal anchors.  If this is false, use the JSON object below to define your own links
var parseLinks = true;
// Custom data. This is an array of JSON objects that will be used (if parseLinks is false) to create the DynoMap
var statesData = [{'state':'CA','link':'http://www.ca.gov'},
	{'state':'CO','link':'http://www.colorado.gov'},
	{'state':'VA','link':'http://www.virginia.gov'}];


// ----- SETUP PARAMETERS (DON'T MUCK WITH THIS) ----- //
var map = imageDir+'usa.gif'; // the map image
var mapWidth = 500;
var mapHeight = 323;
var states = ['AL','AK','AZ','AR','CA','CO','CT','DE','DC','FL',
	'GA','HI','ID','IL','IN','IA','KS','KY','LA','ME',
	'MD','MA','MI','MN','MS','MO','MT','NE','NV','NH',
	'NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI',
	'SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];
var statesLocation = {'AL':{'top':196,'left':326},
	'AK':{'top':247,'left':52},
	'AZ':{'top':175,'left':102},
	'AR':{'top':178,'left':272},
	'CA':{'top':135,'left':39},
	'CO':{'top':131,'left':161},
	'CT':{'top':95,'left':465},
	'DE':{'top':121,'left':465},
	'DC':{'top':147,'left':465},
	'FL':{'top':245,'left':383},
	'GA':{'top':195,'left':356},
	'HI':{'top':292,'left':155},
	'ID':{'top':73,'left':99},
	'IL':{'top':120,'left':299},
	'IN':{'top':119,'left':322},
	'IA':{'top':101,'left':263},
	'KS':{'top':138,'left':221},
	'KY':{'top':144,'left':336},
	'LA':{'top':219,'left':274},
	'ME':{'top':34,'left':440},
	'MD':{'top':134,'left':465},
	'MA':{'top':69,'left':465},
	'MI':{'top':80,'left':330},
	'MN':{'top':58,'left':249},
	'MS':{'top':199,'left':297},
	'MO':{'top':138,'left':268},
	'MT':{'top':41,'left':140},
	'NE':{'top':107,'left':212},
	'NV':{'top':115,'left':70},
	'NH':{'top':56,'left':465},
	'NJ':{'top':108,'left':465},
	'NM':{'top':181,'left':152},
	'NY':{'top':72,'left':403},
	'NC':{'top':157,'left':386},
	'ND':{'top':42,'left':207},
	'OH':{'top':112,'left':348},
	'OK':{'top':172,'left':230},
	'OR':{'top':57,'left':52},
	'PA':{'top':98,'left':388},
	'RI':{'top':82,'left':465},
	'SC':{'top':177,'left':376},
	'SD':{'top':74,'left':208},
	'TN':{'top':163,'left':323},
	'TX':{'top':217,'left':217},
	'UT':{'top':123,'left':113},
	'VT':{'top':37,'left':417},
	'VA':{'top':135,'left':388},
	'WA':{'top':23,'left':60},
	'WV':{'top':129,'left':364},
	'WI':{'top':71,'left':285},
	'WY':{'top':85,'left':148}};



// ----- DYNOMAP FUNCTIONS ----- //
// Create the ID Helper function if required in the settings
if(useIDHelper) {
	$ = function(objId) {
		return document.getElementById(objId);
	}
}

// Initialzie the DynoMap
function dynoMapInit(target) {
	if(parseLinks) loadMapData();
	loadMap($(target));
}

// Data Initialization
function loadMapData() {
	// We're parsing the page for corresponding ID links
	// First we'll clear out the statesData array
	statesData = new Array();
	var baseURL = location.href.replace(/#.+$/, '');
	// Next we'll loop the states array looking for internal anchor matches (id and name must equal the state and it must be an <a> tag)
	for(i=0; i<states.length; i++) {
		if($(states[i]) && ($(states[i]).name == states[i]) && ($(states[i]).tagName.toUpperCase() == 'A')) {
			statesData[statesData.length] = {'state':states[i],'link':baseURL+'#'+states[i]};
		}
	}
}

// Map Initialization
function loadMap(targetObj) {
	//Here's the map image container
	targetObj.style.position = 'relative';
	targetObj.style.width = (mapWidth*scaleMultiplier*.01)+'px';
	targetObj.style.height = (mapHeight*scaleMultiplier*.01)+'px';
	// generate the image element and assign attributes
	var mapImage = document.createElement('img');
	mapImage.id = 'dynomapMap';
	mapImage.src = map;
	mapImage.style.width = (mapWidth*scaleMultiplier*.01)+'px';
	mapImage.style.height = (mapHeight*scaleMultiplier*.01)+'px';
	targetObj.appendChild(mapImage);
	
	// Insert the appropriate labels
	if(showAllStates) {
		for(i=0; i<states.length; i++) { // insert labels for all states
			var thisClass = noClickClass;
			for(j=0; j<statesData.length; j++) {
				if(statesData[j].state == states[i]) {
					var thisClass = outClass;
					break;
				}
			}
			targetObj.innerHTML += '<div id="dynomap'+states[i]+'" '+
				'class="'+thisClass+'" '+
				'onclick="dynomapClick(this);" '+
				'onmouseover="dynomapOver(this);" '+
				'onmouseout="dynomapOut(this);">'+states[i]+'</div>';
			$('dynomap'+states[i]).style.position = 'absolute';
			$('dynomap'+states[i]).style.top = eval('statesLocation.'+states[i]+'.top*scaleMultiplier*.01')+'px';
			$('dynomap'+states[i]).style.left = eval('statesLocation.'+states[i]+'.left*scaleMultiplier*.01')+'px';
		}
	} else {
		for(i=0; i<statesData.length; i++) { // insert labels that we only have links for
			targetObj.innerHTML += '<div id="dynomap'+statesData[i].state+'" '+
				'class="'+outClass+'" '+
				'onclick="dynomapClick(this);" '+
				'onmouseover="dynomapOver(this);" '+
				'onmouseout="dynomapOut(this);">'+statesData[i].state+'</div>';
			$('dynomap'+statesData[i].state).style.position = 'absolute';
			$('dynomap'+statesData[i].state).style.top = eval('statesLocation.'+statesData[i].state+'.top*scaleMultiplier*.01')+'px';
			$('dynomap'+statesData[i].state).style.left = eval('statesLocation.'+statesData[i].state+'.left*scaleMultiplier*.01')+'px';
		}
	}
}

// mouse click
function dynomapClick(obj) {
	// get the state name
	var state = obj.id.replace('dynomap','');
	// if there's a link, then perform the mouse over
	for(i=0; i<statesData.length; i++) {
		if(statesData[i].state == state) {
			location.href = statesData[i].link;
		}
	}
}

// mouse over
function dynomapOver(obj) {
	// get the state name
	var state = obj.id.replace('dynomap','');
	// if there's a link, then perform the mouse over
	for(i=0; i<statesData.length; i++) {
		if(statesData[i].state == state) {
			obj.className = overClass;
		}
	}
}

// mouse out
function dynomapOut(obj) {
	if(obj.className == overClass) obj.className = outClass;
}