var ImageCarousel = new Class({
    Implements: [Options],
    options: {
        source: '',
        showDuration: 3500,
        fadeDuration: 900,
        autoPlay: true,
        files: [],
        showNumbers: false
    },
    slide: [],
    number: [],

    initialize: function(options) {
        this.setOptions(options);
        this.options.element = $(this.options.element).grab(
			this.panel = new Element('div', { 'class': 'panel' }).setStyle('width', this.options.element.getSize().x)
		);


        this.dim = this.options.element.getSize();

        if ($defined(this.options.source)) {
            new Request.JSON({
                url: '/slides/' + this.options.source,
                secure: false,
                onSuccess: function(objJSON) {
                    this.setFiles(objJSON.Slides);
                    this.loadImage(0);
                } .bind(this)
            }).get();
        }
        if (this.options.autoPlay) this.play();
    },

    play: function() {
        this.player = this.nextSlide.periodical(this.options.showDuration, this);
        return this;
    },

    stop: function() {
        $clear(this.player);
        return this;
    },

    setFiles: function(files) {
        this.options.files = files;
        this.options.files.each(function(f) {
            if ($defined(f)) {
                var slide = {
                    file: f.ImageUrl,
                    element: new Element('div', {
                        'class': 'slide',
                        styles: {
                            width: this.dim.x, height: this.dim.y,
                            backgroundImage: 'url(' + f.ImageUrl + ')',
                            opacity: 0
                        },
                        events: {
                            click: function() {
                                if ($chk(f.NavigationUrl))
                                    window.location.href = f.NavigationUrl
                            }
                        }
                    })
                };
                this.options.element.grab(slide.element);
                slide.element.set('tween', { duration: this.options.fadeDuration })
                this.slide.push(slide);
            }
        } .bind(this));
        if (this.options.showNumbers)
            this.addNumbers();
        return this;
    },

    loadImage: function(i) {
        this.currentImage = i;
        this.slide.each(function(s, j) {
            if (this.options.showNumbers)
                this.number[j].removeClass('active');
            if (i == j) { // show this slide
                s.element.fade(1);
                if (this.options.showNumbers)
                    this.number[j].addClass('active');
            } else { // else hide it
                s.element.fade(0);
            }
        } .bind(this));
    },

    addNumbers: function() {
        this.slide.each(function(s, i) {
            var n;
            this.panel.grab(
				n = new Element('div', {
				    'class': 'number',
				    events: {
				        click: function() {
				            this.loadImage(i);
				            this.stop().play();
				        } .bind(this)
				    }
				}).grab(new Element('span', { text: (i + 1) }))
			);
            this.number.push(n);
        } .bind(this));
    },

    nextSlide: function() {
        var t = this.currentImage + 1;
        if (t > this.slide.length - 1) t = 0;
        this.loadImage(t);
        return this;
    },

    prevSlide: function() {
        var t = (t <= 1) ? 0 : this.currentImage - 1;
        this.loadImage(t);
        return this;
    }

});

ImageCarousel.extend({
	speed: {
		fast: {
			showDuration: 2000,
			fadeDuration: 400
		},
		normal: {
			showDuration: 3500,
			fadeDuration: 900
		},
		slow: {
			showDuration: 5000,
			fadeDuration: 1300
		}
	}
});

window.addEvent('domready', function() {
	$$('.ImageCarousel').each(function(e) {
		// detect speed
		var speed = ImageCarousel.speed.normal;
		var showNumbers = false;
		if (e.hasClass('fast')) speed = ImageCarousel.speed.fast;
		if (e.hasClass('slow')) speed = ImageCarousel.speed.slow;
		if (e.hasClass('numbers')) showNumbers = true;
		
		// auto create carousel
		new ImageCarousel($merge({ 
			element: e,
			source: $defined(e.get('rel')) ? e.get('rel') : null,
			showNumbers : showNumbers
		}, speed));
	});
});