// Set global variables
var slidewidth,
	timeoutHandler;

// Start functioning jQuery code when DOM is ready
$(function() {
	
	// Get the width of a slide
	slideWidth = $('#slidesimg li:first').width();
	
	// Go to the correct slide on click
	$('.sliderNavBtn').click(function() {
		
		// do nothing if already active
		if ($(this).parent().hasClass('ui-tabs-selected') || $('#slidesimg').queue() == 'inprogress') return false;
		
		// Cancel the slideshow
		if (typeof timeoutHandler != 'undefined') clearTimeout(timeoutHandler);
		
		// Get the correct fragment
		var fragment = $(this).attr('rel');
		
		// Set new active
		$('.ui-tabs-nav li').removeClass('ui-tabs-selected');
		$(this).parent().addClass('ui-tabs-selected');
		
		// Open the slide
		openSlide(fragment, function() {
			
			// Start the slideshow again
			startSlideshow(6000);
		});
		return false;
	});
	
	// Start the slideshow :D
	startSlideshow(5000);
});

/**
 * Function to start and role a slideshow
 * @param interval
 */
function startSlideshow(interval) {
	
	timeoutHandler = setTimeout(function() {
		
		// Open the next slide and start the slideshow again
		nextSlide();
		startSlideshow(5000);
		
	}, interval);
}

function nextSlide() {
	
	// Get the current active slide
	var active = $('#slidesinfo .infocontainer.active');
	var index = $('#slidesinfo .infocontainer').index(active);
	
	// Set the next slide's index
	var nextIndex = index + 1;
	
	// Fix if the end was reached
	if (nextIndex > 2) nextIndex = 0;
	
	// Get the correct slide
	var fragment = $('#slidesimg li:eq('+nextIndex+')').attr('data-id');
	
	// Set new active
	$('.ui-tabs-nav li').removeClass('ui-tabs-selected');
	$('.ui-tabs-nav li:eq('+nextIndex+')').addClass('ui-tabs-selected');
	
	// Open the slide
	openSlide(fragment);
}

/**
 * Function to open a slide and run the correct animations
 * @param fragment
 */
function openSlide(fragment, callback) {
	
	// Return false if queue is busy
	if ($('#slidesimg').queue() == 'inprogress') return;
	
	// Get the correct object and it's index
	var obj = $('#slidesimg li[data-id="'+fragment+'"]');
	var index = $('#slidesimg li').index(obj);
	
	// Calc the new offset and the current one
	var newOffset = 0 - (index * slideWidth);
	var currentOffset = parseInt($('#slidesimg').css('left').replace('px', ''));
	
	// Math the temp offset for the next infocontainer
	// If the user jumps to slides at once, the temp offset should be
	// doubled to keep the relations between the image and the info slide
	if ((currentOffset == (0 - (2*slideWidth)) && newOffset == 0) || (currentOffset >= 0 && (newOffset + slideWidth) != 0)) {
		
		var tempOffset = (currentOffset < newOffset) ?
			0 - (2*slideWidth):
			(2*slideWidth);
	} else {
		
		var tempOffset = (currentOffset < newOffset) ?
			0 - slideWidth:
			slideWidth;
	}
	
	// Set the correct info container at correct position
	$('.infocontainer[data-id="'+fragment+'"]')
		.css({left:tempOffset})
		.show();
	
	// Slide away the active info
	$('.infocontainer.active')
		.stop()
		.animate({left:(0-slideWidth)}, 800, 'easeInQuint');
	
	// Unactive the old infocontainer and set the new one active
	$('.infocontainer').removeClass('active');
	
	// Slide in the new info
	$('#slidesimg')
		.stop()
		.animate({left:newOffset}, 2000, 'easeInOutQuint');
	$('.infocontainer[data-id="'+fragment+'"]')
		.stop()
		.animate({left:0}, 2000, 'easeInOutQuint')
		.addClass('active');
	
	// Function a callback ?
	if (typeof callback != 'undefined') callback();
}