var sideMenu = new Class({
	
	initialize: function(element, options) {
		this.options = Object.extend({
			width:				'12em',
			color:				'555',
			hover:				'333',
			colorSubMenu:		'555',
			hoverSubMenu:		'333'
		}, options || {});
		
		this.el = $(element);
		this.elid = element;
		
		this.el.setStyles({
			width: this.options.width
		});
		this.appearText();
	},
		
	appearText: function(){
		var timer = 0;
		var sideblocks = $$('#sideMenu li');
		
		var slidefxs = [];
		var colorfxs = [];
		
		sideblocks.each(function(el, i){
			el.setStyle('margin-left', '-10em');
			timer += 150;
			slidefxs[i] = new Fx.Style(el, 'margin-left', {
				duration: 400,
				transition: Fx.Transitions.backOut,
				wait: false,
				onComplete: this.createOver.pass([el, i, this.options.color, this.options.hover, this.options.colorSubMenu, this.options.hoverSubMenu])
			});
			slidefxs[i].start.delay(timer, slidefxs[i], 0);

		}, this);

		/*sideblocks.each(function(el, i){
			el.setStyle('opacity', '0');
			timer += 150;
			slidefxs[i] = new Fx.Style(el, 'opacity', {
				duration: 400,
				transition: Fx.Transitions.backOut,
				wait: false,
				onComplete: this.createOver.pass([el, i, this.options.color, this.options.hover, this.options.colorSubMenu, this.options.hoverSubMenu])
			}).set(0);
			slidefxs[i].start.delay(timer, slidefxs[i], 1);

		}, this);*/
	},
	
	createOver: function(el, i, color, hover, colorSubMenu, hoverSubMenu){
		var first = el.getFirst();
		if (!first || first.getTag() != 'a') return;
		var overfxs = new Fx.Styles(first, {'duration': 200, 'wait': false});
		var tocolor, fromcolor;
		if (first.hasClass('SubMenu')){
			tocolor = hoverSubMenu;
			fromcolor = colorSubMenu;
		} else {
			tocolor = hover;
			fromcolor = color;
		}
		el.mouseouted = true;
		el.addEvent('mouseenter', function(e){
			overfxs.start({
				'color': tocolor,
				'margin-left': 10
			});
		});
		el.addEvent('mouseleave', function(e){
			overfxs.start({
				'color': fromcolor,
				'margin-left': 0
			});
		});
	}
});