/*
* Feature item control
*/
var FeatureControl = Class.create();
FeatureControl.prototype = {
    initialize: function (id, callback, options) {
        this.id = id;
        this.callback = callback;
        this.setOptions(options);
        this.buildElement();
        this.setup();
    },
    setOptions: function (options) {
        this.options = {
            cls: 'indicator',
            src: '/SBCCD/SBVC/Media/Images/img-button-feature-inactive.png',
            width: 11,
            height: 11,
            alt: 'feature',
            rolloptions: { inactive: '-inactive' },
            cur: { cursor: 'pointer' }
        };
        Object.extend(this.options, options || {});
    },
    buildElement: function () {
        this.element = new Element('img', { 'class': this.options.cls, 'src': this.options.src, 'width': this.options.width, 'height': this.options.height, 'alt': this.options.alt });
        this.element.setStyle(this.options.cur);
    },
    setup: function () {
        this.rollover = new Roll(this.element, this.options.rolloptions);
        // sink events - moved to setActive, as the rebuildControls on the container seems to kill this sink on Prototype 1.7
        //Event.observe(this.element, 'click', this.onClick.bindAsEventListener(this));
    },
    setActive: function (onoff) {
        this.rollover.setActive(onoff);
        // sink events
        Event.observe(this.element, 'click', this.onClick.bindAsEventListener(this));
    },
    toElement: function () {
        return this.element;
    },
    clone: function () {
        return new FeatureControl(this.id, this.callback);
    },
    onClick: function (e) {
        this.callback(this.id);
    }
};
/*
* Feature container
*/
var FeatureContainer = Class.create();
FeatureContainer.prototype = {
    initialize: function (element, options) {
        this.element = element;
        this.setOptions(options);
        this.setup();
    },
    setOptions: function (options) {
        this.options = {
            controls: '.controls',
            buttons: '.buttons',
            featureitems: '.story',
            interval: 7
        };
        Object.extend(this.options, options || {});
    },
    setup: function () {
        //find stories and build controls
        this.storyidx = 0;
        this.storycount = 0;
        this.stories = [];
        this.ctrlidx = 0;
        this.ctrlcount = 0;
        this.ctrls = [];
        this.paused = false;
        this.pauseplay = new FeatureControl(-1,
            this.onPausePlayClick.bind(this),
            {   cls: 'play-pause',
                src: '/SBCCD/SBVC/Media/Images/img-button-feature-pause.png',
                width: 7,
                height: 11,
                alt: 'pause the feature rotation',
                rolloptions: { active: '-pause', inactive: '-play' }
             });
        found = this.element.select(this.options.featureitems);
        found.each(function (s, index) {
            this.stories[index] = s;
            this.storycount++;
            this.ctrls[index] = new FeatureControl(index, this.onControlClick.bind(this));
            this.ctrlcount++;
        } .bind(this));
        // Mark first item active fix for FF
        if (this.ctrlcount > 0) {
            this.ctrls[0] = new FeatureControl(0, this.onControlClick.bind(this),{ src :'/SBCCD/SBVC/Media/Images/img-button-feature-active.png'});
            this.ctrls[0].setActive(true);
        }
        this.rebuildControls();
        // sink events
        Event.observe(this.element, 'mouseover', this.onMouseOver.bindAsEventListener(this));
        Event.observe(this.element, 'mouseout', this.onMouseOff.bindAsEventListener(this));
        // kick it off
        this.startRotate();
    },
    rebuildControls: function () {
        found = this.element.select(this.options.buttons);
        found.each(function (s, index) {
            s = s.update();
            if (index == this.storyidx) {
                for (i = 0; i < this.ctrlcount; i++) {
                    var active = (this.storyidx == i) ? true : false;
                    this.ctrls[i].setActive(active);
                    s.appendChild(this.ctrls[i].toElement());
                }
                s.appendChild(this.pauseplay.toElement());
            }
        } .bind(this));
    },
    setFeature: function (idx) {
        this.storyidx = idx;
        this.rebuildControls();
        for (i = 0; i < this.storycount; i++) {
            active = (i == idx) ? true : false;
            this.ctrls[i].setActive(active);
            if (active) {
                this.stories[i].show();
            } else {
                this.stories[i].hide();
            }
        }
    },
    startRotate: function () {
        this.stopRotate();
        // timer
        this.timer = new PeriodicalExecuter(this.onRotate.bind(this), this.options.interval);
    },
    stopRotate: function () {
        if (this.timer != undefined) {
            this.timer.stop();
        }
    },
    onRotate: function () {
        idx = this.storyidx + 1;
        if (idx >= this.storycount) {
            idx = 0;
        }
        this.setFeature(idx);
    },
    onMouseOver: function () {
        this.stopRotate();
    },
    onMouseOff: function () {
        if (!this.paused) {
            this.startRotate();
        }
    },
    onControlClick: function (id) {
        this.setFeature(id);
    },
    onPausePlayClick: function () {
        this.paused = !this.paused;
        this.pauseplay.setActive(!this.paused);
        if (this.paused) {
            this.stopRotate();
        } else {
            this.startRotate();
        }
    }
};

// FeatureContainer invoke helper method
Element.addMethods({
    feature: function (element) {
        new FeatureContainer(element);
    }
});