/*************************************************************************************************
 * jQuery SlideShow
 * @Revision 3
 * @Author Ryan Nixon
 * @Owner University of Alaska Anchorage
 *
 * This jQuery plugin is to be used in conjunction with the Image List Commonspot custom element. To use this plugin,
 * call 'slideshow()' on a div with a ul or ol list of image tags inside of it. The script will take the images inside
 * of it and present them as specified by the parameters to the method call.
 *
 * The call takes an object as a parameter with the following settings:
 * 	displayMode	- 'Interactive' or 'Presentation'. If Interactive, show slide show controls, otherwise show just the images. Defaults to Presentation.
 * 	frameWidth	- Sets the maximum image width. If not provided the slideshow will expand to fit it's available width
 * 	frameHeight	- Sets the maximum image height. If not provided the slideshow will attempt to discern a maximum height from the content with a maximum allowed height of 500px.
 * 	interval		- How often in milliseconds that the slideshow will advance through its images. Defaults to 7 seconds.
 *************************************************************************************************/

jQuery.fn.slideshow = function(params) {
	if(jQuery('.jqs_canvas', this).length > 0) return this; //Return early if this slide show has already been set up
	
	if(params.displayMode === undefined) params.displayMode = 'Presentation';
	if(params.frameWidth === undefined) params.frameWidth = 0;
	if(params.frameHeight === undefined) params.frameHeight = 0;
	if(params.interval === undefined) params.interval = 7000;
	
	var index = -1; //Counter for current image. Will be incremented to 0 on first image change
	var obj = this;
	var canvas = jQuery("<div class='jqs_canvas'></div>").prependTo(this);
	var buffer = jQuery("<div class='jqs_buffer'></div>").prependTo(this);
	var imgCache = jQuery('ul li img', this);
	var displayControls = params.displayMode == 'Interactive'; //Boolean value for displaying frame/controls/nav
	var MAX_FRAME_HEIGHT = 500;	//Upper limit to frame heights. Overridden by user-specified amount
	
	obj.addClass('jqSlideShow');
	
	if(displayControls)
		var FOOTER_HEIGHT = 20; 		//Added to the height of the frame
	else
		var FOOTER_HEIGHT = 0;
	
	/***************************************************
	 * Increments the displayed image through the list *
	 ***************************************************/
	this.changeImage = function() {
		index++;
		if(imgCache.length == index) index = 0;
		
		//Insert the next image into the buffer
		buffer.empty();
		jQuery(imgCache[index]).clone().appendTo(buffer);
		
		//Stretch the image to fit the canvas
		if(imgCache[index].height > imgCache[index].width)
			jQuery('img', buffer).height(buffer.height() - FOOTER_HEIGHT);
		else {
			//Need to set full width and also vertically center
			jQuery('img', buffer).width(buffer.width());
			
			/*var marginTop = (buffer.height() - FOOTER_HEIGHT) / 2 - imgCache[index].height / 2;
			jQuery('img', buffer).css('margin-top', marginTop);*/
		}
			
		//Assign the new title
		if(displayControls) jQuery('.jqs_title', footer).text(jQuery('img', buffer)[0].alt);
		
		//Perform the swap
		buffer.fadeIn(1000);
		canvas.fadeOut(1000);
		
		//Swap variables to put the canvas back as the primary
		var tmp = canvas;
		canvas = buffer;
		buffer = tmp;
		
		//Set timer for transitions and execute the first transition
		obj.timer = window.setTimeout(function() { obj.changeImage.apply(obj); }, params.interval);
	}
	
	/***********************************************
	 * Stops the timer and moves to the next image *
	 ***********************************************/
	this.nextImage = function() {
		window.clearTimeout(obj.timer);
		
		buffer.stop(true, true);
		canvas.stop(true, true);
		obj.changeImage();
	}
	
	
	/***************************************************
	 * Stops the timer and moves to the previous image *
	 ***************************************************/
	this.prevImage = function() {
		window.clearTimeout(obj.timer);
		
		//Drops the index count by one and rolls over if needed
		index -= 2;
		if(index < -1) index = imgCache.length - 2;

		buffer.stop(true, true);
		canvas.stop(true, true);
		obj.changeImage();
	}
	
	//Sets up the interactive controls
	if(displayControls) {
		var footer = jQuery("<div class='jqs_footer'><span class='jqs_title'></span></div>").appendTo(this);
		jQuery("<img class='jqs_prev' alt='Previous' src='/images/function_icons/arrow_left_green_48.png' />").click(function() { obj.prevImage.apply(obj); }).appendTo(this);
		jQuery("<img class='jqs_next' alt='Next' src='/images/function_icons/arrow_right_green_48.png' />").click(function() { obj.nextImage.apply(obj); }).appendTo(this);
	}
	
	//Apply dimensions to the slideshow frames
	if(params.frameWidth !== 0) {
		obj.width(params.frameWidth);
		obj.css("margin", "0 auto");
	}
	if(params.frameHeight !== 0) obj.height(displayControls ? params.frameHeight + FOOTER_HEIGHT : params.frameHeight);
	
	jQuery(window).load(function() {
		jQuery('.jqs_loading', obj).remove();

		//Set height to loaded image's max height if not set explicitly
		if(params.frameHeight == 0) {
			//Attempt to determine height from images in cache
			var tmpHeight = 0;
			imgCache.each(function() {
				if(this.height && this.height > tmpHeight) tmpHeight = this.height;
			});
			
			if(displayControls) tmpHeight += FOOTER_HEIGHT;
			if(tmpHeight > MAX_FRAME_HEIGHT) tmpHeight = MAX_FRAME_HEIGHT; //Upper limit on height

			obj.height(tmpHeight);
		}
		canvas.width(obj.innerWidth()).height(obj.innerHeight());
		buffer.width(obj.innerWidth()).height(obj.innerHeight());
		
		//Execute the first transition
		obj.changeImage.apply(obj);
	});

	return this;
};