var isAnimating = false;
var curProject = 4;

var transLevel1 = .25;
var transLevel2 = .5;
var transLevel3 = .75;
var transLevel4 = 1;

var deltaY = 10;

var ary = [];

function initSlider() {
	var divs = $$('.portfolio');
	for(var i = 0; divs[i]; i++) {
		divs[i].onmouseover = function() { hoverIn(this); };
		divs[i].onmouseout = function() { hoverOut(this); };
		
		setTrans(divs[i]);
	}
}

function togglePortfolio(id) {
	var div = $("p" + id);
	
	if(id == curProject) {
		var lnk = div.childNodes[0];
		// window.location = lnk.href;
		var ary = $('screenshots').getElementsByTagName("div");
		for(var i = 0; i < ary.length; i++) {
			if(ary[i].style.zIndex == 1) {
				// alert(ary[i].id);
				togglePortfolio(ary[i].id.replace(/p/, ""));
			}
		}
	}
	if(isAnimating || id == curProject) { return false; }
	isAnimating = true;
	
	Effect.Fade('feature-' + curProject, { duration: .5, afterFinish: function() {
		Effect.Appear('feature-' + id, { duration: .25 });
	}});
	
	// new Effect.Move('features-inner', { x: -317*(id-1), mode: 'absolute', duration: .5 });
	
	var img = div.childNodes[0].childNodes[0];
	var oldZIndex = div.style.zIndex;
	
	if(img.style.bottom != deltaY + "px") {
		img.style.bottom = deltaY + "px";
	}
	
	for(var i = 1; i <= 4; i++) {
		var higherDiv = $("p" + i);
		if(higherDiv.style.zIndex > oldZIndex) {
			higherDiv.style.zIndex--;
			setTrans(higherDiv, true);
			new Effect.Move(higherDiv, { x: -100, mode: 'relative', duration: .5, afterFinish: function() {
				
			}});
		}
	}
	
	div.style.zIndex = 4;
	img.style.opacity = 1;
	new Effect.Move(div, { x: (4-id) * 100, mode: 'absolute', duration: .5, afterFinish: function () {
		isAnimating = false;
		curProject = id;
		hoverOut(div);
	}});
}

function hoverIn(div) {
	if(isAnimating) { return false; }
	
	var img = div.childNodes[0].childNodes[0];
	
	img.style.position = "relative";
	img.style.bottom = deltaY + "px";
	
	img.style.opacity = "1";
	div.className = "portfolio trans4";
}

function hoverOut(div) {
	if(isAnimating) { return false; }
	
	var img = div.childNodes[0].childNodes[0];
	
	img.morph('bottom: 0px;', { duration: .2 });
	setTrans(div, false);
}

function setTrans(div, animate) {
	var img = div.childNodes[0].childNodes[0];
	
	var trans = eval("transLevel" + div.style.zIndex);
	if(animate == true) {
		img.morph('opacity: ' + trans, { duration: .25 });
	}
	else {
		img.style.opacity = trans;
	}
	
	div.className = "portfolio trans" + div.style.zIndex;
}