/**************************************************************************************************************
 *
 *  Vertical Preview Cycle
 *
 *  Designed and written by Jonathan Skeen (3 December 2007)
 *  Powered by MooTools (http://www.mootools.net)
 *-------------------------------------------------------------------------------------------------------------
 *	This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 United 
 *	States License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/us/ 
 *	or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
 *
 *	Now, would you kindly leave this header in any copies, distributions, or derivatives of this work?
 **************************************************************************************************************/
 

var items = Array();						/* Array to hold the cycling elements 					*/
var top = 0;								/* index of the top most element in the array 			*/
var h = 50;									/* the distance between "tops" 							*/
var slideTime = 500;						/* the time (in milliseconds) for the slide transition 	*/
var locked = false;							/* a lock to use while cycling - keeps things tidy		*/


/* When the DOM finishes loading, initialize the cycle */
window.addEvent('domready', function() {
		init();
	});


/**
 * Initialize the cycle
 * 		- get an array of all the items to cycle
 *		- add click event listeners to the up/down buttons
 *		- set the elements evenly in the cycle div
 */
 function init() {
	items = $$('.cycleitem');

	$('cycleup').addEvent('click', function() {
			cycleUp();
		});
	$('cycledown').addEvent('click', function() {
			cycleDown();
		});

	// position the elements
	for (i=0; i<items.length; i++) {		
		items[i].setStyle('top', i * h);		
	}

	items[top].setStyle('border', 'solid 1px #fff');

} // end init

/**
 * Fades the main image to full transparency 
 */
function fadeOut() {
	new Fx.Style('fpimage', 'opacity', {duration:slideTime}).start(1,0);
}

/**
 * Fades the main image to full opacity
 */
function fadeIn() {
	new Fx.Style('fpimage', 'opacity', {duration:slideTime}).start(0,1);
}

/**
 * Cycles the elements up one position
 */
function cycleUp() {

	// make sure the cycle isn't already in motion
	if (locked == false) {

		fadeOut();

		// lock the cycle
		locked = true;

		// Slide all elements except the top up one spot
		for (i=0; i<items.length; i++) {
			items[i].setStyle('border', 'none');		
			if (i != top) {
			
				// get the initial top value - note we have to strip "px" from the value before use
				startTop = parseInt(items[i].getStyle('top').replace(/px/g, ''));
				endTop = startTop - h;
				
				// set the z-idex to 1 - this will keep it above of any elements moving down
				items[i].setStyle('z-index', 1);
				new Fx.Style(items[i], 'top', {duration:slideTime}).start(startTop, endTop);
			}
		}

		// set the z-index to 0 - this will allow it to slide behind all the other elements
		items[top].setStyle('z-index', 0);

		// Slide the top element to the bottom
		// note the chained function on the end - this releases the lock AFTER the slide has finished
		new Fx.Style(items[top], 'top', { duration:slideTime })
					.start(0, ((items.length -1) * h))
				  	.chain(function() {
						top = (top + 1) % items.length;
						items[top].setStyle('border', 'solid 1px #fff');
						$('fpimage').setProperty('src', loadedImages[top].src);
						fadeIn();
						locked = false;
					});
	} // end if unlocked

} // end cycleUp


/**
 * Cycles the elements down one position
 */
function cycleDown() {

	if (locked == false) {
	
		locked = true;
		
		fadeOut();
	
		// find the index of the bottom element
		bottom = top - 1;
		if (bottom < 0)
			bottom = items.length-1;
	
		// Slide all elements except the bottom down one spot
		for (i=0; i<items.length; i++) {		
			items[i].setStyle('border', 'none');
			if (i != bottom) {
				startTop = parseInt(items[i].getStyle('top').replace(/px/g, ''));
				endTop = startTop + h;
				items[i].setStyle('z-index', 1);
				new Fx.Style(items[i], 'top', {duration:slideTime}).start(startTop, endTop);
			}
		}

		// set the z-index to 0 - this will allow it to slide behind all the other elements
		items[bottom].setStyle('z-index', 0);

		// Slide the bottom element to the top
		// again, the chained function releases the lock after the sliding is finished
		startTop = items[bottom].getStyle('top').replace(/px/g, '');
		new Fx.Style(items[bottom], 'top', {duration:slideTime})
					.start(startTop, 0)
					.chain(function() {
						top = bottom;
						items[top].setStyle('border', 'solid 1px #fff');
						$('fpimage').setProperty('src', loadedImages[top].src);
						fadeIn();
						locked = false;
					});
		
	} // end if unlocked
	
} // end cycleUp