var PopList = Class.create({
	initialize: function() {
		
		this.navList().each(function(el){
			el.observe('click', this.popDiv.bindAsEventListener(this, el));
		}.bind(this));
		
		this.contentList().each(function(el){
			this.setupPopUpDivs(el);
		}.bind(this));
//		$('popList').appear({duration:1});
	},
	activeState:'activeContent',
	navList:function() {
	   return $$('#popup-nav li');
	},
	contentList: function() {
		return $$('.popup');
	},
	popDiv:function(obj,el) {
		var navIndex = this.navList().indexOf(el);
		var popUp = this.contentList()[navIndex];
		var popUpHeight = popUp.getHeight();
		var position = el.cumulativeOffset();
		this.contentList().invoke('hide');
		popUp.setStyle({
			top:position[1] - popUpHeight/3 +'px',
			left:position[0] + 15 +'px', 
			zIndex:'50'
		});
		popUp.appear({duration:.5});
	}, 
	setupPopUpDivs:function(el) {
		el.hide();
		this.createCloseButton(el);
		this.setUpClosers();
		
	},
	createCloseButton:function(el) {
		var newEl = document.createElement('span');
		var firstText = el.getElementsByTagName('p')[0];
		//console.log(firstText);
		newEl.innerHTML = 'close';
		el.appendChild(newEl);
		firstText.parentNode.insertBefore(newEl,firstText);
	},
	setUpClosers:function() {
		this.contentList().each(function(el){
			var closer = el.childElements()[1];
			closer.addClassName('closer');
			closer.observe('click', this.hideElement.bindAsEventListener(this, closer, el));
			//closer.show();
		}.bind(this));
	},
	hideElement:function(context, closer, el) {
		//closer.fade({duration: .5});
		el.blindUp({duration:.5});
	}
});


Event.observe(window, 'load', function() {
	var popList = new PopList();
});