/*
Master images must be fixed at 800 x 600
Thumbnails must be fixed at 150 x 112
*/

// OnLoad function for this file
if (window.attachEvent) {window.attachEvent('onload', generate_gallery_code);}
else if (window.addEventListener) {window.addEventListener('load', generate_gallery_code, false);}
else {document.addEventListener('load', generate_gallery_code, false);} 

/*****************************************************************************/

var index = -1;
var gal_page = 0;

/* modes */
var FWD = 1;
var REW = -1;
var GAL = 0;
var inGallery = 1;

/*****************************************************************************/
// preloader for gallery code
var gallery_array = new Array();

function generate_gallery_code(){
	var counter = 0;

	// check the last image to make sure it doesn't exceed end
	while(counter + 20 < image_file.length){
		gallery_array.push( gen_code(counter, counter + 20) );
		counter += 20;
	}

	// generate last page with remaining pictures if it exists
	if(image_file.length - counter < 20){
		gallery_array.push( gen_code(counter, image_file.length) );
	}

	// change active button to gallery
	change_btn("btn_gal");

	// make the first page
	make_gallery(0);
}

/*****************************************************************************/

function prev(){
	// self looping index
	index = (index - 1 < 0) ? image_file.length-1 : index - 1;
	make_slide();
}

function next(){
	// self looping index
	index = (index + 1) % image_file.length;
	make_slide();
}

function make_gallery(page){
	// trip flag to gallery mode
	inGallery = 1;

	// generate the gallery automatically
	var content = gallery_array[page];
	var caption = "Press PLAY at any time to start automated slide show. Press GALLERY at any time to return to the gallery.<br />";

	if(gallery_array.length > 1){
		caption += "<div style=\"margin: 10px 0px;\">";
		for(var b = 0; b < gallery_array.length; b++){
			if(page == b){
				// make active page stand out
				caption += "<div class=\"gal_page_sel\">" + (b+1) + "</div>";
			} else {
				// make a link, but remove underline for clearer look
				caption += "<a href=\"javascript:change_gallery_page(" + b + ");\" class=\"gal_page\">" + (b+1) + "</a>";
			}
		}
		caption += "</div>";
	}

	// set the content to page
	setHTML('image',content);
	setHTML('caption',caption);
}

function gen_code(start, end){
	// generate the gallery code automatically
	var content = "<div id=\"thumbnails\">";

	for(var i = start; i < end; i++){
		content += "<a href=\"javascript:index=" + (i-1) + ";next_click();\" title=\"" + image_file[i][1] + "\">";
		content += "<img src=\"TN/" + image_file[i][0] + "\" "
		content += "width=\"150\" height=\"112\" alt=\"" + image_file[i][1] + "\" /></a>";
	}

	content += "</div>";

	return content;
}

function make_slide(){
	// trip flag to slideshow mode
	inGallery = 0;

	// put the image and caption in the page
	var content = "<img src=\"" + image_file[index][0] + "\" width=\"800\" height=\"600\" alt=\"" + image_file[index][1] + "\" />";
	setHTML('caption',image_file[index][1]);
	setHTML('image', content);
}

function setHTML(element_id, content){
	document.getElementById(element_id).innerHTML = content;
}

/*****************************************************************************/
/* http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation */

var timer;
var auto = 0;
var	TimeToFade = 250.0;
var OpaqueInterval = 5000;

function fade(eid)
{
	/*
	FadeState is one of 4 numbers:
	2 means that the element is fully opaque
	1 means that the element is currently fading from transparent to opaque
	-1 means that the element is currently fading from opaque to transparent
	-2 means that the element is fully transparent
	
	If the FadeState property doesn't exist, we try and determine it from the state of the opacity css element.
	*/
	var element = document.getElementById(eid);

	if(element == null){
		return;
	}

	if(element.FadeState == null)
	{
		if(element.style.opacity ==	null || element.style.opacity == ''	|| element.style.opacity == '1')
		{
			element.FadeState = 2;
		}
		else
		{
			element.FadeState = -2;
		}
	}

	if(element.FadeState == 1 || element.FadeState == -1)
	{
		element.FadeState =	element.FadeState == 1 ? -1	: 1;
		element.FadeTimeLeft = TimeToFade -	element.FadeTimeLeft;
		}
	else
	{
		element.FadeState =	element.FadeState == 2 ? -1	: 1;
		element.FadeTimeLeft = TimeToFade;
		setTimeout("animateFade(" +	new	Date().getTime() + ",'"	+ eid +	"')", 33);
	}
}

function animateFade(lastTick, eid)
{  
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;

	var element = document.getElementById(eid);

	// full transparent/opaque
	if(element.FadeTimeLeft <= elapsedTicks)
	{
		// for firefox/safari/opera
		element.style.opacity = element.FadeState == 1 ? '1' : '0';
		// for IE
		element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';

		// IE cleartype resolution
		// I FKN HATE YOU INTERNET EXPLORER!!!!! DIAF!!!!!!
		// this causes the fade effect to STOP WORKING in FF/Chrome!
		//if(element.FadeState == 1) element.style.removeAttribute("filter");

		element.FadeState = element.FadeState == 1 ? 2 : -2;

		return;
	}

	// in transition
	element.FadeTimeLeft -= elapsedTicks;
	var newOpVal = element.FadeTimeLeft/TimeToFade;
	if(element.FadeState == 1){
		newOpVal = 1 - newOpVal;
	}

	// for firefox/safari/opera
	element.style.opacity = newOpVal;
	// for IE
	element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

	setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

// change content with fade effect
function step(direction){
	setTimeout("fade('gallery');", 0);	// make transparent

	if(direction == FWD){
		setTimeout("next();", TimeToFade );	// change image next
	} else if (direction == REW) {
		setTimeout("prev();", TimeToFade );	// change image previous
	} else if (direction == GAL){
		// get the index and the proper gallery page
		setTimeout("make_gallery(" + gal_page + ");", TimeToFade );
	}
	
	setTimeout("fade('gallery');", ( TimeToFade * 2) );	// make opaque

	// repeat only if set to auto
	if(auto == 1){
		timer = setTimeout("step("+direction+");", (OpaqueInterval + TimeToFade * 3) );
	}
}

/*****************************************************************************/
/* Button Controls */

// pauses auto-repeat
function pause(){
	// don't do anything if already in gallery mode
	if(inGallery) return;

	// change buttons
	change_btn("btn_pause");

	auto = 0;
	clearTimeout(timer);
}

// plays slideshow
function play(){
	// change buttons
	change_btn("btn_play");

	// check if coming from gallery
	if(inGallery == 1 && index > -1) index--;

	inGallery = 0;
	auto = 1;
	step(FWD);
}

// advance with fade
function next_click(){
	inGallery = 0;
	pause();
	step(FWD);
}

// reverse with fade
function prev_click(){
	inGallery = 0;
	pause();
	step(REW);
}

// fade to gallery from slide
function gallery_click(){
	// don't do anything if already in gallery mode
	if(inGallery) return;

	pause();

	// change buttons
	change_btn("btn_gal");

	gal_page = Math.floor(index/20);
	step(GAL);
}

// fade to gallery page
function change_gallery_page(page){
	gal_page = page;
	step(GAL);
}

/*****************************************************************************/
/* Button Controls */

// reset all buttons to inactive and make one selection
function change_btn(eid){
	var btn_array = new Array("btn_play", "btn_prev", "btn_next", "btn_gal", "btn_pause");
	
	for(var i = 0; i < btn_array.length; i++){
		document.getElementById(btn_array[i]).className="gal_inact";
	}

	document.getElementById(eid).className="gal_act";
}