var SlidePointer = new Class({
    _initialize: function (p) {
        if (p) { this.extend(p); }

        var n = new Element('div', { className: 'slidepointer' });

        this.extend({
            _observer: new Observer({
                autostart: true,
                properties: { caption: '', selected: false },
                actions: {
                    caption: function () { this.innerHTML = this.caption; },
                    selected: function () { this.className = this.selected ? 'slidepointer selected' : 'slidepointer'; }
                }
            })
        });

        return n;
    },

    _type: 'slidepointer',

    caption: '',

    selected: false
});

var SlideScene = new Class({
    _initialize: function (p) {
        if (p) { this.extend(p); }

        var n = new Element('div', { className: 'slidescene' });

        this.extend({
            _pointer: new SlidePointer(),
            _observer: new Observer({
                autostart: true,
                properties: { image: '', caption: '', cursor: '', _click: '' },
                actions: {
                    image: function () { this.style.backgroundImage = 'url(' + this.image + ')'; },
                    caption: function () { this._pointer.title = this.title = this.caption; },
                    //id: function () { this._pointer.id = this.id; },
                    cursor: function () { this.style.cursor = this.cursor; },
                    _click: function () { this.onclick = function () { window.location = this._click; }; }
                }
            })
        });

        return n;
    },

    _type: 'slidescene',

    image: '',
    caption: '',
    cursor: '',
    _click: ''
});

var SlideView = new Class({
    _initialize: function (p) {
        if (p) { this.extend(p); }

        var n = new Element('div', { className: 'slideview' });

        var html = '';
        html += '<div class="scenes"></div>';
        html += '<div class="pointers">';
        html += '	<div class="left"></div>';
        html += '	<div class="right"></div>';
        html += '</div>';

        n.innerHTML = html;

        this.extend({
            _observer: new Observer({
                autostart: true,
                properties: { width: 0, height: 0, currentscene: null },
                protection: { currentscene: true },
                actions: {
                    width: function () { this.style.width = this.width + 'px'; },
                    height: function () { this.style.height = this.height + 'px'; }
                }
            }),
            scenes: new Collection({
                types: ['slidescene'],
                onadd: function (x) {
                    x._owner = this;
                    Effects.hide(x);
                    x.create(this.getelement({ className: 'scenes' }));
                    x._pointer.extend({
                        caption: this.scenes.length,
                        onclick: function () { this._owner._owner._enter(this._owner); }
                    });
                    x._pointer.create(this.getelement({ className: 'pointers' }), this.scenes.length);

                    if (this.scenes.length > 1 && this.autostart && this._intervalid == -1) {
                        this.start();
                    }
                },
                onremove: function (x) {
                    x._pointer.remove();
                    x.remove();

                    if (this.scenes.length <= 1 && this._intervalid != -1) {
                        this.stop();
                    }
                }
            })
        });

        _extend(n.getelement({ className: 'left' }), {
            _owner: n,
            onclick: function () {
                this._owner.back();
            }
        });
        _extend(n.getelement({ className: 'right' }), {
            _owner: n,
            onclick: function () {
                this._owner.next();
            }
        });

        return n;
    },

    _type: 'slideview',

    _intervalid: -1,

    _busy: false,

    _turn: true,

    width: 300,

    height: 200,

    autostart: true,

    scenes: null,

    currentscene: null,

    interval: 5000,

    _enter: function (x) {
        if (this.scenes.contains(x) && x != this.currentscene && !this._busy) {
            this._busy = true;

            var t = this;
            var c;
            if (this.currentscene) {
                var y = this.currentscene;

                Effects.setdepth(y, 0);
                y._pointer.selected = false;

                c = function () {
                    Effects.hide(y);
                    t._busy = false;
                }

                Effects.fadein(y, 200);
            } else {
                c = function () {
                    t._busy = false;
                }
            }

            x._pointer.selected = true;
            Effects.setopacity(x, 0);
            Effects.setdepth(x, 1);
            Effects.show(x);
            Effects.fadeout(x, 200, c);

            this._observer.breakonce({ currentscene: x });

            if (!this._turn) {
                this.stop();
                this.start();
            } else {
                this._turn = false;
            }
        }
    },

    next: function () {
        if (this.scenes.length > 0) {
            var i = this.scenes.indexof(this.currentscene) + 1;
            if (i >= this.scenes.length) { i = 0; }
            this._enter(this.scenes[i]);
        }
    },

    back: function () {
        if (this.scenes.length > 0) {
            var i = this.scenes.indexof(this.currentscene) - 1;
            if (i < 0) { i = this.scenes.length - 1; }
            this._enter(this.scenes[i]);
        }
    },

    showscene: function (i) {
        if (i >= 0 && i < this.scenes.length) {
            this._enter(this.scenes[i]);
        }
    },

    start: function () {
        if (this.scenes.length > 0 && this._intervalid == -1) {
            (x = this).next();
            this._intervalid = setInterval(function () { x._turn = true; x.next(); }, this.interval);
        }
    },

    stop: function () {
        if (this._intervalid != -1) {
            clearInterval(this._intervalid);
            this._intervalid = -1;
        }
    }
});