;(function($) {
  $.fn.silayder = function(options) {
    var currentPosition = 0;
    var slideWidth = 710;
    var slides = $(this).find('.slidesContainer .slide');
    var numberOfSlides = slides.length;
    var dis = $(this);

    // Remove scrollbar in JS
    dis.find('.slidesContainer').css('overflow', 'hidden');

    // Set #slideInner width equal to total width of all slides
    dis.find('.slideInner').css('width', slideWidth * numberOfSlides);
    
    var controller = '<ul class="swControls"><li class="left"><a class="control swShowPage leftControl"  href="javascript:void(0);">PREVIOUS</a></li><li class="position"></li><li class="right"><a class="control swShowPage rightControl" href="javascript:void(0);">NEXT</a></li></ul>';
    dis.prepend(controller);

    
    // Create event listeners for .controls clicks
    dis.find('.swControls a.control').bind('click', function(){
      // Determine new position
      $.fn.silayder.status.curPos = ($(this).hasClass('rightControl')) ? $.fn.silayder.status.curPos+1 : $.fn.silayder.status.curPos-1;

      // Hide / show controls
      manageControls($.fn.silayder.status.curPos,dis,numberOfSlides);
      // Move slideInner using margin-left
      dis.find('.slideInner').animate({
        'marginLeft' : slideWidth*(-1 * $.fn.silayder.status.curPos)
      });
    });

    // manageControls: Hides and shows controls depending on currentPosition
    manageControls($.fn.silayder.status.curPos,dis,numberOfSlides);
  };
  
  var manageControls = function(position,dis,numberOfSlides) {
    if(position==0){
      dis.find('.swControls a.leftControl').hide()
    } else {
      dis.find('.swControls a.leftControl').show()
    }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){
      dis.find('.swControls a.rightControl').hide()
    } else {
      dis.find('.swControls a.rightControl').show()
    }
    dis.find('.swControls li.position').text((position+1) + ' of ' + numberOfSlides);
    $.fn.silayder.status.curPos = position;
  };

  $.fn.silayder.resetState = function(dis,numberOfSlides) {
    manageControls(0,dis,numberOfSlides);
    dis.find('.slideInner').css({
      'margin-left' : 0
    });
  };

  $.fn.silayder.status = { curPos: 0};

})(jQuery)

$(document).ready(function() {
  var items = $('#media').find('.slideshow');
  $(items).each(function() {
    $(this).silayder();
  });
});