function SequencePlayer(containerId, properties) {

	var self = this;
	var currentIndex = 0;
	var firstIndex = 0;
	var visibleItems = 2;
	var itemPadding = 10;
	
	var timerCallback = 0;

	var defaults = {
		autoPlay: false,
		escapeKeyCallback: null,
		nextButtonUrl: ResolveUrl('~/Images/Buttons/btnViewStoreRight.png'),
		prevButtonUrl: ResolveUrl('~/Images/Buttons/btnViewStoreLeft.png'),
		photoHeight: 64,
		photoWidth: 68,
		rotationSpeed: 2500,
		sequenceList: {}
	};

	this.containerId = containerId;
	this.container = null;
	this.images = null;
	this.navigator = null;
	this.sequenceCount = 0;
	this.timerCallback = null;

	this.init = function() {
	  
	    defaults = $.extend({}, defaults, properties || {});

	    this.container = $(containerId);
	    this.images = this.container.find('.ImageContainer img');
	    this.navigator = this.container.find('.Navigator');
	    this.sequenceCount = defaults.sequenceList.length;

	    if (this.sequenceCount == 0) return;

	    //Added to auto-pick number that best fits
	    visibleItems = Math.floor(930 / (defaults.photoWidth + itemPadding));
	    
	    createCarousel();

	    if (this.sequenceCount <= visibleItems) {
	        $(".Prev", this.container).hide();
	        $(".Next", this.container).hide();
	    }
	}

	function createCarousel() {

	    var prev = $('<a href="javascript:void(0)" class="Prev"></a>')
			.bind('click', function() {
	            scroll(-1);
	            gotoCurrentThumbnail();
			})
			.append($('<img style="border:none" />').attr('src', defaults.prevButtonUrl));

		var next = $('<a href="javascript:void(0)" class="Next"></a>')
			.bind('click', function() {
		        scroll(1);
				gotoCurrentThumbnail();
			})
			.append($('<img style="border:none" />').attr('src', defaults.nextButtonUrl));

		var filmstrip = $('<div class="FilmStrip"></div>');

		for (var i = 0; i < self.sequenceCount; i++) {
			filmstrip.append(CarouselGetItemHTML(i));
		}
			
		var carousel = $('<div class="Carousel"></div>').append(filmstrip);
		
		var carouselDiv = $('.CarouselDiv', $(self.containerId));
		carouselDiv.append(prev);
		carouselDiv.append(carousel);
		carouselDiv.append(next);

		if (self.sequenceCount > visibleItems) {
			carousel.width(visibleItems * (defaults.photoWidth + itemPadding) - itemPadding);
			$('.FilmStrip', carousel).width(self.sequenceCount * (defaults.photoWidth + itemPadding));
		}
		else {
			visibleItems = self.sequenceCount;
		}
	
		loadImage(null, 0);
		scroll(0);
		gotoCurrentThumbnail();
	}

	function scroll(count) {

		var spFilmStrip = self.container.find('.FilmStrip');

		if (count > 0 && firstIndex + visibleItems < self.sequenceCount) {
			firstIndex++;
			spFilmStrip.animate({ left: (-firstIndex * (defaults.photoWidth + itemPadding)) + 'px' }, 'slow');
		}
		else if (count < 0 && firstIndex > 0) {
			firstIndex--;
			spFilmStrip.animate({ left: (-firstIndex * (defaults.photoWidth + itemPadding)) + 'px' }, 'slow');
		}

		if (self.sequenceCount == visibleItems) {
			$('.Prev img', self.navigator).hide();
			$('.Next img', self.navigator).hide();
		}
		else {

			if (firstIndex == 0) {
				$('.Prev img', self.navigator).hide();
			}
			else {
				$('.Prev img', self.navigator).show();
			}
			if (firstIndex + visibleItems < self.sequenceCount) {
				$('.Next img', self.navigator).show();
			}
			else {
				$('.Next img', self.navigator).hide();
			}
		}
	}

	function CarouselGetItemHTML(itemIndex) {
	
		var item = defaults.sequenceList[itemIndex];
		var thumbUrl = item.thumbUrl;
		var itemHtml = $("<a></a>")
			.bind('click', function() {
			    loadImage($(this), itemIndex);
			    gotoCurrentThumbnail();
			})
			.append($("<div class='Frame'></div>")
				.append($("<img src='" + thumbUrl + "' />"))
				.append($("<div class='FrameSel'></div>")));
		
		return itemHtml;
	}

	function initMotion() {
		timerCallback = setInterval(function() {
			loadImage(null, (++CurrentItemIndex) % SequenceList.length);
			gotoCurrentThumbnail();
		}, 3 * 3000);
	}

	function loadImage(sender, index) {

		if (index >= self.images.length) index = self.images.length - 1;
		if (index < 0) index = 0;
		currentIndex = index;
		
		for (var i = 0; i < self.images.length; i++) {
		    $(self.images[i]).removeClass('ActiveSlide');
		    $(self.images[i]).hide();
		}

		var sequenceItem = self.images[index];
		$(sequenceItem).addClass('ActiveSlide');
		$(sequenceItem).fadeIn('slow');
	}

	// Selects the current thumbnail (sets to selected state) in the filmstrip.
	function gotoCurrentThumbnail() {

		self.container.find('.FilmStrip').find('a .Frame').each(function(i) {
			if (i != currentIndex) {
				$(this).find('.FrameSel').hide();
			}
			else {
				$(this).find('.FrameSel').show();
			}
		});
	}

	this.init();
}