var popList = {
	init: function(){
		this.items = [];
		this.handles = $$('#cont h4');

		this.container = new Element('div',{'class':'hidden','id':'popList'}).inject(document.body);

		new Element('div',{'class':'top'}).inject(this.container)
		this.info = new Element('div').inject(new Element('div',{'class':'center'}).inject(this.container));
		this.title = new Element('h3').injectBefore(this.info);
		this.close = new Element('span').inject(new Element('div',{'class':'bottom'}).inject(this.container)).set('html',' ').addEvent('click',this.hide.bind(this));

		this.handles.each(function(handle,i){
			this.items[i] = handle.getNext().addClass('hidden');
			handle.addEvent('click',this.show.bind(this,[i])).setStyle('cursor','pointer');
		},this);

		this.fx = new Fx.Morph(this.container,{duration:'long'});

	},

	show: function(i){
		this.title.set('html',this.handles[i].innerHTML);
		this.info.empty().adopt(this.items[i].clone().removeClass('hidden'));
		this.container.setOpacity(0).removeClass('hidden');
		this.fx.options.transition = Fx.Transitions.Back.easeOut;
		this.fx.start({'top':[100,300],'opacity':[0,1]});
	},

	hide: function(){
		//this.fx.options.transition = Fx.Transitions.Back.easeIn;
		this.fx.start({'top':[300,400],'opacity':[1,0]});
	}
};

window.addEvent('domready',popList.init.bind(popList));