// JavaScript Document
var Portfolio = {};

Portfolio.previewImage = null;

Portfolio.registerPreview = function() {
	
	var currentIndex = 0;
	var intervalId;
	
	var thumbs = document.getElementById('thumbnails').getElementsByTagName("a");
	var lists = document.getElementById('thumbnails').getElementsByTagName("li");
	
	var onclickPreview = function() {
		
		if(currentIndex == lists.length) {
			clearInterval(intervalId);
			return;
		}
		
		Portfolio.registerMouseover(thumbs[currentIndex]);
		Portfolio.moveToStage(lists[currentIndex]);
		
		currentIndex++;
		
	}
	
	onclickPreview();
	intervalId = setInterval(onclickPreview, 200);
	
	Portfolio.displayPreview(thumbs[0]);
}

Portfolio.registerMouseover = function(element) {
	
	element.style.opacity = .70;
	element.style.filter = "alpha(opacity=70)";
		
	element.onmouseover = function(e) {
		Portfolio.displayPreview(element);
		element.style.opacity = 1;
		element.style.filter = "alpha(opacity=100)";
	}
	
	element.onmouseout = function(e) {
		element.style.opacity = .70;
		element.style.filter = "alpha(opacity=70)";	
	}
	
}

Portfolio.displayPreview = function(element) {
	document.getElementById('preview').innerHTML = "<a href='" + element.href + "' target='_blank'><img src='images/welcome/preview/" + element.getAttribute('title') + ".jpg' border='0' /></a>";	
}

Portfolio.moveToStage = function(element) {
	
	var paddingTop = 150;
	var intervalId;
	
	var moveUp = function() {
		
		element.style.paddingTop = paddingTop + "px";
		if(paddingTop == 0) {
			clearInterval(intervalId);	
		}
		paddingTop -= 10;
		
	}
	
	moveUp();
	element.style.visibility = "visible";
	intervalId = setInterval(moveUp, 25);
	
	
}