/* 
 * PageScrollingComponent
 *
 * a component that scrolls with the page
 */
var PageScrollingComponent = new Class({
    options: {
        draggable: true,
        scrollDelay: 500,
        fxOptions: {
            property: 'top',
            duration: 250
        }
    },

    initialize: function(container) {
        this.container = $(container);

        coordinates = this.container.getCoordinates();
        this.minYPos = coordinates.top;

        this.container.setStyle('position', 'absolute');
        this.container.setStyle('top', this.minYPos);

        this.offset = this.container.getStyle('top').toInt();
        this.fx = new Fx.Tween(this.container, this.options.fxOptions);
        this.dragging = false;
        
        if (this.options.draggable) {
            dragOptions = {
                modifiers: {x: false},
                onStart: function() {
                    if (null != this.scrollDelay) {
                        $clear(this.scrollDelay);
                    }
                    this.fx.cancel();
                    this.dragging = true;
                }.bind(this),

                onComplete: function() {
                    this.dragging = false;
                }.bind(this)
            };

            this.dragger = new Drag(this.container, dragOptions);
        }

        window.addEvent('scroll', this.scrolled.bind(this));
    },

    scrolled: function() {
        if (this.dragging) {
            return;
        }

        if (null != this.scrollDelay) {
            $clear(this.scrollDelay);
        }

        scrollTop = window.getScrollTop();
        scrollPos = this.minYPos;

        if (scrollTop >= this.minYPos) {
            scrollPos = scrollTop;
        }

        this.scrollDelay = this.scrollTo.delay(this.options.scrollDelay,
                                               this,
                                               scrollPos);
    },

    scrollTo: function(topPosition) {
        this.fx.cancel();
        this.fx.start(topPosition + 'px');
    }
});