// --------- IMAGE ROTATOR FOR BEACHES --initialise diff but calls global function ----------
function start_beaches_image_rotator(rotate_img_array) {
  //we are currently assuming that all images are 900px by 200px
  //add images to the DOM from the items stored in the array (if it is not empty!)
  if ( rotate_img_array.length > 0 ) {
	//loop through array adding images to the DOM
    for (var i=0; i<rotate_img_array.length; i++) {
      $("#image_rotator").append("<img src='images/beaches/" +rotate_img_array[i]+ "'>");
    }
  	//start rotator once first image is loaded
	$("#image_rotator img:first").load(function () {
    	$("#image_rotator").fadeIn(1300);
    	gv_image_rotate_timer = setTimeout('image_rotator()',1500); 
	});
  }
}

function stop_beaches_image_rotator() {
  
  $("#image_rotator").fadeOut(200, function(){
    	stop_image_rotator();
  });
}


// --------- RULES flashing ----------
//we will use the global timer variables so that the jksa.js/load_page() function will auto turn it off
//var gv_temp_timer;
//var gv_timer_on = 0;
gv_timer_on = 0;

function rules_start() {
  gv_timer_on = 1;
  gv_temp_timer=setTimeout('rules_fadein()',400); 	
}

function rules_off() {
  //hide rules overlay and stop animation
  $("#map_rules_overlay").stop().css('opacity',0);
  gv_timer_on = 0;
  clearTimeout(gv_temp_timer); 	
}
function rules_fadein() {
  $("#map_rules_overlay").fadeTo(400,0.6, function(){
	gv_temp_timer=setTimeout('rules_fadeout()',1500);
  });
   	
}
function rules_fadeout() {
  $("#map_rules_overlay").fadeTo(400,0, function(){
    gv_temp_timer=setTimeout('rules_fadein()',1000);
  });	
}


// -------------- ZOOM IN AND SET SITE BLURB AND RULES OVERLAY -------------------
function zoom_in(this_spot) {
	var top = "0px";
	var left = "0px";
    var site_summary = "";
    var rotate_img_array = [];
    var stouen_zoomed = 0;

	if ( this_spot=="st_ouen" ) {
		// St Ouen
		top = "-330px";
		left = "0px";	
		site_summary = "<div class='title'>St Ouen</div>This is the main kitesurfing beach for our prevailing winds. The areas to go are Sands and to the South of the surfers at Secrets, <span style='color:#914B44;'>La Braye is to be avoided during the summer months as it is a popular beach for swimming</span>. <br><br><span style='color:#0370FF;'>Click on a site for extra info or the map to zoom back out.</span><br><br><i>St Ouen is also a good beach for kite buggies, land boards and blo-karting.</i> ";
		rotate_img_array = ['beach_stouen_1.jpg', 'beach_stouen_2.jpg', 'beach_stouen_3.jpg'];
		$("#stouen_site_links").fadeIn(1000);

	} else if ( this_spot=="secrets" ) {
		// Secrets
		top = "-270px";
		left = "0px";	
		top2 = "60px";
		left2 = "0px";
		site_summary = "<div class='title'>Secrets</div>Another great spot for kitesufing in waves as this beach can hold a large swell. However it is home to a very popular surf break - as usual give surfers right of way on waves.";
		site_summary += "<div class='subtitle'>Wind direction</div>NW-W-S";
		site_summary += "<div class='subtitle'>Water</div>The main break opposite the main steps but there is a reef further out which works at mid-tide.";
		site_summary += "<div class='subtitle'>Beach</div>Sandy beach with lots of space but almost disappears at higher tides. There are many rocks to the North at low tide.";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Stay out of the surf zone opposite the car park.";
		site_summary += "<div class='subtitle'>Facilities</div>None.";
		rotate_img_array = ['beach_secrets_4.jpg', 'beach_secrets_2.jpg', 'beach_secrets_1.jpg', 'beach_secrets_3.jpg'];
		stouen_zoomed = 1;	//special options for st ouen further zoom	

	} else if ( this_spot=="sands" ) {
		// Sands
		top = "-330px";  //top = "-330px";
		left = "-20px";	//left = "-20px";	
		top2 = "0px";
		left2 = "-20px";
		site_summary = "<div class='title'>Sands</div>Great spot for kitesurfing in waves, the only place in the bay where you can park on the slip. This is the main place to kite in the summer as it is almost deserted compared to La Braye. However the beach disappears at high tide when you will need to head further North of Secrets.";
		site_summary += "<div class='subtitle'>Wind direction</div>NW-W-SW";
		site_summary += "<div class='subtitle'>Water</div>Lots of waves here not a spot for kitesurfers who prefer flatter conditions.";
		site_summary += "<div class='subtitle'>Beach</div>Sandy beach with lots of space and almost deserted in the summer. However the beach disappears at high tide so make sure you get out when there is enough beach to safely land your kite.";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Stay out of the surf zone opposite the Watersplash to the South.";
		site_summary += "<div class='subtitle'>Facilities</div>Big Verns at the top of the slip is a popular cafe with good food and toilets but not welcoming to anyone in a wetsuit.";
		rotate_img_array = ['beach_sands_1.jpg', 'beach_sands_3.jpg', 'beach_sands_2.jpg', 'beach_sands_4.jpg'];
		stouen_zoomed = 1;	//special options for st ouen further zoom	

	} else if ( this_spot=="la_braye" ) {
		// La Braye
		top = "-380px";  // top = "-345px";
		left = "-10px";	//left = "-10px";
		top2 = "-50px";
		left2 = "-10px";
		site_summary = "<div class='title'>La Braye</div>La Braye is to be avoided during the summer months as this is a swimming zone.";
		site_summary += "<div class='subtitle'>Wind direction</div>N-W-SW. Can even take a NE at a squeeze which is useful if a high makes Gorey unworkable.";
		site_summary += "<div class='subtitle'>Water</div>Waves to the right of La Braye slip and at mid tide a flat water lagoon is created whist it is sheltered from the outer rocks which creates lovely flat sections.";
		site_summary += "<div class='subtitle'>Beach</div>Sandy beach, lots of space. can get crowded during weekends.";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Avoid in the summer";
		site_summary += "<div class='subtitle'>Facilities</div>Food can be found at La Braye Cafe which is back towards the main car park. To the right of the cafe you will find public toilets and if you need to rinse yourself off you can use the showers at the top of the slip.";		
		rotate_img_array = ['beach_labraye_2.jpg', 'beach_labraye_1.jpg', 'beach_labraye_4.jpg', 'beach_labraye_3.jpg'];		
		stouen_zoomed = 1;	//special options for st ouen further zoom	
		
	} else if ( this_spot=="plemont" ) {
		// Plemont
		top = "0px";
		left = "0px";
		site_summary = "<div class='title nr'>Plemont (not recommended)</div>Small beach surrounded by high cliffs which is seldom if ever used for kitesurfing. There are numerous steps to get to it and the beach disappears at high tide.";
		site_summary += "<div class='subtitle'>Wind direction</div>NW";
		site_summary += "<div class='subtitle'>Water</div>It can get a nice swell but then make sure you stay clear of surfers.";
		site_summary += "<div class='subtitle'>Beach</div>The beach totally disappears at high tide so it's best to go out when the tide is dropping.";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Avoid in the summer";
		site_summary += "<div class='subtitle'>Facilities</div>A cafe up those stairs.";
		rotate_img_array = ['beach_plemont_3.jpg', 'beach_plemont_1.jpg', 'beach_plemont_2.jpg'];

	} else if ( this_spot=="greve_de_lecq" ) {
		// Greve de Lecq
		top = "0px";
		left = "-240px";
		site_summary = "<div class='title nr'>Greve de Lecq (not recommended)</div>Small harbour beach which is rarely used for kitesurfing. A possible alternative to Gorey in the winter for NNE winds. Not to be used in the summer as it is very popular with families.";
		site_summary += "<div class='subtitle'>Wind direction</div>NW-NE";
		site_summary += "<div class='subtitle'>Water</div>choppy with a dumping wave.";
		site_summary += "<div class='subtitle'>Beach</div>Small beach with a harbour wall to the West.";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Avoid in the summer.";
		site_summary += "<div class='subtitle'>Facilities</div>Traditional beach-side British cafes";
		rotate_img_array = ['beach_greve_1.jpg', 'beach_greve_2.jpg', 'beach_greve_3.jpg'];
			
	} else if ( this_spot=="st_brelade" ) {
		// St Brelade
		top = "-630px";
		left = "-215px";
		site_summary = "<div class='title nr'>St Brelade's Bay (not recommended)</div>Nice beach for swimmers but not so good for kiters. The horse-shoe shape means that the wind is erratic and gusty unless the direction is perfectly onshore. Also not to be used in the summer as it is very popular with swimmers, waterskiers, wakeboarders and families. Best avoided and for the SW direction it's always better to got to St Ouen.";	
		site_summary += "<div class='subtitle'>Wind direction</div>SW";
		site_summary += "<div class='subtitle'>Water</div>It can get a small swell.";
		site_summary += "<div class='subtitle'>Beach</div>Beautiful sand. Forms a double-crescent with Ouaisne";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Avoid in the summer.";
		site_summary += "<div class='subtitle'>Facilities</div>Lots to choose from.";
		rotate_img_array = ['beach_stbrelades_1.jpg', 'beach_stbrelades_2.jpg'];
			
	} else if (  this_spot=="bel_royal"  ) {
		// St Aubin, Bel Royal
		top = "-530px";
		left = "-520px";	
		site_summary = "<div class='title'>St Aubin - Bel Royal</div>Great Spot for beginners and wake-style aficionados as the water is usually flat and shallow at mid to low tide. Apart from the jet-ski lanes to the West you can go wherever you want.";
		site_summary += "<div class='subtitle'>Wind direction</div>SSW-S-SE.  Don't ride here in cross-shore Westerly conditions as the wind can get very gusty and unpredictable.";
		site_summary += "<div class='subtitle'>Water</div>Flat most of the time from mid to low tide, the odd day can have a very small swell. ";
		site_summary += "<div class='subtitle'>Beach</div>Sandy beach, lots of space.";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Keep away from the jetski lanes to the West.";
		site_summary += "<div class='subtitle'>Facilities</div>A choice of beach cafes, toilets and shower can be found at the top of the slip";	
		rotate_img_array = ['beach_belroyal_1.jpg', 'beach_belroyal_2.jpg', 'beach_belroyal_3.jpg', 'beach_belroyal_4.jpg'];
			
	} else if (  this_spot=="rice_bowl"  ) {
		// Rice Bowl
		top = "-690px";
		left = "-890px";	
		site_summary = "<div class='title'>Rice Bowl</div>Named after the Chinese restaurant at the top of the slipway. Right next to the reclamation site so it is a little 'industrial' but it can be a nice small flat-water spot at mid to low tide. Watch out for rocks to the East.";
		site_summary += "<div class='subtitle'>Wind direction</div>W-SE but best directly onshore which is SW.";
		site_summary += "<div class='subtitle'>Water</div>Best at mid to low tide where a nice flat water are appears between the slipway and the reclamation site. At lower tides there are lots of rocks so beware.";
		site_summary += "<div class='subtitle'>Beach</div>Sandy beach, with light shingle near the slipway. Rarely many people.";
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>None really but stay away from the bathing pool at Havre de Pas.";
		rotate_img_array = ['beach_ricebowl_1.jpg', 'beach_ricebowl_2.jpg', 'beach_ricebowl_3.jpg', 'beach_ricebowl_4.jpg'];

	} else if ( this_spot=="gorey" ) {
		// Gorey
		top = "-540px";
		left = "-1250px";
		site_summary = "<div class='title'>Gorey - Grouville Bay</div>Great beach for beginners as it's shallow and flat at low tide. But stay clear of those geese!";	
		site_summary += "<div class='subtitle'>Wind direction</div>NE-SE. Beware of Northerly winds at high tide as it gets gusty as the wind has to come around the castle.";
		site_summary += "<div class='subtitle'>Water</div>Flat most of the time, the odd day can have a very small swell.";
		site_summary += "<div class='subtitle'>Beach</div>Sandy beach, lots of space.";	
		site_summary += "<div class='subtitle'>Rules & Restrictions</div>Kite between cafe situated on the beach and Fort Henry. Please read our <a href='Voluntary%20Code%20for%20the%20Bay%20of%20Grouville.pdf'>Voluntary Code of Conduct</a> before heading down for a session. This area is a designated Ramsar Site of Special Scientific Interest. Please launch and land by the waters' edge.";
		site_summary += "<div class='subtitle'>Facilities</div>The place to park is the big gravel car park opposite the main village green. For food you will need to head towards the castle, toilets can be found to the left of the main gravel car park.";		
		rotate_img_array = ['beach_gorey_1.jpg','beach_gorey_4.jpg', 'beach_gorey_3.jpg','beach_gorey_2.jpg'];

	} else {
		alert("Unrecognised spot:"+this_spot);
	}
//alert("top:"+top+" left:"+left);	
	//---------------------------
	//Zoom in and change details
	//stop_image_rotator(); //need to wipe the initial map_help image
	rules_off(); //fade with animate on the rules caused a visual lag so will temp hide the rules 
	$("#map").animate({width:"1700px", top:top, left:left},300, function() {
		$("#map_rules_overlay").css({width:"1700px", top:top, left:left});
		rules_start();
	});
	  $("#site_summary").fadeOut(200, function() {
		  $("#site_summary").html(site_summary);
		  $("#site_summary").fadeIn(400);
	  });	
	  

   if (stouen_zoomed) {
	//We must be already zoomed in to the St ouen area so handle things a little differently
	  $("#stouen_site_links").animate({ top:top2, left:left2},300);
	  $("#image_rotator").fadeOut(200, function(){
    	  stop_image_rotator();
	      start_beaches_image_rotator(rotate_img_array);
  	  });
	  //$("#click_map_instr").text("Click a spot for more info or the map to zoom back out.");
   } else {		 
   	  $("#main_site_links").hide(); 
	  //turn whole map hover cursor on for zoom out indicator
	  $("#zoom_out").show();	
	  //change title instructions
	  $("#click_map_instr").text("Click map to zoom back out.");
	  //check if there is any images in the rotator if so (it will be the map_help on page load) we will fade it out
	  //before vbinging in the img array. Otherwise just go ahead with it straight away.
	    if( $("#image_rotator img").length ) {
		    $("#image_rotator").fadeOut(200, function(){
			  stop_image_rotator();
			  start_beaches_image_rotator(rotate_img_array);
			});
		} else {	  
		  start_beaches_image_rotator(rotate_img_array);
		}

   }
return false;
}

// -------------- ZOOM OUT  --------------
function zoom_out() {
	//hide rules overlay
	//rules_off();
	stop_beaches_image_rotator(); 
	//turn off whole map hover cursor for zoom out indicator
	$("#zoom_out").hide();				
	//special links for st ouen further zoom
	$("#stouen_site_links").hide().css({ top:"0px", left:"0px"});
	
	//zoom back out
	rules_off(); //fade with animate on the rules caused a visual lag so will temp hide the rules 
	$("#map").animate({width:"500px", top:"0px", left:"0px"},200, function() {
		//alert("fdg");
		$("#map_rules_overlay").css({width:"500px", top:"0px", left:"0px"});
		//alert("f");
		rules_start();
	});
	//change blurb with fade bounce
	$("#site_summary").fadeOut(100, function() {
	  $("#site_summary").html("<div class='title'>Interactive map</div>Click on a highlighted beach to zoom in and display pictures and associated kiting information.<br><br>Click again to zoom back out.<br><br>	<span style='color:#941B1B;font-weight:400;'>Please take note of any restrictions mentioned.</span><br><br> Be aware that the tidal range in Jersey can be as much as 40ft which can expose hidden rocks in some areas.</span>");
	  $("#site_summary").fadeIn(200);	
	  //Have to do it this way to get IE to play ball
	  $("#main_site_links a").css({opacity: 0});  //so they don't suddenly appear when we show the container
	  $("#main_site_links").show();  //show the container
	  $("#main_site_links a").fadeTo(400, 0.55);  //fade the links up
	});
	//change title instructions
	$("#click_map_instr").text("Click a spot on the map to zoom in.");
}

// -- ZOOM COTROL --
function testing_on() {
	$("#load_area").append("<div id='status'></div>");
	
	$('#map_portal').mousemove(function(e){
	      //Temp for testing
	      var offset = $(this).offset();
		  var x = e.pageX - offset.left;
		  var y = e.pageY - offset.top;
		  $('#status').html(x +', '+ y);
	 });	
}




$(document).ready(function() {
	//add map click events
	$("#zoom_out").bind('click',function() { 
	  //zoom_out(); 
	  $.address.value("?page=beaches"); //update history plugin to trigger zoom out
	});	
	
	$("#map_portal a").click(function(event) { 	
	  event.preventDefault();  
	  var this_site = $(this).attr("id");
	  $.address.value("?page=beaches&site="+this_site); //update history plugin to zoom in to spot
	});	
	
	//testing_on(); 
	//fade in map, site links and rules on page load
	$("#map_rules_overlay").fadeTo(1,0);  //IE seems to need this. Sigh.
	$("#main_site_links a").css({opacity: 0});
	$("#map").css({opacity: 0}).fadeTo(800, 1, function() {
			$("#main_site_links a").fadeTo(500, 0.55);
			rules_start();
			start_beaches_image_rotator(['map_help.png']); //key 
	});	
	
});