(function($) {
	
	MainstageView = Backbone.View.extend({
		el: $('.mainstageWrapper')
		
		,events: {
			'click .previous' 	: 'previousClick'
			,'click .next'		: 'nextClick'
		}
		
		,initialize: function initialize () {
			var self = this;

			this.delay = 5000;
			this.counter = 0;
			this.animationSpeed = 600;
			this.imageWidth = 1200;
			this.easingType = 'easeInOutQuint';
			
			_.bindAll(this, 'render', 'previousClick', 'nextClick', 'clearTimer', 'setTimer', 'initSlideshow', 'loadNextSlide');
			
			this.render();
		}
		
		,render: function render () {
			var self = this,
				vars = {
				images : this.model.get('images')
			}
			,template = _.template( $('#mainstage_template').html(), vars );

			$(this.el).html( template );

			// Window resize event handler
			pubsub.subscribe('ryerson/windowResize', function () {
				self.reposition();
			});

			pubsub.subscribe('ryerson/navigationMouseOver', function () {
				self.clearTimer();
			});

			pubsub.subscribe('ryerson/navigationMouseOut', function () {
				self.setTimer();
			});

			// Once all the content is loaded into the page
			// and ready to go, we start things off by positioning
			// our controls and showing the first image in the slideshow.
			this.reposition();



			if ( this.model.get('slideshow') ) {
				this.initSlideshow();
			}
		}

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

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

			this.totalSlides = this.model.get('images').length - 1;

			this.currentSlide = Math.floor(this.totalSlides / 2);

			$('.mainstage').width( 1200 * self.totalSlides );

			// console.log(this.currentSlide);

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

			$.each(self.listImages, function (index, value) {
				var imagePath = $(value).attr('data-img-src');
				$(value).attr('src', imagePath);
			});

			// this.listItems.eq(this.currentSlide - 1).addClass('active');

			this.list.css('left', -(this.currentSlide - 1) * this.imageWidth);

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

		,loadNextSlide: function loadNextSlide () {
			// console.log('load next slide');
			
			var self = this
				,list = $('.mainstage', this.el)
				,listPos = parseInt(list.css('left'))
				,currentSlide = $(this.list[this.currentSlide - 1]);

			this.animating = true;

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

					self.currentSlide++;

					// console.log(self.counter);

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

					self.counter++;

					itemToMove.clone().appendTo( $('.mainstage') );

					$('.mainstage').width( parseInt($('.mainstage').width()) + 1200 );
				}
			});
		}

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

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

				this.animating = true;

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

		,reposition: function reposition () {
			var windowWidth = $(window).width()
				,thisWidth = $(this.el).width()
				,leftPos = (windowWidth - thisWidth) / 2;

			$(this.el).css('left', leftPos);
		}

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

			if ( this.animating == false ) {
				this.clearTimer();
				this.loadPreviousSlide();
				this.setTimer();	
			}
		}

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

			if ( this.animating == false ) {
				this.clearTimer();
				this.loadNextSlide();
				this.setTimer();
			}
		}

		,clearTimer: function clearTimer () {
			// console.log('timer cleared');

			var self = this;

			if ( this.model.get('slideshow') ) {
				if ( this.timer ) {
					//self.timer = null;
					clearInterval(self.timer);
				}
			}	
		}
		
		,setTimer: function setTimer () {
			// console.log('timer set');

			var self = this
				,func = this.loadNextSlide;
			
			if ( this.model.get('slideshow') ) {
				this.timer = setInterval(func, self.delay);
			}
		}

	});
	
}(jQuery));