/*

photo-flick

(C) Jon Gibbins (a.k.a. dotjay)

incorporates scheduling kludge (thanks to Cameron Adams, aka The Man in Blue)
http://www.themaninblue.com/writing/perspective/2004/09/29/
via Patrick Lauke, aka redux
http://www.splintered.co.uk/experiments/

*/



// photo flick variables

var flick_element_id = 'photo-flick';
var flick_class_name = 'flick';
var flick_element;
var flick_image_heights;
var flick_position_x = 0; // pixels
var flick_position_y = 0; // pixels
var flick_position_step = -100; // pixels
var flick_delay = 0.5; // seconds
var pause_start_class_name = 'pause-start';
var pause_stop_class_name = 'pause-stop';
var flick;
var pause;



// scheduling kludge
preInit();



function preInit() {
	if (document.getElementById && (flick_element = document.getElementById(flick_element_id))) {
		flick_element.style.visibility = "hidden";
		clearTimeout(preInitTimer);
	} else preInitTimer = setTimeout("preInit()",2);
}



// detect IE5/Mac
var isMacIE = (navigator.userAgent.indexOf('MSIE 5') != -1
	&& navigator.userAgent.indexOf('Mac') != -1);

// checks support for W3C DOM
/* - Example -
// do not continue if not supported
if (!supportsW3CDOM()) return;
*/
function supportsW3CDOM() {
	return !isMacIE
		&& document.getElementById
		&& document.getElementsByTagName
		&& (document.createElement || document.createElementNS);
}

// generic onload event function by Simon Willison, http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') window.onload = func;
	else {
		window.onload = function() {
			if (oldonload) oldonload();
			func();
		}
	}
}

// create elements function to circumvent XHTML/DOM compliance
function createElement(element) {
	element = element.toLowerCase();
	if (typeof document.createElementNS != 'undefined')
		return document.createElementNS('http://www.w3.org/1999/xhtml', element);
	if (typeof document.createElement != 'undefined')
		return document.createElement(element);
	return false;
}

// add class name to element
function addClass(element,value) {
	if (typeof element.className != 'undefined') {
		if (!element.className) element.className = value;
		else element.className = element.className + " " + value;
	}
	else {
		if (!element.getAttribute("class")) element.setAttribute("class",value);
		else element.setAttribute("class",element.getAttribute("class") + " " + value)
	}
}

function replaceClass(element,old_value,new_value) {
	if (typeof element.className != 'undefined') {
		// check to see if has a class
		if (!element.className) return false;

		// get the class attribute
		var class_attr = element.className;
	}
	else {
		// check to see if has a class
		if (!element.getAttribute("class")) return false;

		// split the class names
		var class_attr = element.getAttribute("class");
	}

	// split the class names
	var class_names = element.className.split(" ");
	var new_class_name = '';
	for (i = 0;i < class_names.length;i++) {
		if (class_names[i] = old_value) class_names[i] = new_value;
		new_class_name += class_names[i] + " ";
	}

	if (typeof element.className != 'undefined') element.className = new_class_name.substring(0,(new_class_name.length - 1));
	else element.setAttribute("class",new_class_name.substring(0,(new_class_name.length - 1)));

	return true;
}

function insertAfter(new_element,target_element) {
	var parent = target_element.parentNode;
	if (parent.lastChild == target_element) parent.appendChild(new_element);
	else parent.insertBefore(new_element,target_element.nextSibling);
}

// initiates the photo flick
function initPhotoFlick() {
	if (!supportsW3CDOM()) return;

	// scheduling kludge
	preInit();

	// calculate flicker rate
	var flicker_rate = Math.round(100 / flick_delay) / 100;

	// display warning if rate is considered an issue
	if ((flicker_rate > 3) && (flicker_rate < 60)) alert('Warning: The flicker rate for the "photo flick" is: '+flicker_rate+'Hz. This could cause a seizure for those susceptable.');

	// get our flick element
	flick_element = document.getElementById(flick_element_id);

	// set class to give our flick window (dimensions set in CSS)
	addClass(flick_element,flick_class_name);

	var flick_images = flick_element.getElementsByTagName("img");

	// check we only have one image
	if (flick_images.length == 1) {
		var flick_image = flick_images[0];

		// ensure the image has no padding (Internet Explorer adds this to the image height)
		flick_image.style.padding = "0";

		// set the background image
		flick_element.style.backgroundImage = "url("+flick_image.src+")";
		flick_element.style.backgroundRepeat = 'no-repeat';
		flick_element.style.backgroundPosition = flick_position_x+'px '+flick_position_y+'px';

		// we need to know when the full height of the image is reached
		flick_image_heights = flick_image.height;

		// add pause behaviour
		var pause_link = createElement("a");
		pause_link.setAttribute("href","#"+pause_stop_class_name);
		addClass(pause_link,pause_stop_class_name);
		pause_link.appendChild(document.createTextNode("stop"));
		pause_link.onclick = function () {
				if (pause) {
					pause = false;
					this.lastChild.nodeValue = "stop";
					replaceClass(this,pause_start_class_name,pause_stop_class_name);
					this.setAttribute("href","#"+pause_stop_class_name);
					window.setTimeout("photoFlick()", (1000 * flick_delay))
				} else {
					pause = true;
					this.lastChild.nodeValue = "start";
					replaceClass(this,pause_stop_class_name,pause_start_class_name);
					this.setAttribute("href","#"+pause_start_class_name);
					clearTimeout(flick);
				}
		}
		if (flick_element.captureEvents) flick_element.captureEvents(Event.CLICK);
		insertAfter(pause_link,flick_image);
	}

	// we don't handle more than one image yet
	else flick_images = null;

	if (flick_images.length > 0) {
		// make image visible again
		flick_element.style.visibility = "visible";

		// start image flicking through
		flick = window.setTimeout("photoFlick()", (1000 * flick_delay));
	}
}

// does the photo flick stuff
function photoFlick() {
	// behaviour
	if (Math.abs(flick_position_y) >= (flick_image_heights + flick_position_step)) flick_position_y = 0;
	else flick_position_y = flick_position_y + flick_position_step;

	// change background position
	flick_element.style.backgroundPosition = flick_position_x+'px '+flick_position_y+'px';

	// repeat
	flick = window.setTimeout("photoFlick()", (1000 * flick_delay));
}

addLoadEvent(initPhotoFlick);