Event.observe(window, 'load', init_cool_things);

function init_cool_things(evt)
{
    var homepage_slider = new HomepageSlider('homepage-slider', 3, 1);

    var collapsible_boxes = $$('.block.collapsible');
    for (var i = 0; i < collapsible_boxes.length; i++)
    {
        if (collapsible_boxes[i].hasClassName('categories'))
        {
            new CollapsibleBox(collapsible_boxes[i], 'open');
        }
        else
        {
            new CollapsibleBox(collapsible_boxes[i], 'closed');
        }
    }
}

// TODO: On mouse over: put sliding on hold?
var HomepageSlider = Class.create({

    initialize: function(elem_id, slider_interval, slide_time)
    {
        this.slider_container = $(elem_id);
        if (this.slider_container == null)
        {
            return;
        }

        this.slider_items = this.slider_container.childElements();

        this.slide.bind(this);
        this.slider_interval = slider_interval;
        this.slide_time = slide_time;
        this.previous_slider_item = 0;
        this.next_slider_item = 1;
        this.prd_exer = new PeriodicalExecuter(this.slide.bind(this), this.slider_interval);

        this.slider_items.each(function(item, item_index)
        {
            if (item_index > 0)
            {
                item.hide();
                item.setOpacity(0);
            }
        });
    },

    slide: function()
    {
        new Effect.Fade(this.slider_items[this.previous_slider_item], { from: 1.0, to: 0, duration: this.slide_time });
        new Effect.Appear(this.slider_items[this.next_slider_item], { from: 0, to: 1, duration: this.slide_time });

        this.previous_slider_item = this.next_slider_item;

        if (this.next_slider_item == this.slider_items.length - 1)
        {
            this.next_slider_item = 0;
        }
        else
        {
            this.next_slider_item++;
        }
    }

});

var CollapsibleBox = Class.create({

    initialize: function(container, state)
    {
        if (container == null)
        {
            //console.log(container);
            return;
        }

        this.state = state;

        this.toggler = container.select('.block-title')[0];
        this.toggler.setStyle({'cursor': 'pointer'});
        this.toggler.observe('click', this.toggle.bind(this));

        this.content = container.select('.block-content')[0];

        if (this.state == 'closed')
        {
            this.toggler.addClassName('closed');
            Effect.BlindUp(this.content, {duration: 0})
        }
        else
        {
            this.toggler.addClassName('open');
            Effect.BlindDown(this.content, {duration: 0})
        }
    },

    toggle: function()
    {
        var _duration = 0.5;

        if (this.state == 'closed')
        {
            this.toggler.removeClassName('closed');
            this.toggler.addClassName('open');
            Effect.BlindDown(this.content, {duration: _duration})
        }
        else
        {
            this.toggler.removeClassName('open');
            this.toggler.addClassName('closed');
            Effect.BlindUp(this.content, {duration: _duration})
        }

        this.state = (this.state == 'open') ? 'closed' : 'open';
    }

});