/*
if (document.images)
{
  pic1= new Image( 400, 100 );
  pic1.src="images/oval.gif";

  pic2= new Image( 500, 100 );
  pic2.src="images/rectangle.gif";

  pic3= new Image( 300, 100 );
  pic3.src="images/poly.gif";

  pic4= new Image( 252, 64 );
  pic4.src="images/banner2.jpeg";

  pic5= new Image( 300, 80 );
  pic5.src="images/loading.gif";
}
*/

/*
if (document.images)
{
  pic1= new Image( 450, 320 );
  pic1.src="images/bruu_004.jpg";

  pic2= new Image( 450, 320 );
  pic2.src="images/bruu_006.jpg";

  pic3= new Image( 450, 320 );
  pic3.src="images/bruu_007.jpg";

  pic4= new Image( 450, 320 );
  pic4.src="images/bruu_009.jpg";

  pic5= new Image( 450, 320 );
  pic5.src="images/loading.gif";
}


window.onload	= function()
	{
		x	= new objImageCycle;
		x.setInstanceName( 'x' );
		x.setDivId( 'pixContainer' );
		x.setImgId( 'pixImage' );
		x.addImage( pic4.src	, pic4.width, pic4.height	);	// Shown only at the end
		x.addImage( pic1.src	, pic1.width, pic1.height	);
		x.addImage( pic2.src	, pic2.width, pic2.height	);
		x.addImage( pic1.src	, pic1.width, pic1.height	);
		x.addImage( pic3.src	, pic3.width, pic3.height	);
		x.getNextImage();


//x.addImageSet( [ 'oval.gif', 'rectangle.gif', 'banner2.jpeg' ] );
	}
*/


/******************************************************************************/

function	objImageCycle()
{
var	aImg	= new Array( );
var	aImgSet	= new Array( );
var	nHoldSeconds	= 3;
var	nFadeSeconds	= 0.5;
var	iCycleCount		= 12;


var	nOpacity		= 100;	// Initial value
var	nThisX;//		= 400;
var	nThisY;//		= 400;
var	iImageCount		= 0;
var	iImageSetCount	= 0;
var	iIndexNext		= 1;	// Should match the index of the image already in the image element
var	sInstanceName	= '';
var	nDeltaOpacity;//	= 0;
var	nDeltaX;
var	nDeltaY;
var	iStepsToFade;
var	iStepsToShape;


	this.setDivId	= function( _sId )
						{
							oDiv	= document.getElementById( _sId );
							if( typeof oDiv !== 'object' )
							{
								alert( 'The given id name "' + _sId + '" does not reference an object.'	);
								return	false
							}
						}
	this.setImgId	= function( _sId )
						{
							oImg	= document.getElementById( _sId );
							if( typeof oImg !== 'object' )
							{
								alert( 'The given id name "' + _sId + '" does not reference an object.'	);
								return	false
							}
						}
	this.addImage	= function( _sFileSpec, _iWidth, _iHeight )
						{
							iImageCount			= aImg.length;
							aImg[ iImageCount ]	= new Object;
							aImg[ iImageCount ].url		= _sFileSpec;
							aImg[ iImageCount ].width	= _iWidth;
							aImg[ iImageCount ].height	= _iHeight;
/*
							x	= new Image();
							x.src	= _sFileSpec;
*/
							iImageCount++;
						}

	this.addImageSet	= function( _aSrc )
						{
							iImageSetCount				= aImgSet.length;
							aImgSet[ iImageSetCount ]	= new Object;
						var ip2		= new ImagePreloader
									(	addImageSet.arguments
									,	this.onPreloadSet
									,	[iImageSetCount] );
						}

	this.onPreloadSet	= function( _iImageIndex, _aImageSet, _iNotLoadedCount )
						{
							aImgSet[ _iImageIndex ].img	= _aImageSet;
							aImgSet[ _iImageIndex ].bad	= _iNotLoadedCount;
						}

	this.setHoldSeconds		= function( _nSeconds )	{ 	nHoldSeconds	= _nSeconds;	}
	this.setFadeSeconds		= function( _nSeconds )	{ 	nFadeSeconds	= _nSeconds;	}
	this.setCycleCount		= function( _iCount )	{ 	iCycleCount		= _iCount;		}
	this.setInstanceName	= function( _sName )	{ 	sInstanceName	= _sName;	}

/*
	this.getDivId			= function( )	{	return	sPhotoShufflerDivId	}
	this.getImgId			= function( )	{	return	sPhotoShufflerImgId	}
	this.getImage			= function( )	{	}
	this.getPauseSeconds	= function( )	{ 	return	nHoldSeconds	}
	this.getFadeSeconds		= function( )	{ 	return	nFadeSeconds	}
	this.getRotations		= function( )	{ 	return	iCycleCount	}
	this.getOpacity			= function( )	{ 	return	nOpacity		}
	this.getDeltaOpacity	= function( )	{ 	return	nDeltaOpacity	}
	this.getOnDeck			= function( )	{ 	return	iOnDeck			}
	this.getStartImg		= function( )	{ 	return	sStartImg		}
*/

	/*
	I fade the image element to expose the background image.  I also morph the
	size of the image element to match the background image.
	*/
	objImageCycle.prototype.fadeThisImage	=
	function( )
	{
		// Fade the image to reveal the background image
		iStepsToFade--;

		// Are we at the end of the fade?
		if(	iStepsToFade == 0 )
		{
			// Move the background image to img.src
			oImg.src			= aImg[ iIndexNext ].url;

			// Make the image completely visible
			nOpacity	= 100;
			this.setOpacity( oImg, nOpacity );

			// Stop when we've reached the count
			if(	iCycleCount < 1 )
			{
				return;
			}else
			{
				// Get ready for the next image
				this.getNextImage( );
			}
		} else
		{
			if( iStepsToShape <= 1 )
			{
				nThisX			= nNextX;
				nThisY			= nNextY;
			}else
			{	// Change the shape twice as fast as the fade
				nThisX 			+= 2* nDeltaX;
				nThisY 			+= 2* nDeltaY;
				iStepsToShape	-= 2;
			}

			// Increment the opacity and dimensions
			nOpacity	+= nDeltaOpacity;
			this.setOpacity( oImg, nOpacity );
			oImg.style.width		= nThisX;
			oImg.style.height		= nThisY;

			setTimeout( sInstanceName + ".fadeThisImage()", 30 );  // 1/30th of a second
		}
	}

	/*
	I calculate the next image to show.  The one in position zero is saved until
	the last one.  I just count through the cycles.
	*/
	objImageCycle.prototype.getNextImage	=
	function( )
	{

		nThisX	= aImg[ iIndexNext ].width;
		nThisY	= aImg[ iIndexNext ].height;

		// Set the index for the next image; Skip zero
		iIndexNext	= ( ++iIndexNext == iImageCount )
					? 1
					: iIndexNext;
		// If we have shown the full number of images, then show the last one
		if(	--iCycleCount < 1 )
		{
			iIndexNext		= 0;
		}

		// Insert the next image as backgroud for the containing DIV
		oDiv.style.backgroundImage	= 'url("' + aImg[ iIndexNext ].url + '")';
		nNextX	= aImg[ iIndexNext ].width;
		nNextY	= aImg[ iIndexNext ].height;

		// Calculate the changes from the number of seconds to fade
	var	nSteps		= 30 * nFadeSeconds;			// 30 Steps per second
		nDeltaOpacity	= -nOpacity / nSteps;
		nDeltaX			= ( nNextX - nThisX ) / nSteps;
		nDeltaY			= ( nNextY - nThisY ) / nSteps;

		iStepsToFade	= parseInt( nSteps );
		iStepsToShape	= iStepsToFade;
		setTimeout( sInstanceName + ".fadeThisImage()", nHoldSeconds * 1000 );
	}

	/*
	The setOpacity function is passed an object and an opacity value. It then
	sets the opacity of the supplied object using four proprietary ways. It
	also prevents a flicker in Firefox caused when opacity is set to 100%,
	by setting the value to 99.999% instead.
	*/
	objImageCycle.prototype.setOpacity	=
	function( obj, opacity )
	{
		opacity	= ( opacity == 100 )?99.999:opacity;

		// IE/Win
		obj.style.filter		= "alpha( opacity:" + opacity + " )";

		// Safari<1.2, Konqueror
		obj.style.KHTMLOpacity	= opacity/100;

		// Older Mozilla and Firefox
		obj.style.MozOpacity	= opacity/100;

		// Safari 1.2, newer Firefox and Mozilla, CSS3
		obj.style.opacity		= opacity/100;
	}


}







/*
See : http://www.webreference.com/programming/javascript/gr/column3/
*/

//=============================================================================
// Image Preloader
function ImagePreloader( images, callback, aCallBackArguments )
{
	// store the callback and given arguments
	this.callback		= callback;
	this.callbackarg	= aCallBackArguments;

	// initialize internal state.
	this.nLoaded	= 0;
	this.nProcessed	= 0;
	this.aImages	= new Array;

	// record the number of images.
	this.nImages	= images.length;

	// for each image, call preload()
	for ( var i	= 0; i < images.length; i++ )
		this.preload(images[i]);
}

ImagePreloader.prototype.preload	=
function(image)
{
	// create new Image object and add to array
	var oImage	= new Image;
	this.aImages.push(oImage);

	// set up event handlers for the Image object
	oImage.onload	= ImagePreloader.prototype.onload;
	oImage.onerror	= ImagePreloader.prototype.onerror;
	oImage.onabort	= ImagePreloader.prototype.onabort;

	// assign pointer back to this.
	oImage.oImagePreloader	= this;
	oImage.bLoaded	= false;
	oImage.source	= image;

	// assign the .src property of the Image object
	oImage.src	= image;
}

ImagePreloader.prototype.onComplete	=
function()
{
	this.nProcessed++;
	if(	this.nProcessed	== this.nImages )
	{
		var	index	= this.callbackarg.length;
		this.callbackarg[ index++ ]		= this.aImages;
		this.callbackarg[ index++ ]		= this.nImages - this.nLoaded;
		this.callback.apply( this, this.callbackarg );
//		this.callback( this.aImages, this.nImages - this.nLoaded );
	}
}

ImagePreloader.prototype.onload	=
function()
{
	this.bLoaded	= true;
	this.oImagePreloader.nLoaded++;
	this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onerror	=
function()
{
	this.bError	= true;
	this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onabort	=
function()
{
	this.bAbort	= true;
	this.oImagePreloader.onComplete();
}





//var ip1	= new ImagePreloader( [ "SmilieW.gif" ], onInnerPreload, [3,4] );
//var ip2	= new ImagePreloader( [ 'oval.gif', 'rectangle.gif', 'banner2.jpeg' ], onInnerPreload, [1,2] );


function onInnerPreload( x, y, aImages, nLoaded )
{
	alert( "x: " + x + "\ny: " + y );
	alert( aImages[0].src );
	alert( aImages[0].width );
	alert( "nLoaded: " + nLoaded );
}