$(document).ready(function(){


// CAROUSEL
	
	// get the total number of images
	var size = $('#hero_selection li').size()
	
	// because the fading carousel is using arrays the init number must be 0 as the first item in an array is 0 so 0 = 1, 1 = 2 and so on
	var start = 0;
	
	// add all of the items within hero_selection to an array so they can be selected
	var array = Array();
	
	$('#hero_selection li img').each(function() { 
  		array.push($(this).attr('target'));
	})
	
	// two different states selected and not_selected
	var selected = 'images/round-selected.png';
	var not_selected = 'images/round.png';
	
	// show the first item
	$('#' + array[start]).show();
	$('#round' + start).attr('src', selected);
	
	
	// switch item on interval
	
	// 1000 = 1 sec
	// 10000 = 10 sec
	
	var interval = 10000;
	
	var carousel = setInterval(function(){
		
		// reset the counter if it exceeds the limit of items
		start = start + 1;
		if (start >= size){
			start = 0;	
		}
		
		// reset all of the selected items
		$('#hero_selection li img').attr('src', not_selected);
		$('.hero_item').hide();
		
		// display the newly selected item
		$('#' + array[start]).fadeIn();
		$('#round' + start).attr('src', selected);		
		
		
	}, interval);
	
	// CAROUSEL SELECT ON CLICK
		
	$('#hero_selection li img').live('click', function(){
		
		window.clearInterval(carousel);
		
		var target = $(this).attr('target');
		
		$('.hero_item').hide();
		$('#' + target).fadeIn();
		
		$('#hero_selection li img').attr('src', not_selected);
		$(this).attr('src', selected);
		
	});
	
// CAROUSEL END

// GLOBAL MAP
	$('map area').hover(function(){ 
	
		var location = '#' + $(this).attr('target');
		$(location).show();
		
	}, function(){
	
		$('.location').hide();
		
	});
// GLOBAL MAP END

});