if (!nu) {
	var nu = new Object();
}

var panels = new Array();

nu.FirstFourPanel = Class.create();
nu.FirstFourPanel.prototype = {

	MAX_ITEMS: 		4,
	listContainer: 	null,
	listItems: 		null,
	moreButton: 	null,
	isExpanded: 	false,
	tween: 			null,
	startHeight: 	null,
	targetHeight: 	null,

	initialize: function(el) {
		
		if (!document.getElementsByClassName('columnPanelStatic', el)[0]) 
			return false;
		if (!document.getElementsByClassName('columnListViewMore', el)[0]) 
			return false;

		this.listContainer = document.getElementsByClassName('columnPanelStatic', el)[0];	
		this.listItems = el.getElementsByTagName('li');
		this.moreButton = document.getElementsByClassName('columnListViewMore', el)[0];	
		this.tween = new Tween();	
		
		this.calculateHeights();
		
		this.listContainer.style.height = this.startHeight + 'px';
		
		this.moreButton.onclick = this.toggle.bind(this);
				
	},
	
	calculateHeights: function() {	
		var lastHeight = this.listContainer.style.height;		
		this.listContainer.style.height = 'auto';
		this.listContainer.style.overflow = 'visible';		
		this.targetHeight = this.listContainer.offsetHeight;
		this.listContainer.style.overflow = 'hidden';		
		for (var i = this.MAX_ITEMS; i < this.listItems.length; i++) {
			this.listItems[i].style.display = 'none';
		}
		this.startHeight = this.listContainer.offsetHeight;
		for (var i = this.MAX_ITEMS; i < this.listItems.length; i++) {
			this.listItems[i].style.display = 'block';
		}
		this.listContainer.style.height = lastHeight;		
	},
		
	toggle: function() {
		if (this.isExpanded) {
			this.contract();
		} else {
			this.expand();
		}
		return false;
	},
	
	expand: function(){
		this.calculateHeights();	
		panels.each(function(panel, i){
			if (panel != this) {
				panel.contract();
			}
		}.bind(this));
		this.isExpanded = true;
		this.tween.heightTo(this.listContainer, this.targetHeight, this.startHeight);
		this.tween.onComplete = function() {
			this.moreButton.innerHTML = 'View less...';
		}.bind(this);
	},
	
	contract: function() {
		this.calculateHeights();
		this.isExpanded = false;
		this.tween.heightTo(this.listContainer, this.startHeight, this.targetHeight);
		this.tween.onComplete = function() {
			this.moreButton.innerHTML = 'View more...';
		}.bind(this);
	}
}

Tween = Class.create();
Tween.prototype = {
	
	tweenInterval: 	null,
	SPEED: 			5,
	INTERVAL: 		10,
	el: 			null,
	target: 		null,
	start: 			null,
	
	initialize: function() {},
	
	heightTo: function(el, target, start) {
		this.el = el;
		this.target = target;
		this.start = start;
		this.tweenInterval = setInterval(this.updateHeight.bind(this), this.INTERVAL); 
	},
	
	updateHeight: function() {
		var currentHeight = parseInt(this.el.style.height);
		var isExpanding = (this.target > this.start);		
		
		if ( isExpanding && (currentHeight + this.SPEED < this.target)) {
			var newHeight = currentHeight + this.SPEED;
		} else if (!isExpanding && (currentHeight - this.SPEED > this.target)) {
			var newHeight = currentHeight - this.SPEED;
		} else {
			var newHeight = this.target;
			clearInterval(this.tweenInterval);
			this.onComplete();
		}
		this.el.style.height = newHeight + 'px';
	},
	
	onComplete: function() {}

}

function init() {
	var columns = document.getElementsByClassName('column');
	columns.each(function(column, i){
		panels.push(new nu.FirstFourPanel(column));
	});
	columns = document.getElementsByClassName('columnlast');
	columns.each(function(column, i){
		panels.push(new nu.FirstFourPanel(column));
	});
}

Event.observe(window, 'load', init, false);