﻿function Slider(id, themeName, w, h, np, xp) {
    return {
        width: w,
        height: h,

        minPosition: np,
        maxPosition: xp,

        enabledLeftIcon: '/Images/' + themeName + '_move_left_btn.gif',
        disabledLeftIcon: '/Images/' + themeName + '_move_left_grayed_btn.gif',
        enabledRightIcon: '/Images/' + themeName + '_move_right_btn.gif',
        disabledRightIcon: '/Images/' + themeName + '_move_right_grayed_btn.gif',
        shouldScroll: false,
        scrollSpeed: 'medium',
        scrollStyle: 'linear',

        viewName: '#' + id + '-view',
        leftScrollerImageName: '#' + id + '-left-scroller-image',
        rightScrollerImageName: '#' + id + '-right-scroller-image',
        leftScrollerLinkName: '#' + id + '-left-scroller-link',
        rightScrollerLinkName: '#' + id + '-right-scroller-link',

        view: null,
        leftScrollerImage: null,
        rightScrollerImage: null,
        leftScrollerLink: null,
        rightScrollerLink: null,

        startScrollingForwards: function() {
            this.shouldScroll = true;
            this.scrollForwards();
        },

        startScrollingBackwards: function() {
            this.shouldScroll = true;
            this.scrollBackwards();
        },

        stopScrolling: function() {
            this.shouldScroll = false;
            this.view.end(true);
        },

        scrollForwards: function() {
            if (this.view.queue() == 0 && this.shouldScroll) {
                var me = this;
                var position = this.view.scrollLeft();
                var newPosition = (position + this.width > this.maxPosition) ? this.maxPosition : position + this.width;

                if (newPosition <= this.maxPosition && this.shouldScroll) {
                    this.view.animate({ scrollLeft: newPosition }, this.scrollSpeed, this.scrollStyle, function() { me.scrollForwards(); });
                    this.leftScrollerImage.attr('src', (newPosition == this.minPosition) ? this.disabledLeftIcon : this.enabledLeftIcon);
                    this.rightScrollerImage.attr('src', (newPosition == this.maxPosition) ? this.disabledRightIcon : this.enabledRightIcon);
                }
            }
        },

        scrollBackwards: function() {
            if (this.view.queue() == 0 && this.shouldScroll) {
                var me = this;
                var position = this.view.scrollLeft();
                var newPosition = (position - this.width < this.minPosition) ? this.minPosition : position - this.width;

                if (newPosition >= this.minPosition && this.shouldScroll) {
                    this.view.animate({ scrollLeft: newPosition }, this.scrollSpeed, this.scrollStyle, function() { me.scrollBackwards(); });
                    this.leftScrollerImage.attr('src', (newPosition == this.minPosition) ? this.disabledLeftIcon : this.enabledLeftIcon);
                    this.rightScrollerImage.attr('src', (newPosition == this.maxPosition) ? this.disabledRightIcon : this.enabledRightIcon);
                }
            }
        },

        wire: function() {
            this.view = $(this.viewName);
            this.leftScrollerImage = $(this.leftScrollerImageName);
            this.rightScrollerImage = $(this.rightScrollerImageName);
            this.leftScrollerLink = $(this.leftScrollerLinkName);
            this.rightScrollerLink = $(this.rightScrollerLinkName);

            this.view.scrollLeft(0);
            this.leftScrollerImage.attr('src', this.disabledLeftIcon);
            this.rightScrollerImage.attr('src', (this.maxPosition != null && this.maxPosition > 0) ? this.enabledRightIcon : this.disabledRightIcon);

            this.leftScrollerLink
            .bind('mousedown', this, function(e) { e.data.startScrollingBackwards(); })
            .bind('mouseup', this, function(e) { e.data.stopScrolling(); })
            .bind('mouseleave', this, function(e) { e.data.stopScrolling(); });
            this.rightScrollerLink
            .bind('mousedown', this, function(e) { e.data.startScrollingForwards(); })
            .bind('mouseup', this, function(e) { e.data.stopScrolling(); })
            .bind('mouseleave', this, function(e) { e.data.stopScrolling(); });
        },

        unwire: function() {
            this.leftScrollerLink
                .unbind('mousedown')
                .unbind('mouseup')
                .unbind('mouseleave');
            this.rightScrollerLink
                .unbind('mousedown')
                .unbind('mouseup')
                .unbind('mouseleave');
        }
    };
}
