var ScrollingPanesLoaded = false
var ScrollingPanes = Class.create();
ScrollingPanes.prototype = {
    initialize: function(scrollerClassName) {
		if (ScrollingPanesLoaded) return

        // Calculate the element spacing based on the right css property if it exists
        offer_list = $$('#offer-scroller li')
        
        // Quit if offers aren't found
        if(offer_list.length == 0) 
        { 
            return
        }

		ScrollingPanesLoaded = true
        this.scrollerClassName = scrollerClassName = 'scroller'
        this.animating = false
        this.pane_size = '165'
		this.visible_panels = 3;

        offer      = Element.extend(offer_list[0])
        spacing    = offer.getStyle('margin-left')

        $$('#offer-scroller li').each(function(element){
            element.setStyle({'margin-left': '0px'})
        })
        
		if ($$('#offer-scroller')[0].hasClassName('scroller-four'))
		{
			this.visible_panels = 4
		}

        if(spacing) 
        {
            spacing = spacing.replace('px', '')
        }

        if(parseInt(spacing) < 5) spacing = 5

        this.pane_size = (offer_list[0].clientWidth  + parseInt(spacing))// '165'

        this.scrollers = this.getScrollers()
        this.scrollers.each(function(scroller) {
            this.initializePanes(scroller);
            this.numPanes = scroller.panes.length;
			
            if (scroller.panes.length > this.visible_panels)
            {
                this.activateControls(scroller);      
                this.leftPane = 0;
                this.rightPane = 3;
            }
            else 
            {
                $('four-panel-scroll').childElements().each(function(s) {
  					if(s.tagName.toLowerCase() == 'p')
  					{
                		s.style.display = 'none';
  					}
  				});        
  				scroller.controls.left.hide();
  				scroller.controls.right.hide();
            }
        }.bind(this))
    },

    getScrollers: function()
    {
        return document.getElementsByClassName(this.scrollerClassName).collect(function(container) {
            return this.getPanes(container)
        }.bind(this))
    },

    getPanes: function(container)
    {
        return {
            container: container,
            panes: container.childElements(),
            controls: {
                left: container.previous('a.left'),
                right: container.next('a.right')
            }
        }
    },

    initializePanes: function(scroller)
    {
        scroller.container.setStyle({
            position: 'relative',
            overflow: 'hidden',
            padding: 0,
            listStyle: 'none'
        })

        pane_size = this.pane_size

        scroller.panes.each(function(pane, index) {
            pane.setStyle({
                position: 'absolute',
                top: 0,
                left: index*Number(this.pane_size)+'px'
            });
            pane.position = index;
        })

        return scroller
    },

    activateControls: function(scroller)
    {
        scroller.controls.left.observe('click', this.moveLeft.bindAsEventListener(this, scroller))
        scroller.controls.left.show();
        scroller.controls.right.observe('click', this.moveRight.bindAsEventListener(this, scroller))
        scroller.controls.right.show();
    },

    moveLeft: function(event, scroller)
    {
        if (this.animating == false)
        {
            this.nextPane = this.leftPane -1;
            if (this.nextPane < 0)
            {
                this.nextPane = this.numPanes -1;
            }
            scroller.panes[this.nextPane].setStyle({
                position: 'absolute',
                top: 0,
                left: (0 - this.pane_size) + 'px'
            });
            this.movePanes(scroller.panes, 'left', 1, 5);
            this.leftPane = this.nextPane;
            this.rightPane = this.rightPane - 1;
            if (this.rightPane < 0)
            {
                this.rightPane = this.numPanes - 1;
            }
        }
        Event.stop(event)
    },

    moveRight: function(event, scroller)
    {
        if (this.animating == false)
        {
            this.nextPane = this.rightPane + 1;
            if (this.nextPane >= this.numPanes)
            {
                this.nextPane = 0;
            }

            pane_size = this.pane_size

            scroller.panes[this.nextPane].setStyle({
                position: 'absolute',
                top: 0,
                left: 4*pane_size + 'px'
            });
            this.movePanes(scroller.panes, 'right', 1, 5);
            this.rightPane = this.nextPane;
            this.leftPane = this.leftPane + 1;

            if (this.leftPane >= this.numPanes)
            {
                this.leftPane = 0;
            }
        }

        Event.stop(event)
    },
    movePanes: function(panes, direction, amount)
    {
        this.animating = true
        this.frame = 1;
        this.dist = 0;

        new PeriodicalExecuter(function(exectuer) {
            if (this.frame < 7)
            {
                speed = Math.floor(0.125 * this.pane_size);
                this.dist += speed
            }
            else if (this.frame < 10)
            {
                speed = Math.floor(0.075 * this.pane_size);
                this.dist += speed
            }
            else
            {
                speed = this.pane_size - this.dist;
                this.animating = false;
                exectuer.stop();
            }
            this.frame = this.frame + 1;

            panes.each(function(pane) {
                var currentPosition = parseInt(pane.getStyle('left').replace('px', ''))
                var newPosition = currentPosition

                if (direction == 'left')
                {
                    newPosition += speed
                }
                else if (direction == 'right')
                {
                    newPosition -= speed
                }

                pane.setStyle({left: newPosition+'px'})

            }.bind(this))
        }.bind(this), .005)

        return panes
    },

    atBeginning: function(panes)
    {
        if (panes[0].getStyle('left') == '0%')
        {
            return true
        }
        else
        {
            return false
        }
    },

    atEnd: function(panes)
    {
        if (panes[panes.length-3].getStyle('left') <= '0%')
        {
            return true
        }
        else
        {
            return false
        }
    }
}


Event.observe(window, 'load', function() {
    new ScrollingPanes();

    // @todo might need to shift this to the body if the 
    // copy on lnl was there for a reason
    /*
    if($('offer-scroller') != null) { 
        $('offer-scroller').setStyle({
            position: 'relative',
            overflow: 'hidden',
            padding: 0,
            listStyle: 'none'
        })
    }
    */
})