var Widgets = new Class({
	UL_WIDTH: 380,
	initialize: function(){
		var newDiv = new Element('div', {
						'id': 'widgets-control'
					}).addClass('width25')
					.inject('inner-footer', 'top');
		var newUl = new Element('ul', {
			'id': 'widgets-control-ul'	
		}).inject(newDiv);
		var h = 0;
		var count = 0;
		var tween = new Fx.Tween($$('ul.modules')[0]);
		$$('ul.modules h2').each(function(h2, index){
			new Element('a').inject(
				new Element('li').inject(newUl)
			)
			.set('text', h2.get('text'))
			.addEvent('click', function(){
				tween.cancel();
				tween.start('left', index * this.UL_WIDTH * -1);
			}.bindWithEvent(this));
			h = ( h > h2.getParent().getSize().y) ? h : h2.getParent().getSize().y;
			count = index + 1;
		}, this);
		$$('ul.modules')[0].addClass('dynamic')
		.setStyle('height', h)
		.setStyle('width', this.UL_WIDTH * count)
		.getChildren()
		.each(function(element, index){
			element.setStyle('height', (h < 250)? 250 : h);
		});
		$('inner-footer').setStyle('height', h);
	}
});

this.addEvent('domready', function(){
	var myWidgets = new Widgets();
}.bindWithEvent(this));