// GLOBAL VARIABLES

var heroes = ['muni'];
var firsts = ['meeboWork'];
var items = ['neighbors','reloaded','artnews','hamburg','quake'];

function populateHome() {
	$('#portfolio li').each(function(index) {
		if($(this).hasClass('hero')) { var source = heroes; }
		else if($(this).hasClass('first')) { var source = firsts; }
		else { var source = items; }
		var rand = Math.random() * (source.length - 1);
		var item = source.splice(rand,1)[0];
		$(this).attr('id',item + 'Btn');
		$(this).addClass('position'+index);
		$(this).css('backgroundImage','url(\'./portfolio/'+item+'Thumb.jpg\')');
		$(this).click(function() { fadeIn('#'+item); resizePortfolio('#'+item); });
	});	
}

function fadeSwap(selOut,selIn) {
	fadeOut(selOut,function() { fadeIn(selIn); });
}

function fadeIn(sel) {
	$(sel).removeClass('fadingOut');
	$(sel).css('display','block');
	setTimeout(function() { $(sel).addClass('fadingIn')},50);
}

function fadeOut(sel,callback) {
	$(sel).removeClass('fadingIn');
	$(sel).addClass('fadingOut');
	if(Modernizr.csstransitions) {
		$(sel).each(function() {	
			this.addEventListener('webkitTransitionEnd',
				function() { callback(); this.style.display = 'none'; this.removeEventListener('webkitTransitionEnd',arguments.callee); }
			,false);
		});
	} else {
		callback();
		$(sel).css('display','none');
	}
}

function resizePortfolio(sel) { $('#portfolio').css('minHeight',$(sel).outerHeight() + 15); }

function desizePortfolio() { $('#portfolio').css('minHeight',0); }

$(function() {
	fadeIn('.maincontent');
	populateHome();
	$('.blue a').click(function() { fadeSwap('.maincontent','#portfolio'); });
	$('#portfoliolink').click(function() { $('.detail').hide(); desizePortfolio(); fadeSwap('.maincontent','#portfolio'); });
	
	$('.closeBox').click(function(evt) { fadeOut('#'+evt.target.parentNode.id,desizePortfolio); });
});