new ContentFlowAddOn ('contentFlow', {

    conf: {
        showControlls: false,
        duration: 5000,
        startOnLoad: true
	
    },

    init: function() {
        this.addStylesheet();
    },
    
    
    onloadInit: function (flow) {
        this._slideshow_timer = null;
        var conf = flow.getAddOnConf('contentFlow');

        flow._startSlideshow = function () {
            var dur = this._slideshow_duration;
            var mn = function () {
                this.moveTo('next');
                this._slideshow_stoped = false;
            }.bind(this);
            window.clearTimeout(this._slideshow_timer);
            this._slideshow_timer = window.setTimeout( mn, dur);
        };

        flow._stopSlideshow = function () {
            window.clearTimeout(this._slideshow_timer);
            this._slideshow_stoped = true;
        }; 

        flow._setSlideshowSpeed = function (dur) {
            this._slideshow_duration = dur;
        };

        
        if (conf.showControlls) {
            var c = document.createElement('div');
            var p = document.createElement('div');
        }

        flow.toggleSlideshow = function (force) {

            if (this._slideshow_locked) var t = "stop";
            else var t = "play";
            if (force) {
                switch (force) {
                case "stop":
                case "play":
                    var t = force;
                    break;
                }
            }

            switch (t) {
                case "stop":
                    if (p) {
                        p.removeClassName('play');
                        p.addClassName('pause');
                        p.setAttribute('title', "pause");
                    }
                    this._slideshow_locked = false;
                    this._startSlideshow();
                    break;

                case "play":
                    if (p) {
                        p.removeClassName('pause');
                        p.addClassName('play');
                        p.setAttribute('title', "play");
                    }
                    this._slideshow_locked = true;
                    this._stopSlideshow();
                    break;
            }
        };

        flow.conf.keys[32] = function () { this.toggleSlideshow() };

        if (c) {
            $CF(c).addClassName('controlls');
            $CF(p).addClassName('button');
            p.addEvent('click', flow.toggleSlideshow.bind(flow), '');
            $CF(p).addClassName('button');

            var ff = document.createElement('div');
            $CF(ff).addClassName('button');
            ff.addClassName('ff');
            ff.setAttribute('title', "faster");
            ff.addEvent('click', function (e) { Event.stop(e); flow._setSlideshowSpeed(flow._slideshow_duration*0.5);}, '');

            var slow = document.createElement('div');
            $CF(slow).addClassName('button');
            slow.addClassName('slow');
            slow.setAttribute('title', "slower");
            slow.addEvent('click', function (e) { Event.stop(e); flow._setSlideshowSpeed(flow._slideshow_duration*2);}, '');

            var pre = document.createElement('div');
            $CF(pre).addClassName('button');
            pre.addClassName('preButton');
            pre.setAttribute('title', "previouse");

            var next = document.createElement('div');
            $CF(next).addClassName('button');
            next.addClassName('nextButton');
            next.setAttribute('title', "next");

            c.appendChild(pre);
            c.appendChild(slow);
            c.appendChild(p);
            c.appendChild(ff);
            c.appendChild(next);
            flow.Container.appendChild(c);
        }

        var dur = conf.duration;
        flow._setSlideshowSpeed(dur);


        var status = conf.startOnLoad;
        flow._slideshow_stoped = status;
        flow._slideshow_locked = status;

        flow.toggleSlideshow();

    },
	
    /*
     * ContentFlow configuration.
     * Will overwrite the default configuration (or configuration of previously loaded AddOns).
     * For a detailed explanation of each value take a look at the documentation.
     */
	ContentFlowConf: {
        circularFlow: true,             // should the flow wrap around at begging and end?

        reflectionColor: "#ffffff",

        onInit: function () {
        },

        onclickInactiveItem : function (item) {
            this._stopSlideshow();
        },

        onMakeActive: function (item) {
            if (this._slideshow_stoped || this._slideshow_locked) return;
            this._startSlideshow();
        },
        
        onReachTarget: function(item) {
            if (this._slideshow_stoped && !this._slideshow_locked) {
                this._startSlideshow();
            }
        },

        onMoveTo: function(item) {
            this._stopSlideshow();
        }

	
    }

});

