var Switcher = new Class({

	Implements: [Options],

	options: {
		transition: 'quint:out',
		duration: 400
	},

    initialize: function(el, options) {
		this.setOptions(options);

        if ($type($(el)) == 'element') {
            this.source = $(el);
            this.images = this.source.getChildren('img');
            this.switcherCounter = this.source.getElement('span.counter');
            this.totalCounter = this.source.getElement('span.total');
            this.currIndex = this.images.startItem || 0;
            this.oleIndex = null;
            this.images.set('morph', { duration: 1000, transition: 'quint:out' });
            
            this.source.getElement('a.less').addEvent('click', function(e){
				e.stop();
                this.less();
            }.bind(this));

            this.source.getElement('a.more').addEvent('click', function(e){
				e.stop();
                this.more();
            }.bind(this));
            // });

            this.show(0, this.images.length - 1);

            ///////// I'm calling this just to troubleshoot and see if it considers this.more();
            ///////// as a function because the errors says its not at the onclick event of the nav items
            // this.more();
        }
    },

    show: function(element, oleElement) {
        this.switcherCounter.set('text', this.currIndex + 1);
        this.totalCounter.set('text', this.images.length);
        this.images[oleElement].setStyle('display', 'none');
        this.images[element].setStyle('display', 'block');
    },

    more: function() {
        this.currIndex += this.currIndex < this.images.length - 1 ? 1 : 1 - this.images.length;
        this.oleIndex = this.currIndex + (this.currIndex > 0 ? -1 : this.images.length - 1);
        this.show(this.currIndex, this.oleIndex);
    },

    less: function() {
        this.currIndex += this.currIndex > 0 ? - 1 : this.images.length - 1;
        this.oleIndex = this.currIndex + (this.currIndex < this.images.length - 1 ? 1 : 1 - this.images.length);
        this.show(this.currIndex, this.oleIndex);
    }

});