// initialise centerinclient to center page in browser window
$(document).ready(function(){		
    $('.container').centerInClient();
	});
	// re-centre on page resize
	$(window).resize(function() {
    	$('.container').centerInClient();    		
});


// to centre image in container **
// ** wait until images have loaded before starting cycle
$(window).load(function() {
// ** front image rotator
$('.gallery .image_container').cycle({ 
	fx:     'fade',
	speed:	'fast', 
	timeout: 0, 
	delay:   -2000,
	next:   '.next', 
	prev:   '.previous',
	before:  onBefore,
	after:   onAfter,
	// make thumbnails work as image nav
	pager:	'.thumb_links',
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '.thumb_links li:eq(' + idx + ') a';}
	});
});	


// ** hide all but the first image when page loads
$(document).ready(function() {
	$('.gallery .image_container img:gt(0)').hide();
});


// ** callback fired when each slide transition begins
function onBefore(curr,next,opts) {
	var $slide = $(next);
	var w = $slide.outerWidth();
	var h = $slide.outerHeight();
	$slide.css({
	marginTop: (500 - h) / 2,   // height (500) of image container
	marginLeft: (630 - w) / 2	// width (630) of image container
	});
};

// show the alt tag of the image as the caption using onAfter	
function onAfter() { 
	$('.caption').html("") 
		.append('' + this.alt + '');
	}
	
	
$(document).ready(function(){
	
	// hover effects for image and link nav - using the built-in 'fadein/out' effects with jquery something was going wrong with the chaining of the effects - the fades would work when hovering over the previou/next text links but would not work when hovering over the image (the hover works but without the fades) - I got round this using the hoverflow plugin on the image hovers, leaving the text hover using the native jquery. Not sure why this happens but reckon something to do with the animation (queue) system of jquery.
	
	// first, hide the arrows
	$('.hover_previous a').css('display','none');
	$('.hover_next a').css('display','none');
	
	// show arrows when hovering over the previous/next links	
    $('.previous').hover(
    	function() { $('.hover_previous a').stop(true, true).fadeIn('fast'); },
    	function() { $('.hover_previous a').stop(true, true).fadeOut('fast'); }
    );   
    $('.next').hover(
    	function() { $('.hover_next a').stop(true, true).fadeIn('fast'); },
    	function() { $('.hover_next a').stop(true, true).fadeOut('fast'); }
    );

	// show arrows when hovering over the image    
 	$('.hover_previous').hover(
 		function() { $('.hover_previous a').hoverFlow('mouseenter', {'opacity': 'show'},'fast' ); },
    	function() { $('.hover_previous a').hoverFlow('mouseleave', {'opacity': 'hide'},'fast' ); }
 	)   
 	$('.hover_next').hover(
 		function() { $('.hover_next a').hoverFlow('mouseenter', {'opacity': 'show'},'fast' ); },
    	function() { $('.hover_next a').hoverFlow('mouseleave', {'opacity': 'hide'},'fast' ); }
 	)
    	 
    // change colour of image nav text when image is hovered over  
    $(".hover_previous").hover(
  		function () { $('.previous').addClass("txthover"); },
  		function () { $('.previous').removeClass("txthover"); }
	);
    $(".hover_next").hover(
  		function () { $('.next').addClass("txthover"); },
  		function () { $('.next').removeClass("txthover"); }
	);     	
	
});