$(document).ready(function () {
	
	// function vertical_centre(container) {
	//     $(container).each(function (i) {
	//         // (div height - image height) / 2.
	//         $(this).find('img:eq(0)').css("margin-top", Math.floor(
	//             ($(this).height() - $(this).find('img:eq(0)').attr("height")) / 2
	//         ))
	//     });
	// }
	// vertical_centre('.square');
	
	// $('.panel').append('<div class="nav"><a href="#" class="previous">&laquo; Previous</a></div><div class="nav right"><a href="#" class="next">Next &raquo;</a></div>');
	// if ( $('.panel h2').length > 0 ) {
		$('.panel h2').after('<div class="nav"><a href="#" class="previous">&laquo; Previous</a></div><div class="nav right"><a href="#" class="next">Next &raquo;</a></div>');
	// } else {
	// 	$('.panel').prepend('<div class="nav"><a href="#" class="previous">&laquo; Previous</a></div><div class="nav right"><a href="#" class="next">Next &raquo;</a></div>');
	// }
	
	// $('.square-container').before('<div class="nav"><a href="#" class="previous">&laquo; Previous</a></div><div class="nav right"><a href="#" class="next">Next &raquo;</a></div>');
	
	
	// Product image scrollers.
	
	jQuery(function( $ ){
		$('#gallery1 .square-container').serialScroll({
			items:'.square',
			prev:'#gallery1 a.previous',
			next:'#gallery1 a.next',
			offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
			start:0, //as we are centering it, start at the 2nd
			duration:1500,
			step:2,
			force:true,
			stop:true,
			lock:false,
			cycle:true, //don't pull back once you reach the end
			constant:true,
			exclude:1,
			jump: false //click on the images to scroll to them
		});
	});
	
	jQuery(function( $ ){
		$('#gallery2 .square-container').serialScroll({
			items:'.square',
			prev:'#gallery2 a.previous',
			next:'#gallery2 a.next',
			offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
			start:0, //as we are centering it, start at the 2nd
			duration:1000,
			step:2,
			force:true,
			stop:true,
			lock:false,
			cycle:true, //don't pull back once you reach the end
			constant:true,
			exclude:1,
			jump: false //click on the images to scroll to them
		});
	});
	
	jQuery(function( $ ){
		$('#gallery3 .square-container').serialScroll({
			items:'.square',
			prev:'#gallery3 a.previous',
			next:'#gallery3 a.next',
			offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
			start:0, //as we are centering it, start at the 2nd
			duration:1000,
			step:2,
			force:true,
			stop:true,
			lock:false,
			cycle:true, //don't pull back once you reach the end
			constant:true,
			exclude:1,
			jump: false //click on the images to scroll to them
		});
	});
	
	jQuery(function( $ ){
		$('#gallery4 .square-container').serialScroll({
			items:'.square',
			prev:'#gallery4 a.previous',
			next:'#gallery4 a.next',
			offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
			start:0, //as we are centering it, start at the 2nd
			duration:1000,
			step:2,
			force:true,
			stop:true,
			lock:false,
			cycle:true, //don't pull back once you reach the end
			constant:true,
			exclude:1,
			jump: false //click on the images to scroll to them
		});
	});
	
	jQuery(function( $ ){
		$('#gallery5 .square-container').serialScroll({
			items:'.square',
			prev:'#gallery5 a.previous',
			next:'#gallery5 a.next',
			offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
			start:0, //as we are centering it, start at the 2nd
			duration:1000,
			step:2,
			force:true,
			stop:true,
			lock:false,
			cycle:true, //don't pull back once you reach the end
			constant:true,
			exclude:1,
			jump: false //click on the images to scroll to them
		});
	});
	
	
	
	
		$('#slider .navigation').find('a').click(selectNav);
		
		function selectNav() {
			$(this)
				.parents('ul:first')
					.find('a')
						.removeClass('selected')
					.end()
				.end()
				.addClass('selected');
		}
		
		function trigger(data) {
			var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
			selectNav.call(el);
		}

		// Run on page load.
		if (window.location.hash) {
			trigger({ id : window.location.hash.substr(1)});
		} else {
			$('#slider .navigation a:first').click();
		}


		// when the DOM is ready...
		$(document).ready(function () {

			var $panels = $('#slider .scrollContainer > div');
			var $container = $('#slider .scrollContainer');

			var horizontal = true;

			// float the panels left if we're going horizontal
			if (horizontal) {
				$panels.css({
					'float' : 'left',
					'position' : 'relative' // IE fix to ensure overflow is hidden
				});
  
				// calculate a new width for the container (so it holds all panels)
				$container.css('width', $panels[0].offsetWidth * $panels.length);
			}

			var $scroll = $('#slider .scroll').css('overflow', 'hidden');
			
			// $scroll
        		// .before('<img class="scrollButtons left" src="scroll_left.png" />')
        		// .after('<img class="scrollButtons right" src="scroll_right.png" />');
        		// .after('<img class="scrollButtons left" src="scroll_left.png" /><img class="scrollButtons right" src="scroll_right.png" />');
        		// .after('<span class="scrollButtons left">previous</span><span class="scrollButtons right">next</span>');

			$('#slider .navigation').find('a').click(selectNav);

			// offset is used to move to *exactly* the right place, accounts for padding.
			var offset = parseInt((horizontal ? 
				$container.css('paddingTop') : 
				$container.css('paddingLeft')) 
				|| 0) * -1;


			var scrollOptions = {
  				target: $scroll, // the element that has the overflow
  
				// can be a selector which will be relative to the target
				items: $panels,
  
				navigation: '.navigation a',
				
				// selectors are NOT relative to document, i.e. make sure they're unique
        		// prev: 'img.left', 
        		// next: 'img.right',
        		prev: 'span.left', 
        		next: 'span.right',
  
				// allow the scroll effect to run both directions
				axis: 'xy',
  
				onAfter: trigger, // our final callback
  
				offset: offset,
  
				// duration of the sliding effect
				duration: 1000,
  
				// easing - can be used with the easing plugin: 
				// http://gsgd.co.uk/sandbox/jquery/easing/
				easing: 'swing'
			};

			// apply serialScroll to the slider - we chose this plugin because it 
			// supports// the indexed next and previous scroll along with hooking 
			// in to our navigation.
			$('#slider').serialScroll(scrollOptions);

			// now apply localScroll to hook any other arbitrary links to trigger 
			// the effect
			$.localScroll(scrollOptions);

			// finally, if the URL has a hash, move the slider in to position, 
			// setting the duration to 1 because I don't want it to scroll in the
			// very first page load.  We don't always need this, but it ensures
			// the positioning is absolutely spot on when the pages loads.
			scrollOptions.duration = 1;
			$.localScroll.hash(scrollOptions);

		});
	
	// $('#gallerybutton1').click( function () { gallery1('#gallery1'); });
	// $('#gallerybutton2').click( function () { gallery2('#gallery2'); });
	// $('#gallerybutton3').click( function () { gallery3('#gallery3'); });
	// $('#gallerybutton4').click( function () { gallery4('#gallery4'); });
	// $('#gallerybutton5').click( function () { gallery5('#gallery5'); });
	
});