/*
---
description: A carrousel class that makes the carrousel actually GO ROUND, insead of flipping back to the front when it reaches the end.
 
license:
 - MIT-style

authors:
  - Doeke Norg (doeke@disain.nl)

version: 1.1

requires:
  core/1.3: '*'

provides:
 - Carrousel
...
*/

var Carousel = new Class(
{

    Implements: [Events, Options],

    options:
	{
	    id: 'carousel', // element which contains [itemsWrapper]
	    navigationContainerId: 'carouselNavigation',
	    itemsWrapper: 'listItems', //element which contains the items with [itemClass] 
	    itemClass: '.item', //selector for [items] within [itemsWrapper]
	    mode: 'horizontal', //speaks for itself

	    buttonPrev: 'btnPrev', //element that fires previous function
	    buttonPause: 'btnPause',
	    buttonPlay: 'btnPlay',
	    buttonNext: 'btnNext', //element that fires next function

	    fadeIn: true, //fade [itemsWrapper] in ; or not
	    hideControls: true,  //hide [buttonPrev] and [buttonNext] if there is just one item

	    duration: 'normal', //'short', 'normal', 'long' or integer

	    autoScroll: true,
	    autoScrollWait: 4000

	},

    items: new Array(),
    itemDimensions: null,
    clone: null,
    offset: { top: null, left: null },
    wait: false,
    FX: null,
    currentID: 0,

    initialize: function(options) {
        this.setOptions(options);
        this.getItems();


        this.itemDimensions = this.items[0].getSize();

        if (this.items.length > 1) {
            if (this.options.mode == "vertical") {
                this.offset.top = this.itemDimensions.y * -1;
            }
            else {
                this.offset.left = this.itemDimensions.x * -1;

                this.items.each(function(el) {
                    el.set('styles', { float: 'left' });
                });
                document.id(this.options.itemsWrapper).set('styles', { width: (this.items.length + 1) * this.itemDimensions.x });
            }


            this.clone = this.items[this.items.length - 1].clone();
            this.clone.inject(document.id(this.options.itemsWrapper), 'top');
            this.getItems(); //refresh list;

            //            document.id(this.options.id).set('styles', { position: 'relative' });
            //            document.id(this.options.itemsWrapper).set('styles', { position: 'absolute', left: this.offset.left, top: this.offset.top });

            //            document.id(this.options.buttonNext).setOpacity(0.2);
            //            document.id(this.options.buttonPrev).setOpacity(0.2);

            //            document.id(this.options.buttonNext).addEvent('mouseover', function (btn) { btn.setOpacity(0.8); } .pass(document.id(this.options.buttonNext), this));
            //            document.id(this.options.buttonNext).addEvent('mouseout', function (btn) { btn.setOpacity(0.2); } .pass(document.id(this.options.buttonNext), this));

            //            document.id(this.options.buttonPrev).addEvent('mouseover', function (btn) { btn.setOpacity(0.8); } .pass(document.id(this.options.buttonPrev), this));
            //            document.id(this.options.buttonPrev).addEvent('mouseout', function (btn) { btn.setOpacity(0.2); } .pass(document.id(this.options.buttonPrev), this));

            document.id(this.options.id).addEvent('mouseover', (this.pause).bind(this));
            document.id(this.options.id).addEvent('mouseout', (this.play).bind(this));

            document.id(this.options.buttonNext).addEvent('mouseover', (this.pause).bind(this));
            document.id(this.options.buttonNext).addEvent('mouseout', (this.play).bind(this));
            document.id(this.options.buttonNext).addEvent('click', (this.next).bind(this));

            document.id(this.options.buttonPrev).addEvent('mouseover', (this.pause).bind(this));
            document.id(this.options.buttonPrev).addEvent('mouseout', (this.play).bind(this));
            document.id(this.options.buttonPrev).addEvent('click', (this.previous).bind(this));

            //document.id(this.options.buttonPause).addEvent('click', (this.pause).bind(this));
            //document.id(this.options.buttonPlay).addEvent('click', (this.play).bind(this));

            //$(this.options.buttonPause).set('styles', { display: 'none' });
            //$(this.options.buttonPlay).set('styles', { display: 'none' });

            this.autoScroll = this.options.autoScroll;

            if (this.autoScroll) this.play();
        } else {
            if (this.options.hideControls) {
                document.id(this.options.buttonPrev).fade('hide');
                document.id(this.options.buttonNext).fade('hide');
            }
        }

        this[this.options.mode]();

        if (this.options.fadeIn)
            document.id(this.options.id).fade('hide').fade('in');
    },

    horizontal: function() {
        this.layout = 'margin-left';
        this.offsetMargin = '-' + this.itemDimensions.x + 'px';
    },
    vertical: function() {
        this.layout = 'margin-top';
        this.offsetMargin = '-' + this.itemDimensions.y + 'px';
    },

    getItems: function() {
        this.items = document.id(this.options.id).getElements(this.options.itemClass);
        this.items.length;
    },

    setCurrent: function(mode) {
        switch (mode) {
            case '+':
                if (this.currentID + 1 == this.items.length - 1) this.currentID = 0;
                else this.currentID++;
                break;
            case '-':
                if (this.currentID == 0) this.currentID = this.items.length - 2;
                else this.currentID--;
                break;
            default:
                return;
                break;

        }
    },

    pause: function() {
        if (this.autoScroll) {
            this.autoScroll = false;
            clearInterval(this.timer);
            this.showNav();
            //$(this.options.buttonPause).set('styles', { display: 'none' });
            //$(this.options.buttonPlay).set('styles', { display: 'block' });
        }
    },

    play: function() {
        this.autoScroll = true;
        this.timer = this.next.periodical(this.options.autoScrollWait, this);
        //$(this.options.buttonPause).set('styles', { display: 'block' });
        //$(this.options.buttonPlay).set('styles', { display: 'none' });
    },

    previous: function() {
        if (!this.wait) {
            this.wait = true;
            this.setCurrent("-");

            this.items[this.items.length - 1].destroy(); //remove last item
            this.clone = this.items[this.items.length - 2].clone();
            this.clone.setStyle(this.layout, this.offsetMargin);
            this.clone.inject(document.id(this.options.itemsWrapper), 'top');

            this.fireEvent('previous');

            this.FX = new Fx.Tween(this.clone, {
                duration: this.options.duration,
                onComplete: (function() {
                    this.wait = false;
                    this.getItems();
                    this.fireEvent('complete');
                }).bind(this)
            }).start(this.layout, 0);

        }
    },

    next: function() {
        if (!this.wait) {
            this.wait = true;
            this.setCurrent("+");

            this.FX = new Fx.Tween(this.items[0], {
                duration: this.options.duration,
                onComplete: (function() {
                    this.items[0].destroy();

                    this.clone = this.items[1].clone();
                    this.clone.inject(document.id(this.options.itemsWrapper));
                    this.getItems(); //refresh itemslist
                    this.wait = false;
                    this.fireEvent('complete');
                }).bind(this)
            }).start(this.layout, this.offsetMargin);

            this.fireEvent('next');
        }
    },

    hideNav: function() {
        document.id(this.options.navigationContainerId).fade('hide');
    },

    showNav: function() {
        document.id(this.options.navigationContainerId).fade('in');
    }
});