var CampTabulator = new Class({
    initialize: function(navigation_bar, placeholder)
    {
        var _this = this;
        this.placeholder = $(placeholder);
        this.navigation_bar = $(navigation_bar);
        this.navigation_bar.getElements('a').each(function(a){
            a.addEvent('click', function(event){ _this.handleClick(event, _this); });
        });

        this.overlay = new Element('div', {'id': 'tabs-overlay'})
            .setStyles({'display': 'none', 'position': 'absolute', 'opacity': 0.7})
            .adopt(new Element('div', {'class': 'spinner'}).set('html', 'loading...'))
            .inject(document.body);

    },

    handleClick: function(event, _this)
    {
        var url = event.target.href.split("#")[0];
        var pagelet = event.target.id.substring(4);

        event.stop();
        event.stopPropagation();
        event.preventDefault();
        _this.switchTab(event.target);
        new Request({
            method: 'get',
            url: url,
            data: {'action': 'getContent', 'pagelet': pagelet},
            evalScripts: false,
            evalResponse: false,
            onSuccess: function(html) {
                _this.replaceHTML(this.response.text);
			}
        }).send();

        _this.busy();

        return false;
    },

    replaceHTML: function(html)
    {
        var tmp_div = new Element('div').set('html', html);
        
        var children = tmp_div.getChildren();
        var p = this.placeholder;

        this.placeholder.getAllNext('.chapter').each( function(el){ el.dispose(); } );
        children.each(function(c){
            c.inject(p, 'after');
        });

        this.notbusy();
    },

    busy: function()
    {
        var coords = this.placeholder.getNext().getCoordinates();

        this.overlay.setStyles({
            'top': coords.top,
            'left': coords.left,
            'width': coords.width,
            'height': coords.height,
            'display': '',
            'opacity': 0.7
        });
    },

    notbusy: function()
    {
        this.overlay.fade('out').setStyle('display', 'none');
    },

    switchTab: function(clicked_link)
    {
        this.navigation_bar.getElements('li').each(function(li){
            if(li == clicked_link.getParent())
            {
                li.addClass('on');
            }
            else
            {
                li.removeClass('on');
            }
        });
    }
});