/*
 * Title:	pictures.js
 * Author:	Peter Sterling
 * URI:		http://www.sterling-adventures.co.uk/
 * Date:	17 August 2007
 * Version:	1.0 Initial version.
 *			2.0 Added image_reveal to only act when the new image has been loaded (see picture.php).
 *			3.0 Fixed slideshow playback to note that show has been stopped even when a timed AJAX request already queued.
 *			3.1 Cope with users skipping images during slideshow playback.
 *			3.2 Cope with multiple timers from multiple user clicks.
 * Purpose:	Javascript to manage the Sterling Images Archive display.
*/

var current_play_state = 'pause';	// Remember the state of "play" for the slideshow.
var player_timer;					// Timer handle for playback.


// Function to reveal a newly loaded image.
function reveal_image()
{
	opacity('pic', 0, 100, 500);
	start_image_rating('pic_content');
	addReflections();
	if(current_play_state == 'play') player_timer = setTimeout("get_timed_image()", 4000);
}


// Get image if still playing...
function get_timed_image()
{
	if(current_play_state == 'play') get_image('next');
}


// Changed displayed image.
function get_image(direction)
{
	opacity('pic', 100, 0, 500);
	setTimeout("ajax_request('picture.php?dir=" + direction + "', update_picture)", 501);
}


// Navigate to new image.
function switch_nav(id, color)
{
	var o = document.getElementById(id);
	o.src = "img/" + id + "_" + color + ".png";
	if(color == 'white') {
		setTimeout("switch_nav('" + id + "', 'black')", 200);
		get_image(id);
	}

	if(current_play_state == 'play') stop_playback();
}


// Stop slideshow playback.
function stop_playback()
{
	clearTimeout(player_timer);
	set_playback_state('pause', 'Start Slideshow');
}


// Set state of playback.
function set_playback_state(state, txt)
{
	var o = document.getElementById('action');
	o.title = txt;
	o.src = "img/" + state + ".png";
	current_play_state = state;
}


// Change the state of "play".
function do_action()
{
	if(current_play_state == 'pause') {
		set_playback_state('play', 'Pause Slideshow');
		get_image('next');
	}
	else if(current_play_state == 'play') stop_playback();
}


// Fade image in or out.
function opacity(id, opacStart, opacEnd, millisec)
{
	// Speed for each frame.
	var speed = Math.round(millisec / 100);
	var timer = 0;

	// Determine the direction for the blending, if start and end are the same nothing happens.
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("change_opacity(" + i + ",'" + id + "')", (timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++) {
			setTimeout("change_opacity(" + i + ",'" + id + "')", (timer * speed));
			timer++;
		}
	}
}


// Change the opacity for different browsers.
function change_opacity(opacity, id)
{
	var object = document.getElementById(id).style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}


// Update the picture when the AJAX response has been received.
function update_picture(txt)
{
	var o = document.getElementById('pic_content');
	o.innerHTML = txt;
	change_opacity(0, 'pic');
}


// AJAX requst handler.
function ajax_request(url, func)
{
	var req;

	if(window.XMLHttpRequest) req = new XMLHttpRequest();
	else if(window.ActiveXObject) {
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}

	if(func) req.onreadystatechange = function() {
		if(req.readyState == 4 && req.status == 200) {
			func(req.responseText);
		}
	};

	req.open('GET', url, true);
	req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	req.setRequestHeader('If-Modified-Since', 'Wed, 15 Nov 1995 00:00:00 GMT');
	if(req.overrideMimeType) req.overrideMimeType("text/xml");
	req.send(null);
}