var Slide = new Class({
	initialize: function(el, images)
    {
        this.i = 0;
        this.el = el;
        this.images = images;
        new Asset.images(images, {
            onComplete: function()
            {
                this.create();
             	el.setStyle('background-image', 'url(images/slide_off.png)');
                this.hide.delay(5000, this);
            }.bind(this)
        });
	},
    create: function()
    {
        this.images.each(
            function(el, i)
            {
                var img = new Element('img', {
                    'id': 'img' + i,
                    'src': el,
                    'styles': {
                        'position': 'absolute',
                        'top': 0,
                        'right': 0,
                        'width': 729,
                        'height': 245,
                        'opacity': (i == 0 ? 1 : 0)
                    }
                });

                this.el.grab(img, 'bottom');
            }.bind(this)
        );
    },
    hide: function()
    {
        $('img' + this.i).set('tween', {
            'duration': 1500,
            onComplete: function()
            {
                this.i = (this.i == this.images.length - 1) ? 0 : this.i + 1;
                this.show();
            }.bind(this)
        });

        $('img' + this.i).tween('opacity', 0);
    },
    show: function()
    {
        $('img' + this.i).set('tween', {
            'duration': 2000,
            onComplete: function()
            {
                this.hide.delay(5000, this);
            }.bind(this)
        });

        $('img' + this.i).tween('opacity', 1);
    }
});

window.addEvent('domready',
    function()
    {
        if ($('slide')) {

            var images = $('slide').getElement('p').get('class').split(',');
            if (images.length > 1) new Slide($('slide').getElement('p'), images);
        }
    }
);