// Once, the DOM (Document Object Model) is ready to
// be interacted with, let's go through an initialize
// the main players in this build-a-guru application.
$(
	function(){
		// Get the segment width. This will be used for
		// calculating and animating later on. While each of the
		// segments have different heights (depending on the
		// frame in which they are used) all segments will line
		// up horizontally (same widths).
		var intSegmentWidth = $( "div.option-frame:nth(0)" ).width();
 
 
		// Let's initialize the variaous slide areas.
		$( "//ul" ).each(
			function( intListIndex ){
				var jUL = $( this );
				var jLI = jUL.children( "li" );
				var jFrame = $( this.parentNode.parentNode );
				var strFrameType = jFrame.attr( "id" ).replace( new RegExp( "^([^\\-]+).*$", "gi" ), "$1" );
 
 
				// Set the width of the parent list. This should
				// be equal to the cumulative width of all of the
				// child list items.
				jUL.css( "width", (jLI.length * intSegmentWidth) );
 
				// Set up the background images for each slide.
				jLI.each(
					function( intSlideIndex ){
						$( this ).css(
							"background-image",
							"url( './" + strFrameType + "_" + intSlideIndex + ".jpg' )"
							);
					}
					);
 
 
				// Start each list at a random place. To get this,
				// we will select a ranom slide offset and then
				// just multiply that by the width of the segments.
				jUL.animate(
					{
						left: -(Math.floor( Math.random() * jLI.length ) * intSegmentWidth)
					},
					"fast"
					);
			}
			);
 
 
		// Let's initialize all the "Previous" action links.
		// Each of these links needs to be able to move the slide
		// to the right if it can.
		$( "a.previous" ).bind(
			"click",
			function( objEvent ){
				var jUL = $( this ).find( "../div/ul" );
				var intLeft = parseInt( jUL.css( "left" ) );
 
				// Check to see if we can move right.
				if (intLeft < 0){
 
					// Move the list right.
					jUL.animate(
						{
							left: Math.min( (intLeft + intSegmentWidth), 0 )
						},
						"normal"
						);
 
				}
			}
			);
 
 
		// Let's initialize all the "Next" action links.
		// Each of these links needs to be able to move the slide
		// to the left if it can.
		$( "a.next" ).bind(
			"click",
			function( objEvent ){
				var jUL = $( this ).find( "../div/ul" );
				var intLeft = parseInt( jUL.css( "left" ) );
 
				// Check to see if we can move it left.
				if (intLeft > -(jUL.width() - intSegmentWidth)){
 
					// Move the list left.
					jUL.animate(
						{
							left: Math.max( (intLeft - intSegmentWidth), -(jUL.width() - intSegmentWidth) )
						},
						"normal"
						);
 
				}
			}
			);
 
	}
	);