$(document).ready(function() {

	$("#list").hide();
	$("span[class*='numbering']").hide();
	$(".prev").hide();
	$(".next").hide();

	$(".whatson-loading").fadeOut(function() {

		$("#list").removeClass("hidden");
		$("#list").fadeIn("slow");

		$(".slider").jCarouselLite({
			btnNext: ".next",
			btnPrev: ".prev",
			visible: 1,
			auto: 9000,
			speed: 500,
			btnGo: ['.number-panel .numbering1', '.number-panel .numbering2', '.number-panel .numbering3', '.number-panel .numbering4', '.number-panel .numbering5', '.number-panel .numbering6'],
			beforeStart: function(a) {
				$(a).parent().fadeTo(900, 0);
				var bg = $(a).find('img').attr('src');
				$('.anyClass').css({ backgroundImage: "url(" + bg + ")" }, 1000);
			},
			afterEnd: function(a) {
				$(a).parent().fadeTo(900, 1);
				setNumberingAuto($(a).find('img').attr('id').replace('Image', ''));
			}

		}).fadeIn("slow", function() {
			
		});

		$("span[class*='numbering']").show();
		$(".prev").show();
		$(".next").show();
	});

	$('.previous-image').css('opacity', 0.5);
	$('.previous-image').each(function() {
		$(this).hover(function() {
			$(this).stop().animate({ opacity: 0.7 }, 500);
		},
		function() {
			$(this).stop().animate({ opacity: 0.5 }, 500);
		});
	});

	$('.next-image').css('opacity', 0.5);
	$('.next-image').each(function() {
		$(this).hover(function() {
			$(this).stop().animate({ opacity: 0.7 }, 500);
		},
		function() {
			$(this).stop().animate({ opacity: 0.5 }, 500);
		});
	});

	$("span[class*='numbering']").css('opacity', 0.7);
	$(".numbering1").css('opacity', 0.9);
	$("span[class*='numbering']").each(function() {
		$(this).hover(function() {
			$(this).stop().animate({ opacity: 0.9 }, 500);
		},
		function() {
			if (!$(this).is('.selected')) {
				$(this).stop().animate({ opacity: 0.7 }, 500);
			}
		});
	});

	$("span[class*='numbering']").click(function() {
		$("span[class*='numbering']").css('opacity', 0.7);
		$("span[class*='numbering']").removeClass('selected');
		$(this).addClass('selected');
	});

	function setNumberingAuto(index) {
		$("span[class*='numbering']").css('opacity', 0.7);
		$("span[class*='numbering']").removeClass('selected');
		$(".numbering" + index).css('opacity', 0.9);
		$(".numbering" + index).addClass('selected');
	}
});