// JavaScript Document
// Version: v1.1

	// Program Variables
	var image_fade_speed = "slow"; // milliseconds
	var timer_delay = 6; // seconds

	// Set Current Image (start_image can be defined on HTML page to override)
	if (start_image == undefined) { start_image = 0; }
	var current_image = start_image;
	
	// Auto Cycle Status
	if (run_at_start == undefined) { run_at_start = true; }
	var auto_cycle = run_at_start;

	// Images to flip through
	var image_names=new Array(
		"images/main_01.jpg",
		"images/main_02.jpg",
		"images/main_03.jpg",
		"images/main_04.jpg",
		"images/main_05.jpg",
		"images/main_06.jpg",
		"images/main_07.jpg",
		"images/main_08.jpg",
		"images/main_09.jpg"
	);


	// Add to jQuery ability to preload images
	jQuery.preloadImages = function()
	{
		for(var i = 0; i<arguments.length; i++)
		{
			jQuery("<img>").attr("src", arguments[i]);
		}
	}
	
	// On Load do the following...
	$(function () {

		// Preload Images
		$.each(image_names, function(i, f) {
			$.preloadImages(f);
		});
		
		var flip_cycle = function() {
			current_image++; 
			current_image = do_image_flip(current_image, image_fade_speed, image_names);
		}
		
		// We need an image instead of the CSS background stuff
		$('#main')
			.removeClass()
			.append(
				jQuery("<img>")
					.attr("src", image_names[current_image])
					.attr("id", "cycle_image")
			);
			
		// When the image finishes loading, fade it in
		$('#cycle_image').load(function () {
			$('#cycle_image').fadeIn(image_fade_speed);
		});
			
		$('#control')
			.empty()
			.attr("title", "Pause")
			.append("Pause");
			
		// Stuff for the image
		$('#next, #prev')
			.hover(
				function () {
					// if ($('#control').attr('title') == "Pause") { auto_cycle = !auto_cycle; $('#control').click(); }
				},
				function () {
					// if ($('#control').attr('title') == "Play") { if (auto_cycle) { auto_cycle = !auto_cycle; $('#control').click(); } }
				}
			);

		// Add CLICK functionality to PAUSE button
		$('#control').click(function () {
			
			auto_cycle = !auto_cycle;
			
			if ($('#control').attr('title') == "Play") {
				// Immediately flip the image to the next one
				current_image++;
				do_image_flip(current_image, image_fade_speed, image_names);
				// Start the TIMER to cycle image
				image_timer = setInterval(flip_cycle, timer_delay*1000);
				// Change button from PLAY to PAUSE
				new_action = "Pause";
				new_class = "pause";
			} else {
				// Stop the TIMER that cycles the image.
				clearInterval(image_timer);
				// Change button from PLAY to PAUSE
				new_action = "Play";
				new_class = "play";
			}
			
			// Reset the CONTROL to the new action
			$('#control')
				// Change the class to change the image
				.removeClass()
				.addClass(new_class)
				// Change the TITLE and the CONTENT of the button
				.empty()
				.attr("title", new_action)
				.append(new_action);
				
			return false;
			
		});
	
		// Add CLICK functionality to NEXT button
		$('#next').click(function () {
			current_image++
			if (auto_cycle) { $('#control').click(); }
			current_image = do_image_flip(current_image, image_fade_speed, image_names);
			return false;
		});
		
		// Add CLICK functionality to PREV button
		$('#prev').click(function () {
			if (auto_cycle) { $('#control').click(); }
			current_image--;
			current_image = do_image_flip(current_image, image_fade_speed, image_names);
			return false;
		});
		
		// Automate Image Flips
		var image_timer
		if (auto_cycle) { image_timer = setInterval(flip_cycle, timer_delay*1000); }
		else {
			$('#control').click();
			auto_cycle = !auto_cycle;
		}
		
	});
	
	// Flip the image
	function do_image_flip(i, t, a) { 
		if (i >= a.length) { i = 0; }
		if (i < 0) { i = a.length-1; }
		$('#cycle_image')
			// Fade out the image
			.fadeOut(t, function () {
				// When done fading out...
				// Change the SRC of the IMG
				$('#cycle_image').attr('src', a[i]);
			});
		return i;
	}	
	
	// Debug
	// function debug(m) { $('#debug_text').prepend(m + "<br>"); }