dots_switcher.js.coffee

jQuery ->
  ($ ".dots-switcher").each (index, list) -> new DotsSwitcher(list)

class DotsSwitcher
  constructor: (container) ->
    @container = ($ container);
    @items = @container.find("li")
    @count = @items.length
    @makeDots()
  
    @setCurrentIndex(0)
    unless @container.hasClass("paused") then @startSlideshow()
  
  makeDots: -> 
    if @count > 1
      @dotsContainer = $("<ul>", {"class" : "dots"})
      for item in @items 
        @dotsContainer.append(($ "<li>"))      
      @container.append(@dotsContainer)
      @dots = @dotsContainer.find("li") 
      @dots.each (index, li) => ($ li).bind "click", (event) => @click(event)
      
  startSlideshow: -> 
    @slideshowInterval = setInterval (=> @nextSlide()), 5000
    
  stopSlideshow: -> 
    clearInterval(@slideshowInterval)
  
  nextSlide: -> 
    @setCurrentIndex((@currentIndex() + 1) % @count)
      
  click: (event) ->    
    @stopSlideshow()
    @setCurrentIndex $.inArray event.target, @dots
    
  setCurrentIndex: (position) ->
    @dots.each (index, dot) -> ($ dot).removeClass "current"
    ($ @dots[position]).addClass("current")
    @switchAttachment()
    
  currentIndex: -> 
    $.inArray @container.find("li.current").get(0), @dots
    
  switchAttachment: ->
    li = @container.children("li").first()
    li.animate {"margin-left" : "#{-1 * li.width() * @currentIndex()}px", 5000}