var animationElement = null;

$(document).ready(function(){
  /* slider */
  var slider = $('#ScrollSliderInner');
  var scrollable = $('.scrollable');
  
  function updateSlider(scrollLeft){
    var scrollValue = scrollLeft / ((scrollable.prop('scrollWidth')-scrollable.width())/100);
    slider.slider('value', scrollValue);
  }
  
  function get_slider(){
    var scrollWidth = scrollable.prop('scrollWidth')-scrollable.width();
    return scrollWidth * slider.slider('value') / 100;
  }
  
  $('#ScrollPrev a').click(function(){
    var scrollLeft = get_slider()-200;
    scrollable.stop().animate({'scrollLeft': scrollLeft}, 200);
    updateSlider(scrollLeft);
  });
  $('#ScrollNext a').click(function(){
    var scrollLeft = get_slider()+200;
    scrollable.stop().animate({'scrollLeft': scrollLeft}, 200);
    updateSlider(scrollLeft);
  });
  slider.slider({
    slide: function(event, ui){
      var scrollWidth = scrollable.prop('scrollWidth')-scrollable.width();
      var newValue = scrollWidth * ui.value / 100;
      scrollable.stop().animate(
        {'scrollLeft': newValue},
        {
          'duration':200,
          'easing': "linear"
        });
    },
    change: function(event, ui){
      if (ui.value == 0)
      {
        //sub in data-state-min
        $('#ScrollNext img').attr("src",$('#ScrollNext img').data('state-min'));
        $('#ScrollPrev img').attr("src",$('#ScrollPrev img').data('state-min'));
      }
      else if (ui.value == 100)
      {
        $('#ScrollNext img').attr("src",$('#ScrollNext img').data('state-max'));
        $('#ScrollPrev img').attr("src",$('#ScrollPrev img').data('state-max'));
      }
      else
      {
        $('#ScrollNext img').attr("src",$('#ScrollNext img').data('state-normal'));
        $('#ScrollPrev img').attr("src",$('#ScrollPrev img').data('state-normal'));
      }
    } 
  });
  scrollable.css('overflow-x','hidden');
  /* poll for whether the scrollbar is required or not */
  function checkScrollbarRequired(fadeStyle){
    if (scrollable.length == 0 || scrollable.prop('scrollWidth') <= scrollable.prop('clientWidth'))
    {
      $('#Scroll').fadeTo(fadeStyle,0);
    }
    else
    {
      $('#Scroll').fadeTo(fadeStyle,1);
    }
  }
  window.setInterval(function(){checkScrollbarRequired('slow');}, 1000);
  checkScrollbarRequired('fast');
  
  /* dragscroll */
  function dragScrollChanged(event)
  {
    updateSlider($(this).scrollLeft());
  }
  
  $(function(){
    $('.dragscroll').dragscrollable({acceptPropagatedEvent: true, scrollChanged: dragScrollChanged});
  });
  
  /* hovers */
  $('img[data-state-hover]').hover(function() {
    $(this).attr("src",$(this).data('state-hover'));
      }, function() {
    $(this).attr("src",$(this).data('state-normal'));
  });
  
  /* carousel links */
  var carouselLinks = $('a[data-picker-image]');
  var timeoutCallback = null;
  var currentCarouselImageNumber = null;
  
  if (carouselLinks.length > 0) {
    
    carouselLinks.click(function() {
      setCarouselImage($(this).data('picker-image'));
      return false;
    });
    
    function cycleCarouselImage()
    {
      var nextLink = null;
      var currentLink = null;
      for (var i=0; i<carouselLinks.length; i++)
      {
        currentLink = $(carouselLinks[i]);
        if (currentLink.hasClass('highlight'))
        {
          nextLink = $(carouselLinks[(i+1) % carouselLinks.length]);
          break;
        }
      }
      if (nextLink != null && nextLink != currentLink)
      {
        setCarouselImage(nextLink.data('picker-image'));
        clearTimeout(timeoutCallback);
        timeoutCallback = setTimeout(cycleCarouselImage,6500);
      }
    }
    
    timeoutCallback = setTimeout(cycleCarouselImage,3500);
    
    function setCarouselImage(carouselImageNumber)
    {
      clearTimeout(timeoutCallback);
      timeoutCallback = setTimeout(cycleCarouselImage, 13000);
      
      if (currentCarouselImageNumber == carouselImageNumber)
      {
        return;
      }
      
      /* hide current images */
      $('#ImagePickerCanvas .image:visible').fadeOut();
      $('#ImagePickerCanvas .image[data-picker-image='+carouselImageNumber+']').fadeIn();
      carouselLinks.removeClass('highlight');
      carouselLinks.filter('[data-picker-image='+carouselImageNumber+']').addClass('highlight');
      currentCarouselImageNumber = carouselImageNumber;
    }
  }
});