$(document).ready(function() {
	// some settings
	imageWidth = 480;
	textWidth = 335;
	
	// index of displayed content
	var display = 0;
	var inProgress = false;
	var images = $(".image-block-image img.slide-image");
	var text = $(".image-block-text DIV");

	// initial css state
	images.each(function(index) {
		$(this).css('position', 'absolute')
			   .css('z-index', 100 - index)
			   .css('top', 0)
			   .css('left', imageWidth*index);
	});
	
	text.each(function(index) {
		$(this).css('position', 'absolute')
			   .css('z-index', 100 - index)
			   .css('top', 0)
			   .css('left', textWidth*index);
	});
	
	$(".image-block-image .arrow-left").click(function() {
		scrollLeft();
	});

	$(".image-block-image .arrow-right").click(function() {
		scrollRight();
	});
	
	function scrollRight() {
		if(inProgress) {
			return;
		}
		
		inProgress = true;
		
		var nextToShow = (display + 1) % images.size();
		
		images.eq(nextToShow).css('left', imageWidth+'px');
		
		images.animate( {left: '-='+imageWidth}, 500, 'swing');
		
		text.eq(nextToShow).css('left', textWidth+'px');
		text.animate( {left: '-='+textWidth}, 500, 'swing', function() {
			inProgress = false;
			display = nextToShow;
		});
	}

	function scrollLeft() {
		if(inProgress) {
			return;
		}
		
		inProgress = true;
		
		var nextToShow = display > 0 ? display - 1 : images.size() - 1;
		
		images.eq(nextToShow).css('left', '-'+imageWidth+'px');
		
		images.animate( {left: '+='+imageWidth}, 500, 'swing');
		
		text.eq(nextToShow).css('left', '-'+textWidth+'px');
		text.animate( {left: '+='+textWidth}, 500, 'swing', function() {
			inProgress = false;
			display = nextToShow;
		});
	}
});