var Cycle = new Class(
{
    Implements: Options,
    options:
    {
        elementWidth: 280,
        childsTag: 'li',
        duration: 200,
        transition: 'linear',
        timer: 5000,
        direction: 'left'
    },
    container: null,
    childs: [],
    timer: null,
    bullets: null,
    initialize: function(list, options)
    {
        this.setOptions(options);
        this.container = list;
        this.container.set('morph',
        {
            duration: this.options.duration,
            transition: this.options.transition
        });

        this.childs = this.container.getElements(this.options.childsTag);
        this.currentChild = 0;

        if (this.options.elementWidth == null)
        {
            this.options.elementWidth = this.childs[this.currentChild].getSize().x;
        }
        this.createUI();
        this.setTimer();
    },
    setTimer: function()
    {
        if (!this.options.timer)
        {
            return null;
        }

        this.timer = this.restartTimer.delay(this.options.timer, this);

        return true;
    },
    restartTimer: function(preventAnimation)
    {
        clearTimeout(this.timer);

        if (preventAnimation == undefined || preventAnimation != true)
        {
            if (this.options.direction == 'left')
            {
                this.next();
            }
            else
            {
                this.previous();
            }
        }

        this.setTimer();
    },
    createUI: function()
    {
        if (!this.childs.length)
        {
            return null;
        }

        this.bullets = new Element('ul.bullets');
        var l  = this.childs.length;

        for (var i = 0; i < l; i++)
        {
            new Element('li.bullet',
            {
                'data-key': i,
                text: i + 1,
                events:
                {
                    click: function()
                    {
                        var instance = this.retrieve('instance');
                        instance.animateTo(this.get('data-key'));
                        instance.restartTimer(true);
                        instance.changeBulletsState(this);
                    }
                }
            })
            .inject(this.bullets).store('instance', this);
        }
        this.bullets.inject(this.container, 'after');

        this.changeBulletsState();

        return true;
    },
    changeBulletsState: function(element)
    {
        if (element == undefined || element == null)
        {
            element = this.bullets.getElement('li[data-key=' + this.currentChild + ']');
        }

        this.bullets.getElements('.current').removeClass('current');

        element.addClass('current');
    },
    next: function()
    {
        var to = this.currentChild.toInt() + 1;

        if (to >= this.childs.length)
        {
            to = 0;
        }

        this.animate(to)
    },
    previous: function()
    {
        var to = this.currentChild.toInt() - 1;

        if (to < 0)
        {
            to = this.childs.getLast()
        }

        this.animate(to)
    },
    animateTo: function(to)
    {
        if (to == this.currentChild.toInt())
        {
            return null;
        }

        this.restartTimer();
        this.animate(to)

        return true;
    },
    animate: function(to)
    {
        this.currentChild = to.toInt();
        var newX = - to * this.options.elementWidth;

        this.container.morph(
        {
            'margin-left': newX
        });

        this.changeBulletsState();
    }
});

window.addEvent('domready', function()
{
    $$('.widgets .list').each(function(list, i)
    {
        new Cycle(list,
        {
            timer: 7000
        })
    });
})