//
// should only be accessed when the DOM is ready. Otherwise an error will be thrown!
$(function() {
	//
	// Wrapper
	var wrapper = $('.slideshow-wrapper');
	
	//
	// Images
	var images = wrapper.find('.slideshow-image');
	if (images.length > 1) {
		images.css('position', 'absolute');
		images.eq(0).css('left', '0%');
		images.not(images.eq(0)).hide();
	}
	
	//
	// Next button
	var btnNext = $('.slideShow-btnNext');
	btnNext.click(btnNext_Click);
	
	//
	// Previous button
	var btnPrev = $('.slideShow-btnPrev');
	btnPrev.click(btnPrev_Click);
	
	//
	// Thumbnails
	var thumbnailsWrapper = $('.image-thumbnails');
	var thumbnails = $('.image-thumbnail', thumbnailsWrapper);
	
	//
	// private variables
	var currentImageIndex = 0,
		isAnimating = false,
		transitionPropName = false, //$.support.cssProperty('transition', true),
		transitions = false, //transitionPropName ? true : false,
		transitionPropValue = 'left 1s linear';
		
	//
	// setup thumbnails
	if (thumbnailsWrapper.length > 0) {
		var width = 102 * thumbnails.length + 7 * (thumbnails.length - 1);
		thumbnailsWrapper.css({
			'width': width,
			'left': '50%',
			'margin-left': -(width / 2),
			'zIndex': 15
		});
		
		thumbnails.eq(thumbnails.length - 1).addClass('image-thumbnail-last');
		thumbnails.append('<div class="thumbnail-selected" style="display: none;"></div>');
		for (var i = 0; i < thumbnails.length; i++) {
			thumbnails[i].marker = thumbnails.eq(i).find('.thumbnail-selected');
			thumbnails[i].loader = thumbnails.eq(i).find('.slideshow_loader');
			thumbnails.eq(i).click((function() {
				var index = i;
				return function() {
					gotoImage(index);
				}
			})())
		}
		
		thumbnails[0].marker.show();
	} else {
		thumbnails = null;
	}
	
	function gotoImage(nextImageIndex) {
		if (isAnimating)
			return;
		
		if (nextImageIndex == currentImageIndex)
			return;

		var currentImage = images.eq(currentImageIndex),
			nextImage = images.eq(nextImageIndex);
		
		nextImage.hide().css({
			zIndex: 3
		});
		
		isAnimating = true;
		thumbnails[currentImageIndex].marker.fadeOut(1000);
		thumbnails[nextImageIndex].marker.fadeIn(1000);
		
		nextImage.fadeIn(1000, function() {
			isAnimating = false;
			
			currentImage.hide();
			nextImage.css('zIndex', 1);
		});
	
		currentImageIndex = nextImageIndex;
	}
	
	function btnNext_Click(e) {
	
		if (isAnimating)
			return;
			
		var nextImageIndex = currentImageIndex + 1,
			currentImage = images.eq(currentImageIndex);

		if (nextImageIndex >= images.length) {
			nextImageIndex = 0;
		}
		
		var nextImage = images.eq(nextImageIndex);
		if (transitions) nextImage.css(transitionPropName, '');
		nextImage.hide().css({
			zIndex: 6001
		});
		
		//
		// use transitions if able otherwise fallback.
		if (transitions) {
			nextImage.css(transitionPropName, transitionPropValue);
			currentImage.css(transitionPropName, transitionPropValue);
			
			isAnimating = true;
			nextImage.css('left', '0%');
			currentImage.css('left', '-100%');
			
			setTimeout(function() { isAnimating = false; }, 1000);
		} else {
			isAnimating = true;
			
			if (thumbnails) {
				//console.log(next_nextImageIndex);
				thumbnails[currentImageIndex].marker.fadeOut(1000);
				thumbnails[nextImageIndex].marker.fadeIn(1000);
			}
			
			nextImage.fadeIn(1000, function() {
				isAnimating = false;
				
				currentImage.hide();
				nextImage.css('zIndex', 1);
			});
		}
		
		currentImageIndex = nextImageIndex;

		if(thumbnails) {
			thumbnails[nextImageIndex].loader.css({ 'left' : 0 });
			thumbnails[nextImageIndex].loader.animate({ 'left' : 88 }, 5500);
		}
		
		if (typeof e === 'number' || typeof e === 'undefined') {
			setTimeout(btnNext_Click, 8000);
		}
	}
	
	function btnPrev_Click(e) {
		if (isAnimating)
			return;
			
		var nextImageIndex = currentImageIndex - 1,
			currentImage = images.eq(currentImageIndex);
			
		if (nextImageIndex < 0) {
			nextImageIndex = images.length - 1;
		}
		
		var nextImage = images.eq(nextImageIndex);
		nextImage.hide().css({
			zIndex: 3
		});
		
		isAnimating = true;
		
		if (thumbnails) {
			thumbnails[currentImageIndex].marker.fadeOut(1000);
			thumbnails[nextImageIndex].marker.fadeIn(1000);
		}
		
		nextImage.fadeIn(1000, function() {
			isAnimating = false;
			
			currentImage.hide();
			nextImage.css('zIndex', 1);
		});
		
		currentImageIndex = nextImageIndex;
	}
	
	setTimeout(btnNext_Click, 8000);
	
	if(thumbnails) {
		thumbnails[0].loader.css('left', 0);
		thumbnails[currentImageIndex].loader.animate({ 'left' : 88 }, 5500);
	}
});