var SlideShow = new Class({
    Implements : [Events, Options],
    Extends: Fx,
    options : {
        delay            : 1000,
        duration        : 2000,    
        onInitialize    : $empty,
        onChange        : $empty,
        onMouseOver        : $empty,
        onMouseOut        : $empty,
        onPress            : $empty,
        onStart            : $empty,
        onComplete        : $empty
        },
    initialize : function(element, options) {
        this.setOptions(options);
        this.container = element;
        this.children = this.container.getElements(this.container.getFirst().tagName);
        
        this.options.init = !options.onInitialize ? $empty : options.onInitialize.bind(this);
        this.options.start = !options.onStart ? $empty : options.onStart.bind(this);
        this.options.mouseover = !options.onMouseOver ? $empty : options.onMouseOver.bind(this);
        this.options.mouseout = !options.onMouseOut ? $empty : options.onMouseOut.bind(this);
        this.options.click = !options.onPress ? $empty : options.onPress.bind(this);
        
        
        this.children.addEvent("mouseover", function() {this.options.mouseover.run();}.bindWithEvent(this));
        this.children.addEvent("mouseout",     function() {this.options.mouseout.run();}.bindWithEvent(this));    
        this.children.addEvent("click",     function() {this.options.click.run();}.bindWithEvent(this));
        
        this.intervalID = null;
        this.currentIndex = 0;
        this.children.setStyle("opacity", 0);
        this.children[0].setStyle("opacity", 1);
        
        this.count = this.children.length;
        this.position = this.currentIndex+1;
        
        this.init();
        
        },
    
    init : function () {
        this.options.init.run();
        },
    start : function () {
        this.fireEvent("start");
        },
    mouseover : function () {
        this.options.mouseover.run();
        },
        
    click : function () {
        this.options.click.run();
        },
    complete : function () {
        this.fireEvent("complete");
        },
    play : function () {
        this.intervalID = this.next.periodical(this.options.delay, this);
        },
    
    stop : function () {
        $clear(this.intervalID);
        },
    
    next : function () {
        this.fadeOut();
        this.fadeIn();
        this.fireEvent("change");
        },
    
    fadeIn : function () {
        this.currentIndex = this.currentIndex+1 == this.children.length ? 0 : ++this.currentIndex;
        this.position = this.currentIndex + 1;
        new Fx.Morph(this.children[this.currentIndex], {
            duration : this.options.duration,
            wait : false,
            onStart : function () {this.fireEvent("start");}.bind(this),
            onComplete : function () {this.fireEvent("complete");}.bind(this)
            }).start({"opacity": 1});
        },
            
    fadeOut : function () {
        new Fx.Morph(this.children[this.currentIndex], {duration : this.options.duration, wait : false }).start({"opacity": 0});
        },
        
    getCount : function () {
        return this.count;
        },
    getPosition : function () {
        return this.position;
        },
    getItem : function () {
        return this.children[this.currentIndex];
        }
    });


/// JS for html page