var Scroller = Class.create({
    slides: 4,
    currentSlide: 1,
    previousSlide: 1,
    canClick: true,
    autoScroll: false,
    autoScrollIntervalId: null,
    autoScrollSpeed: 14000,
    scrollerWidth: 0,
    initialize: function() {
        $$('.thumbnail').invoke('writeAttribute', 'onclick', 'return false');
        Event.observe('thumbs', 'click', this.clickSlide.bind(this));
        Event.observe('window', 'click', this.clickSlide.bind(this));
        this.scrollerWidth = 951;
        if (this.autoScroll == true) {
            this.autoScrollIntervalId = setInterval(function() {
                if (this.currentSlide == (this.slides)) {
                    if (this.canClick == true) this.goToSlide(1);
                } else {
                    if (this.canClick == true) this.goToSlide((this.currentSlide + 1));
                }
            }.bind(this), this.autoScrollSpeed);
        }
    },
    clickSlide: function(event) {
        var element = Event.element(event);
        if (element.src && element.up().tagName == 'A') {
            var parentElement = element.up().up();
        } else if (element.tagName == 'A') {
            var parentElement = element.up();
        }
        if (parentElement) {
            clearInterval(this.autoScrollIntervalId);
            if (parentElement.getAttribute('id') && parentElement.getAttribute('id') != 'slide1Links') {
                var newSlideId = parseInt(parentElement.getAttribute('id').replace('thumbnailContainer', ''));
                Event.stop(event);
            } else {
                if (element.hasClassName('nextButton')) {
                    var newSlideId = parseInt(element.getAttribute('id').replace('nextButton', ''));
                    Event.stop(event);
                }
            }
            if (this.getClickStatus(newSlideId) == true) {
                this.canClick = false;
                this.showSlide(this.getScrollX(newSlideId), newSlideId);
            }
        }
    },
    getScrollX: function(newSlideId) {
        if (newSlideId < this.currentSlide) {
            var scrollX = 0 - (this.scrollerWidth * (newSlideId - this.currentSlide));
        } else if (newSlideId > this.currentSlide) {
            var scrollX = (this.scrollerWidth * (this.currentSlide - newSlideId));
        }
        return scrollX;
    },
    getClickStatus: function(newSlideId) {
        if ((newSlideId != this.currentSlide) && this.canClick == true) {
            return true;
        } else {
            return false;
        }
    },
    goToSlide: function(slideNum) {
        this.canClick = false;
        this.showSlide(this.getScrollX(slideNum), slideNum);
    },
    showSlide: function(scrollX, newSlideId) {
        $$('.thumbnailContainer').invoke('removeClassName', 'selected');
        $('thumbnailContainer' + newSlideId).addClassName('selected');
        new Effect.Move($('pointer'), {
            x: this.getPointerCoords(newSlideId),
            mode: 'absolute',
            duration: 0.9
        });
        this.currentSlide = newSlideId;
        this.options = {
            x: scrollX,
            y: 0,
            duration: 1.2,
            afterFinish: this.afterScroll.bind(this)
        };
        new Effect.Move($('scroll'), this.options);
    },
    getPointerCoords: function(newSlideId) {
        if (newSlideId == 1) {
            return 90;
        } else if (newSlideId == 2) {
            return 330;
        } else if (newSlideId == 3) {
            return 570;
        } else if (newSlideId == 4) {
            return 800;
        }
    },
    afterScroll: function() {
        this.canClick = true;
    },
    setCurrentSlide: function(slide) {
        this.currentSlide = slide;
    }
});
jQuery.noConflict();