var toggle = [0];
toggle[1] = 0;
toggle[2] = 0;
toggle[3] = 0;
toggle[4] = 0;
var lastPage = 0;




 $(document).ready(function(){
	 //hide the pages of info
	 $('#page1').hide();
	 $('#page2').hide();
	 $('#page3').hide();
	 $('#page4').hide();
	 	 
	//set colour for map overlay
	$.fn.maphilight.defaults = {
		fill: true,
		fillColor: 'CC6633',
		fillOpacity: 0.5,
		stroke: false,
		strokeColor: 'BFE9E9',
		strokeOpacity: 1,
		strokeWidth: 4,
		fade: true,
		alwaysOn: false,
		neverOn: false,
		groupBy: false
	}
	
	//something to do with opera apparently
	$('.map').maphilight();
	
	//set the right thumbnails to highlight areas of the ship
	$('#thumb1').mouseover(function(e) {
		$('#area1').mouseover();
	}).mouseout(function(e) {
		$('#area1').mouseout();
	}).click(function(e) { e.preventDefault(); });
	
	$('#thumb2').mouseover(function(e) {
		$('#area2').mouseover();
	}).mouseout(function(e) {
		$('#area2').mouseout();
	}).click(function(e) { e.preventDefault(); });
	
	$('#thumb3').mouseover(function(e) {
		$('#area3').mouseover();
	}).mouseout(function(e) {
		$('#area3').mouseout();
	}).click(function(e) { e.preventDefault(); });
	
	$('#thumb4').mouseover(function(e) {
		$('#area4').mouseover();
	}).mouseout(function(e) {
		$('#area4').mouseout();
	}).click(function(e) { e.preventDefault(); });
	

			
		
 });
 
 function toggleAlwaysOn(areaID, status)
 {
	var data = $('#area'+areaID).data('maphilight') || {};
	data.alwaysOn = status;
	$('#area'+areaID).data('maphilight', data).trigger('alwaysOn.maphilight');
	 
	if (areaID > 1 && areaID < 4){
		var data = $('#area'+areaID+"b").data('maphilight') || {};
		data.alwaysOn = status;
		$('#area'+areaID+"b").data('maphilight', data).trigger('alwaysOn.maphilight');
	}
 }
 
 function showPage(pageNum)
 {
	 //Stop animations when we click on something new
	 $('#init').stop(true, true);
	 $('#page'+lastPage).stop(true, true);

	 //if page isnt already highlighted
	 if (toggle[pageNum] == 0){ 
	 
		//hide the index and the last page
		$('#init').hide();
		$('#page'+lastPage).hide();

		//show the requested page
		$('#page'+pageNum).fadeIn("slow");
		 
		//set the toggle array to reflect the new status
		toggle[lastPage] = 0;
		toggle[pageNum] = 1;

		//set alwaysOn to flase for last page
		
		toggleAlwaysOn(lastPage, false);
		
		//set alwaysOn to true for the new page
		toggleAlwaysOn(pageNum, true);


	 }
	 
	 //otherwise we assume we are on the page right now and want to go back to index
	 else{
		 
		//hide the page and show the index
 		$('#page'+pageNum).hide();
		$('#init').fadeIn("slow");
		 
		//update the status
		toggle[pageNum] = 0;
		 
		//reset the image map hilight
		toggleAlwaysOn(pageNum, false);

	 }
	 //record what page we were on last
	 lastPage = pageNum
 }