Cufon.replace("#nav a", {textShadow: '1px 3px #280000'});

var itemWidth;
var itemLeft = 0;
var width;
$(function() {

	$('#scroll').jScrollPane({showArrows:true,scrollbarWidth:27,dragMinHeight:14,dragMaxHeight:14});

	$("#visual").each(function() {
		
		itemWidth = $(this).width() + 10;
		width = $("li", this).size() * itemWidth;
		addWidth = width;
		$("ul", this).width(width);
	
	});
	
	$("#visualContainer > .left").click(function() {
		
		if(itemLeft < 0) {
			itemLeft += itemWidth;
			$(this).parent().find("#visual > ul").animate({left: itemLeft + "px"}, 1000);
		}
		else {
			width += addWidth;
			$("#visual ul").width(width);
			
			text = $("#visual ul").html();
			$("#visual ul").append(text);
			
			itemLeft = -addWidth;
			$(this).parent().find("#visual > ul").animate({left: itemLeft + "px"}, 0);
			
			itemLeft = -addWidth + itemWidth;
			$(this).parent().find("#visual > ul").animate({left: itemLeft + "px"}, 1000);
		}
												  
	});
	
	$("#visualContainer > .right").click(function() {
		
		if(itemLeft > -width + itemWidth) {
			itemLeft -= itemWidth;
			$(this).parent().find("#visual > ul").animate({left: itemLeft + "px"}, 1000);
		}
		else {
			width += addWidth;
			$("#visual ul").width(width);
			
			text = $("#visual ul").html();
			$("#visual ul").append(text);
			
			itemLeft -= itemWidth;
			$(this).parent().find("#visual > ul").animate({left: itemLeft + "px"}, 1000);
		}
		
	});
	
	$("#visualContainer > span").hover(function() {
	
		$(this).addClass("hover");
	
	}, function() {
	
		$(this).removeClass("hover");
	
	});

});