(function($) {
	
	SlideshowView = Backbone.View.extend({
		el: $('.slideshow')

		,events: {
			'click .next' : 'nextClickHandler'
			,'click .previous' : 'previousClickHandler'
			,'click .hide' : 'hideClickHandler'
		}

		,initialize: function initialize () {
		
			this.animating = false;
			// A jQuery object of all LI elements
			this.list = $('.slideshowItems', this.el);
			this.listItems = $('li', this.list);
			this.listImages = $('img', this.list);

			this.delay = 5000;
			this.counter = 0;
			this.animationSpeed = 600;
			this.imageWidth = 758;
			this.easingType = 'easeInOutQuint';

			this.caption = $('.caption', this.el);

			this.captionShowing = true;

			_.bindAll(this, 'render', 'setTimer', 'clearTimer', 'loadPreviousSlide', 'loadNextSlide', 'hideClickHandler');

			this.initSlideshow();
		}

		,render: function render () {
			
		}

		,initSlideshow: function initSlideshow () {
			
			var self = this;

			// This is our timer object
			this.clearTimer();

			this.totalSlides = this.listItems.length;

			this.currentSlide = 0;

			this.list.width( self.imageWidth * self.totalSlides );

			// Start the slideshow
			this.setTimer();
		}

		,nextClickHandler: function nextClickHandler (ev) {
			
			ev.preventDefault();

			if ( this.animating ) {
				// Do nothing
			} else {
				this.clearTimer();
				this.loadNextSlide();
				this.setTimer();
			}
		}

		,previousClickHandler: function previousClickHandler (ev) {
			
			ev.preventDefault();

			if ( this.animating ) {
				// Do nothing	
			} else {
				this.clearTimer();
				this.loadPreviousSlide();
				this.setTimer();
			}
		}

		,hideClickHandler: function hideClickHandler (ev) {
			
			ev.preventDefault();

			if ( this.captionShowing === true ) {
				
				this.caption.stop().animate({
					bottom : -42
				}, 
				{
					duration: 200
					,easing: 'jswing'
					,complete: function complete () {

						$('.hide', self.el).text('Show Caption');	
					}
				});

				this.captionShowing = false;

				$('.hide', this.el).removeClass('active');

			} else {

				this.caption.stop().animate({
					bottom : 0
				}, 
				{
					duration: 200
					,easing: 'jswing'
					,complete: function complete () {

						$('.hide', self.el).text('Hide Caption');
					}
				});

				this.captionShowing = true;

				$('.hide', this.el).addClass('active');
			}
		}

		,loadNextSlide: function loadNextSlide () {

			var self = this
				,listPos = parseInt( $(this.list).css('left') )
				,currentSlide = $(this.list[this.currentSlide - 1]);

			this.animating = true;

			this.list.stop().animate({
				left: listPos - self.imageWidth
			}, {
				duration: this.animationSpeed
				,easing: this.easingType
				,complete: function () {
					self.animating = false;

					self.currentSlide++;

					var itemToMove = $('.slideshowItems li').eq(self.counter);
					
					var lastItem = $('.slideshowItems li').eq(self.totalSlides);

					self.counter++;

					itemToMove.clone().appendTo( self.list );

					$(self.list).width( parseInt( $(self.list).width() ) + self.imageWidth );

					// This is here because any new .caption elements that are made 
					// need to be added to this.caption in order for functionality to work
					
					self.resetCaptions();
				}
			});
		}

		,resetCaptions: function resetCaptions () {
			this.caption = $('.caption', this.el); 

			if ( this.captionShowing ) {

				this.caption.find('.hide').text('Hide Caption').removeClass('shown');
				this.caption.css('bottom', 0);
			} else {

				this.caption.find('.hide').text('Show Caption').addClass('shown');
				this.caption.css('bottom', -42);
			}
		}

		,loadPreviousSlide: function loadPreviousSlide () {
			
			var self = this
				// ,list = $('.mainstage', this.el)
				,listPos = parseInt(this.list.css('left'));

			console.log(this.currentSlide);

			if ( this.currentSlide == 0 ) {
				// Do nothing
			} else {

				this.animating = true;

				this.list.stop().animate({
					left: listPos + self.imageWidth
				}, {
					duration: this.animationSpeed
					,easing: this.easingType
					,complete: function () {
						self.animating = false;
						self.currentSlide--;
					}
				});
			}
		}

		,clearTimer: function clearTimer () {

			var self = this;

			if ( this.timer ) {
				//self.timer = null;
				clearInterval(self.timer);
			}
		}
		
		,setTimer: function setTimer () {

			var self = this
				,func = this.loadNextSlide;

			this.timer = setInterval(func, self.delay);
		}
	});

}(jQuery));