/**
*	File: scroller.js
*
*	Author: Matthew Lindley, GForces Web Management: www.gforces.co.uk
*	Purpose: House most of the custom javascript for the Hills Ford website
*
*	Notes: For a non-hacked version see Hills Ford's hills_ford.js
*
*/





/****************************************
*	Carousels
****************************************/

var carousel = {

	/*****  Configurable bits  *****/

	divImagesClass: 'thumbnailSlider',	//  Wrapper div of the images
	aLeftClass: 	'jumpLeft',		//  <a> tag around the left arrow
	aRightClass: 	'jumpRight',	//  <a> tag around the right arrow


	/*****  Don't edit below here! *****/

	isMoving: 		false,
	div:			false,
	divPadding:		10,
	currentIndex:	1,

	init: function () {

		//  First things first, set the width of the divs containing the images
		//  This could probably be done with invoke but done under each for flexibility
		$$('div.' + this.divImagesClass).each( function ( div ) {

			//  Work out the total width ( width of first image * number of images )
			var totalWidth 	= $(div).down(0).childElements()[1].getWidth() * $(div).down(0).childElements().length;

			//  Set width and initial offset
			$(div).setStyle({
				width: ( totalWidth + this.divPadding ) + 'px'
			});

		}.bind( this ));



		/*****  Move left  *****/

		$$('a.' + this.aLeftClass ).invoke( 'observe', 'click', function ( ev ) {

			Event.stop( ev );		//  Stop <a> tag working
			el = ev.element();		//  Reference element

			this.setImageDiv( el );

			//  If [at last image]
			if ( this.atFirstImage() ) {
				this.goLast();
			} else {
				this.goPrevious();
			}

		}.bind( this ) );


		/*****  Move right  *****/

		$$('a.' + this.aRightClass ).invoke( 'observe', 'click', function ( ev ) {

			Event.stop( ev );		//  Stop <a> tag working
			el = ev.element();		//  Reference element

			this.setImageDiv( el );		//  Define the image div

			//  If [at last image]
			if ( this.atLastImage() ) {
				this.goFirst();
			} else {
				this.goNext();
			}

		}.bind( this ) );

	},

	atFirstImage: function () {
		return this.currentIndex == 1;
	},

	atLastImage: function () {
		return ( this.currentIndex == ( $$('#thumbnailSlider a').length - 1 ) );
	},

	getImageDivWidth: function () {
		return $( this.imageDiv ).getWidth() - this.divPadding;
	},

	getImagesWidths: function () {
		return $(this.imageDiv).down(0).childElements()[0].getWidth();
	},

	getNumImages: function () {
		return $$('#thumbnailSlider a').length - 1;		//  Minus 1 for the dummy <a> tag.
	},

	getOffset: function () {
		return parseInt( $( this.imageDiv ).getStyle( 'left' ).replace( /px$/, '' ) );
	},

	/***  Go functions  *****/

	goFirst: function () {
		this.currentIndex = 1;
		this.slide( 0, 0.75 );
	},

	goLast: function () {
		this.currentIndex = this.getNumImages() - 1;
		this.slide( -( this.getImageDivWidth() - ( this.getImagesWidths() * 3 ) ), 0.75 );
	},

	goNext: function () {
		this.currentIndex++;
		this.slide( this.getOffset()-this.getImagesWidths(), 0.5 );
	},

	goPrevious: function () {
		this.currentIndex--;
		this.slide( this.getOffset()+this.getImagesWidths(), 0.5 );
	},

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

	setImageDiv: function ( el ) {
		this.imageDiv = $('thumbnailSlider');
	},

	slide: function ( offset, duration ) {

		if ( this.isMoving ) {
			return;
		}

		this.isMoving = true;

		new Effect.Move( $(this.imageDiv), { x: offset, mode:'absolute', duration:duration,
			afterFinish: function () {
				this.isMoving = false;
				$('mainCarPic').src = $$('#thumbnailSlider a')[this.currentIndex].down(0).src.replace( '/thumbs/', '/medium/' );
			}.bind( this )
		});

	}

}