var portfolioImage = new Array('1.jpg','2.jpg','3.jpg','4.jpg');
var imageDir = 'img/portfolio/';
var imageCount = 1;
var thisImage = new Image();
var thisImageHeight = 0;
var initialBottomPos = 0;
var currentBottomPos = 0;
var targetBottomPos = 0;
var imageOpacity = 0;
var dropAmount = 20;
var raiseAmount = 30;

function initializePortfolio() {
		currentBottomPos = document.getElementById('portfolioBottom').offsetTop;
		initialBottomPos = currentBottomPos;
		loadImage();
}

var interval = null;
var returnInterval = null;
function loadImage() {
	if(returnInterval!=null) {
		clearTimeout(returnInterval);
		returnInterval = null;
	}
	if(interval==null) {
		if(document.getElementById('portfolioImage').childNodes.length>0) {
			document.getElementById('portfolioImage').removeChild(document.getElementById('portfolioImage').lastChild);
			thisImage = new Image();
		}
		thisImage.src = imageDir+imageCount+'.jpg';
	} else {
		clearTimeout(interval);
	}
		
	if(thisImage.complete) {
		document.getElementById('loading').style.display="none";
		
		interval = null
			
		document.getElementById('portfolioImage').appendChild(thisImage);
		thisImageHeight = thisImage.offsetHeight;
		targetBottomPos = currentBottomPos+thisImageHeight;
		dropBottom();
	} else {
		if(document.getElementById('loading').style.display=="none") {
			document.getElementById('loading').style.display="block";
		}
		interval = setTimeout('loadImage()',15);
	}
}

function dropBottom() { 
	if(interval!=null) {
		clearTimeout(interval);
	}
		
	if(currentBottomPos<targetBottomPos) {
		if(targetBottomPos-currentBottomPos<=dropAmount) {
			currentBottomPos+=1;
			document.getElementById('portfolioBottom').style.top=currentBottomPos+"px";
			interval = setTimeout('dropBottom()',15);
		} else {
			currentBottomPos+=dropAmount;
			document.getElementById('portfolioBottom').style.top=currentBottomPos+"px";
			interval = setTimeout('dropBottom()',30);
		}
	} else {
		interval = null;
		
		fadeIn();
	} 
}

function fadeIn() {
	if(interval!=null) {
		clearTimeout(interval);
	}
	
	if(imageOpacity<100) {
		imageOpacity+=5;
		document.getElementById('portfolioImage').style.opacity = imageOpacity/100;
		document.getElementById('portfolioImage').style.filter = 'alpha(opacity='+imageOpacity+')';
		interval = setTimeout('fadeIn()',15); 
	} else {
		interval = null;
	}
}

function show(which) {
	imageCount = which;
	fadeOut();
}

function fadeOut() {
	if(interval!=null) {
		clearTimeout(interval);
	}
	
	if(imageOpacity>0) {
		imageOpacity-=10;
		document.getElementById('portfolioImage').style.opacity = imageOpacity/100;
		document.getElementById('portfolioImage').style.filter = 'alpha(opacity='+imageOpacity+')';
		if(document.getElementById('loading').style.display=="none") {
			document.getElementById('loading').style.display="block";
		}
		interval = setTimeout('fadeOut()',15); 
	} else {
		interval = null;
		raiseBottom();
	}
}

function raiseBottom() {
	if(interval!=null) {
		clearTimeout(interval);
	}
	
	if(currentBottomPos>initialBottomPos) {
		if(currentBottomPos-initialBottomPos<=raiseAmount) {
			currentBottomPos-=1;
			document.getElementById('portfolioBottom').style.top=currentBottomPos+"px";
			interval = setTimeout('raiseBottom()',15);
		} else {
			currentBottomPos-=raiseAmount;
			document.getElementById('portfolioBottom').style.top=currentBottomPos+"px";
			interval = setTimeout('raiseBottom()',30);
		}
	} else {
		interval = null;
		returnInterval = setTimeout('loadImage()',500);
	}
}

//check if next image is already loaded
//load image if not
//continue to check if image is loaded
//lower port bottom when loaded
//fade in image
//fade out existing image
//raise port bottom