var SidePanel = new Class({
	Implements: [Options],
	
	options: {
		duration: 'normal',
		leave: 300,
		unit: 'em',
		originalLeft: '-18em',
		newLeft: '-2em' 
	},
	
	initialize: function(panel) {
		this.fx = new Fx.Tween(panel, {duration: this.options.duration, link: 'cancel', transition: Fx.Transitions.Back.easeIn, unit: this.options.unit});
		panel.setStyle('left',this.options.originalLeft);
		panel.addEvent('mouseenter', this.show.bind(this));
		panel.addEvent('mouseleave', this.hide.bind(this));
	},
	
	show: function() {
		this.fx.setOptions({transition: Fx.Transitions.Back.easeOut});
		this.fx.start('left', this.options.newLeft);
		!this.timer || $clear(this.timer);
	},
	
	hide: function() {
		this.timer = this.hideTransition.delay(this.options.leave, this);
	},
	
	hideTransition: function() {
		this.fx.setOptions({transition: Fx.Transitions.Back.easeIn});
		this.fx.start('left', this.options.originalLeft);
	}
	
	
});

window.addEvent('domready', function() {
	$(document.body).addClass('jsOn');
	
	var toc = $$('.toc')[0];
	if (toc) {
		new SidePanel(toc);
	}
});