var boxHeight = 0;
var viewHeight = 404;
var fromBottom = 0;
var maxScroll;
var direction;
var interval;
var scroll_is_on = 0;
var frameRate = 1000 / 48;
var	frameSize = 5;
var upArrow = "off";
var downArrow = "off";
var currentSlide = 1;
var storyBook = getQuerystring( "s", 0 );

var slideshow_active = 0;
var slideshow_interval = 0;

function arrowState( thisArrow, direction ) {
	state = "on";
	if ( thisArrow == "up" ) {
		imgID = "upArrow";
		if ( fromBottom == 0 ) {
			state = "off";
		}
	} else {
		imgID = "downArrow";
		if ( fromBottom == maxScroll ) {
			state = "off";
		}
	}

	if ( ( state == "on" ) && ( direction == thisArrow ) && ( scroll_is_on == 1 ) ) {
		state = "scrolling";
	}

	document.getElementById( imgID ).src = "graphics/" + imgID + "_" + state + ".png";
}

function replaceElement( hide, reveal ) {
	document.getElementById( hide ).style.display = "none";
	document.getElementById( reveal ).style.display = "block";
}

function scrollElement( elementID, frameSize, direction ) {
	if ( direction == "down" ) {
		fromBottom += frameSize;
	} else {
		fromBottom -= frameSize;
	}

	if ( fromBottom < 0 ) {
		fromBottom = 0;
	} else if ( fromBottom > maxScroll ) {
		fromBottom = maxScroll;
	}

	document.getElementById( elementID ).style.marginTop = ( 0 - fromBottom ) + "px";

	if ( ( fromBottom == 0 ) || ( fromBottom == maxScroll ) ) {
		stopScroll();
	}
	
	arrowState( "up", direction );
	arrowState( "down", direction  );
}

function startScroll( elementID, direction ) {
	if ( boxHeight == 0 ) {
		boxHeight = document.getElementById( elementID ).offsetHeight;
		if ( boxHeight > viewHeight ) {
			maxScroll = boxHeight - viewHeight;
		}
	}

	scroll_is_on = 1;
	interval = setInterval( "scrollElement( '" + elementID + "', " + frameSize + ", '" + direction + "' );", frameRate );
}

function stopScroll( direction ) {
	clearInterval( interval );
	scroll_is_on = 0;
	arrowState( direction, direction );
}

function slideshow( id ) {
	if ( slideshow_active == 0 ) {
		startSlideshow( id );
	} else {
		stopSlideshow();
	}
}

function startSlideshow( id ) {
	if ( slideshow_active == 0 ) {
		document.getElementById("slideshowButton").firstChild.nodeValue='pause slideshow';
		slideshow_active = 1;
	}
	slideshow_interval = setInterval( "showSlide( '" + id + "', '+' );", 5000 );
}

function stopSlideshow() {
	if ( slideshow_active == 1 ) {
		document.getElementById("slideshowButton").firstChild.nodeValue='start slideshow';
		clearInterval( slideshow_interval );
		slideshow_active = 0;
	}
}

function shuttleSlide( id, val ) {
	stopSlideshow();
	showSlide( id, val );
}

function showSlide( id, val ) {
	if ( val == "+" )	{
		nextSlide = parseInt( currentSlide + 1 );
	} else if ( val == "-" ) {
		nextSlide = parseInt( currentSlide - 1 );
	} else {
		stopSlideshow();
		if ( isNaN( val ) )	{
			nextSlide = currentSlide;
		} else {
			nextSlide = parseInt( val );
		}
	}

	if ( currentSlide != nextSlide ) {
		newSRC = "?";
		if ( storyBook != 0 ) {
			newSRC += "s=" + storyBook + "&";
		}
		newSRC += "i=" + nextSlide;

		document.getElementById( id ).src = newSRC;
		currentSlide = nextSlide;
	}
}

function getQuerystring( key, default_ ) {
	if ( default_ == null ) default_ = "";

	key = key.replace( /[\[]/,"\\\[" ).replace( /[\]]/,"\\\]" );
	var regex = new RegExp( "[\\?&]" + key + "=([^&#]*)" );
	var qs = regex.exec( window.location.href );
	if( qs == null )
		return default_;
	else
		return qs[1];
}