var carousel1 = {
    _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.carousel1", carousel1);

/* 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/

*/