$(function(){
	
	// Setup map popup
	var activeST = $('.ASMCMactiveST');
	var pointer = $('.ASMCMPointer');
	var storyWrap = $('.ASMCMstorywrap');
	var story = $('.ASMCStory');
	var popupWrap = $('.ASMCMpopupwrap');
	var stateObjects;
	
	// Get the data and setup handlers
	$.getJSON(templateUrl + '/includes/js/map-data.js', function(data) {
		stateObjects = data;
		$('#Map area').hover(
			function(){
				var state = getDataByState( $(this).attr('alt') , stateObjects);
				showState(state);
				//popupWrap.stop(false, true);
				clearTimeout(mapTimer);
			}, 
			function(){
				mapTimer = setTimeout(showRandState, 2000);
			}
		);
	
		showRandState();
		
	});
	
	function getDataByState(abr){
		var state;
		$.each(stateObjects, function(){
			if(this.state == abr){ state = this; }
		});
		return state;
	}
		
	function showState(stateData, transitionTime){
		popupWrap.hide();
		activeST.css({
				'background-position': '-' + stateData.spriteX +'px -' + stateData.spriteY + 'px',
				'width': stateData.spriteW,
				'height': stateData.spriteH,
				'left': stateData.hoverX + 'px',
				'top': stateData.hoverY + 'px'
		});
		if(stateData.pointerDir == 'L'){
			pointer.css('background-image', 'url("' + templateUrl + '/images/map/left-pointer.png")');
		} else if(stateData.pointerDir == 'R'){
			pointer.css('background-image', 'url("' + templateUrl + '/images/map/right-pointer.png")');
		}
		pointer.css({
			'left': stateData.pointerX + 'px',
			'top': stateData.pointerY + 'px',
			'height': 175 - stateData.pointerY
		});
		story.html(stateData.html);
		popupWrap.show(transitionTime);
	}
	
	function showRandState(){
		showState(stateObjects[Math.floor(Math.random()*51)], 1000);
		mapTimer = setTimeout(showRandState, 8000);
	}
});

/*{
		"state": "DC",
		"id": "09",
		"hoverX": "215",
		"hoverY": "66",
		"spriteX": "6",
		"spriteY": "39",
		"spriteW": "1",
		"spriteH": "1",
		"pointerX": "178",
		"pointerY": "63",
		"pointerDir": "R",
		"html": ""
	},*/