window.addEvent('domready', function() {
    var loaded = false;

    var headers = $$('h2');

    var tab_div = new Element('div', { 'id': 'tabs' });
    var canvas_div = new Element('div', { 'id': 'canvas' });

    var hash = window.location.hash.substring(1);
    if (!$defined($(hash.split('#')[0])))
    {
        hash = $$('.question')[0].id;
    }
    var firstSection = $(hash.split('#')[0]);
    var firstQuestion = $(hash);

    var selectArea = function(area) {
        headers.each(function(header) { header.isSelected = false; });
        area.header.isSelected = true;

        headers.filter(function(h) { return !h.isSelected; }).fade(.6);
        area.header.fade(1);

        canvas_div.tween('min-height', area.height);

        (function() {
            canvas_div.adopt(area);
            area.fade('in');
            canvas_div.setStyle('height', 'auto');
        }).delay(500);
    };

    headers.each(function(header) {
        header.area = header.getNext('div');

        header.accordian = new Fx.Accordion(
            header.area.getElements('dt.question'),
            header.area.getElements('dd.answer'),
            {
                onActive: function(toggler, section) 
                {
                    if (loaded)
                        window.location.hash = '#' + toggler.old_id;
                }
            }
        );

        header.old_id = header.id;
        header.removeProperty('id');

        header.accordian.togglers.each(function(toggler)
        {
            toggler.old_id = toggler.id;
            toggler.removeProperty('id');
        });

        header.area.height = header.area.getStyle('height');
        header.area.dispose()
                   .fade('hide');

        header.area.header = header.dispose()
              .setStyles({
                  'opacity': .6
              });

        header.addEvent('click', function(e) {
            new Event(e).stop();

            if (!header.isSelected) {
                currentArea = canvas_div.getChildren()[0];

                currentArea.height = currentArea.getStyle('height');
                currentArea.fade('out');
                (function() {
                    window.location.hash = "#" + header.old_id;

                    currentArea.dispose();
                    selectArea(header.area);
                }).delay(500);
            }
        });
    });

    tab_div.adopt(headers);
    $(document.body).getElement('.container').adopt(tab_div, canvas_div);


    selectArea(firstSection.area);

    (function() {
        if ($defined(firstQuestion))
            firstQuestion.fireEvent('click');
            if ($chk(window.location.hash))
            {
                (function() {
                    new Fx.Scroll($(document.body)).start(0, firstQuestion.getPosition().y);
                }).delay(500);
            }
        loaded = true;
     }).delay(1000);
});