// JavaScript Document
var Slideshow = new Class({
	_id				: null,
	// elements
	_container		: null,
	_imageContainer	: null,
	_previous		: null,
	_next			: null,
	_images			: [],
	_pages			: [],
	// 
	_index			: 0,
	_count			: 0,
	_width			: 0,
	_first			: true,
	// arguments
	_args			: {
		pageEvent		: 'click',
		animation		: 'quint:in:out',
		delay			: 3,
		auto			: false,
		selectedClass	: 'selected',
		disabledClass	: 'disabled',
		setAnchor		: false
	},
	// selectors	
	_selectors : {
		container	: null,
		images		: '.images li',
		pages		: '.navigation a',
		previous	: '.previous',
		next		: '.next'
	},
		
	initialize : function ( slideshowId , selectors , defaultArgs ){
		this._id = slideshowId;
		
		// default config
		this._selectors	= Object.merge( this._selectors , selectors );
		this._args 		= Object.merge( this._args , defaultArgs );
		
		this._container			= this._selectors.container ? document.getElement( this._selectors.container ) : document;
		this._imageContainer	= this._container.getElement( '#' + slideshowId );
		this._images			= this._imageContainer.getElements( this._selectors.images );
		this._pages				= this._container.getElements( this._selectors.pages );
		this._previous			= this._container.getElement( this._selectors.previous );
		this._next				= this._container.getElement( this._selectors.next );
				
		if ( this._images.length == 0 || this._images.length != this._pages.length ) return;
		
		// add a wrapper around the image container
		var wrap = new Element( 'div#wrap' ).wraps( this._imageContainer );
		
		var dimensions 	= this._imageContainer.getSize();
		this._width		= dimensions.x;
		this._count		= this._images.length;
		
		// set styles				
		void wrap.setStyles( {
			'overflow'	: 'hidden',
			'width'		: ( dimensions.x + 'px' )
		} );
		void this._imageContainer.setStyles( {
			'position'	: 'relative',
			'width'		: ( dimensions.x * this._count + 'px' ) 
		} );
		this._images.invoke( 'setStyles' , { float : 'left' , width : ( dimensions.x + 'px' ) } );
		
		// set animation
		this._imageContainer.set( 'tween' , { transition : this._args.animation } );
		this._imageContainer.setStyle( 'left' , '0px' );
		
		// add events
		this._pages.invoke( 'addEvent' , this._args.pageEvent , this.pagination_onClick.bind( this ) );
		if ( this._previous ) void this._previous.addEvent( 'click' , this.previous.bind( this ) );
		if ( this._next ) void this._next.addEvent( 'click' , this.next.bind( this ) );
				
		if ( this._args.setAnchor ) void this.getPage();		
		this.moveTo( this._index );
	},
	
	getPage : function (){
		var href 	= window.location.href;
		var regex	= new RegExp( '#!' + this._id + '_(\\d{1,})' , 'gim' );
		var match	= regex.exec( href );
		if ( match && match[ 1 ] ) this._index = parseInt( match[ 1 ] , 10 );
	},
	
	setPage : function ( index ){
		window.location.href = window.location.href.replace( /#(.+)?/ , '' ) + '#!' + this._id + '_' + index;
	},
	
	moveTo : function ( index ){
		if ( !this._pages[ index ] ) return;
		
		// page className
		this._pages.invoke( 'removeClass' , this._args.selectedClass );
		this._pages[ index ].addClass( this._args.selectedClass );

		// previous/next className
		if ( this._previous ) this._previous[ ( index == 0 ? 'add' : 'remove' ) + 'Class' ]( this._args.disabledClass );
		if ( this._next ) this._next[ ( index == this._count - 1 ? 'add' : 'remove' ) + 'Class' ]( this._args.disabledClass );	
		
		// page animation
		if ( this._first )	this._imageContainer.setStyle( 'left' , - this._width * index );
		else				this._imageContainer.tween( 'left' , - this._width * index );
		
		if ( this._args.setAnchor ) void this.setPage( index );
		
		this._index = index;
		this._first = false;
	},

	next : function ( eventObject ){
		var index = this._index + 1 > this._count - 1 ? 0 : this._index + 1;
		this.moveTo( index );
		void eventObject.stop();
	},
	
	previous : function ( eventObject ){
		var index = this._index - 1 < 0 ? this._count - 1 : this._index - 1;
		this.moveTo( index );
		void eventObject.stop();
	},

	timer_onTimer : function (){
		void next();
	},

	pagination_onClick : function ( eventObject ){
		var index = this._pages.indexOf( eventObject.target );
		if ( index <= -1 ) index = this._pages.indexOf( $( eventObject.target ).getParent( 'a' ) );
		this.moveTo( index );			
		void eventObject.stop();
	}
});