// all the images we are going to use
var frames = new Array( "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg", "images/08.jpg", "images/09.jpg", "images/10.jpg", "images/11.jpg" );
var overlay
var currentFrame;
var dstIndex;

var frameHeight;
var framesToPass = 6;


function showPage( url )
{
	var current = $( 'current' );
	$( 'contentBg' ).setStyle( 'background-repeat', 'no-repeat' );
	var fx = new Fx.Elements( $$( '#contentBg', current ), { duration: 800,
															 onComplete: function()
															  	{
															  		document.location.href = url;
															  	} } );
	var fxp = { 0: { 'opacity': [ 1, 0 ] } };
	if( current != null )
	{
		fxp[ 1 ] = { 'color': [ '#FFFFFF', '#808080' ] };
	}
	fx.start( fxp );	
}


function projectFilm( noFramesToShow )
{	
	var nextFrame = currentFrame + 1;
	if( nextFrame == frames.length )
	{
		nextFrame = 0;
	}

	// first move the spare overlay below & set it to the next image	
	overlay[ 1 ].setStyle( 'background-image', 'url( "' + frames[ nextFrame ] + '" )' );
	
	var trans = Fx.Transitions.linear;
	var delay = 100;
	if( noFramesToShow == 1 )
	{
		trans = Fx.Transitions.Elastic.easeOut;
		delay = 800;
	}

	// now animate this so the next frame becomes the current
	var fx = new Fx.Elements( overlay,
							  {
							  	transition: trans,
							  	duration: delay,
							  	onComplete: function()
							  	{
							  		var tmp = overlay[ 1 ];
							  		overlay[ 1 ] = overlay[ 0 ];
							  		overlay[ 0 ] = tmp;
									
									currentFrame += 1;
									if( currentFrame == frames.length )
									{
										currentFrame = 0;
									}
									
									noFramesToShow--;
									if( noFramesToShow > 0 )
									{
										// scroll some more
										projectFilm( noFramesToShow );
									}
									else
									{
										displayPage();
									}
							  	}
							  } );
	fx.start( { 0: { 'top': [ 0, -frameHeight ] },
    			1: { 'top': [ frameHeight, 0 ] } } );
	
}


function displayPage()
{
	// make background of main page appear
	var contentContainer = $( 'contentContainer' );
	contentContainer.setStyle( 'height', 'auto' );
	
	var content = $( 'content' );
	var no = parseInt( ( content.getSize().scrollSize.y / frameHeight ) + 1 );
	var contentBg = $( 'contentBg' );
	contentBg.setStyle( 'height', no * frameHeight );
	
	var current = $( 'current' );
	var fx = new Fx.Elements( $$( contentBg, content, current ), { duration: 800,
																   onComplete: function() {
																   		$( 'contentBg' ).setStyle( 'background-repeat', 'repeat-y' );

																   } } );
	var fxp = { 0: { 'opacity': [ 0, 1 ] },
				1: { 'opacity': [ 0, 1 ] } };
	if( current != null )
	{
		fxp[ 2 ] = { 'color': [ '#808080', '#FFFFFF' ] };
	}
	fx.start( fxp );	
}


function onPreloadComplete()
{
	// remove any preload graphics
	$$( '#contentContainer .frame' ).each( function( el )
		{
			el.setStyle( 'background-image', 'none' );	
		} );	

	// setup contentContainer to mask off the animation
	var contentContainer = $( 'contentContainer' );
	contentContainer.setStyle( 'height', frameHeight );
	contentContainer.setStyle( 'overflow', 'hidden' );
	
	overlay[ 1 ].setStyle( 'background-image', 'url( "' + frames[ currentFrame ] + '" )' );
	overlay[ 0 ].setStyle( 'background-image', 'url( "' + frames[ currentFrame ] + '" )' );

	projectFilm( framesToPass );
}




function enterPage( imgPath )
{	
	overlay = $$( '.frame' ); 	
	frameHeight = overlay[ 0 ].getStyle( 'height' ).toInt();
	
	// correct all the image paths
	frameCnt = 0;
	frames.each( function( el, index )
		{
			frames[ index ] = imgPath + el;
			frameCnt++;
		} );
	
	// find which image is our destination
	var bgImage = $( 'contentBg' ).getStyle( 'background-image' );
	var pos = bgImage.lastIndexOf( '.jpg' )
	bgImage = bgImage.substr( pos - 2, 2 );
	if( bgImage[ 0 ] == '0' )
	{
		bgImage = bgImage[ 1 ];
	}
	dstIndex = parseInt( bgImage );
	dstIndex--;
	
	// init
	currentFrame = ( dstIndex - framesToPass );
	if( currentFrame < 0 )
	{
		currentFrame = frames.length + currentFrame;
	}
	
	// preload all the images - TODO: theres a bug in this pre-loader on IE7
	var images = new Asset.images( frames, {
		onComplete: onPreloadComplete
		} );
}
	
	
function setupSlimbox()
{
	$$( '.thumbnail-frame a' ).each( function( el )
		{
			el.setProperty( 'rel', 'lightbox[group]' );	
			var url = el.getProperty( 'href' );
			url = url.substr( 0, url.lastIndexOf( '.' ) + 1 );
			el.setProperty( 'href', url + 'jpg' );
		} );
		
	// NOW get slimbox to scan 
	var slimboxInit = Lightbox.init.bind(Lightbox);
	slimboxInit();
}