/*
	Gallery Box: Version 0.3
	By Ricky Romero (http://www.anim8.biz)

	Step 1.)  Create the div and all the required elements for layout.
	Step 2.)  Create a brand new list of images.
	Step 3.)  ???
	Step 4.)  PROFIT!
*/

window.addEvent( "domready", setUpThePage );

function setUpThePage( )
{
	var numberOfPictures =
	{
		"home": 20,
		"widgets": 20,
		"websites": 20,
		"icons": 20,
		"photos": 13
	}

	var maximum = numberOfPictures[ $$( "body" )[ 0 ].id ] - 1;

	var pageTo = function( )
	{
		if ( typeof this.action === "string" )
		{
			$( "page" + $( "galleryBoxContainer" ).currentImage ).className = "emptyPage";

			switch ( this.action )
			{
				case "previous":
					if ( $( "galleryBoxContainer" ).currentImage - 1 < 0 )
					{
						$( "galleryBoxContainer" ).currentImage = maximum;
					}
					else
					{
						$( "galleryBoxContainer" ).currentImage = $( "galleryBoxContainer" ).currentImage - 1;
					}
					break;
				case "next":
					if ( $( "galleryBoxContainer" ).currentImage + 1 > maximum )
					{
						$( "galleryBoxContainer" ).currentImage = 0;
					}
					else
					{
						$( "galleryBoxContainer" ).currentImage = $( "galleryBoxContainer" ).currentImage + 1;
					}

					break;
			}

			$( "page" + $( "galleryBoxContainer" ).currentImage ).className = "filledPage";
		}
		else
		{
			if ( $( "galleryBoxContainer" ).currentImage !== this.action )
			{
				$( "page" + $( "galleryBoxContainer" ).currentImage ).className = "emptyPage";
				this.className = "filledPage";

				$( "galleryBoxContainer" ).currentImage = this.action;
			}
		}

		var fx = new Fx.Tween
		(
			$( "imageScroll" ),
			{
				"duration": 500,
				"link": "cancel",
				"transition": Fx.Transitions.Quad.easeOut
			}
		);

		fx.start( "left", $( "galleryBoxContainer" ).currentImage * -354 );
	}

	/* ########## Step 1.)  Create the div and all the required elements for layout. ########## */

	var tmpDiv = new Element( "div", { "id": "galleryBoxContainer" } );
	tmpDiv.injectBefore( $( "supplementaryLinks" ) );

	var tmpDiv = new Element( "div", { "id": "backgroundPlacard" } );
	tmpDiv.injectInside( $( "galleryBoxContainer" ) );

	var tmpDiv = new Element( "div", { "id": "imageScroll" } );
	tmpDiv.injectInside( $( "backgroundPlacard" ) );

	var tmpDiv = new Element( "div", { "id": "previous", "events": { "click": pageTo } } );
	tmpDiv.action = "previous";
	tmpDiv.injectInside( $( "galleryBoxContainer" ) );

	var tmpDiv = new Element( "div", { "id": "pageContainer" } );
	tmpDiv.injectInside( $( "galleryBoxContainer" ) );

	var tmpDiv = new Element( "div", { "id": "next", "events": { "click": pageTo } } );
	tmpDiv.action = "next";
	tmpDiv.injectInside( $( "galleryBoxContainer" ) );

	/* ########## Step 2.)  Create a brand new list of images. ########## */
	var pageID = $$( "body" )[ 0 ].id;
	$( "galleryBoxContainer" ).currentImage = 0;

	for ( i = 0; i < numberOfPictures[ pageID ]; i++ )
	{
		var tmpDiv = new Element
		(
			"div",
			{
				"id": "page" + i,
				"class": ( $( "galleryBoxContainer" ).currentImage === i ) ? "filledPage" : "emptyPage",
				"events":
				{
					"click": pageTo
				}
			}
		);
		tmpDiv.action = i;
		tmpDiv.injectInside( $( "pageContainer" ) );

		// Horizontally center the page indicators.
		$( "pageContainer" ).setStyle( "left", 189 - Math.round( Math.min( maximum + 1, 10 ) * 4.5 ) - $( "previous" ).getStyle( "width" ).toInt( ) );
		// Vertically center the page indicators.
		$( "pageContainer" ).setStyle( "top", ( maximum < 10 ) ? 5 : 0 );

		var tmpLink = new Element
		(
			"a",
			{
				"id": "link" + i,
				"href": "images/portfolio/" + pageID + "/fullSize/" + ( i + 1 ) + ".jpg"
			}
		);
		tmpLink.injectInside( $( "imageScroll" ) );

		var tmpImg = new Element
		(
			"img",
			{
				"src": "images/portfolio/" + pageID + "/smallThumbs/" + ( i + 1 ) + ".png"
			}
		);
		tmpImg.injectInside( $( "link" + i ) );
	}

	/* ########## Step 3.)  ??? ########## */
	setupZoom( );

	/* ########## Step 4.)  PROFIT! ########## */
	// Safari doesn't animate the first time for some reason, so
	// I need to make that first time an animation that doesn't matter.

	var fx = new Fx.Tween
	(
		$( "imageScroll" ),
		{
			"duration": 500,
			"link": "cancel",
			"transition": Fx.Transitions.Quad.easeOut
		}
	);

	fx.start( "left", 0 );
}