var carousel = {
    _init: function () {
        this.options.currentTab = this.options.startTab;
        this._getAllCarouselTabs().hide();
        switch (this.options.effect) {
            case 'fading':
            default:
                this._getCarouselTab(this.options.startTab).fadeIn();
                break;
        }
        if (this.options.runOnInit) {
            this.start();
        }
        this._getAllCarouselTabs().css({ position: 'absolute' });
    },
    _getCarouselTab: function (i) {
        return this.element.find('.' + this.options.tabSelector + ':eq(' + i + ')');
    },
    _getAllCarouselTabs: function () {
        return this.element.find('.' + this.options.tabSelector);
    },
    _getCurrentCarouselTab: function () {
        return this._getCarouselTab(this.options.currentTab);
    },
    _tabCount: function () {
        return this._getAllCarouselTabs().length;
    },
    _show: function (i) {
        var oldTab = this.options.currentTab;
        this._updateTab(i);
        switch (this.options.effect) {
            case 'fading':
            default:
                this._fading(oldTab, this.options.currentTab);
                break;
        }
        if (this.options.onPageChanged != null) {
            this.options.onPageChanged(this.options.currentTab);
        }
    },
    _updateTab: function (i) {
        this.options.currentTab = i;
        if (i > this._tabCount() - 1) {
            this.options.currentTab = 0;
        }
    },
    _fading: function (fadeOutId, fadeInId) {
        this._getCarouselTab(fadeOutId).fadeOut();
        this._getCarouselTab(fadeInId).fadeIn();
    },
    next: function () {
        this._show(this.options.currentTab + 1);
    },
    previous: function () {
        this._show(this.options.currentTab--);
    },
    goto: function (i) {
        this.stop();
        this._show(i - 1);
        if (!this.options.stopOnClick) {
            this.start();
        }
    },
    start: function () {
        var $this = this;
        this.options.intervalId = window.setInterval(function () { $this.next(); }, this.options.speed);
        if (this.options.onStartEvent != null) {
            this.options.onStartEvent();
        }
    },
    stop: function () {
        window.clearInterval(this.options.intervalId);
        if (this.options.onStopEvent != null) {
            this.options.onStopEvent();
        }
    },
    off: function () {
        this.destroy(); // use the predefined function
    },
    options: {
        tabSelector: null,
        effect: 'fading',
        startTab: 0,
        currentTab: 0,
        speed: 3000,
        runOnInit: true,
        intervalId: null,
        stopOnClick: false,
        onStartEvent: null,
        onStopEvent: null,
        onPageChanged: null
    }
};

$.widget("ui.carousel", carousel);

/* Documentation

Version 1.0

Requirements:
- jquery (tested with version 1.4.2, but should work with older versions too)
- jquery ui (tested with version 1.8.2, but should work with older versions too)

Description:
The carousel is used to cycle between differnet content tabs in a configurable time.

Features:
- Start on init or not
- Fade between tabs
- Specify the time between tabs
- Hook up to start, stop and tab changed events
- Define if the cycling should be stopped on button click

Todo:
- Change all ids and class references to jQuery selectors.
- Make it possible to define the effect with a callback function.

Example:

<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#JS_flipContainerMain').carousel({
onPageChanged: function (i) {
jQuery('.flipButtonMain').removeClass('selected');
jQuery('.flipButtonMain:eq(' + i + ')').addClass('selected');
},
tabSelector: 'JS_Item',
speed: <%# Speed %>,
runOnInit: <%# RunOnInit %>,
stopOnClick: true
});
jQuery('.flipButton:eq(0)').addClass('selected');
});
</script>

<div class="box carrousel">
<div class="carrouselContainer">
<div id="JS_flipContainerMain">
<div class="JS_Item">
<div>
<div>
Tab 1
</div>
</div>
</div>
<div class="JS_Item">
<div>
<div>
Tab 2
</div>
</div>
</div>
<div class="flipButtons">
<div onclick="jQuery('#JS_flipContainerMain').carousel('goto', 1);">
Button 1
</div>
<div onclick="jQuery('#JS_flipContainerMain').carousel('goto', 2);">
Button 2
</div>
</div>
</div>
</div>
</div>

$.widget pattern inspiration: http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

*/