$(document).ready(function() {
	//PHOTO SLIDESHOW
	$('#photoViewer').innerfade({
		animationtype: 'fade',
		speed: 2000,
		timeout: 5000,
		type: 'sequence',
		containerheight:'459px'
	});
	//SIDEBAR LINK FANCYNESS
	$('#sidebarLink').mouseover(function() {
		$("#sidebarLinkBG").stop();
		$("#sidebarLinkBG").animate( { opacity: '1' }, 300);		
	});
	$('#sidebarLink').mouseout(function() {
		$("#sidebarLinkBG").stop();
		$("#sidebarLinkBG").animate( { opacity: '0' }, 300);
		
	});
	
	//LIGHTBOX SCRIPT	
	$('a.lightbox').hover(
		function() { 
			$('.btnZoom').remove();
			var imgheight = $(this).children('img').height()/2-20;
			var imgwidth = $(this).children('img').width()/2*-1-20;

			$(this).append("<img src=\"images/btnZoom.png\" class=\"btnZoom\"alt=\"\" style=\"position:absolute;display:none;margin-top:" + imgheight + "px;margin-left:" + imgwidth + "px;\"/>");
			$('.btnZoom').fadeIn('fast');
		},
		function() { 
			$('.btnZoom').stop();
			
				$('.btnZoom').remove();
			
		}
	);

	$("a.lightbox, a.lightboxText").click(function(){
		
		//add the overlay div
		$("body").append("<div id='overlay'> </div>");
		//set the overlay height
		var windowHeight = $(window).height();
		$("#overlay").css({'height' : windowHeight });
		//make sure the overlay stays all good when window is resized
		$(window).resize(overlayHeight);
		function overlayHeight(){
				var windowHeight = $(window).height();
				$("#overlay").css({'height' : windowHeight });
		}
		//fade the overlay in
		$('#overlay').fadeIn('300');

		//get the location and alt of the image from the link
		var location = $(this).attr('href');
		var caption = $(this).children('img').attr('alt');
		
		//write in the container
		$("body").append("<div id=\"lightboxContent\"><img src=\"images/loader.gif\" id=\"loading\" alt=\"loading\"/></div>");
		
		var img = new Image();

		  // wrap our new image in jQuery, then:
		  $(img)
		    // once the image has loaded, execute this code
		    .load(function () {
		      // set the image hidden by default    
		      $(this).hide();
				
		      // with the holding div #loader, apply:
		      $("#loading").remove();
		        // remove the loading class (so no background spinner), 
		       
		        // then insert our image
		        $('#lightboxContent').append(this);
				//get the width of the image with the borders
				var lbwidth = $(this).width() + 60;

				//get negative half the width of the image to use as a margin offset
				var lbmargin = lbwidth/2*-1;
				$('#lightboxContent').css({'marginLeft' : lbmargin + 'px'});
				$('#lightboxContent').append('<a href=\"#\" onclick=\"return false\"><img src=\"images/btnClose.png\" alt=\"close\" id=\"btnClose\" /></a><p>' + caption + '</p>');
		      // fade our image in to create a nice effect
		      $(this).fadeIn();
			  $("#lightboxContent p").fadeIn();
		    })

		    // if there was an error loading the image, react accordingly
		    .error(function () {
		      $("#lightboxContent").remove();
		    })

		    // *finally*, set the src attribute of the new image to our image
		    .attr('src', location);		
		//set everything back to normal when you click the overlay
		$("#overlay, #lightboxContent").click(function(){
			$("#lightboxContent").fadeOut(300, function(){
				$("#lightboxContent").remove();
			});
			$("#overlay").fadeOut(300, removeOverlay);
			function removeOverlay(){
				$("#overlay").remove();
			}
		});
		return false;
	});

	//NAVIGATIONS
	$('#mainNav>li').hover(
		function() { 
			var subnav = $(this).children('ul');
			if(subnav.length > 0){
				subnav.fadeIn('fast');
				var snavheight = subnav.height();
				$('#subNavBG').fadeIn('fast');
				$('#subNavBG').css({'height' : snavheight});
			}
		},
		function() { 
			$(this).children('ul').hide();
			$('#subNavBG').hide();
		}
	);
	
	//PHOTO GALLERY
	$('#mainPhotoGallery a').click(function(){
		var largephoto = $(this).attr('href');
		$('#photoViewer').html('<img src=\"images/loader.gif\" id=\"galleryLoader\" alt=\"loading...\"/>');

		var img = new Image();

		  // wrap our new image in jQuery, then:
		  $(img)
		    // once the image has loaded, execute this code
		    .load(function () {
		      // set the image hidden by default    
		      $(this).hide();

		      // with the holding div #loader, apply:
		      $("#loading").remove();
		        // remove the loading class (so no background spinner), 

		        // then insert our image
		        $('#photoViewer').append(this);



		      // fade our image in to create a nice effect
				$('#galleryLoader').remove();
		      $(this).fadeIn();
		    })

		    // if there was an error loading the image, react accordingly
		    .error(function () {

		    })

		    // *finally*, set the src attribute of the new image to our image
		    .attr('src', largephoto);




		return false;
	});
	
});


// this initialises the demo scollpanes on the page.
$(function(){
	$('#pane1').jScrollPane();
});