$(document).ready(function() {

// CONTACT PAGE, INFO PAGE, ABOUT PAGES

// This functions applies to info_background class. This class is only used by the Contact page, info page and about pages.
	if ($('#info_background').length != 0 ) {
		 function startInfo() {
		   $('.curtain').css({'visibility':'visible'}).hide(0).fadeIn(500);
		   $(".page_loader").hide(0);
		 }

		 $('img').batchImageLoad({
		 		 	loadingCompleteCallback: startInfo
		 });
	}



// ALL WEDDING PAGES and PORTRAIT PAGE
// the wedding slideshow cycle. It shows 5 images. We preload the first two images. If we don't the photo will incrementally
// load which is kind of ugly.
// we use the javascript batch image load to first load all the photos in the preview slideshow
if ($('#info_background').length === 0 ) {
	  function startCycle() {
		$('.has-js .preview_slideshow').cycle({
		        	fx:     	'fade',
					delay:      0, // we wait this long for the first transition to start. Yeah just use negative if you need to
		           	speed:  	1300, // speed of the fx animation
					timeout: 	3200 // wait time between images
		   	});

			// if you're on wedding or porttrait page then fade out the page loader first then fade in content
			// else if you're on another page just fade in content right away. Cause there's no loader in other pages. 
			if(	$('.preview_slideshow').length != 0 ) {
				$(".page_loader").fadeOut(100, function(){
					$(".curtain").fadeIn("normal");	
					$("#controls").show(0);
					$(".manual_advance").show(0);
				});
			} else {
				$(".page_loader").fadeOut(100, function(){
					$(".curtain").fadeIn("normal", function(){
							$('#start_the_gallery').trigger('click'); //  startup the slideshow
							$('#pause_the_gallery').trigger('click'); // pause it again. Why do we do this? Because on some systems the first photo did not show up. This is probably due to the fact that those systems dont process the gallery and all DOMS fast enough.
																	  // however the sildeshow alrdeay starts, and that does not slow down. So wepause it for how long we want. in the delay funcition ib he next line. WEll if gallery had a delay funtion for the first photo we didnt have to do this.
																	  // but because it doesnt we use this as a quick and dirty workaround
							$('#next_album_page').delay(750).fadeIn("fast");// this line applies to the forever album page

							$(".logo").delay(750).show(0, function(){
								
								if(	$('a#next_album_page ').length === 0 )  { // if this is the portraits page or the forever albums, pause the slideshw, which defaults state is autostart
									$('#start_the_gallery').trigger('click'); // this means start uo the slideshow
								}
								$("#controls").fadeIn("normal"); // the controls are hidden onload. Beause we'ere starting the slideshow manually and dont want the user to start it up untill everything s ready, we only show it until it is actully ready
								$(".manual_advance").show(0); // manual advanced is shut off so you cant click on the photo to advance untill everything is loaded
							});
					 });
				});		
			}
	  };

	// batch load the images in preview slideshow that have class firstthree. After that go to the startCycle function that will start the slideshow cycle.
		$('img.first_two, img.preload_it').batchImageLoad({
	  	loadingCompleteCallback: startCycle
	  });
}



// FADE IN AND OUT FUNCTION
if ($.browser.msie) {
// on non IE pages we fade pages in and out. It doesn't look that good in IE so we skip any fancy effect in IE.
} else { 

		// Everytime you click on one of the links referred to below and leave a page, the curtain (div somehwere in the frame) fades out first before going to the next url to create a nice transitional effect
			$('#box li.stay a, #album_navigation a, a#contact_page_link, .contact_link a, a#back_button, a#play_button_weddings ').click(function(){
			  var url = $(this).attr('href');
			  $('.curtain').fadeOut('normal', function(){
			    document.location.href = url;
			  });
			  return false;
			});

		// clicking on the logo will fade Out logo and navigation and frame. And then go to the next page.
			$('a.the_logo, a#go_home').click(function(){
			  var url = $(this).attr('href');
			  $(".logo, .slogan, #box").fadeOut("normal");					
			  $('#frame').fadeOut('normal', function(){
			    document.location.href = url;
			  });
			  return false;
			});
} 		// end of if browser is IE

// we use the onbeforeunload in combination with the previous fade IN and OUT function. 
// Otherwise the browser back button wont show the previous page contents when it is clicked to go to a previous page.
// The unbeforeload keeps the history intact
window.onbeforeunload=function(){}


});