var carouselContainerId = "gforces-scroller";
document.write("<style type='text/css'> #" + carouselContainerId +  "{visibility:hidden;}</style>");

if ( !GFORCES ) {
    var GFORCES = {};
};
if ( !GFORCES.UI ) {
    GFORCES.UI = {};
};

/**
* @class GFORCES.UI.Carousel
* Carousel class
* @param { string } id
* @param { object } options
* @constructor
*/

GFORCES.UI.MagnifierCarousel = Class.create( {
    initialize : function( id, options ) {
        this.id = id;
		this.options = Object.clone( options || { } );
		this.index = 0;
		this.initialising = true;
		this.element = $( id );
		this.element.addClassName( 'carousel' ); 
		this.element.removeClassName( 'no-js' ); 
		this.itemList = this.element.select( 'ul' )[ 0 ];
		this.scroller = this.itemList.wrap( 'div' );
		this.scroller.addClassName( 'scroller' );
		this.scrolling = false;
		this._setItems();
		this.currentItem = this.firstItem;
		this.itemOffset = this.currentItem.positionedOffset();
		if ( this.options.orientation == 'horizontal' ) {
			if ( this.options.scrollAmount ) {
				this.distance = this.options.scrollAmount;
			}
			else {
				this.distance = -this.itemOffset[ 0 ];
			};
		};
		this.itemList.insert( this.firstItem.cloneNode( true ) );
		this.itemList.insert( this.firstItem.next( 0 ).cloneNode( true ) );
		this.itemList.insert( { top : this.lastItem.cloneNode( true ) } );
		this.itemList.insert( { top : this.lastItem.previous( 0 ).cloneNode( true ) } );
		this._setItems();
		this.element.insert( new Element( 'div' ).addClassName( 'controls' ) );
		this.controls = this.element.select( 'div.controls' )[ 0 ];
		this.controls.update( '<a href="" class="next" id="carouselNext">Next</a><a href="" class="previous" id="carouselPrev">Previous</a>' );
		this.element.observe( 'click', this._handleClick.bindAsEventListener( this ) );
		this.element.observe( 'keypress', this._handleKeypress.bindAsEventListener( this ) );
		this.element.observe( 'carousel:scroll', this._handleScroll.bindAsEventListener( this ) );
		var eElement = document.getElementById( carouselContainerId );
		if (eElement)
		{
		    eElement.style.visibility = "inherit";
		};
		
		//
		this.items.each( function( item ) {
		    
		}.bind( this ) );
		var image = this.currentItem.select( 'img' )[ 0 ];
		new Effect.Move( image, { x : 0, y : 0 } );
		if ( !Prototype.Browser.IE ) {
		    this.element.insert( '<img src="images/layup/left-gradient.png" class="left-gradient" /><img src="images/layup/right-gradient.png" class="right-gradient" />' );
		};
		this.scalingUp = false;
		this.scalingDown = false;
		//
		setTimeout( function() {
		    var length = this.items.length - 4;
		    this.cookie = getCookie( this.options.uniqueId );
		    if ( this.cookie ) {
		        var multiplier = Math.round( this.cookie / length );
		        if ( multiplier > 1 ) {
		            this.cookie = this.cookie - ( length * multiplier );
		        };
		        if ( this.cookie > ( length / 2 ) ) {
		            this.cookie = this.cookie - length;
		        };
		        setCookie( this.options.uniqueId, this.cookie, 1 );
		        if ( this.cookie < 0 ) {
		            this.element.fire( 'carousel:scroll', { direction : 'previous' } );
		        }
		        else if ( this.cookie > 0 ) {
		            this.element.fire( 'carousel:scroll', { direction : 'next' } );
		        };
		    }
		    else {
		        this.initialising = false;
		    };
		}.bind( this ), 1000 );
    },
    _setItems : function() {
		this.items = this.itemList.select( 'li' );
		this.firstItem = this.items[ 0 ];
		this.lastItem = this.items[ this.items.length - 1 ];
	},
	_handleClick : function( event ) {
		this._handleEvent( event );
	},
	_handleKeypress : function( event ) {
		this._handleEvent( event );
	},
	_handleEvent : function( event ) {
		var className = event.target.className;
		if ( className == 'next') {
		    event.stop();
		    this.element.fire( 'carousel:scroll', { direction : 'next' } );
		}
		else if ( className == 'previous' ) {
		    event.stop();
		    this.element.fire( 'carousel:scroll', { direction : 'previous' } );
		};
	},
	_handleScroll : function( event ) {
	
	    //
	    var magnifyImage;
		var resetImage;
		var nextImage;
		var prevImage;
		//
	
		var distance;
		var options;
		var afterFinish;
		this._setItems();
		if ( this.scrolling ) {
			return;
		};
		if ( event.memo.direction == 'next' ) {
		
			afterFinish = function() {
				this.currentItem = this.currentItem.next( 0 );
				this.itemList.insert( this.currentItem.next( 0 ).cloneNode( true ) );
				this.itemList.removeChild( this.firstItem );
				this.itemList.setStyle( { left : 0 } );
				this.scrolling = false;
				
			    this.index = this.index + 1;
			    if ( this.initialising ) {
			        if ( this.index < this.cookie ) {
			            this.element.fire( 'carousel:scroll', { direction : 'next' } );
			        }
			        else {
			            this.initialising = false;
			        };
			    }
			    else {
			        setCookie( this.options.uniqueId, this.index, 1 );
			    };
			}.bind( this );
			distance = -this.distance;
			
		}
		else if ( event.memo.direction == 'previous' ) {
		
			
			afterFinish = function() {
				this.currentItem = this.currentItem.previous( 0 );
				this.itemList.insert( { top : this.lastItem.previous( 3 ).cloneNode( true ) } );
				this.itemList.removeChild( this.lastItem );
				this.itemList.setStyle( { left : 0 } );
				this.scrolling = false;
				
			    this.index = this.index - 1;
			    if ( this.initialising ) {
			        if ( this.index > this.cookie ) {
			            this.element.fire( 'carousel:scroll', { direction : 'previous' } );
			        }
			        else {
			            this.initialising = false;
			        };
			    }
			    else {
			        setCookie( this.options.uniqueId, this.index, 1 );
			    };
				
			}.bind( this );
			distance = this.distance;
		};
		options = { x : distance, afterFinish : afterFinish };
		this.scrolling = new Effect.Move( this.itemList, options );
		
		
		resetImage = this.currentItem.select( 'img' )[ 0 ];

		
		new Effect.Move( this.currentItem, { x : 0, y : 0 } );
		new Effect.Move( nextImage, { x : 0, y : 0 } );
		//new Effect.Move( magnifyImage, { x : 0, y : 0 } );
		//new Effect.Move( resetImage, { x : 0, y : 0 } );
		//
	}
} );