var changeTimeMS = 5000;
var fadeTimeMS   = 1500;

var leftImages;
var leftIndex = 0;

var rightImages;
var rightIndex = 0;

$(document).ready(function(){
	
	leftImages      = $('#left-dock > .image');
	rightImages     = $('#right-dock > .image');
	
	var leftDock    = $("#left-dock");
	var rightDock   = $("#right-dock");
	
	// Set all positions to respective dock
	leftImages.css({
		position : "absolute",
		top      : leftDock.css("top"),
		left     : leftDock.css("left")
	});
	rightImages.css({
		position : "absolute",
		top      : rightDock.css("top"),
		left     : rightDock.css("left")
	});

	$.timer(changeTimeMS, timerCallback);
});

var timerCallback = function(timer) {
	
	if (leftImages.length > 1) {
		nextLeftIndex = (leftIndex + 1) % leftImages.length;
		
		leftImages.eq(leftIndex).fadeOut(fadeTimeMS).css('z-index', 100);
		leftImages.eq(nextLeftIndex).fadeIn(fadeTimeMS).css('z-index', 50);		
		
		leftIndex = nextLeftIndex;
	}
	
	if (rightImages.length > 1) {
		nextRightIndex = (rightIndex + 1) % rightImages.length;
		
		rightImages.eq(rightIndex).fadeOut(fadeTimeMS).css('z-index', 100);
		rightImages.eq(nextRightIndex).fadeIn(fadeTimeMS).css('z-index', 50);		
		
		rightIndex = nextRightIndex;
	}
}