/*
 *  main_image.js
 *  This code creates a bottom image, then after a timeout, it creates a
 *  top image, slowly fades the top image into view (with opacity), then
 *  makes it the new bottom image.
 *  The active image can't be faded out because the new image would be fully
 *  visible under the former image;  the new image must be faded in.
 *  http://www.splintered.co.uk/experiments/archives/javascript_cross_fade/crossfade.js
 *  http://brainerror.net/scripts/javascript/blendtrans/
 */

"use strict";

/* http://www.javascriptlint.com/index.htm */
/*jsl:option explicit*/
/*jsl:declare document*/
/*jsl:declare window*/
/*jsl:declare navigator*/
/*jsl:declare setTimeout*/

// consts
// IE 7 doesn't support 'const' and it is not in the new javascript standard
var auto_switch_cycles		= 10;
var auto_switch_count		= 0;
var auto_switch_timeout		= null;

var new_image_msecs		= 10000; // 10 seconds

var fade_msecs			= 40;
var fade_loops			= 25;
var fade_timeout		= null;

var enable_auto_switch		= true;

// cache because it is used in the fade loop
var div_main_image_top_obj	= document.getElementById('div-main-image-top');

// vars
var bottom_image_num;
var top_image_num;

var main_image		= [
	{
		file	: 'euro_train.jpg',
		location: 'France, 2008',
		author	: 'Luke Momjian',
		url	: '/main/events/conferences/2008.html#February_23-24_2008'
	},	
	{
		file	: 'ottawa.jpg',
		location: 'Ottawa, 2007',
		author	: 'Michael Glaesemann',
		url	: '/main/events/conferences/2007.html#May_21-24_2007'
	},	
	{
		file	: 'moscow.jpg',
		location: 'Moscow, 2007',
		author	: 'Teodor Sigaev',
		url	: '/main/events/conferences/2007.html#September_24-25_2007'
	},	
	{
		file	: 'eastern2.jpg',
		location: 'Philadelphia, 2008',
		author	: 'Christine Momjian',
		url	: '/main/news/2008.html#January_15_2008'
	},	
	{
		file	: 'rambler.jpg',
		location: 'Moscow, 2007',
		author	: 'Nikolay Samokhvalov',
		url	: '/main/events/conferences/2007.html#September_24-25_2007'
	},	
	{
		file	: 'eastern1.jpg',
		location: 'Philadelphia, 2008',
		author	: 'Christine Momjian',
		url	: '/main/news/2008.html#January_15_2008'
	},	
	{
		file	: 'seaworld.jpg',
		location: 'Florida, 2009',
		author	: 'Christine Momjian',
		url	: '/main/news/2009.html#November_8_2009'
	},	
	{
		file	: 'deck.jpg',
		location: 'Pennsylvania, 2003',
		author	: 'Jan Wieck',
		url	: ''
	},	
	{
		file	: 'slacker.jpg',
		location: 'Ottawa, 2008',
		author	: "Magnus Hagander and Derek Rodner",
		url	: '/main/events/conferences/2008.html#May_22-23_2008'
	},	
	{
		file	: 'waterfall.jpg',
		location: 'Costa Rica, 2007',
		author	: 'Christine Momjian',
		url	: '/main/news/2007.html#March_17_2007'
	},	
	{
		file	: 'elephants.jpg',
		location: 'Sri Lanka, 2005',
		author	: 'Greg Stein',
		url	: '/main/events/conferences/2005.html#September_7-10_2005'
	},	
	{
		file	: 'ellis_island.jpg',
		location: 'New York City, 2007',
		author	: 'Christine Momjian',
		url	: '/main/news/2007.html#September_6_2007'
	},	
	{
		file	: 'toronto.jpg',
		location: 'Toronto, 2006',
		author	: 'Alvaro Herrera',
		url	: '/main/events/conferences/2006.html#July_8-9_2006'
	},	
	{
		file	: 'uk_train.jpg',
		location: 'England, 2008',
		author	: 'Luke Momjian',
		url	: '/main/events/conferences/2008.html#February_23-24_2008'
	},	
	{
		file	: 'hedgerow_gala.jpg',
		location: 'Pennsylvania, 2007',
		author	: 'Rick Preiur',
		url	: '/main/news/2007.html#November_17_2007_2'
	},	
	{
		file	: 'ottawa3.jpg',
		location: 'Ottawa, 2007',
		author	: "Devrim G\xFCnd\xFCz",
		url	: '/main/events/conferences/2007.html#May_21-24_2007'
	},	
	{
		file	: 'pgcon2009-devmeeting-2.jpg',
		location: 'Ottawa, 2009',
		author	: 'Oleg Bartunov',
		url	: '/main/events/conferences/2009.html#May_21-22_2009'
	},	
	{
		file	: 'montage.jpg',
		location: '',
		author	: '',
		url	: ''
	}
];
	

function set_image_opacity(opacity, obj)
{
	if (obj.style)
	{
		/* test for different browsers */
		if (obj.style.opacity != null)
			/* CSS3 compatible */
			obj.style.opacity = (opacity / 100);
		else if (obj.style.MozOpacity != null)
			/* Mozilla's pre-CSS3 proprietary rule */
			obj.style.MozOpacity = (opacity / 100);
		else if (obj.style.filter != null)
			/* IE's proprietary filter */
			obj.style.filter = 'alpha(opacity=' + opacity + ')';
	}
}

function set_top_image_opacity(loop)
{
	var pct;

	if (fade_loops != 0)
		pct = 100 * loop / fade_loops;
	else
		pct = 100;
	// Amazing that you fade the new image in but don't fade out the old one
	set_image_opacity(pct, div_main_image_top_obj);
}

function load_top_image()
{
	// pre-load next image
	document.getElementById('main-top-image').src = '/main/img/main/' +
				main_image[top_image_num].file;

	// image border?
	if (main_image[top_image_num].file != 'slacker.jpg' &&
	    main_image[top_image_num].file != 'montage.jpg')
		document.getElementById('main-top-image').className = 'full-width border';
	else
		document.getElementById('main-top-image').className = 'full-width';

	document.getElementById('main-top-location-a').href = main_image[top_image_num].url;
	document.getElementById('main-top-location-a').firstChild.nodeValue = main_image[top_image_num].location;
 	document.getElementById('main-top-author').firstChild.nodeValue =
		(main_image[top_image_num].author != '') ? 'photo by ' + main_image[top_image_num].author : '';
}

function copy_top_image_to_bottom()
{
	bottom_image_num = top_image_num;

	document.getElementById('main-bottom-image').src = 
				document.getElementById('main-top-image').src;
	// image border
	document.getElementById('main-bottom-image').className =
				document.getElementById('main-top-image').className;
	document.getElementById('main-bottom-location-a').href =
				document.getElementById('main-top-location-a').href;
	document.getElementById('main-bottom-location-a').firstChild.nodeValue =
				document.getElementById('main-top-location-a').firstChild.nodeValue;
	document.getElementById('main-bottom-author').firstChild.nodeValue =
				document.getElementById('main-top-author').firstChild.nodeValue;

	document.getElementById('main-bottom-location').style.display = 'block';
	document.getElementById('main-bottom-author').style.display = 'block';
}

function prepare_top_image()
{
	// make top image invisible;  zero opaque is not enough because
	// 'view image' shows top image and links on short images are inactive
	document.getElementById('div-main-image-top').style.display = 'none';

	top_image_num = (bottom_image_num + 1) % main_image.length;
	load_top_image();
}

// Fade in top image over bottom image
function fade_in_top_image(loop)
{
	fade_timeout = null;
	auto_switch_timeout = null;
	if (auto_switch_count == 1)
		document.getElementById('main-action').firstChild.nodeValue = '';

	set_top_image_opacity(loop);

	// first time in fade loop
	if (loop == 0)
	{
		document.getElementById('div-main-image-top').style.display = 'block';

		// do not display description of bottom image as we fade in top image
		document.getElementById('main-bottom-location').style.display = 'none';
		document.getElementById('main-bottom-author').style.display = 'none';
	}

	if (loop + 1 < fade_loops) // do not bother with 100% for top
		// sleep before fading in more
		fade_timeout =
			setTimeout(function() {fade_in_top_image(loop + 1); }, fade_msecs);
	else
		display_main_image();
}

function schedule_next_fade()
{
	if (enable_auto_switch)
	{
		if (++auto_switch_count < main_image.length * auto_switch_cycles)
	 		auto_switch_timeout = setTimeout(
				function() {fade_in_top_image(0); }, new_image_msecs);
		else
		{
			document.getElementById('main-action').firstChild.nodeValue = 'Slideshow Finished';
			document.getElementById('main-action').onclick =
				function() {resume_auto_switch(); return false;};
			// exit Javascript, prevent infinite looping over pictures
		}
	}
	// else exit
}

function force_auto_switch()
{
	if (auto_switch_timeout != null)
		clearTimeout(auto_switch_timeout);
	if (fade_timeout != null)
		clearTimeout(fade_timeout);

	enable_auto_switch = false;

	fade_loops = 0;
	document.getElementById('main-action').firstChild.nodeValue = '';
	//document.getElementById('main-action-a').blur();
	fade_in_top_image(0);
}

function setup_auto_switch()
{
	auto_switch_count = 0;
	document.getElementById('main-action').firstChild.nodeValue = 'Click on image to advance';
	document.getElementById('main-bottom-image').onclick = 
			function() {force_auto_switch(); return false;};
}

function resume_auto_switch()
{
	setup_auto_switch();
//	document.getElementById('main-action-a').blur();
	fade_in_top_image(0);
}

function display_main_image()
{
	copy_top_image_to_bottom();
	prepare_top_image();

	schedule_next_fade();
}

function create_child_text_nodes()
{
	document.getElementById('main-top-location-a').appendChild(document.createTextNode(""));
	document.getElementById('main-top-author').appendChild(document.createTextNode(""));
	document.getElementById('main-action').appendChild(document.createTextNode(""));
}

function start_main_image()
{
	create_child_text_nodes();

	setup_auto_switch();

	// getTime() is used so page refresh displays the same image
	// cyle time is new_image_msecs plus fade time
	// top and bottom images are the same when initializing
	// assume half-way through time span on start
	top_image_num = Math.floor(new Date().getTime() /
				(new_image_msecs + (fade_msecs * fade_loops)) + 0.5) %
				main_image.length;


	// load top image and then force it to the bottom
	load_top_image();

	display_main_image();
}

start_main_image();