$(function(){
	var gallery = $('#thumbnails').galleriffic({
	        delay:                     5000, // in milliseconds
	        numThumbs:                 20, // The number of thumbnails to show page
	        preloadAhead:              40, // Set to -1 to preload all images
	        enableTopPager:            false,
	        enableBottomPager:         true,
	        maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
	        imageContainerSel:         '#slideshow', // The CSS selector for the element within which the main slideshow image should be rendered
	        controlsContainerSel:      '#controls', // The CSS selector for the element within which the slideshow controls should be rendered
	        captionContainerSel:       '#caption', // The CSS selector for the element within which the captions should be rendered
	        loadingContainerSel:       '#loading', // The CSS selector for the element within which should be shown when an image is loading
	        renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
	        renderNavControls:         true, // Specifies whether the slideshow's Next and Previous links should be rendered
	        playLinkText:              'Play',
	        pauseLinkText:             'Pause',
	        prevLinkText:              'Previous',
	        nextLinkText:              'Next',
	        nextPageLinkText:          'Next ›',
	        prevPageLinkText:          '‹ Prev',
	        enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
	        enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
	        autoStart:                 true, // Specifies whether the slideshow should be playing or paused when the page first loads
	        syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
	        defaultTransitionDuration: 500, // If using the default transitions, specifies the duration of the transitions
	        onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
	        onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
	        onTransitionIn:            function(slide){
				//alert(slide);
				var heightImg = $("#slideshow img").height();
				if(heightImg >= 1000){
					var animateTop = -400;
				}else{
					var animateTop = -200;
				};
				var widthImg = $("#slideshow img").width();
				if(widthImg < 890){
					var animateLeft = 100;
				}else{
					var animateLeft = 0;
				};
				$("#slideshow span").animate({opacity: 100, top: animateTop, left: animateLeft}, 3000, null);
			}, // accepts a delegate like such: function(slide, caption, isSync) { ... }
	        onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
	        onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
	        onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
	        onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
	    });
	// $("#thumbnails li a").click(function(){
	// 		$(".current").removeClass("current");
	// 		control = true;
	// 		clearInterval(timeout);
	// 		clickChangeImage($(this));
	// 		$(this).parent().addClass('current');
	// 		return false;
	// 	});
	
	//Carroussel
	$("#mask").jCarouselLite({
		    btnNext: ".right",
		    btnPrev: ".left",
		    visible: 5,
		    scroll: 1,
		    speed: 400,
		    circular: false
	});
		
	// timer();
});

var timeout;
var control;

function timer(){
	if (control != true) {
		clearInterval(timeout);
		//fadeOuttimeout = setInterval("$('#big img').fadeOut(200)", 1800);
		timeout = setInterval("changeImage();", 2000);
	};
}

function clickChangeImage(object){
	object.parent().addClass("current");
	$("#big img").not("#loading").attr("src", object.attr("href")).fadeIn("slow");
}

function changeImage(object){
	current_li = $("#thumbnails li.current");
	if($("#thumbnails li:last").attr("class") == 'current') {
		next_li = $("#thumbnails li:first");
	}else{
		next_li = current_li.next();
	}
	current_li.removeClass("current");
	next_li.addClass("current");
	$("#big img").not("#loading").attr("src", next_li.find("a:first").attr("href")).fadeIn("slow");
}