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

var logoAnimationTimer = 0;
var whichlogo = 1;

// A Plugin to do multiple stuff at once. But FadeIn at end is a fudge due to Opacity Toggle getting out of sync.
jQuery.fn.slideFadeToggle = function(nextScroll, speed, easing, callback) {
      return this.animate({opacity: 'toggle', left: nextScroll}, speed, easing, callback).fadeIn();
};



$(document).ready(function(){


    $('#menu .navigation li').hover(function() {
      $(this).removeClass('ui-state-default');
      $(this).addClass('ui-state-hover');
      }, function() {
      $(this).removeClass('ui-state-hover');
          $(this).addClass('ui-state-default');
     });

    $('.MainAnimate li').hover(function() {
      //$(this).removeClass('ui-state-default');  // Probably no need for both functions - not really a toggle now
      $(this).addClass('ui-state-hover');
      }, function() {
      // $(this).removeClass('ui-state-hover');
          $(this).addClass('ui-state-default');
     });

      $('#infoTab').tabs();
      $('#extrasTab').tabs();


  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 )) {
         // slideFadeToggle
         //$scroller.stop(true,true).slideFadeToggle(nextScroll, 500);
         //   $scroller.stop(true,true).fadeOut().animate({'left': nextScroll}, 2000 ).fadeIn();
               $scroller.stop(true,true).fadeOut().animate({'left': nextScroll}, 20 ).fadeIn();
                which+=1;
                }
        else {
            clearInterval (animationTimer);
            $scroller.fadeOut(500).stop(true,true).animate({'left':'0'}, 200).fadeIn();
                which = 0;
                $('.MainAnimate li:eq(' + which + ')').addClass('ui-state-hover');
        }
  } // Scroller

  function clearHighlights () {
  // Clear/Set the Highlighted Block (uses global which)
  $('.MainAnimate li').each(function () {$(this).removeClass('ui-state-hover');} );
  $('.MainAnimate li:eq(' + (which-1) + ')').addClass('ui-state-hover');
  }

  // Main Code to initiate Scrolling
  //  Number (and hence width) of photos_inner determined by number of Services offered
  $('#photos_inner').css('width', $(".MainAnimate li").length * parseInt($('#photos').css('width')) );
  $('.MainAnimate li:eq(0)').addClass('ui-state-hover'); // start position
  // 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");
          /* Style appropriate Button - remove hover then add it to specific LI */
          clearHighlights ();
          }, 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");
    clearHighlights ();
    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);

});