jQuery.fn.slide = function(callback){
  var self = $(this),
      viewport = self.find('.viewport'),
      container = self.find('.slides'),
      slides = self.find('.slide'),
      nextButton = self.find('.next'),
      prevButton = self.find('.prev'),
      current = slides.first().addClass('current'),
      nav = self.find('.nav'),
      navItems = nav.find('li');
  
  var slide = function(to){
    var pos = to.position()
    slides.removeClass('current')
    current = to.addClass('current')
    container.animate({'left': -pos.left})
    navItems.removeClass('active')
    $(navItems[current.index()]).addClass('active')
    callback(self, current)
  }
  
  var toNext = function(){
    if (current.is(':last-child')) {
      slide(slides.first())
    } else {
      slide(current.next())
    }
  }
  
  var toPrev = function(){
    if (current.is(':first-child')) {
      slide(slides.last())
    } else {
      slide(current.prev())
    }
  }
  
  //var slideInterval = setInterval(function(){
  //  toNext()
  //}, 5000)
  
  viewport.css('overflow', 'hidden')
  
  container.css({
    'width': slides.size() * viewport.width(),
    'position': 'relative'
  })
  
  slides.css({
    'width': viewport.width(),
    'float': 'left'
  })
  
  nextButton.click(function(e){
    e.preventDefault()
    //clearInterval(slideInterval)
    toNext()
  })
  
  prevButton.click(function(e){
    e.preventDefault()
    //clearInterval(slideInterval)
    toPrev()
  })

  nav.find('a').click(function(e){
    e.preventDefault()
    var li = $(this).parent()
    slide($(slides.get(li.index())))
  })
}

jQuery.slide = function(callback){
  jQuery('.slideshow').each(function(){
    jQuery(this).slide(callback)
  })
}