$(document).ready(function () {
		
	function ActivateDot(dot) {
		dot.src = "pics/slider/red_dot.png";
	}
	
	function ResetTimer(slider) {
		clearInterval(slider.data("interval"));
		slider.data("interval", setInterval(function() {
			var count = slider.data("count");
			var current = slider.data("current");

			if (current + 1 >= count) {
				slider.data("current", 0);
			} else {
				slider.data("current", current + 1);
			}

			ImageSliderUpdate(slider.children("div.Nav").children("img.Forward").first());

		}, 8000));
	}

	// Init all image sliders
	$("div.ImageSlider").each(function(index) {
		$(this).data("current", 0);
		$(this).data("count", $(this).children("div.Viewport").children("ul").children("li").length);

		ResetTimer($(this));

		$(this).children("div.Viewport").children("ul").children().hide();
		$(this).children("div.Viewport").children("ul").children().first().fadeIn(500);
		$(this).children("div.Nav").children("img.Dot").first().attr('src', "pics/slider/red_dot.png");
	});

	$("div.ImageSlider img.Forward").click(function() {
		var count = $(this).parent().parent().data("count");
		var current = $(this).parent().parent().data("current");

		ResetTimer($(this).parent().parent());

		if (current + 1 >= count) {
			$(this).parent().parent().data("current", 0);
		} else {
			$(this).parent().parent().data("current", current + 1);
		}

		ImageSliderUpdate($(this));
	});

	$("div.ImageSlider img.Backward").click(function() {
		var count = $(this).parent().parent().data("count");
		var current = $(this).parent().parent().data("current");

		ResetTimer($(this).parent().parent());

		if (current == 0) {
			$(this).parent().parent().data("current", count - 1);
		} else {
			$(this).parent().parent().data("current", current - 1);
		}

		ImageSliderUpdate($(this));
	});


	function ImageSliderUpdate(slider) {
		current = slider.parent().parent().data("current");

		slider.parent().parent().children("div.Viewport").children("ul").children("li").fadeOut(500);
		slider.parent().parent().children("div.Shadow").fadeOut(500, function() {

			slider.parent().parent().children("div.Viewport").children("ul").children("li").each(function(index) {
				if (current == index) {
					$(this).parent().parent().parent().children("div.Shadow").fadeIn(500);
					$(this).fadeIn(500);
				}
			});
		});

		// Update dots
		slider.parent().children("img.Dot").each(function(index) {
			if (current == index) {
				$(this).attr('src', "pics/slider/red_dot.png");
			} else {
				$(this).attr('src', "pics/slider/gray_dot.png");
			}
		});
	};
});