function showProduct(nextIndex) {
	var ch = $('ul.thumbs li');
	
	//$('#product').hide();
	$('#product').html($(ch[nextIndex]).find('.product').html());	
	$('#product').fadeIn(900);
}

(function($) {
	  var cache = [];
	  // Arguments are image paths relative to the current page.
	  $.preLoadImages = function() {
	    var args_len = arguments.length;
	    for (var i = args_len; i--;) {
	      var cacheImage = document.createElement('img');
	      cacheImage.src = arguments[i];
	      cache.push(cacheImage);
	    }
	  }
	})(jQuery)

jQuery(document).ready(function($) {
	//first preload images
	jQuery.preLoadImages("/images/slideshow/loopautonl_prod.png");
	jQuery.preLoadImages("/images/slideshow/driewielersnl_prod.png");
	
	// We only want these styles applied when javascript is enabled
	$('div.content').css('display', 'block');

	// Initially set opacity on thumbs and add
	// additional styling for hover effect on thumbs
	var onMouseOutOpacity = 0.67;
	$('#thumbs ul.thumbs li').opacityrollover({ //, div.navigation a.pageLink
		mouseOutOpacity:   onMouseOutOpacity,
		mouseOverOpacity:  1.0,
		fadeSpeed:         'fast',
		exemptionSelector: '.selected'
	});
	
	// Initialize Advanced Galleriffic Gallery
	var gallery = $('#thumbs').galleriffic({
		delay:                     4000,
		numThumbs:                 10,
		preloadAhead:              10,
		enableTopPager:            false,
		enableBottomPager:         false,
		imageContainerSel:         '#slideshow',
		controlsContainerSel:      '#controls',
		captionContainerSel:       '#caption',
		loadingContainerSel:       '#loading',
		renderSSControls:          false,
		renderNavControls:         true,
		playLinkText:              'Play Slideshow',
		pauseLinkText:             'Pause Slideshow',
		prevLinkText:              '‹ Previous Photo',
		nextLinkText:              'Next Photo ›',
		nextPageLinkText:          'Next ›',
		prevPageLinkText:          '‹ Prev',
		enableHistory:             false,
		autoStart:                 true,
		syncTransitions:           true,
		defaultTransitionDuration: 900,
		onSlideChange:             function(prevIndex, nextIndex) {
			// 'this' refers to the gallery, which is an extension of $('#thumbs')
			this.find('ul.thumbs').children()
				.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
				.eq(nextIndex).fadeTo('fast', 1.0);

			// Update the photo index display
			this.$captionContainer.find('div.photo-index')
				.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);

			
			setTimeout('showProduct('+nextIndex+')',300);
			
		},
		onPageTransitionOut:       function(callback) {
			this.fadeTo('fast', 0.0, callback);
		},
		onPageTransitionIn:        function() {
			var prevPageLink = this.find('a.prev').css('visibility', 'visible');
			var nextPageLink = this.find('a.next').css('visibility', 'visible');
			
			// Show appropriate next / prev page links
			
			this.fadeTo('fast', 1.0);
		}
	});

	/**************** Event handlers for custom next / prev page links **********************/

	gallery.find('a.prev').click(function(e) {
		/*gallery.previousPage();
		e.preventDefault();*/
	});

	gallery.find('a.next').click(function(e) {
		/*gallery.nextPage();
		e.preventDefault();*/
	});
	
	gallery.find('a.prevpic').click(function(e) {
		var dontPause = true;
		var bypassHistory = true;
		gallery.gotoIndex(gallery.getPrevIndex(gallery.currentImage.index), dontPause, bypassHistory);
		e.preventDefault();
	});

	gallery.find('a.nextpic').click(function(e) {
		/*gallery.nextPage();
		e.preventDefault();*/
		var dontPause = true;
		var bypassHistory = true;
		gallery.gotoIndex(gallery.getNextIndex(gallery.currentImage.index), dontPause, bypassHistory);
		// show the previous arrow
		//$('#thumbs a.prev').css('visibility','visible'); 
		e.preventDefault();
	});

	/****************************************************************************************/
});