
function SlideShow(element,showcaptions,showthumbs,autoplay) {
	
	this.element = element;
	this.showcaptions = showcaptions;
	this.showthumbs = showthumbs;
	this.autoplay = autoplay;
	this.autoplayInterval = 8000;
	this.init();
	
}

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.slideWidth = $(this.listitems[0]).innerWidth();
	//this.slideHeight = $(this.listitems[0]).innerHeight();
	this.imageWidth = this.images[0].width;
	this.imageHeight = this.images[0].height;
	$(this.slideshowUL).css({
		'width' : this.images.length * this.slideWidth
	});
	
	// add prev/next buttons
	this.prevBtn = document.createElement('a');
	this.prevBtn.innerHTML = '<img src="/App_Themes/HardRockJoint/images/blank.gif" width="' + (this.imageWidth / 2) + '" height="' + this.imageHeight + '" />'; // need spacer image for IE6
	this.slideshowDIV.appendChild(this.prevBtn);
	this.nextBtn = document.createElement('a');
	this.nextBtn.innerHTML = '<img src="/App_Themes/HardRockJoint/images/blank.gif" width="' + (this.imageWidth / 2) + '" height="' + this.imageHeight + '" />'; // need spacer image for IE6
	this.slideshowDIV.appendChild(this.nextBtn);
	
	// create image captions
	if (this.showcaptions) {
		$(this.slideshowDIV).addClass('hascaptions');
		$(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.prevBtn).addClass('prev');
	$(this.nextBtn).addClass('next');
	$(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);
		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);
		me.delay = setTimeout( function(){
			me.autoPlay();
		}, me.autoplayInterval)
	});
	
	// create thumbnails
	if (this.showthumbs)
		this.createThumbnailGallery();
	
	// set defaults
	this.index = 0;
	this.imageMargin = 0;
	//this.checkImageButtonState();
	
	// 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);
			me.delay = setTimeout( function() {
				me.autoPlay();
			}, me.autoplayInterval)
		}
	}, 100)
	
}

SlideShow.prototype.createThumbnailGallery = function(){
	var me = this;
	
	this.numVisibleThumbs = 6;
	
	this.thumbnailGallery = document.createElement('div');
	this.thumbnailsVisible = document.createElement('div');
	this.thumbnailUL = document.createElement('ul');
	this.thumbnailListitems = new Array();
	this.thumbnailImages = new Array();
	
	for (var i=0; i<this.images.length; 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','90');
		this.thumbnailImages[i].setAttribute('height','60');
		this.thumbnailListitems[i].appendChild(this.thumbnailImages[i]);
		this.thumbnailUL.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();
			}, me.autoplayInterval)
		});
	}
	
	this.thumbnailsVisible.appendChild(this.thumbnailUL);
	this.thumbnailGallery.appendChild(this.thumbnailsVisible);
	// insert thumbnail gallery node immediately after slideshow node
	this.slideshowDIV.parentNode.insertBefore(this.thumbnailGallery, this.slideshowDIV.nextSibling);
	
	// 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);
	
	// 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.thumbnailUL).addClass('clearfix');
	$(this.prevPageBtn).addClass('prev prevArrow');
	$(this.nextPageBtn).addClass('next nextArrow');
	
	// set prev/next button actions
	$(this.prevPageBtn).click(function(){
		me.prevPage();
	});
	$(this.nextPageBtn).click(function(){
		me.nextPage();
	});
	
	// set defaults
	this.page = 0;
	this.pages = Math.round(this.thumbnailImages.length / this.numVisibleThumbs);
	if (this.pages < this.thumbnailImages.length / this.numVisibleThumbs) {
		this.pages++;
	}
	this.pageMargin = 0;
	
	this.pageWidth = $(this.thumbnailsVisible).width();
	//this.thumbnailWidth = $(this.thumbnailImages[0]).width();
	$(this.thumbnailUL).css({
		'width' : this.thumbnailImages.length * 96
	});
	
	$(this.prevPageBtn).hide();
	if (this.thumbnailImages.length < this.numVisibleThumbs +1)
		$(this.nextPageBtn).hide();
	
}

SlideShow.prototype.prevPage = function(){
	if (this.page > 0) {
		this.page--;
		this.pageMargin -= this.pageWidth;
		$(this.thumbnailUL).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.thumbnailUL).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.thumbnailUL).animate({marginLeft:0},200);
}

SlideShow.prototype.prevSlide = function(){
	if (this.index > 0) {
		this.index--;
		this.imageMargin -= this.slideWidth;
		$(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.slideWidth;
		$(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.slideWidth;
	$(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() {
		if (me.autoplay) {
			me.nextSlide();
		}
	}, me.autoplayInterval)
}

//////////////////////////////////////////////////////////////////////////////////

$(document).ready(function() {
	
	var shows = new Array();
	
	$('.slideshow').each(function(i) {
		var showcaptions = ($(this).hasClass('nocaptions') ? false : true);
		var showthumbs = ($(this).hasClass('nothumbs') ? false : true);
		var autoplay = ($(this).hasClass('noautoplay') ? false : true);
		shows[i] = new SlideShow(this,showcaptions,showthumbs,autoplay);
	});
	
});
