var MultiSlider = Class.create({
    initialize: function() {

        var links = $$('.accordion-wrapper .accordion-item .accordion-toggle');
        for(var a = 0; a < links.length; a++)
        {
            links[a].observe('click', function()
            {
                if(!this.ancestors()[0].hasClassName('active'))
                {
                    
                    var oldElements = $$('.accordion-wrapper .accordion-item.active');
                    for(var b = 0; b < oldElements.length; b++)
                    {
                        new Effect.Morph(
                            oldElements[b],{
                                style:'width:60px;', 
                                duration:.5,
                                beforeStart:function(effect){
                                    effect.element.removeClassName('active');
                                }
                            }
                        )
                    }

                    new Effect.Morph(
                        this.ancestors()[0],{
                            style:'width:760px;', 
                            duration:.5,
                            beforeStart:    function(effect){
                                effect.element.addClassName('active');
                            }
                        }
                    )
                }
            });

            if(a == 0)
            {
                links[a].ancestors()[0].addClassName('active');
                //links[a].next().morph('width:760px;display:block;');
                new Effect.Morph(links[a].ancestors()[0],{style:'width:760px;display:block;',duration:0});
            }
            if(a > 0)
            {
                new Effect.Morph(links[a].ancestors()[0],{style:'width:60px;display:block;',duration:0});
            }

        }
    }
});

document.observe("dom:loaded", function() {
    new MultiSlider();
});