// <![CDATA[
// colours: b:336699 g:cc9933 t:339999

/*
========================
This is the work of Bill Hibbert. You're free to copy it as you wish, but please
give me a credit, and a link back to www.billhibbert.com. There will be changes.
If you use any part of it, I accept no responsibility for any problems it may cause.
I would be interested to hear of any comments/suggested improvements - I'm a beginner
and the problem is harder than it looks...
========================
*/

// short forms
YUD = YAHOO.util.Dom;
YUE = YAHOO.util.Event;
var $ = YUD.get;

function init()
{	YUE.on('picSet', 'mousemove', mouseX);
	YUE.on('picSet', 'mouseout', stopScroll); // there are a lot of these - too many
	YUE.on('picSet', 'click', doClick);
	YUE.on('centreIcon', 'mousedown', rewind);
	YUE.on('centreIcon', 'mouseup', rewound);
	YUE.on('centreIcon', 'mouseover', rollover);
	YUE.on('centreIcon', 'mouseout', rewound);
	YUE.on('hName', 'mouseover', bright);
	YUE.on('hName', 'mouseout', dull);
	YUD.setStyle('hName', 'color', '#ff6600');
	loadPics();
}
function bright(e)
{	YUD.setStyle('hName', 'color', '#3399cc');
	$('hName').firstChild.nodeValue='bill hibbert';
}
function dull(e)
{	YUD.setStyle(this, 'color', '#ff6600');	
	$('hName').firstChild.nodeValue='one a day';
}
// photo handling - no of thumbnails and no of slots to show them in
var	nPics = 66;
var nSlots = 10; // visible initially
//console.profile();
// load the pictures
function loadPics()
{	// load a thumbnail into each img slot
	var i = 0;
	YUD.getElementsByClassName("thumb", "img", "picSet", function ()
	{	this.setAttribute("src", 'images/thumbs/t-' + i++ + '.png');
	} );
	YUD.setStyle("centreIcon", "opacity", 0);
	showPic(Math.floor(Math.random()*nPics)); // show a random image
}
// placeholder functions until pictures come from server
function getNextPic(after)
{	var n = +after.substring(after.lastIndexOf('-')+1, after.lastIndexOf('.'));
	return 'images/thumbs/t-' + ++n%nPics + '.png';
}
function getPreviousPic(before)
{	var n = +before.substring(before.lastIndexOf('-')+1, before.lastIndexOf('.'));
	return 'images/thumbs/t-' + ((--n < 0) ? nPics-1 : n) + '.png';
}
// show Big picture
function showPic(num)
{	$('bigPhoto').src = 'images/jpegs/j-' + num + '.jpg';
	$('tFrame').src = 'images/texts/w-' + num + '.htm';
}
var rewindTimer;
function rewind(e)
{	this.src = 'images/ball4_blue.png';
	var el = $('picSet');
	YUE.removeListener(el, 'mousemove', mouseX);
	YUE.removeListener(el, 'mouseout', stopScroll);
	YUE.removeListener(el, 'click', doClick);
	YUE.removeListener('centreIcon', 'mousedown', rewind);
	moveSz = 20;
	offsetX = -1;
	rewindTimer = setInterval(rewind2, 5);
}
function rewind2(e)
{	var el = $('pic0');
	var p = +el.src.slice(el.src.lastIndexOf('-')+1, -4);
	var pos = +el.style.left.slice(0, -2);
	if (p == nPics-1 && pos+thumbSz < thumbSz/3)
	{	clearInterval(rewindTimer);
		moveSz = thumbSz + pos;
		YUE.on('picSet', 'mousemove', mouseX);
		YUE.on('picSet', 'mouseout', stopScroll);
		YUE.on('picSet', 'click', doClick);
		YUE.on('centreIcon', 'mousedown', rewind);
	}
	scrollThumbs();
}
function rewound(e)
{	this.src = 'images/ball4_teal.png'; }
function rollover(e)
{	this.src = 'images/ball4_gold.png';	}

// ========================================================
// set scroll speed and direction from mouse move
// Yahoo: 'this' is the object; e is the event
var moveDelay = 10; // time between scrolls
var scrollTimer = 0; // control for timer
var moveSz = 0; // distance to move in px
var offsetX; // +- offset of mouse from centre (= speed & direction)
// ========================================================
var steps = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16 ];
var opacity = [ 1.0, 1.0, 0.9, 0.8, 0.7, 0.7, 0.6, 0.5, 0.4, 0.2, 0, 0, 0 ];
function mouseX(e) // get mouse pos relative to centre of window
{//	console.time('mouseX');
	var centreX = 480; // centre of window
	offsetX = centreX - Math.min(YUE.getPageX(e), 960); // 0: centre; -ve: cursor R, pics go L; +ve: cursor L, pics go R
	var change = Math.floor(Math.abs(offsetX/40));
	YUD.setStyle("centreIcon", "opacity", opacity[change]); // centre = slower = darker = higher rate
	moveSz = steps[change];
	if (moveSz > 0)	// ie scroll requested
	{	if (!scrollTimer)
		{ scrollTimer = setInterval(scrollThumbs, moveDelay); } // start scroll
	}
	else // stop scroll
	{	stopTimer();	}
//	console.timeEnd('mouseX');
//	console.log('offsetX: %d change: %d moveSz: %d', offsetX, change, moveSz);
}
// this function is a mess: three browsers all report different results
// eg opera fires on mouseMove, explorer returns undef relatedTarget
function stopScroll(e) // from mouseOut
{	var relTarget = e.relatedTarget || e.toElement;
	if (!relTarget || relTarget.nodeName != "IMG") // if no relTarg, use toElement (explorer only)
	{	stopTimer();	}
}
function stopTimer()
{	if (scrollTimer)
	{	clearInterval(scrollTimer);
		scrollTimer = 0;
	}
	moveSz = 0;
}

// ========================================================
// Entered on interval timer
// See US patent 7071919 for details of similar MS technique
// MS technique describes use of click rather than simple hovering.
var	thumbSz = 96; // thumb width (and height) in pixels
var preP = nPics - nSlots; // thumbnail preload count
// ========================================================
function scrollThumbs(e)	// scroll picSet
{	var lastPic, lastPicPos, firstPic, firstPicPos, nextPic, prevPic;
//	alert('scrollThumbs, offsetX: '+offsetX + 'moveSz: '+moveSz);
	if (offsetX < 0) // pics going left
	{	firstPic = $('pic0');
		firstPicPos = firstPic.style.left;
		firstPicPos = +(firstPicPos.slice(0, -2));
		if (firstPicPos + thumbSz <= 0) // then pic0 has moved out of view
		{	nextPic = YUD.getNextSiblingBy(firstPic, function() { return (true); } );
			firstPic.parentNode.removeChild(firstPic); // so replace it
			nextPic.id = 'pic0';
		}
		lastPic = $('picn');
		lastPicPos = lastPic.style.left; // string
		lastPicPos = +(lastPicPos.slice(0, -2)); // int
		if (lastPicPos < (nSlots-1)*thumbSz + moveSz) // then need to add right
		{	newPic = lastPic.cloneNode(false);
			newPic.src = getNextPic(lastPic.src);
			lastPic.id = '';
			newPic.id = 'picn';
			newPic.style.left = (lastPicPos + thumbSz) +'px'; // and back to a string
			newPic = YUD.insertAfter(newPic, lastPic);
			if (preP > 0) // preload to browser cache at startup
			{	var pp = $('iPic');
				pp.src = getNextPic(newPic.src);
				--preP;
			}
		}
		YUD.getElementsByClassName("thumb", "img", "picSet", function ()
		{ this.style.left = +(this.style.left.slice(0, -2)) - moveSz + "px"; } );
	}
	else if (offsetX > 0) // pics going R
	{	lastPic = $('picn');
		lastPicPos = +(lastPic.style.left.slice(0, -2)); // int
		if (lastPicPos >= nSlots*thumbSz) // then need to remove it
		{	prevPic = YUD.getPreviousSiblingBy(lastPic, function() { return (true); } );
			lastPic.parentNode.removeChild(lastPic);
			prevPic.id = 'picn'; // new last node
		}
		firstPic = $('pic0');
		firstPicPos = +(firstPic.style.left.slice(0, -2));
		if (firstPicPos + moveSz > 0) // then need to add left
		{	newPic = firstPic.cloneNode(false);
			newPic.src = getPreviousPic(firstPic.src);
			firstPic.id = '';
			newPic.id = 'pic0';
			firstPicPos -= thumbSz;
			newPic.style.left = firstPicPos +'px';
			newPic = YUD.insertBefore(newPic, firstPic);
			if (preP > 0) // preload to browser cache at startup
			{	var pp = $('iPic');
				pp.src = getPreviousPic(newPic.src);
				--preP;
			}
		}
		YUD.getElementsByClassName("thumb", "img", "picSet", function ()
		{ this.style.left = +(this.style.left.slice(0, -2)) + moveSz + "px"; } );
	}
}

function doClick(e)
{	var theTarget = (e.target) ? e.target : e.srcElement;
	showPic(theTarget.src.substring(theTarget.src.lastIndexOf("/")+3, theTarget.src.lastIndexOf('.')));
}
//console.profile();
// ]]>