//*******************************************************************************
//* RotaShow -- a slideshow implemented as unobtrustive JavaScript
//*
//* Target: JavaScript with Prototype (v1.6+) and Scriptaculous (v1.8+)
//* Authors: Brad Garner
//* Version: 0.2
//*
//* Description:
//*  Unobtrusive JavaScript implementation of a selectable image slideshow 
//*
//* Related Files:
//*  rotashow.css
//*
//* Limitations:
//*  Only one rotashow slideshow per page.
//*
//'*******************************************************************************

// Globally-scoped globals
var currentItemNum;
var itemUrls = new Array();
var itemTitles = new Array();


function rotashowSwap(newItemNum) {
    var selector = $("rotaShowSelector");
    var divArea = $("rotaShowDiv");
    var img = divArea.select('img')[0];
    var title = $("rotaShowTitle");

    var selections = selector.select('a');
    var a = selections[newItemNum];

    var newUrl = itemUrls[newItemNum];
    var newTitle = itemTitles[newItemNum];

    img.src = newUrl;
    title.innerHTML = newTitle;

    currentItemNum = newItemNum;

    rotashowUpdateSelector();
}

function rotashowPrevious() {
    var newItemNum;

    if (currentItemNum > 0) {
	newItemNum = currentItemNum - 1;
    } else {
	newItemNum = itemUrls.length - 1;
    }

    rotashowSwap(newItemNum);
}

function rotashowNext() {
    var newItemNum;

    if (currentItemNum < itemUrls.length-1) {
	newItemNum = currentItemNum + 1;
    } else {
	newItemNum = 0;
    }

    rotashowSwap(newItemNum);
}

function rotashowUpdateSelector() {
    var selector = $("rotaShowSelector");
    var divArea = $("rotaShowDiv");
    var img = divArea.select('img')[0];
    var currentSrc = img.src;

    var selections = selector.select('a');
    for (var j=0; j<selections.length; j++) {
	var a = selections[j];

	if (j == currentItemNum) {
	    a.className = "rotabuttonselected";
	} else {
	    a.className = "rotabutton";
	}
    }
}

// Event handler that inits the slideshow
function rotashowInit() {
    var selector = $("rotaShowSelector");
    var title = $("rotaShowTitle");
    var divArea = $("rotaShowDiv");
    var img = divArea.select('img')[0];
    var currentSrc = img.src;

    // Left nav arrow
    //    var span = new Element('span', { 'class': 'arrowLeft',
    //				     'onclick': "rotashowPrevious()",
    //				     'title': 'previous' }).update('&nbsp;');
    //    selector.appendChild(span);

    // Process each list item
    var selections = selector.select('a');
    for (var j=0; j<selections.length; j++) {
	var a = selections[j];
	var href = a.href;
	var title = a.title;

	// Store info about photo
	itemUrls[j] = href;
	itemTitles[j] = title;

	a.href = "javascript:rotashowSwap(" + j + ")";
	a.className = "rotabutton";
    }

    // Right nav arrow
    //    var span = new Element('span', { 'class': 'arrowRight',
    //				     'onclick': "rotashowNext()",
    //				     'title': 'next' }).update('&nbsp;');
    //    selector.appendChild(span);

    rotashowSwap(0);

    // Make rotaShow selector appear.
    selector.style.display = 'block';
}

// On-page-load event registration
Event.observe(window, 'load', rotashowInit);