/*
 * Name: scroller.js
 * URL: http://lukees.com/project/scroller
 * Description: Creates a box with scrolling pages.
 * 
 * Author: Luke Seeley
 * Email: luke@lukees.com
 * 
 * ------------------------------------------------------- */

// Set Up
var numPages = 2;
var currentPage = "page1";
var currentClientName = "";
var pageWidth = "820px";
var pageHeight = "420px";

/* Initiates the scroller nav events */
function initScroller() {
	setupScroller();
	setProjectName();
	
	var scroll = new Fx.Scroll('scroller', {
		wait: false,
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	});	

	// Set slider navigation NEXT link onclick events	
	$('nextClient').addEvent('click', function(event) {
		currentPage = getNextPage();
		event = new Event(event).stop();
		scroll.toElement(currentPage);
		currentClientName = $(currentPage).className.split('page ')[1];
		setClientName();
	});
}

/* Returns the next page */
function getNextPage() {
	var number = parseInt(currentPage.split('page')[1]);
	return (number < numPages)? "page" + ++number : "page1";
}

/* Fades in/out client name */
function setClientName() {
	new Fx.Style('clientName', 'opacity').start(1,0);
	setTimeout("showClientName()",500);
}

function showClientName() {
	$('clientName').innerHTML = currentClientName;
	new Fx.Style('clientName', 'opacity').start(0,1);
}

/* Adds IDs to the pages and page nav links */

function setupScroller() {
	var pages = $ES('div.page','scroller');
	
	numPages = pages.length;
	
	// Set page IDs and dimensions
	for(var j=0; j<pages.length; j++) {
		var left = j * parseInt(pageWidth.split(/px/)[0]);
		pages[j].id = "page" + (j+1);
		pages[j].setStyles({'width':pageWidth,'height':pageHeight,'left':left,'top':'0px'});
	}

	// Set Scroller and page-content Dimensions
	$('scroller').setStyles({'width':pageWidth, 'height':pageHeight});
	$('scroller-frame').setStyles({'width':pageWidth, 'height':pageHeight});
	
	currentClientName = $ES('div.page','scroller')[0].className.split('page ')[1];
}

function setProjectName() {
	$('clientName').innerHTML = currentClientName;	
}