Effect.ScrollHorizontal = Class.create();
Object.extend(Object.extend(Effect.ScrollHorizontal.prototype, Effect.Base.prototype),
{
    initialize: function(element) {
        if (typeof element == "string") {
            this.element = $(element);
            if (!this.element) {
                throw (Effect._elementDoesNotExistError);
            }
        }
        var options = Object.extend({
            from: this.element.scrollLeft || 0,
            to: this.element.scrollWidth
        }, arguments[1] || {});
        this.start(options);
    },
    update: function(position) {
        this.element.scrollLeft = position;
    }
});
function watchPosition(obj) {
    var id = obj.ThisId;
    if (id == undefined)
        return;

    var leftPos = obj.element.getStyle('left');
    if (leftPos) {
        var leftInt = parseFloat(leftPos.replace('px', ''));
        if (obj.options.move == 'left') {
            if (leftInt >= 0) {
                obj.element.setStyle({ 'left': obj.options.start + 'px' });
                obj.cancel();
            }
        } else {
            var stop = -(obj.options.size + obj.options.x);
            if (leftInt < stop) {
                obj.element.setStyle({ 'left': stop + 'px' });
                obj.cancel();
            }

        }
        //+ hide and show nav buttons
        var position = leftInt;
        var containerWidth = obj.options.size;
        var sectionWidth = obj.options.x;
        if (sectionWidth < 0) { sectionWidth = sectionWidth * -1; }
        if (position < 0) { position = position * -1; }
        if (containerWidth - position < sectionWidth) {
            $(id + 'rightNavButton').setStyle({ 'display': 'none' });
        } else {
            $(id + 'rightNavButton').setStyle({ 'display': '' });
        }
        if ($(id + 'leftNavButton') != null) {
            if (position <= 0) {
                $(id + 'leftNavButton').setStyle({ 'display': 'none' });
            } else {
                $(id + 'leftNavButton').setStyle({ 'display': '' });
            }
        }



    } else if (obj.options.move == 'left') {
        obj.element.setStyle({ 'left': obj.options.start });
        obj.cancel();
    }
}

Event.observe(window, 'load', function(evt) {
    $$('.fixedHorizontalScroller table.pagerFrame').each(function(el) {
        var id = el.id;
        if (id == null)
            id = '';

        var containerWidth = el.up().getWidth();
        var scrollContainerWidth = el.getWidth();
        if (scrollContainerWidth > containerWidth) {
            el.up().down().next('.scrollerControls').insert(
                new Element('div', { 'class': "leftControl", 'id': id + "leftNavButton", 'style': 'display:none' }).update(
                    new Element('a', { href: "javascript:void(0);" })
                    .observe('click', function() {
                        var move = new Effect.Move(el, {
                            x: containerWidth, start: 0, move: 'left', size: scrollContainerWidth, duration: 0.4, transition: Effect.Transitions.sinoidal,
                            beforeUpdate: watchPosition, beforeStart: watchPosition, afterUpdate: watchPosition, afterStart: watchPosition
                        });
                        move.ThisId = el.id;
                    }).update("left")
                )
            );
            el.up().down().next('.scrollerControls').insert(
                new Element('div', { 'class': "rightControl", 'id': id + "rightNavButton" }).update(
                    new Element('a', { href: "javascript:void(0);" })
                    .observe('click', function() {
                        var move = new Effect.Move(el, {

                            x: -(containerWidth), start: 0, move: 'right', size: scrollContainerWidth, duration: 0.4, transition: Effect.Transitions.sinoidal,
                            beforeUpdate: watchPosition, beforeStart: watchPosition, afterUpdate: watchPosition, afterStart: watchPosition
                        });
                        move.ThisId = el.id;
                    }).update("right")
                )
            );

        }
    });

    //+ disable left nav button, will never need it when page is displayed for first time
    if ($('leftNavButton') != null) {
        $('leftNavButton').setStyle({ 'display': 'none' });
    }

    var blockWidth = 225;
    if ($('productGroupBlock') == null) {
        return;
    }
    if ($('productGroupBlock').scrollWidth > blockWidth) {

        $('scrollLeft').update("<a href=\"javascript:void(0);\" id=\"scrollRight_a\"><</a>");
        $('scrollRight').update("<a href=\"javascript:void(0);\" id=\"scrollLeft_a\">></a>");

        var buffer = $('productGroupBlock').scrollWidth - blockWidth;
        var defaultDuration = buffer * .01;

        Event.observe('scrollRight', 'mouseover', function(evt) {
            var duration = defaultDuration;
            if ($('productGroupBlock').scrollLeft) {
                duration = (($('productGroupBlock').scrollWidth - $('productGroupBlock').scrollLeft) / 1.7) * .01;
            }
            var hScroll = new Effect.ScrollHorizontal('productGroupBlock', {
                duration: duration
            });
            Event.observe('scrollRight', 'mouseout', function(evt) {
                hScroll.cancel();
            });
        });
        Event.observe('scrollLeft', 'mouseover', function(evt) {
            var duration = defaultDuration;
            //$('debug').update("((" + $('productGroupBlock').scrollWidth + " - " + $('productGroupBlock').scrollLeft + ") / 1.7) * .01)");
            var newduration = ($('productGroupBlock').scrollLeft / 1.7) * .01;
            if (newduration) {
                duration = newduration;
            }
            var hScroll = new Effect.ScrollHorizontal('productGroupBlock', {
                to: 1,
                duration: duration
            });
            Event.observe('scrollLeft', 'mouseout', function(evt) {
                hScroll.cancel();
            });
        });
    }
});