﻿function msjs_slideshow(ContainerDivId, DisplayTime, FadeTime) {
	this.ContainerDivId = ContainerDivId;
	this.DisplayTime = DisplayTime;
	this.FadeTime = FadeTime;
	this.CaptionLeft = 100;
	this.CaptionTop = 100;
	this.CaptionWidth = 200;
	this.CaptionHeight = 0;

	this.startTime = new Date();

	this.start = function () {
		var container = $('#' + this.ContainerDivId);
		container.find('a').css({ opacity: 0.0, position: "absolute", float: "left" });

		//Get the first image and display it (set it to full opacity)
		container.find('a:first').css({ opacity: 1.0 });
		container.find('.caption').css({ opacity: 0.0 });
		$('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });
		container.find(' .content').html($('#' + this.ContainerDivId + ' a:first').find('img').attr('rel'))

		var instance = this;
		setInterval(function () { instance.runSlide(instance); }, this.DisplayTime);

		/*
		//Set the opacity of all images to 0
		$('#' + this.ContainerDivId + ' a').css({ opacity: 0.0 });

		//$('#' + this.ContainerDivId ).css({ position: "relative", top: "-69px", left: "0px" });

		$('#' + this.ContainerDivId + ' a').css({ position: "absolute", float: "left" });

		//Get the first image and display it (set it to full opacity)
		$('#' + this.ContainerDivId + ' a:first').css({ opacity: 1.0 });

		//Set the caption background to semi-transparent
		$('#' + this.ContainerDivId + ' .caption').css({ opacity: 0.0 });

		//Resize the width of the caption according to the image width
		$('#gallery .caption').css({ width: $('#gallery a').find('img').css('width') });

		//Get the caption of the first image from REL attribute and display it
		$('#' + this.ContainerDivId + ' .content').html($('#' + this.ContainerDivId + ' a:first').find('img').attr('rel'))
		//.animate({opacity: 0.7}, 400);

		//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
		var instance = this;
		setInterval(function () { instance.runSlide(instance); }, this.DisplayTime);
		*/
	}

	this.runSlide = function (instance) {

//		var time = new Date();
//		var timeDiff = time - this.startTime;

//		$('#' + this.ContainerDivId).html(timeDiff);
//		this.startTime = new Date();

		var intCounter = 0;

		//if no IMGs have the show class, grab the first image
		var current = ($('#' + instance.ContainerDivId + ' a.show') ? $('#' + instance.ContainerDivId + ' a.show') : $('#' + instance.ContainerDivId + ' a:first'));

		//Get next image, if it reached the end of the slideshow, rotate it back to the first image
		var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#' + instance.ContainerDivId + ' a:first') : current.next()) : $('#' + instance.ContainerDivId + ' a:first'));

		if (typeof (next.find('img').attr('src')) == "undefined") {
			next = $('#' + instance.ContainerDivId + ' a:first');
		}
		//Get next image caption
		var caption = next.find('img').attr('rel');

		//Set the fade in effect for the next image, show class has higher z-index
		next.css({ opacity: 0.0 })
		.addClass('show')
		.stop()
		.animate({ opacity: 1.0 }, instance.FadeTime);
		$('#' + instance.ContainerDivId + ' .caption').stop().animate({ opacity: 0.0 }, instance.FadeTime / 2);

		setTimeout(function () { $('#' + instance.ContainerDivId + ' .content').html(caption); }, instance.FadeTime / 2);

		//Hide the current image
		current.stop().animate({ opacity: 0.0 }, instance.FadeTime).removeClass('show');

		//Display the content
		if (caption != "")
			$('#' + instance.ContainerDivId + ' .caption').stop().animate({ opacity: 0.7 }, instance.FadeTime / 2);
	}
}


