$(function () {
  var $brandSlide = $('div.brandSlide');
  if ($brandSlide.length == 1) {
    $brandSlide.startBrandSlide ();
  }

  $('#loopedSlider').loopedSlider();

  $('#loopedSliderShop').loopedSlider({
    container: ".shopSlideContainer",
    slides: ".shopPhotos",
    autoStart: 3000,
    restart: 5000
  });

  if ($('div.companySlide').length == 1) {
    $('div.companySlide ul li').click (function () {
      $('div.companySlide a.next').click ();
    });
  }

  $("ul.shops li").hover(
    function () {
      $(this).addClass("hover");
    },
    function () {
      $(this).removeClass("hover");
    }
    );

  $("ul.brands li").hover(
    function () {
      $(this).addClass("hover");
    },
    function () {
      $(this).removeClass("hover");
    }
    );
});

$.fn.startBrandSlide = function () {
  var $this = $(this);
  var $brandSlideImages = $('ul.brandImages li', $this);
  var $brandSlideNavigation = $('ul.brandNavigation li', $this);

  var delay = 5000;

  var containerWidth = $this.width ();
  var navElementWidth = $brandSlideNavigation.width ();

  var intervalId = window.setInterval (
    $.fn.startBrandSlide.showNext,
    delay,
    $brandSlideNavigation,
    $brandSlideImages,
    containerWidth,
    navElementWidth
    );

  // Pause slide on hover
  $this.hover (
    // mouseenter
    function () {
      window.clearInterval (intervalId);
    //alert ('clear - '+ intervalId);
    },
    // mouseleave
    function () {
      intervalId = window.setInterval (
        $.fn.startBrandSlide.showNext,
        delay,
        $brandSlideNavigation,
        $brandSlideImages,
        containerWidth,
        navElementWidth
        );
    //alert ('start again - '+ intervalId);
    }
    );

  // Handle brand click
  $('a', $brandSlideNavigation).click (function () {
    $this = $(this);
    var $navContainer = $brandSlideNavigation.parent ();
    var $activeBrand = $('li.active', $navContainer);
    var $imgContainer = $brandSlideImages.parent ();
    var $activeImg = $('li.active', $imgContainer);

    var currentIndex = $this.parent ().index ();

    var $clickedBrand = $($brandSlideNavigation[currentIndex]);
    var $clickedImage = $($brandSlideImages[currentIndex]);

    $clickedImage.css ({
      'position' : 'absolute',
      'top' : '0',
      'left' : '0'
    });

    $clickedImage.fadeIn (
      1000,
      function () {
        $clickedImage
        .removeAttr ('style')
        .addClass ('active');
      }
    );
    $activeImg.fadeOut (
      1000,
      function () {
        $activeImg
        .removeAttr ('style')
        .removeClass ('active');
      }
    );

    $activeBrand.toggleClass ('active');
    $clickedBrand.toggleClass ('active');

    currentIndex = $this.parent ().index ();

    return false;
  });

}

$.fn.startBrandSlide.showNext = function (
  $brandSlideNavigation,
  $brandSlideImages,
  containerWidth,
  navElementWidth
  ) {

  var $navContainer = $brandSlideNavigation.parent ();
  var $activeBrand = $('li.active', $navContainer);
  var brandCount = $brandSlideNavigation.length;

  var currentIndex = $activeBrand.index ();
  var nextIndex = currentIndex + 1;
  if (nextIndex > brandCount - 1) {
    nextIndex = 0;
  }

  var countDisplayed = Math.ceil (containerWidth / navElementWidth);
  var fullWidth = brandCount * navElementWidth;
  var position = $navContainer.position ();
  // If last element in list
  if (currentIndex + 1 == brandCount && position.left != 0) {
    $navContainer.animate ({
      'left': '0px'
    }, 1000);
  }
  // If last visible element
  else if ((currentIndex + 1) % countDisplayed == 0) {
    var move = countDisplayed * navElementWidth;
    if ((brandCount - (currentIndex + 1)) < countDisplayed) {
      move = (brandCount - (currentIndex + 1)) * navElementWidth;
    }
    $navContainer.animate ({
      'left':+(position.left - move)+'px'
    }, 1000);
  }

  $activeBrand.toggleClass ('active')
  $($brandSlideNavigation[nextIndex]).toggleClass ('active');

  //Display image
  var $imgContainer = $brandSlideImages.parent ();
  var $activeImg = $('li.active', $imgContainer);
  var $nextImg = $($brandSlideImages[nextIndex]);

  $activeImg.after ($nextImg);
  //$nextImg.toggleClass ('active');
  $nextImg.css ({
    'position' : 'absolute',
    'top' : '0',
    'left' : '0'
  });

  $activeImg.fadeOut (
    1000,
    function () {
      $activeImg.removeAttr ('style').toggleClass ('active');
      if (nextIndex == 0) {
        var $tempImages = $('ul.brandImages li');
        $($tempImages[0]).before ($nextImg);
      }
    }
    );
  $nextImg.fadeIn (
    1000,
    function () {
      $nextImg
      .addClass ('active')
      .removeAttr ('style');
    }
    );
}