// JavaScript Document
$(document).ready(function() {
						   
	// translate menu drop down
	if($("#translate_link").length >0){

		$("#translate_link").click(function(){  
         	$("#translate_menu").animate({"opacity": "toggle"}, { duration: "slow" });
			return false;
     	});
		
		$("a.translate_link_close").click(function(){  
         	$("#translate_menu").animate({"opacity": "toggle"}, { duration: "slow" });
			return false;
     	}); 
		
		
	}
						   
	// home cruise info box switcher
	if($("#cruise_info").length > 0){

		$("div.cruise_info").hide();
		$("p.cruise_more_info").hide();
		// tab click
		
		$('#cruise_info_choices li a').click(function (event) {
			event.preventDefault();											   
			$("div.cruise_info").hide().filter(this.hash).fadeIn("slow");
			$('#cruise_info_choices li a').each(function(){
				$(this).children("img").attr('src',$(this).attr('rel').replace(".jpg","_off.jpg"));
			});	
			
			$(this).children("img").attr('src',$(this).attr('rel'));
			

			return false;
		}).filter(':first').click();
		
			$.fn.qtip.styles.cruise_info = { // Last part is the name of the style
				 width: { max: 400 },
				 padding: '14px',
				 border: {
					width: 9,
					radius: 9,
					color: '#00aeff'
				 },
				 name: 'light',
				 overflow:'auto',
  				 title: {'background-color':'#DDF3FE','color':'#0052a8'}

			}			
		
		/*
		$("#sunrise_info_show").qtip({
			  content: {
				 title: {
					text: $("#sunrise_info_show").attr('title'),
					button: 'Close',
					background: '#DDF3FE'				
				 },
				 text: "These sunrise whale watching tours are not to be missed! Come along for the most exhilarating experience of your life when we head out to watch the sunrise whilst experiencing these drop-dead gorgeous whales at play. You can sit back and relax whilst spotting whales with the gorgeous Glasshouse Mountains in the background. Onboard, you will be treated to a delicious continental buffet breakfast and a stack of splashtacular fun!"
			  },
			  position: {
				 target: $(document.body), // Position it via the document body...
				 corner: 'center' // ...at the center of the viewport
			  },
			  show: {
				 when: 'click', // Show it on click
				 solo: true // And hide all other tooltips
			  },
			  hide: {
			  	when: 'unfocus'
			  },
			  style: {
				 name: 'cruise_info'
			  }
			  
		}).bind("click",function(event){event.preventDefault();return false});
		$("#morning_info_show").qtip({
			  content: {
				 title: {
					text: $("#morning_info_show").attr('title'),
					button: 'Close'
				 },
				 text: "For those of you who enjoy what the Sunshine Coast is notorious for - its sunshine - then the midmorning cruise onboard Steve's Whale One is just for you. You can sit back and relax while spotting whales with the gorgeous Glasshouse Mountains in the background. Onboard, you will be treated to a delicious lunch and a stack of splashtacular fun experienced only through Australia Zoo Whale Watching Tours."
			  },
			  position: {
				 target: $(document.body), // Position it via the document body...
				 corner: 'center' // ...at the center of the viewport
			  },
			  show: {
				 when: 'click', // Show it on click
				 solo: true // And hide all other tooltips
			  },
			  hide: {
			  	when: 'unfocus'
			  },
			  style: {
				name: 'cruise_info'
			  }
			  
		}).bind("click",function(event){event.preventDefault();return false});
		*/
		/*
		$("#sunrise_info_show").mouseover(function(){
			$("#sunrise_more_info").slideDown("slow");
		}).mouseout(function(){
			$("#sunrise_more_info").slideUp("slow");
		});
	
		$("#morning_info_show").mouseover(function(){
			$("#morning_more_info").slideDown("slow");
		}).mouseout(function(){
			$("#morning_more_info").slideUp("slow");
		});
		*/
		
	}
	
	// whale crew lightbox
	function display_modal(elem){
		
		$(elem).qtip(

   			{
			  content: {
				 title: {
					text: $(elem).attr('title'),
					button: 'Close'
				 },
				 text: '<img src="'+$(elem).attr('href')+'"><br /><p>'+$(elem).parent("div").children(".caption").html()+'</p>'
			  },
			  position: {
				 target: $(document.body), // Position it via the document body...
				 corner: 'center' // ...at the center of the viewport
			  },
			  show: {
				 when: 'click', // Show it on click
				 solo: true // And hide all other tooltips
			  },
			  hide: {
			  	when: 'unfocus'
			  },
			  style: {
				 width: { max: 700 },
				 padding: '14px',
				 border: {
					width: 9,
					radius: 9,
					color: '#666666'
				 },
				 name: 'light',
				 overflow:'auto'
			  },
			  api: {
				 beforeShow: function()
				 {
					// Fade in the modal "blanket" using the defined show speed
					$('#qtip-blanket').fadeIn(this.options.show.effect.length);
				 },
				 beforeHide: function()
				 {
					// Fade out the modal "blanket" using the defined hide speed
					$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
				 }
			  }
		   }).bind("click",function(event){event.preventDefault();return false});

	}
   // Create the modal backdrop on document load so all modal tooltips can use it
	$('<div id="qtip-blanket">')
		  .css({
			 position: 'absolute',
			 top: 0, // Use document scrollTop so it's on-screen even if the window is scrolled
			 left: 0,
			 height: $(document).height(), // Span the full document height...
			 width: '100%', // ...and full width
			 opacity: 0.7, // Make it slightly transparent
			 backgroundColor: 'black',
			 zIndex: 5000  // Make sure the zIndex is below 6000 to keep it below tooltips!
		  })
		  .appendTo(document.body) // Append to the document body
		  .hide(); // Hide it initially

	$('a[rel=crew]').each(function(event){
			display_modal($(this));
	});
	
	$('a[rel=show_map]').qtip(
	{
	  content: {
		 title: {
			text: "How To Get Here",
			button: 'Close'
		 },
		 text: '<img src="'+$('a[rel=show_map]').attr('href')+'">'
	  },
	  position: {
		 target: $(document.body), // Position it via the document body...
		 corner: 'center' // ...at the center of the viewport
	  },
	  show: {
		 when: 'click', // Show it on click
		 solo: true // And hide all other tooltips
	  },
	  hide: {
		when: 'unfocus'
	  },
	  style: {
		 width: { max: 1100 },		 
		 padding: '14px',
		 border: {
			width: 9,
			radius: 9,
			color: '#666666'
		 },
		 name: 'light'
	  },
	  api: {
		 beforeShow: function()
		 {
			// Fade in the modal "blanket" using the defined show speed
			$('#qtip-blanket').fadeIn(this.options.show.effect.length);
		 },
		 beforeHide: function()
		 {
			// Fade out the modal "blanket" using the defined hide speed
			$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
		 }
	  }
   }).bind("click",function(event){event.preventDefault();return false});			

	$('a[rel=show_map]').qtip(
	{
	  content: {
		 title: {
			text: "How To Get Here",
			button: 'Close'
		 },
		 text: '<img src="'+$('a[rel=show_map]').attr('href')+'">'
	  },
	  position: {
		 target: $(document.body), // Position it via the document body...
		 corner: 'center' // ...at the center of the viewport
	  },
	  show: {
		 when: 'click', // Show it on click
		 solo: true // And hide all other tooltips
	  },
	  hide: {
		when: 'unfocus'
	  },
	  style: {
		 width: { max: 1100 },		 
		 padding: '14px',
		 border: {
			width: 9,
			radius: 9,
			color: '#666666'
		 },
		 name: 'light'
	  },
	  api: {
		 beforeShow: function()
		 {
			// Fade in the modal "blanket" using the defined show speed
			$('#qtip-blanket').fadeIn(this.options.show.effect.length);
		 },
		 beforeHide: function()
		 {
			// Fade out the modal "blanket" using the defined hide speed
			$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
		 }
	  }
   }).bind("click",function(event){event.preventDefault();return false});
	
	
	function display_photo(elem){
		
		$(elem).qtip(

   			{
			  content: {
				 title: {
					text: $(elem).attr('title'),
					button: 'Close'
				 },
				 text: '<img src="'+$(elem).attr('href')+'"><br /><p>'+$(elem).children("img").attr("alt")+'</p>'
			  },
			  position: {
				 target: $(document.body), // Position it via the document body...
				 corner: 'center' // ...at the center of the viewport
			  },
			  show: {
				 when: 'click', // Show it on click
				 solo: true // And hide all other tooltips
			  },
			  hide: {
			  	when: 'unfocus'
			  },
			  style: {
				 width: { max: 800 },
				 padding: '14px',
				 border: {
					width: 9,
					radius: 9,
					color: '#666666'
				 },
				 name: 'light',
				 overflow:'auto'
			  },
			  api: {
				 beforeShow: function()
				 {
					// Fade in the modal "blanket" using the defined show speed
					$('#qtip-blanket').fadeIn(this.options.show.effect.length);
				 },
				 beforeHide: function()
				 {
					// Fade out the modal "blanket" using the defined hide speed
					$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
				 }
			  }
		   }).bind("click",function(event){event.preventDefault();return false});

	}	
	
	$('a[rel=photo_of_the_day]').each(function(event){
			display_photo($(this));
	});
	
	
	if($("#main_image").length>0){
		$('.gallery_whaleone_unstyled').addClass('gallery_whaleone'); // adds new class name to maintain degradability
	  
		$('ul.gallery_whaleone').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // add image effects
				
				// fade in the image & caption
				image.css('display','none').fadeIn(1000);
				$(".caption").css('display','none').fadeIn(500).css('width',image.width());

				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
		
		$(".jumpmenu").change(function() {
			var gal = $(".jumpmenu").val();

			if (gal != '') {
				location.href='/photo-gallery.php?gallery='+gal;
			}

		});		
	}
	
	
	
	
	$("#youtube_playlist").qtip({
		content: {
			 title: {
				text: "Whale One Videos",
				button: 'Close'
			 },
				url: 'youtube_video.html',
				method: 'get'
		},
		position: {
			 target: $(document.body), // Position it via the document body...
			 corner: 'center' // ...at the center of the viewport
		},
		show: {
			 when: 'click', // Show it on click
			 solo: true // And hide all other tooltips
		},
		hide: {
			when: 'unfocus'
		},
		style:{	 
			width: 510,
			padding: '5px',
			border: {
				width: 9,
				radius: 9,
				color: '#00aeff'
			},
			name: 'light',
			overflow:'auto',
			title: {'background-color':'#DDF3FE','color':'#0052a8'}
		}
		  
	}).bind("click",function(event){event.preventDefault();return false});
});