var Scroller = new Class({
    Implements:[Options,Events],
    options: {
        visibleItems: 6,
        visibleDisplay: 'inline',
        contentItems: 'img',
        leftScroll: 'div.previous',
        rightScroll: 'div.next',
        contentArea: 'div.images',
        scrollAction: 'event',
        startIndex: 0
    },
    
    initialize: function(container, options) {
        this.setOptions(options);
        this.index = 0;
        this.container = container;
        this.left = this.container.getElement(this.options.leftScroll);
        this.right = this.container.getElement(this.options.rightScroll);
        this.content = this.container.getElement(this.options.contentArea);
        this.setupEvents();
        
        this.items = this.content ? this.content.getElements(this.options.contentItems) : [];
        this.scrollToIndex(this.options.startIndex);
    },
    
    setupEvents: function() {
        if (this.content) {
            if (this.left) this.left.addEvent('click', function() { this.options.scrollAction == 'scroll' ? this.scroll(-1) : this.fireEvent('jump', 'previous'); }.bind(this));
            if (this.right) this.right.addEvent('click', function() { this.options.scrollAction == 'scroll' ? this.scroll(1) : this.fireEvent('jump', 'next'); }.bind(this));
        }
    },
    
    scroll: function(offset) {
        // adjust index
        this.index += offset;
        if (this.index < 0) this.index = 0;
        if (this.index > this.items.length - this.options.visibleItems) this.index = this.items.length - this.options.visibleItems;
        this.scrollToIndex(this.index);
    },
    
    scrollToIndex: function(index) {
        if (!isNaN(index) && index >=0 && index < this.items.length) {
            this.index = index;

            if (this.items <= this.options.visibleItems) {
                // all items are shown
                this.items.each(function(el) {
                    el.setStyle('display', this.options.visibleDisplay);
                });
                return;
            }

            // hide/show items
            for (var i=0; i<this.items.length; i++) {
                var visible = i >= this.index && i < (this.index + this.options.visibleItems);
                this.items[i].setStyle('display', visible ? this.options.visibleDisplay : 'none' );
                if (visible && this.options.contentItems == 'img') {
                    var rel = this.items[i].get('rel');
                    if (rel && rel.length > 0)
                        this.items[i].src = rel;
                }
            }
        }
    },
    
    scrollToElement: function(id) {
        var el = this.content.getElement(this.options.contentItems + '#' + id);
        if (el) {
            var index = this.items.indexOf(el);
            if (!isNaN(index) && !this.isVisible(index)) {
                //index = Math.max(0, index - Math.round(this.options.visibleItems / 2));
                this.scrollToIndex(index);
            }
        }
    },
    
    isVisible: function(index) {
        return (index >= this.index && index < (this.index + this.options.visibleItems));
    }
});