var Scroller = {
    outer : null,
    inner : null,
    left : null,
    right : null,

    length : null,
    xIndex : 0,
	xBase : 95,
    xPos : 0,
    xMove : 274,
    
    PE: null,
            
    initialized : false,
    
    initialize : function() {
        if (!this.initialized) {
            this.outer = $('slider_outer');
            this.inner = $('slider_inner');
            this.left = $('left_arrow').down('.button');
            this.right = $('right_arrow').down('.button');
            
            this.length = this.inner.childElements().length;
            this.inner.setStyle({width: this.xMove * this.length + 'px'});

            this._slideLeft = this.slideLeft.bindAsEventListener(this);
            this._slideRight = this.slideRight.bindAsEventListener(this);
            
            Event.observe(this.left, 'click', this._slideLeft);
            Event.observe(this.right, 'click', this._slideRight);
			
			this.inner.show();
			
            this.initialized = true;	
        }
    },
    
    slideLeft : function(event) {
        if (this.xIndex == 0) {
            return;
        }
        this.xIndex -= this.xIndex < 3 ? this.xIndex : 3;		
		this.xPos = this.xBase - this.xMove * this.xIndex;

        if (this.inner.slide) {
            this.inner.slide.cancel();
        }
        this.inner.slide = new Effect.Move(this.inner, {x: this.xPos, y: 0, mode: 'absolute', duration: .5});
        event.stop();
    },

    slideRight : function(event) {
        if (this.xIndex == this.length - 3) {
            return;
        }
        this.xIndex += Math.min(this.length - 3 - this.xIndex, 3);
		this.xPos = this.xBase - this.xMove * this.xIndex;

		if (this.inner.slide) {
            this.inner.slide.cancel();
        }
        this.inner.slide = new Effect.Move(this.inner, {x: this.xPos, y: 0, mode: 'absolute', duration: .5});
        event.stop();
    }
}

Event.observe(window, 'load', function() {
    Scroller.initialize();
});