$(document).ready(function() {
		$activePage = $(".paging a:first").css("z-index", 1).addClass("active");
		$(".image_reel a:first").fadeIn(500);
		
		switchImage = function() {
			var oldIdImg = $oldPage.attr("rel");
			var activeIdImg = $activePage.attr("rel");
			$oldImg = $(".image_reel a[rel="+(oldIdImg)+"]");
			$oldImg.css("z-index", 0)
			$activeImg = $(".image_reel a[rel="+activeIdImg+"]");
			$activeImg.css("z-index", 1);
			$(".paging a").removeClass("active");
			$activePage.addClass("active");
			$activeImg.fadeIn(500, function() {$oldImg.fadeOut(5);});
		};
		
		changeActive = function() {
			play = setInterval(function() {
				$oldPage = $activePage;
				
				$activePage = $activePage.next();
				if($activePage.length===0) {
					$activePage = $(".paging a:first");
				}
				$activePage.addClass("active");
				switchImage();
			}, 2000);
		};
		
		changeActive();
		
		$(".paging a").click(function() {
			$oldPage = $activePage;
			$activePage = $(this);
			clearInterval(play);
			switchImage();
			changeActive();
		});
		
		$(".image_reel a").hover(function() {
			clearInterval(play);
		}, function() {
			changeActive();
		});
	});