var m17Slider = new Class({
    Implements: [Options, Events],
    options: {
    },
    initialize: function(elements ,options){
        this.setOptions(options);
        this.elements = $$(elements);
        this.elements.setStyle('cursor', 'pointer');
        this.currEl = $empty;
        this.currImg = $empty;
        this.currCount = 0;
        this.wrapper = document.id('slideshow');
        this.imageContainer = $$('.sliderimages')[0];
        this.contentContainer = $$('.slidercontent')[0];
        this.contentChildren = $empty;
        this.elements.each(function(el){
            //Sort the elements to the right container
            this.imageContainer.grab(el.getChildren('.image_container img')[0]);
            this.contentContainer.grab(el);
            this.contentChildren = this.contentContainer.getChildren('.ce_text');
        }, this);
        this.active(this.contentChildren[this.currCount], this.currCount, false);
        this.cycleStatus = this.cycle.periodical(5000, this);
        this.createElements();
        this.contentChildren.each(function(el, i) {
            el.addEvent('click', function(event){
                if(this.currCount != i) {
                    //if(event.target.get('tag') != 'a') {
                        this.active(el, i, true);
                        
                    //}
                    $clear(this.cycleStatus);
                }
            }.bind(this));
        }, this);
    },
    active: function(el, i, effect){
        this.contentChildren.removeClass('active');
        el.addClass('active');
        var _nextImage = this.imageContainer.getChildren('.image_container')[i];
        var _nextCount = i;
        if(effect) {
            var _currentImage = this.imageContainer.getChildren('.image_container')[this.currCount];
            this.imageContainer.getChildren('.image_container').setStyle('zIndex', '10');
            this.imageContainer.getChildren('.image_container')[_nextCount].setStyle('zIndex', '20');
            _currentImage.setStyle('zIndex', '30');
            var exampleFx = new Fx.Tween(_currentImage, {
	           property: 'opacity',
	           duration: 800,
	           onComplete: function() {
	               _currentImage.setStyles({'zIndex': '10','opacity': '1'});
	           }
            });
            exampleFx.start(1,0);

        } else {
            this.imageContainer.getChildren('.image_container').setStyle('zIndex', '10');
            _nextImage.setStyle('zIndex', '30');
        }
        this.currCount = _nextCount;
        this.currImg = _nextImage;
        this.currEl = el;
    },
    cycle: function() {
        var count = this.currCount + 1;
        if(count > 2) {
            this.active(this.contentChildren[0], 0, true);
        } else {
            this.active(this.currEl.getNext(), count, true);
        }
    },
    createElements: function() {
        var _back = new Element('div', {
            'class': 'SlideItMoo_back',
            html: ' ',
            events: {
                'click': function() {
                    this.move('previous');
                }.bind(this)
            }
        });
        var _forward = new Element('div', {
            'class': 'SlideItMoo_forward',
            html: ' ',
            events: {
                'click': function() {
                    this.move('next');
                }.bind(this)
            }
        });
        
        _back.injectInside(this.wrapper, 'inside');
        _forward.injectInside(this.wrapper, 'inside');
    },
    move: function(moveType){
        var _count, _countValues;
        if(moveType == 'next'){
            _countValues = [1,2,3];
        } else if(moveType == 'previous') {
            _countValues = [2,0,1];
        }
        
        switch(this.currEl.get('id')) {
            case 'slidefirst':
                _count = _countValues[0];
            break;
            case 'slidesecound':
                _count = _countValues[1];
            break;
            case 'slidethird':
                _count = _countValues[2];
            break;
        }
        if(moveType == 'next'){
            if(_count <= 2) {
                this.active(this.currEl.getNext('.ce_text'), _count, true);
            } else {
                this.active(this.contentChildren[0], 0, true);
            }
        } else if(moveType == 'previous') {
            if(_count < 2) {
                this.active(this.currEl.getPrevious('.ce_text'), _count, true);
            } else {
                this.active(this.contentChildren[2], 2, true);
            }
        } 
        $clear(this.cycleStatus);
    }
});