var picture_changer_interval=6000;	// how long (ms) between image changes
var picture_changer_fade_time=3.0;	// how long to spend fading the images (s)
var picture_changer_img_base_id='image_';
var picture_changer_image_list_base='image_list_';
var picture_changer_image_list;
var picture_changer_count=1;
var picture_changer_total_img_count = 0;	// total number of images being handled
var picture_changer_thumbnail_container_id;
var picture_changer_thumbnails_visible_cnt = -1;
var picture_changer_prev_img = '';
var picture_changer_next_img = '';
var picture_changer_sequential_changer = 1;

var thumbnail_holder = Array();
var curr_img = Array();
var active_changer = 0;
var next_img = Array();//get_next_picture_changer_img_id();
var top_img = Array();
var bottom_img = Array();
var timer_id;	// the last activated timer
var cancel_timer = false;

var debug_target;

function log_debug( msg )
{
	if( typeof debug_target == 'object' )
		debug_target.innerHTML = msg + "\n----------------------------------------\n" + debug_target.innerHTML;
}

function auto_swap_image()
{
	if( cancel_timer )
		return;

	var this_top_img_id = picture_changer_img_base_id + active_changer + '_' + top_img[active_changer];
	var this_bottom_img_id = picture_changer_img_base_id + active_changer + '_' + bottom_img[active_changer];

//	alert( "auto_swap_image()\nactive changer:" + active_changer + "\nthis_top_image_id:"+this_top_img_id + "\nthis_bottom_image_id:" + this_bottom_img_id );
	log_debug( "auto_swap_image()\nactive changer:" + active_changer + "\nthis_top_image_id:"+this_top_img_id + '(' + document.getElementById(this_top_img_id).innerHTML.substring( 1 ) + ')' + "\nthis_bottom_image_id:" + this_bottom_img_id );
	

//	alert( '"' + this_top_img_id + '"' );
//	alert( '"' + this_bottom_img_id + '"' );
	/* The Fade effect is non-blocking */
//	alert( 'about to set 100% opacity on both images' );
	Effect.Appear(this_top_img_id, {duration:0, from: 1, to: 1});
	Effect.Appear(this_bottom_img_id, {duration:0, from: 1, to: 1});
//	alert( 'opacity set bottom img' );
	// top image will be transparent at present
	var next_img_container = document.getElementById(this_bottom_img_id);
	var curr_img_container = document.getElementById(this_top_img_id);

	// update for next time
	top_img[active_changer] = top_img[active_changer] ? 0 : 1;
	bottom_img[active_changer] = bottom_img[active_changer] ? 0 : 1;

	next_img_container.style.zIndex = 100;
	curr_img_container.style.zIndex = 101;
	
	// next_img is now hidden from view, so switch to the next one
	log_debug( 'Setting ' + this_top_img_id + '.innerHTML = &lt;img src="' + picture_changer_image_list[active_changer][next_img[active_changer]][0] + '" title="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '" alt="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '"/><img width="67" height="50" src="' + picture_changer_image_list[active_changer][next_img[active_changer]][0] + '" title="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '" alt="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '"/>');

	next_img_container.innerHTML = '<img src="' + picture_changer_image_list[active_changer][next_img[active_changer]][0] + '" title="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '" alt="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '"/>';
	//alert( next_img_container.innerHTML );
	log_debug( 'Effect.Fade(' + this_top_img_id + ', {duration:' + picture_changer_fade_time + ', from: 1, to: 0});' );
	Effect.Fade(this_top_img_id, {duration:picture_changer_fade_time, from: 1, to: 0});
	
	if( picture_changer_thumbnail_container_id != '' )
	{
		 /* keep the highlighted thumbnail in sync.
			*750 = 1000 * 0.75 (change active thumbnail at 75% through the fade */
		setTimeout( 'update_thumbnails(' + next_img[active_changer] + ', true)', (picture_changer_fade_time*750) );
	}

	/* Setup everything ready for the next call to this function */
	curr_img[active_changer] = next_img[active_changer];
	next_img[active_changer] = get_next_picture_changer_img_id(active_changer);

	//alert( 'curr_img == ' + curr_img + "\nnext_img == " + next_img );

	// move on to the next changer
	active_changer++;
	if( active_changer >= picture_changer_count )
		active_changer = 0;
	
	if( active_changer && !next_img[active_changer] )
	{	// don't allow the overlay to loop
		active_changer = 0;
		picture_changer_count = 1;
	}

	if( !picture_changer_sequential_changer && active_changer )
		timer_id = setTimeout( 'auto_swap_image()', (picture_changer_fade_time + 750) );	// offset the overlay by 1s
	else
		timer_id = setTimeout( 'auto_swap_image()', picture_changer_interval );
}

function set_next_img( image_set )
{
	next_img_container.innerHTML = '<img src="' + picture_changer_image_list[active_changer][next_img[active_changer]][0] + '" title="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '" alt="' + unescape( picture_changer_image_list[active_changer][next_img[active_changer]][1] ) + '"/>';

}


function get_next_picture_changer_img_id( image_set )
{

	// TODO: tidy up this code
	if( (curr_img[image_set] + 1) >= picture_changer_image_list[image_set].length )
		next_img[image_set] = 0;
	else
		next_img[image_set] = curr_img[image_set] + 1;

	return( next_img[image_set] );
}

function update_thumbnails( id, delayed )
{
	if( cancel_timer && delayed )
	{	// timer has been cancelled, but this function call is a residual setTimer() based one
		return;
	}
	document.getElementById(picture_changer_thumbnail_container_id).setAttribute( 'class', 'thumbnail_' + id );
	document.getElementById(picture_changer_thumbnail_container_id).setAttribute( 'className', 'thumbnail_' + id );	
}

function set_main_picture( changer_id, image_id )
{
	cancel_timer = true;
	var this_top_img_id = picture_changer_img_base_id + active_changer + '_' + top_img[active_changer];
	var curr_img_container = document.getElementById(this_top_img_id);

	curr_img_container.innerHTML = '<img src="' + picture_changer_image_list[changer_id][image_id][0] + '" title="' + unescape( picture_changer_image_list[changer_id][image_id][1] ) + '" alt="' + unescape( picture_changer_image_list[changer_id][image_id][1] ) + '"/>';
	
// set class on #thumbs to the active thumbnail, and let the main stylesheet deal with it - no need to clear the class on all other thumbs
	update_thumbnails( image_id, false );
}

function scroll_thumbnails( direction )
{
	if( direction > 0 )
		alert( 'scroll right' );
	else
		alert( 'scroll left' );
}

function create_thumbnail_container( thumbnail_container_id )
{
	var main_image_id = picture_changer_img_base_id + '0_0';
	var picture_changer_parent = document.getElementById(main_image_id).parentNode;

	if( typeof picture_changer_parent != 'object' )
	{
		log_debug( "create_thumbnail_container(" + thumbnail_container_id + ") failed to get parentNode\n" );
		return( -1 );
	}

//	var ul = Builder.node( 'ul',{id:thumbnail_container_id,className:'thumbnail_0'});
	var ul = Builder.node( 'ul' );
	// build an array of each of the li elements required to hold the thumbnails
	if( picture_changer_prev_img != '' )
	{	// show the nav scroll image first if required
		var li = Builder.node('li', {className:'prev nav'},[Builder.node('a', {onclick:'scroll_thumbnails( -1 );return(false);',href:'#'}, [Builder.node('img', {src:picture_changer_prev_img})])]);
		ul.appendChild( li );
	}
	
	for( var i=0; i<picture_changer_image_list[0].length; i++ )
	{
		log_debug( "Creating new li:\n" + picture_changer_image_list[0][i][2] + ' (' + picture_changer_image_list[0][i][1] + ')' );
		var li = Builder.node('li', {className:'thumbnail_' + i + ' thumbnail'},[Builder.node('a', {onclick:'set_main_picture(0,'+i+');return(false);',href:'#'}, [Builder.node('img', {src:picture_changer_image_list[0][i][2],alt:picture_changer_image_list[0][i][1]}),Builder.node('div', {className:'mask'})])]);
	
		ul.appendChild( li );
	}

	if( picture_changer_next_img != '' )
	{	// show the nav scroll image last if required
		var li = Builder.node('li', {className:'next nav'},[Builder.node('a', {onclick:'scroll_thumbnails( 1 );return(false);',href:'#'}, [Builder.node('img', {src:picture_changer_next_img})])]);
		ul.appendChild( li );
	}

	var div = Builder.node('div',{id:thumbnail_container_id,className:'thumbnail_0'});
	div.appendChild( ul );
	//div.appendChild( Builder.node( 'ul',{id:thumbnail_container_id,className:'thumbnail_0'}) );
	picture_changer_parent.appendChild( div );

	log_debug( 'create_thumbnail_container( ' + thumbnail_container_id + " ) set the innerHTML of our overall container element to:\n" + picture_changer_parent.innerHTML.replace( /</g, '&lt;' ) );
	return( 0 );	// all ok
}

var preload_buffer = Array();	///< Used by init_auto_changer() to preload the images so that the user gets smooth image transitions

/**
 * thumbnails_visible_cnt == how many thumbnails can be shown without scrolling - ie used to determine whether to show the nav images
 */
function init_auto_changer( container_base_id, image_list_array, container_count, thumbnail_container_id, fade_time, change_interval, thumbnails_visible_cnt, nav_prev_img, nav_next_img, sequential_changers, debug_element_id )
{
	// setup the global vars with the supplied data
	picture_changer_img_base_id = container_base_id;
	picture_changer_image_list = image_list_array;
	picture_changer_count = container_count;
	picture_changer_fade_time = fade_time;
	picture_changer_interval = change_interval;
	picture_changer_thumbnail_container_id = thumbnail_container_id;
	picture_changer_sequential_changer = sequential_changers;

	active_changer = 0;	// start with the first changer
	
	if( (debug_element_id != null) && (debug_element_id != '') )
		debug_target = document.getElementById(debug_element_id);

	/* Check whether we are running locally - if so, amend the paths appropriately */
	if( window.location.href.substr( 0, 5 ) == 'file:' )
	{
		var new_root = '';

		if( window.location.href.indexOf( 'design-construction') >= 0 )
			new_root = '../';
		//alert( 'local:' + new_root );
		for( var i=0; i<container_count; i++ )
		{
			for( var j=0; j<picture_changer_image_list[i].length; j++ )
			{
				//alert( '[' + i + '][' + j + ']: '  + picture_changer_image_list[i][j][0] );
				picture_changer_image_list[i][j][0] = new_root + picture_changer_image_list[i][j][0].toString().substr( 1, 99 );
			}
		}
	}

	picture_changer_total_img_count = 0;
	for( var i=0; i<picture_changer_count; i++ )
	{
		// setup the toggles for each changer
		top_img[i] = 0;
		bottom_img[i] = 1;
		curr_img[i] = 0;

		
		next_img[i] = get_next_picture_changer_img_id( i );

		// preload the images and calculate the total number of them
		for( var j=0; j<picture_changer_image_list[i].length; j++ )
		{
			preload_buffer[picture_changer_total_img_count] = new Image();
		       	preload_buffer[picture_changer_total_img_count].src = picture_changer_image_list[i][j][0];
			picture_changer_total_img_count++;
		}
	}
	if( thumbnails_visible_cnt != null )
		picture_changer_thumbnails_visible_cnt = thumbnails_visible_cnt;

	if( picture_changer_total_img_count > picture_changer_thumbnails_visible_cnt )
	{	// need the nav elements - if supplied
		if( nav_prev_img != null )
			picture_changer_prev_img = nav_prev_img;
	
		if( nav_next_img != null )
			picture_changer_next_img = nav_next_img;
	}
	

	if( thumbnail_container_id != '' )
	{	// using thumbnails too
		log_debug( 'thumbnail_container_id == \'' + thumbnail_container_id + "\'\n" );
		if( container_count > 1 )
		{
			log_debug( "ERROR: cannot currently use thumbnails when driving more than one changer\n" );
			thumbnail_container_id = '';
		}
		else
		{
			var ret_val = create_thumbnail_container( thumbnail_container_id );
			if( ret_val < 0 )
				thumbnail_container_id = '';
			picture_changer_thumbnail_container_id = thumbnail_container_id;
		}
	}
	else
		log_debug( "Not using a thumbnail container\n" );


	// timeout set to the 100% opacity time for the images
	timer_id = setTimeout( 'auto_swap_image()', (picture_changer_interval-(picture_changer_fade_time*1000)) );
	log_debug( 'total image count == ' + picture_changer_total_img_count + "\n" );
}