
function SlideShow(element,showcaption,showthumbs,autoplay) {
	
	this.element = element;
	this.showcaption = showcaption;
	this.showthumbs = showthumbs;
	this.autoplay = autoplay;
	this.autoplayInterval = 4000;
	this.init();
	
}

function next_click() {
	clearInterval(shows[0].slideInterval);
	shows[0].prevSlide();
	clearTimeout(shows[0].delay);
	if (shows[0].autoplay && !shows[0].isPaused){
			shows[0].delay = setTimeout( function(){
				shows[0].autoPlay();
			}, shows[0].autoplayInterval)
		}
	} 

SlideShow.prototype.init = function() {
	var me = this;
	
	// wrap slideshow ul with container div
	this.slideshowDIV = document.createElement('div');
	this.slideshowUL = document.createElement('ul');
	this.slideshowUL = this.element.cloneNode(true);
	this.slideshowDIV.appendChild(this.slideshowUL);
	
	// replace the original ul with the div slideshow wrapper
	$(this.element).replaceWith(this.slideshowDIV);
	
	// grab all images and set slideshow width
	this.listitems = $(this.slideshowDIV).find('li');
	this.images = $(this.slideshowUL).find('img');
	this.imageWidth = $(this.listitems[0]).innerWidth();
	this.imageHeight = this.images[0].height;
	$(this.slideshowUL).css({
		'width' : this.images.length * this.imageWidth
	});
	
	// get the existing elements
	this.prevBtn = document.getElementById("slideshow_previous_link");
	this.nextBtn = document.getElementById("slideshow_next_link");
	
	// create image captions
	if (this.showcaption) {
		$(this.images).each(function(i){
			me.listitems[i].innerHTML += '<div>' + this.alt + '</div>';
		});
	}
	
	// class manipulation has to happen after the nodes have been added to the DOM or IE won't recognize them for some reason
	$(this.slideshowUL).removeClass('slideshow');
	$(this.slideshowDIV).addClass('slideshow');
	
	// set prev/next button actions
	$(this.prevBtn).mouseover(function(){
		$(this).addClass('prevArrow');
	});
	$(this.prevBtn).mouseout(function(){
		$(this).removeClass('prevArrow');
	});

	$(this.prevBtn).click(function(){
		clearInterval(me.slideInterval);
		me.prevSlide();
		clearTimeout(me.delay);
		if (me.autoplay && !me.isPaused){
			me.delay = setTimeout( function(){
				me.autoPlay();
			}, me.autoplayInterval)
		}
	});

	$(this.nextBtn).mouseover(function(){
		$(this).addClass('nextArrow');
	});
	$(this.nextBtn).mouseout(function(){
		$(this).removeClass('nextArrow');
	});

	$(this.nextBtn).click(function(){
		clearInterval(me.slideInterval);
		me.nextSlide();
		clearTimeout(me.delay);
		if (me.autoplay && !me.isPaused){
			me.delay = setTimeout( function(){
				me.autoPlay();
			}, me.autoplayInterval)
		}
	});
	
	// create thumbnails
	if (this.showthumbs)
		this.createThumbnailGallery();
	
	// set defaults
	this.index = 0;
	this.imageMargin = 0;
	
	// wait until all images are loaded to show prev/next buttons
	$(this.prevBtn).hide();
//	$(this.nextBtn).hide();
	this.imageLoadedCheck = setInterval( function() {
		if (me.areImagesLoaded()) {
			me.checkImageButtonState();
			clearInterval(me.imageLoadedCheck);
			if (me.autoplay) {
				me.delay = setTimeout( function() {
					me.autoPlay();
				}, me.autoplayInterval)
			}
		}
	}, 100)
}

SlideShow.prototype.createThumbnailGallery = function(){
	var me = this;
	
	this.thumbnailGallery = document.createElement('div');
	this.thumbnailsVisible = document.createElement('div');
	this.thumbnailsInnerContainer = document.createElement('div');
	this.thumbnailULs = new Array();
	this.thumbnailListitems = new Array();
	this.thumbnailImages = new Array();
	
	this.pages = Math.round(this.images.length / 18);
	if (this.pages < this.images.length / 18) {
		this.pages++;
	}
	
	var imagesPerPage = 18;
	var currentImage = 0;
	for (var j=0; j<this.pages; j++) {
		this.thumbnailULs[j] = document.createElement('ul');
		if (this.images.length < imagesPerPage)
			imagesPerPage = this.images.length;
		for (var i=currentImage; i<imagesPerPage; i++) {
			this.thumbnailListitems[i] = document.createElement('li');
			this.thumbnailImages[i] = document.createElement('img');
			this.thumbnailImages[i].setAttribute('src',this.images[i].src);
			this.thumbnailImages[i].setAttribute('alt',this.images[i].alt);
			this.thumbnailImages[i].setAttribute('width','68');
			this.thumbnailImages[i].setAttribute('height','46');
			this.thumbnailListitems[i].appendChild(this.thumbnailImages[i]);
			this.thumbnailULs[j].appendChild(this.thumbnailListitems[i]);
			// assign click event to thumbnail image
			this.thumbnailImages[i].index = i;
			$(this.thumbnailImages[i]).click(function(){
				clearInterval(me.slideInterval);
				me.jumpToSlide(this.index);
				clearTimeout(me.delay);
				me.delay = setTimeout( function(){
					me.autoPlay();
				}, 2000)
			});
		}
		this.thumbnailsInnerContainer.appendChild(this.thumbnailULs[j]);
		currentImage = imagesPerPage;
		imagesPerPage += 18;
	}
	
	this.thumbnailsVisible.appendChild(this.thumbnailsInnerContainer);
	this.thumbnailGallery.appendChild(this.thumbnailsVisible);
	// insert thumbnail gallery node immediately before slideshow node
	this.slideshowDIV.parentNode.insertBefore(this.thumbnailGallery, this.slideshowDIV);
	
	// add prev/next buttons
	this.prevPageBtn = document.createElement('a');
	var text = document.createTextNode('Previous');
	this.prevPageBtn.appendChild(text);
	this.thumbnailGallery.appendChild(this.prevPageBtn);
	this.nextPageBtn = document.createElement('a');
	text = document.createTextNode('Next');
	this.nextPageBtn.appendChild(text);
	this.thumbnailGallery.appendChild(this.nextPageBtn);
	// add pause button
	this.pauseBtn = document.createElement('a');
	var text = document.createTextNode('Pause');
	this.pauseBtn.appendChild(text);
	this.thumbnailGallery.appendChild(this.pauseBtn);
	
	// class manipulation has to happen after the nodes have been added to the DOM or IE won't recognize them for some reason
	$(this.thumbnailGallery).addClass('thumbnails');
	$(this.thumbnailsVisible).addClass('thumbnailsVisible');
	$(this.thumbnailsInnerContainer).addClass('thumbnailsInnerContainer clearfix');
	for (var i=0; i<this.thumbnailULs.length; i++) {
		$(this.thumbnailULs[i]).addClass('clearfix');
	}
	$(this.prevPageBtn).addClass('prev prevArrow');
	$(this.nextPageBtn).addClass('next nextArrow');
	$(this.pauseBtn).addClass('pause');
	
	// set prev/next button actions
	$(this.prevPageBtn).click(function(){
		me.prevPage();
	});
	$(this.nextPageBtn).click(function(){
		me.nextPage();
	});
	$(this.pauseBtn).click(function(){
		me.pausePlay();
	});
	
	// set defaults
	this.page = 0;
	this.pageMargin = 0;
	this.isPaused = false;
	
	this.pageWidth = $(this.thumbnailULs[0]).width();
	$(this.thumbnailsInnerContainer).css({
		'width' : me.pages * me.pageWidth
	});
	
	$(this.prevPageBtn).hide();
	if (this.pages < 2)
		$(this.nextPageBtn).hide();
	
}

SlideShow.prototype.prevPage = function(){
	if (this.page > 0) {
		this.page--;
		this.pageMargin -= this.pageWidth;
		$(this.thumbnailsInnerContainer).animate({marginLeft: '-' + this.pageMargin + 'px'},200);
	} else {
		this.resetPage();
	}
	this.checkPageButtonState();
}

SlideShow.prototype.nextPage = function(){
	if (this.page < this.pages - 1) {
		this.page++;
		this.pageMargin += this.pageWidth;
		$(this.thumbnailsInnerContainer).animate({marginLeft: '-' + this.pageMargin + 'px'},200);
	} else {
		this.resetPage();
	}
	this.checkPageButtonState();
}

SlideShow.prototype.checkPageButtonState = function(){
	if (this.page == 0)
		$(this.prevPageBtn).hide();
	else
		$(this.prevPageBtn).show();
	if (this.page == this.pages - 1)
		$(this.nextPageBtn).hide();
	else
		$(this.nextPageBtn).show();
}

SlideShow.prototype.resetPage = function(){
	this.page = 0;
	this.PageMargin = 0;
	$(this.thumbnailsInnerContainer).animate({marginLeft:0},200);
}

SlideShow.prototype.prevSlide = function(){
	if (this.index > 0) {
		this.index--;
		this.imageMargin -= this.imageWidth;
		$(this.slideshowUL).animate({marginLeft: '-' + this.imageMargin + 'px'},200);
	} else {
		this.resetImage();
	}
	this.checkImageButtonState();
}

SlideShow.prototype.nextSlide = function(){
	if (this.index < this.images.length - 1) {
		this.index++;
		this.imageMargin += this.imageWidth;
		$(this.slideshowUL).animate({marginLeft: '-' + this.imageMargin + 'px'},200);
	} else {
		this.resetImage();
	}
	this.checkImageButtonState();
}

SlideShow.prototype.jumpToSlide = function(slideNum) {
	this.index = slideNum;
	this.imageMargin = this.index * this.imageWidth;
	$(this.slideshowUL).animate({marginLeft: '-' + this.imageMargin + 'px'},200);
	this.checkImageButtonState();
}

SlideShow.prototype.checkImageButtonState = function() {
	if (this.index == 0)
		$(this.prevBtn).hide();
	else
		$(this.prevBtn).show();
	if (this.index == this.images.length - 1)
		$(this.nextBtn).hide();
	else
		$(this.nextBtn).show();
}

SlideShow.prototype.resetImage = function() {
	this.index = 0;
	this.imageMargin = 0;
	$(this.slideshowUL).animate({marginLeft:0},200);
}

SlideShow.prototype.areImagesLoaded = function() {
	var imagesloaded = true;
	for (var i = 0; i < this.images.length; i++) {
		if(!this.images[i].complete)
			imagesloaded = false;
	}
	return imagesloaded;
}

SlideShow.prototype.autoPlay = function() {
	var me = this;
	this.slideInterval = setInterval( function() {
		me.nextSlide();
	}, me.autoplayInterval)
}

SlideShow.prototype.pausePlay = function(){
	var me = this;
	if (this.isPaused) {
		this.nextSlide();
		this.autoPlay();
		this.isPaused = false;
		$(this.pauseBtn).removeClass('play');
	} else {
		clearInterval(me.slideInterval);
		this.isPaused = true;
		$(this.pauseBtn).addClass('play');
	}
}

//////////////////////////////////////////////////////////////////////////////////

var shows = new Array();

$(document).ready(function() {
	
	$('.slideshow').each(function(i) {
		var showcaption = ($(this).hasClass('nocaption') ? false : true);
		var showthumbs = ($(this).hasClass('nothumbs') ? false : true);
		var autoplay = ($(this).hasClass('noautoplay') ? false : true);
		shows[i] = new SlideShow(this,showcaption,showthumbs,autoplay);
	});
	
});
