var clowns = new Array();
var monkeys = new Array();

current = 1;

$(".story-point").click(function() {
	
	textId = this.id.replace('point','of-id');
	curId = document.getElementById('current-story').value;
	
	dotId = this.id.replace('story-point-','');
	dotId2 = curId.replace('story-of-id-','');
	
	$('#story-point-' + dotId2).removeClass('hover');
	$('#story-point-' + dotId).addClass('hover');
	
	$('#' + curId).animate({opacity:0.0,left:'-600'}, 500);
	$('#' + textId).show();
	$('#' + textId).animate({opacity:0.0,left:'600'}, 0);
	$('#' + textId).animate({opacity:1.0,left:'0'}, 500);

	current = textId.replace('story-of-id-','');
	current = parseInt(current)-1;
	
	document.getElementById('current-story').value = textId;

	$('#story-illustration-img').animate({opacity:0.0}, 300, function() {
		document.getElementById('story-illustration-img').src = monkeys[current];
		$('#story-illustration-img').animate({opacity:1.0}, 300);
	});
 
	
	return false;
});

$('#arrow-next').click(function() {
	if ( current > ( clowns.length - 1 ) )
	{
		current = 0;
	}
	
	textId = clowns[current];
	curId = document.getElementById('current-story').value;
	
	dotId = textId.replace('story-of-id-','');
	dotId2 = curId.replace('story-of-id-','');
	
	$('#story-point-' + dotId2).removeClass('hover');
	$('#story-point-' + dotId).addClass('hover');
	
	$('#' + curId).animate({opacity:0.0,left:'-600'}, 500);
	$('#' + textId).show();
	$('#' + textId).animate({opacity:0.0,left:'600'}, 0);
	$('#' + textId).animate({opacity:1.0,left:'0'}, 500);

	$('#story-illustration-img').attr("src", monkeys[current]);//.animate({opacity:1.0}, 300);

	document.getElementById('current-story').value = textId;
	current++;
	return false;
});

$('#arrow-back').click(function() {
	if ((current - 2) < 0) {
		current = clowns.length + 1;
	}

	textId = clowns[current-2];
	curId = document.getElementById('current-story').value;
	
	dotId = textId.replace('story-of-id-','');
	dotId2 = curId.replace('story-of-id-','');

	$('#story-point-' + dotId2).removeClass('hover');
	$('#story-point-' + dotId).addClass('hover');
	
	$('#' + curId).animate({opacity:0.0,left:'600'}, 500);
	$('#' + textId).show();
	$('#' + textId).animate({opacity:0.0,left:'-600'}, 0);
	$('#' + textId).animate({opacity:1.0,left:'0'}, 500);

	$('#story-illustration-img').attr("src", monkeys[current]);

	document.getElementById('current-story').value = textId;

	current--;

	return false;
});