$(document).ready(function() {
	
	//page title fade in, pause, fade out
	$('#PageTitle').hide().fadeIn(1000).animate({opacity: 1.0}, 3000).fadeOut(1000);

	//frame border fade in
	$('#FadingBorder').hide().fadeIn(3000);

	//now fade the border whenever a link is clicked
	$('a').mousedown( function() {
		$('#FadingBorder').fadeOut(500);
	});



	//set the logo
	updateLightDarkLogo( $('#GallerySpool img').eq(0) );


	//if text box height is over the height of the image next to it, bump it up to a larger one - 
	//ie don't let the text box height fall within a certain range.
	//NOT on the homepage

	if( !$('#homepage').length ) {
		if( $('#Text').length ) {
			var textboxheight = $('#Text').height();
			var gvpheight = $('#GalleryViewport').height();
			
			if( textboxheight > gvpheight && textboxheight < gvpheight + 100 ) {
				$('#Text').height( gvpheight + 100 );

				//now move the gallery nav down a bit, if it exists
				//I don't think Jos wanted this
				/*
				var gn = $('#GalleryNav');
				if( gn.length ) {
					gnpaddingtop = parseInt(gn.css( 'padding-top' ));
					gnpaddingtop += 80;
					gn.css( 'padding-top', gnpaddingtop );
				}
				*/

			} //end if within certain range
		} //end if text exists
	} //end if not on the homepage



	//gallery controls
	//use length to determine that there is a gallery on this page
	if( $('#GalleryNav').length ) {

		updateFabricName();

		var s = $('#GallerySpool');

		//we want the images side by side, so count them and set the width of the spool
		numGalleryItems = $('#GallerySpool > img').length;
		viewPortWidth = $('#GalleryViewport').width();
		spoolWidth = numGalleryItems * viewPortWidth;
		
		s.width( spoolWidth );

		$('#GalleryNext').click(
			function() {
				//if we're as far as we can go, go back to the start.
				//otherwise, move the spool one viewport width left
				//when done, update the fabric name
				if( s.position().left == viewPortWidth - spoolWidth )
					s.animate({left: 0}, 800).queue( updateFabricName );
				else
					s.animate({left: s.position().left - viewPortWidth}, 400).queue( updateFabricName );
				
			}
		);

		$('#GalleryPrev').click(
			function() {
				if( s.position().left == 0 )
					s.animate({left: viewPortWidth - spoolWidth}, 800).queue( updateFabricName );
				else
					s.animate({left: s.position().left + viewPortWidth}, 400).queue( updateFabricName );

			}
		);

	}

});


//update the name that is displayed between the prev/next buttons
function updateFabricName() {
	var n = $('#FabricName');
	var s = $('#GallerySpool');

	//work out which image is being displayed.
	if( s.position().left == 0 )
		imageIndex = 0;
	else
		imageIndex = -s.position().left / $('#GalleryViewport').width();
	
	//set the name to the alt tag of the image
	currentImage = $('#GallerySpool img').eq(imageIndex);

	n.text( currentImage.attr('alt') );

	//change the brightness of the logo depending on what is set in the CMS
	updateLightDarkLogo( currentImage );

	//allows the queue to continue
	jQuery(this).dequeue();
} //end function


//change the "blinds by bayliss" logo depending on the class name
function updateLightDarkLogo( currentImage ) {

	logo = $('#BaylissLogo');

	//if class is Logo1 we want to see the light image
	if( currentImage.hasClass('Logo1') )
		logo.css( 'background-image', logo.css('background-image').replace('logo-dark.png', 'logo-light.png' ) );
	else if( currentImage.hasClass('Logo0') )
		logo.css( 'background-image', logo.css('background-image').replace('logo-light.png', 'logo-dark.png' ) );

}