var myFadeIn;   

		  
function FadeIn() {
  $active = $(this); 
  var $fade_active = $('#fade IMG.fade-active');

  if ($fade_active.length == 0 ) $fade_active = $('#fade IMG:last');
  
  var $next =  $fade_active.next().length ? $fade_active.next()
        : $('#fade IMG:first');


  $fade_active.addClass('last-active');

  $next.css({opacity: 0.0})
	  .addClass('fade-active')
	  .animate({opacity: 1.0}, 1000, function() {
		  $fade_active.removeClass('fade-active last-active');
	  });
}

$(function() {
   myFadeIn = setInterval("FadeIn()", 5500 );
});

$(window).load(function() {
	
	var play = 0;
		
	var divWidth = $(".slider-piece div").width();
	var divSum = $(".slider-piece div").size();
	var divReelWidth = divWidth * divSum;
	
	$(".slider-piece").css({'width' : divReelWidth});
	
	rotate = function(){	
		var triggerID = $active.attr("rel") -1; 
		var div_reelPosition = triggerID * divWidth; 

		$(".paging a").removeClass('active'); 
		$active.addClass('active'); 
		

		$(".slider-piece").animate({ 
			left: -div_reelPosition
		}, 400 );
		
	}; 	

	rotateSwitch = function(){		
		    play = setInterval(function(){ 
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { 
				$active = $('.paging a:first'); 
			}
			rotate(); 
		}, 5500); 
	};
	
	$(".slider-piece div").hover(function() {
		clearInterval(play); 
	}, function() {
		rotateSwitch(); 
		clearInterval(play); 
	});	
	
	$(".paging a").click(function() {	
		$active = $(this); 
		//alert($active);
		clearInterval(play);
		rotate(); 
		return false; 
	});	
	
	$(".previous").click(function() {
	    $active = $('.paging a.active').prev();
	    if ( $active.length === 0) { 
				$active = $('.paging a:last'); 
				
			}
	    clearInterval(play);
		rotate(); 
		return false; 
	});
	
	$(".next").click(function() {
	    $active = $('.paging a.active').next();
	    if ($active.length === 0) { 
				$active = $('.paging a:first'); 
				
				
			}
	    clearInterval(play);
		rotate(); 
		return false; 
	});
	
});