var DrawerMaker = Class.create();

DrawerMaker.prototype = {
	handleHeight: 37,
	
	initialize: function (drawers) {
		this.drawers = drawers;
		this.numDrawers = drawers.length;
		this.box = $('drawers');
		
		this.build();
	},
	
	build: function () {
		var ul = Builder.node('ul');
		for (var i = 0; i < this.numDrawers; i++){
			var drawer = Builder.node('li', {className: 'drawer'}, [
					Builder.node('a', {className: 'handle', href: '#'}, [
						Builder.node('span', {className: 'title'}, 
							Builder.node('img', {src: this.drawers[i][0]})
						),
						Builder.node('span', {className: 'knob'})
					]),
					Builder.node('div', {className: 'drawer-text', id: 'drawer-text-'+i})
				]);
			ul.appendChild(drawer);
		}
		this.box.appendChild(ul);
		for (var i = 0; i < this.numDrawers; i++) {
			$('drawer-text-'+i).update(this.drawers[i][1]);
		}
		
		this.setUp();
	},
	
	setUp: function () {
		var rand_no = Math.ceil(this.numDrawers*Math.random())-1;
		this.drawerElements = $$('li.drawer');
		this.drawerElements.first().select('a').first().addClassName('active');
		this.activeDrawer = 0;
		
		for(var i = this.activeDrawer+1; i < this.numDrawers; i++) {
			this.drawerElements[i].setStyle({height: this.handleHeight.px()});
		}
		
		this.drawerElements.each((function(drawer){
			drawer.select('a.handle').first().observe('click', this.clickHandler.bindAsEventListener(this));
		}).bind(this));
	},
	
	clickHandler: function (event) {
		event.stop();
		var eventElement = Event.findElement(event, 'A');
		if (!eventElement.hasClassName('active')) {
			this.expand(eventElement);
		}
	},
	
	expand: function (element) {
		var drawer = $(element.up('li.drawer'));
		var active =  $$('li.drawer a.active').first();
		drawer.select('a.handle').first().addClassName('active');
		
		
		new Effect.Parallel([
		  	new Effect.Morph(drawer, {style: 'height: 185px;', sync: true}),
			new Effect.Morph(drawer.select('div.drawer-text').first(), {style: 'height: '+(185-this.handleHeight).px()+';', sync: true}),
			new Effect.Opacity(drawer.select('div.drawer-text').first(), { from: 0.0, to: 1.0, sync: true}),
			new Effect.Morph(active.up(), {style: 'height: '+this.handleHeight.px()+';', sync: true}),
			new Effect.Opacity(active.next('div.drawer-text'), { from: 1.0, to: 0.0, sync: true})
		], { 
		  duration: 0.8
		});
		active.removeClassName('active');
	}
	
}