// PageInit
var LeftNav = Class.create();
LeftNav.prototype = {
	initialize: function() {
		el = $('leftnav');

		if (el) {
			el.down('li').addClassName('first');
        	el.down('ul').immediateDescendants().last().addClassName('last');
		}
	}
}
var leftNav = new LeftNav();

// RolloutComponents
var RolloutComponents = Class.create();
RolloutComponents.prototype = {
	initialize: function() {
		this.initializeComponents();
		if (window.riotEditCallbacks) {
			addRiotEditCallback(this.initializeComponents.bind(this));
		}
	},

	initializeComponents: function(el) {
		if (!el) el = $(document.body);
		el.select('.rollout-component').each(this.insertButtons.bind(this));
	},

	insertButtons: function(el) {
		Element.extend(el.parentNode);
		
		// Hide the element contents
		el.hide();
		el.parentNode.toggleClassName('collapsed');

		// If we have buttons already...
		var oldButtons = el.parentNode.select('.toggleButton');
		if (oldButtons.size() > 0) {
			// ... just reattach the clickHandler to the first one
			this.attachClickHandler(oldButtons[0], el);
			oldButtons[0].style.display = 'block';
		}
		else {
			var button = $(document.createElement('div'));
			button.className = 'toggleButton collapsed';
			button.innerHTML = '<a href="javascript://#" class="expand">Ausklappen</a><a href="javascript://#" class="collapse">Einklappen</a>';
			this.attachClickHandler(button, el);
			el.parentNode.insertBefore(button, el);
		}
	},

	attachClickHandler: function(button, el) {
		button.onclick = function() {
			Effect.toggle(el, 'blind', { duration: 0.6,
				beforeStart: function(effect) {
					el.parentNode.toggleClassName('expanded');
					el.parentNode.toggleClassName('collapsed');
				},
				afterFinish: function(effect) {
					button.toggleClassName('expanded');
					button.toggleClassName('collapsed');
				}
			});
		};
	}

}
var rolloutComponents = new RolloutComponents();