var portfolioViewer = {
	div: null,
	selector: null,
	categories: null,
	activeH2: 0,
	nextActiveH2: null,
	load: function() {
		portfolioViewer.div = $('portViewer');
		portfolioViewer.categories = $ES('#portViewer h2');
		portfolioViewer.selector = $('selector');

		$('portBrowser').addClass('active');
	
		window['selectorFx'] = new Fx.Styles('selectorBG', {duration:400, wait: false, onComplete: function() {
			portfolioViewer.categories[portfolioViewer.nextActiveH2].addClass('active');
			portfolioViewer.activeH2 = portfolioViewer.nextActiveH2;
		}});
	
		window['viewerFx'] = new Fx.Styles(portfolioViewer.div, {duration:400, wait: false});
	
		portfolioViewer.categories.each(function(el, i) {
			el.i = i;
			if (i==0) {
				el.addClass('active');
				activeH2 = el;
			}
			el.addEvent('click', function(){
				portfolioViewer.changeCat(this.i,true);
			});
			portfolioViewer.selector.appendChild(el);
		});
	},
	changeCat: function(newCatNum,animate) {
		portfolioViewer.categories[portfolioViewer.activeH2].removeClass('active');
		portfolioViewer.nextActiveH2 = newCatNum;
		var selTop = portfolioViewer.categories[newCatNum].offsetTop-20;
		var viewTop = -(portfolioViewer.categories[newCatNum].i*portfolioViewer.div.getElementsByTagName('ul')[0].offsetHeight);
		if (animate) {
			selectorFx.start({
				'top': selTop
			});
			viewerFx.start({
				'top': viewTop
			});
		} else {
			$('selectorBG').setStyle('top',selTop);
			portfolioViewer.div.setStyle('top',viewTop);

			portfolioViewer.categories[newCatNum].addClass('active');
			portfolioViewer.activeH2 = newCatNum;
		}
	}
}

window.addEvent('domready', portfolioViewer.load);