var animationTimer = 0; 
var which = 1; // which image to show

var logoAnimationTimer = 0;
var whichlogo = 1;

$(document).ready(function(){
  function scroller(select, controller){
    var $scroller = $(select);
	var scrollAmount = $scroller.width() - $scroller.parent().width();
    var currentPos = Math.abs(parseInt($scroller.css('left')));
    var remainingScroll = scrollAmount - currentPos;
    var nextScroll = -Math.floor($scroller.parent().width() * which); // multiply by 0,1 or 2	  
    if ((which > -1) && (which < $(controller).length )) {
    	$scroller.stop(true,true).animate({'left': nextScroll}, 2000 );
		which+=1; 
		}
	else {
	    clearInterval (animationTimer);
	    $scroller.fadeOut(500).stop(true,true).animate({'left':'0'}, 1000).fadeIn();
		which = 0; 
	}
  } // Scroller
  
  //  Number (and hence width) of photos_inner determined by number of Services offered
  $('#photos_inner').css('width', $(".MainAnimate li").length * parseInt($('#photos').css('width')) ); 
  // When page loads, run through animations but also allow user control via Hover
  if ((which > -1) && (which < $(".MainAnimate li").length ) )
    animationTimer = setInterval(function () {scroller ('#photos_inner', ".MainAnimate li")}, 4000);
  
  // Kill Animation on hover
  $(".MainAnimate li a").hover (function (e) { 
    clearInterval (animationTimer); // a switch to stop auto animation 
    // needs parent() if anchor used and for list $(this).parent().index()
	which = $(this).parent().index();
    scroller ('#photos_inner', ".MainAnimate li");
	e.preventDefault();
	}); 
  
  
  function logoscroller(select, controller){
    // Should be shared with above but issue with Scope of Which - currently global but how best to store?
	// Also has a random number of logos so cannot easily determine exact amounts to scroll
    var $scroller = $(select);
	var scrollAmount = $scroller.width() - $scroller.parent().width();
    var currentPos = Math.abs(parseInt($scroller.css('left')));
    var remainingScroll = scrollAmount - currentPos;
    var nextScroll = -Math.floor($scroller.parent().width() * whichlogo); // multiply by 0,1 or 2	  
    // But if there isn’t a FULL scroll left, do only the remaining amount.
    if(remainingScroll < nextScroll) {
      nextScroll = remainingScroll;
    }
 
    if ((whichlogo > -1) && (whichlogo < controller )) {
    	$scroller.stop(true,true).animate({'left': nextScroll}, 500 );
		}
	else {
	    clearInterval (logoAnimationTimer);
	    $scroller.stop(true,true).animate({'left':'0'}, 1000);
		whichlogo = 0; // go back to the start
	}
  } // Scroller


  //  Number (and hence width) of photos_inner determined by number of Services offered
  var logoCount = $("#logos_inner img").length;
  var logoWidth = parseInt($("#logos_inner img:first").css('width')); 
  var logoTotalPixels = logoCount * logoWidth;
  var visibleLogos = parseInt($('#logos').css('width')) / logoWidth; 
  // Ensure the CSS is correct width for all images. 
  $('#logos_inner').css('width', logoTotalPixels ); 
    var maxScroll = Math.floor( logoTotalPixels / parseInt($('#logos').css('width'))) + 1;
  // When page loads, run through animations but also allow user control via Hover
  if ((whichlogo > -1) && (whichlogo < maxScroll ))
    logoAnimationTimer = setInterval(function () { logoscroller ('#logos_inner', maxScroll); whichlogo+=1; }, 1000);
  
  
  $(".following").hover (function (e) {
    $(this).addClass('following-r');
  }, function (e) { $(this).removeClass('following-r');} );
  
  $(".following").click (function (e) {
    clearInterval (logoAnimationTimer); // a switch to stop auto animation 
	whichlogo = whichlogo < maxScroll ? whichlogo+=1 : whichlogo = maxScroll;
    logoscroller ('#logos_inner', maxScroll);
  });

  $(".previous").hover (function (e) {
    $(this).addClass('previous-r');
  }, function (e) { $(this).removeClass('previous-r');} );

  $(".previous").click (function (e) {
    clearInterval (logoAnimationTimer); // a switch to stop auto animation 
	whichlogo = whichlogo > 0 ? whichlogo+=-1 : whichlogo = 0;
    logoscroller ('#logos_inner', maxScroll);
  });

  //logoTimer = setInterval(function () {scroller ('#logos_inner', ".MainAnimate li", whichlogo)}, 1000);
  
});