var SlideShow = new Class({
    Implements: [Options, Events],
    options: {
        slides: [],
        mainContainer: null,
        slidesContainer: null,
        current: 0,
        height: 0,
        interval: 25,
        slidesPerView: 4 // Number of slides to be showed at the same time
    },
    initialize: function(options){
        // Init method
        this.setOptions(options);

        // Style slidehsow ul
        this.options.slidesContainer.empty();
        this.options.slidesContainer.setStyle('width', '0px');

        // Method calls
        this.options.slides.each(this.createSlides, this);
        this.makeEvents();

        if(this.options.slides.length < this.options.slidesPerView + 1){
            this.options.mainContainer.getElement('.left').setStyle('display','none');
            this.options.mainContainer.getElement('.right').setStyle('display','none');
        } else {
            this.options.mainContainer.getElement('.left').setStyle('display','');
            this.options.mainContainer.getElement('.right').setStyle('display','');
        }
    },
	
    /**
	* Make the html slides based on json array
	**/
    createSlides: function(slide){
        if (slide['src'] === undefined) return true;

        var li = new Element('li')
        .adopt(
            new Element('a', {
                'href': slide['href'],
                'title': slide['alt']
            }).adopt(
                new Element('img', {
                    'src': slide['src'],
                    'width': slide['width'],
                    'height': slide['height'],
                    'alt': slide['alt']
                })
                )
            );
        li.inject(this.options.slidesContainer);
		
        this.slideWidth = li.getWidth() + li.getStyle('margin-right').toInt();
        this.totalWidth = this.options.slidesContainer.getWidth() + this.slideWidth;
        this.options.slidesContainer.setStyle('width', this.totalWidth + 'px');

        this.first(0, 1);
    },
	
    makeEvents: function(){
        this.options.mainContainer.getElement('.left').addEvents({
            'click': function(event) {
                event.preventDefault();
            },
            'mouseover': function(){
                this.addActions('down', 'left');
                return false;
            }.bind(this),
            'mouseout': function(){
                this.addActions('up');
                return false;
            }.bind(this)
        });
		
        this.options.mainContainer.getElement('.right').addEvents({
            'click': function(event) {
                event.preventDefault();
            },
            'mouseover': function(){
                this.addActions('down', 'right');
            }.bind(this),
            'mouseout': function(){
                this.addActions('up');
                return false;
            }.bind(this)
        });
		
        /*document.addEvents({
            'keydown': function(event){
                if(event.key == 'left') this.addActions('down', 'left');
                if(event.key == 'right') this.addActions('down', 'right');
            }.bind(this),
            'keyup': function(event){
                if(event.key == 'left') this.addActions('up');
                if(event.key == 'right') this.addActions('up');
            }.bind(this)
        });*/
    },
	
    addActions: function(action, direction){
        switch(action){
            case 'down':
                this.run(this.options.interval, direction, this);
                break;
            case 'up':
                this.stop(this);
                break;
        }
    },
	
    first: function(old, interval){
        if(old + interval <= 0){
            this.options.mainContainer.getElement('.left').removeClass('disabled');
            return false;
        } else {
            this.options.mainContainer.getElement('.left').addClass('disabled');
            return true;
        }
    },
	
    last: function(old, interval){
        this.maxLeft = this.totalWidth - (this.options.slidesPerView * this.slideWidth);
        if(- (old + interval) <= this.maxLeft){
            this.options.mainContainer.getElement('.right').removeClass('disabled');
            return false;
        } else {
            this.options.mainContainer.getElement('.right').addClass('disabled');
            return true;
        }
    },
	
    stop: function(){
        $clear(this.timer);
    },
	
    run: function(interval, direction){
        this.timer = this.move.periodical(interval, this, [direction, false]);
    },
	
    move: function(direction){
        var container = this.options.slidesContainer;
        var old = container.getStyle('left').toInt();
        if (isNaN(old)) old = 0;
		
        var interval = (direction == 'right') ? -8 : 8;
		
        if (!this.first(old, interval) && !this.last(old, interval)){
            container.setStyle('left', old + interval + 'px');
        }
    }
});