var PortfolioItemView = new Class({
	
	MAX_CLICK_TIME : 300,
	
	COLOR_NORMAL : '#eee',
	COLOR_NORMAL_HOVER : '#0f9',
	COLOR_FOCUS : '#fff',
	COLOR_ACTIVE : '#0cf',
	COLOR_ACTIVE_HOVER : '#f05',
	
	LABEL_STATE_NORMAL : 30,
	LABEL_STATE_OPEN : 0,
	LABEL_STATE_CLOSE : -30,
	
	VIEW_STATE_OPEN : 'opened',
	VIEW_STATE_CLOSE : 'closed',
	
	
	initialize : function(docElement) {
	
		if (!docElement) return;
	
		trace('PortfolioItemView.initialize(' + docElement + ')');
		
		this.docElement = docElement;
		
		this.index = this.getIndex();
		
		this.title = {};
		this.pubdate = {};
		this.notes = [];
		this.media = [];
		
		this.maxHeight = 0;
		
		this.active = false;
		
		this.mouseDownTime = 0;
		
		this.createChildren();
	},
	
	
	createChildren : function() {
	
		trace('PortfolioItemView.createChildren()');
		
		this.title = this.docElement.getChildren('h1')[0];
		this.title.setStyle('cursor', 'pointer');
		
		this.pubdate = this.docElement.getChildren('h6')[0];
		
		this.notes = this.docElement.getChildren('p');
		if (this.notes.length > 2) this.layoutNotes();
		
		var mediaDefs = this.docElement.getChildren('a');
		
		var i = 0;
		var len = mediaDefs.length;
		
		for (; i < len; ++i) {
			var mediaItem = new PortfolioMediaView(mediaDefs[i]);
			this.media.push(mediaItem);
		}
		
		this.minHeight = this.title.getSize().y + this.pubdate.getSize().y;
		this.maxHeight = this.docElement.getSize().y;
		this.docElement.setStyle('height', this.minHeight + 'px');
		
		//this.reveal.delay(100 * this.index, this);
		this.reveal();
		
		this.docElement.fireEvent('onCreateComplete');
	},
	
	
	bindInteraction : function() {
	
		trace('PortfolioItemView.bindInteraction()');
		
		this.title.addEvent('mouseover', this.onMouseOver.bindWithEvent(this));
		this.title.addEvent('mouseout', this.onMouseOut.bindWithEvent(this));
		this.title.addEvent('mousedown', this.onMouseDown.bindWithEvent(this));
		this.title.addEvent('mouseup', this.onMouseUp.bindWithEvent(this));
	},
	
	
	setViewState : function(viewState) {
	
		switch(viewState) {
		
			case this.VIEW_STATE_OPEN :
			
				this.docElement.set('tween', {duration: 600});
				this.docElement.tween('height', this.maxHeight);
			
				break;
				
			case this.VIEW_STATE_CLOSE :
			default :
			
				this.docElement.set('tween', {duration: 600});
				this.docElement.tween('height', this.minHeight);
			
				break;
		}
	},
	
	
	layoutNotes : function() {
		
		return;
		
		var i = 0;
		var len = this.notes.length;
		
		var mid = Math.ceil(len * 0.50);
		var dirtyNotes = [];
		
		var columnL = [];
		var columnR = [];
		
		for (; i < len; ++i) {
			var note = this.notes[i];
			note.setStyle('display', 'none');
			
			if (i < mid) {
				columnL.push(note);
			} else {
				columnR.push(note);
			}
		}
		
		columnL.reverse();
		columnR.reverse();
		
		for (i = 0; i < mid; ++i) {
			if (columnL.length > 0) dirtyNotes.push(columnL.pop[0])
			if (columnR.length > 0) dirtyNotes.push(columnR.pop[0])
		}
		
		for (i = 0; i < len; ++i) {
		
			
		
		}
	},
	
	
	//// Event handlers
	
	
	onMouseOver : function(e) {
	
		e.preventDefault();
		
		var color = (this.active) ? this.COLOR_ACTIVE_HOVER : this.COLOR_NORMAL_HOVER; 
		this.colorTo(color, 0.25);
		
		var label = (this.active) ? this.LABEL_STATE_CLOSE : this.LABEL_STATE_OPEN;
		this.labelTo(label);
	},
	
	
	onMouseOut : function(e) {
	
		e.preventDefault();
		
		var color = (this.active) ? this.COLOR_ACTIVE : this.COLOR_NORMAL; 
		this.colorTo(color, 0.50);
		
		this.labelTo(this.LABEL_STATE_NORMAL);
	},
	
	
	onMouseDown: function(e) {
	
		e.preventDefault();
		
		this.mouseDownTime = $time();
		
		this.colorTo(this.COLOR_FOCUS, 0.05);
	},
	
	
	onMouseUp: function(e) {
	
		e.preventDefault();
		
		var mouseUpTime = $time();
		
		if (mouseUpTime - this.mouseDownTime <= this.MAX_CLICK_TIME) {
			this.click();
		} else {
			this.release();
		}
		
		
	},
	
	
	//////
	
	
	click: function() {
		
		var color;
		var labelState;
		
		if (this.active) {
			this.active = false;
			color = this.COLOR_NORMAL_HOVER;
			labelState = this.LABEL_STATE_OPEN;
			this.setViewState(this.VIEW_STATE_CLOSE);
		} else {
			this.active = true;
			color = this.COLOR_ACTIVE_HOVER;
			labelState = this.LABEL_STATE_CLOSE;
			this.setViewState(this.VIEW_STATE_OPEN);
		}
		
		this.colorTo(color, 0.50);
		this.labelTo(labelState);
	},
	
	
	release: function() {
		
		var color = (this.active) ? this.COLOR_ACTIVE_HOVER : this.COLOR_NORMAL_HOVER; 
		this.colorTo(color, 0.50);
		
		var label = (this.active) ? this.LABEL_STATE_CLOSE : this.LABEL_STATE_OPEN;
		this.labelTo(label);
	},
	
	
	colorTo: function(color, duration) {
		
		jTweener.removeTween(this.title.style);
		jTweener.addTween(this.title.style, { 
			time: duration,
			transition: 'easeOutQuad',
			backgroundColor: color
		});
	},
	
	
	labelTo: function(labelState) {
	
		this.title.setStyle('background-position', 'right ' + labelState + 'px');
	},
	
	
	reveal: function() {
	
		this.docElement.setStyle('opacity', 0.0);
		this.docElement.setStyle('visibility', 'visible');
		
		jTweener.addTween(this.title.style, { //<< otherwise the initial color tween begins with 0x000000...
			time: 0.001,
			transition: 'linear',
			backgroundColor: this.COLOR_NORMAL
		});
		
		jTweener.addTween(this.docElement.style, { 
			time: 0.30,
			transition: 'linear',
			opacity: 1
		});
		
		this.bindInteraction();
	},
	
	
	//////
	
	
	getIndex : function() {
	
		var parent = this.docElement.getParent();
		var children = parent.getChildren();
		
		var i = 0;
		var len = children.length;
		
		for (; i < len; ++i) {
			if (children[i] == this.docElement) return i;
		}
		
		return -1;
	},
		
	
	toString : function() {
		return "[PortfolioCollectionView]";
	}
	
});