fade_time        = 9000; // Time between two fades in milliseconds.
fade_increment   = 30;   // The step size used to change the color.
background_color = [0xE8, 0xEB, 0xED];
text_color       = [0x4F, 0x4F, 0x52];


projects        = [];
current_project = 0;
fade_timeout_id = null;

// Implements a simple fade out followed by a fade in of the other element.
// Note: This is not cross fading.
function fade(from, to, increment, level) {
	level += increment;
	if(level <= 0) {
		// Completely faded in. done.
		level = 0;
		fade_timeout_id = fade.delay(fade_time, null, [to, (to + 1) % projects.length, -increment, 0]);
	}
	else if(level >= 255) {
		// Completely faded out. Start fading in the next project.
		projects[from].style.display = 'none';
		projects[to].style.display   = 'block';
		current_project = to;
		level = 255;
		fade_timeout_id = fade.delay(50, null, [from, to, -increment, level]);
	}
	else {
		fade_timeout_id = fade.delay(50, null, [from, to, increment, level]);
	}
	if(increment > 0)
		set_node_color(projects[from], level);
	else
		set_node_color(projects[to], level);
}

// Sets the color of a node and also applies it recursively to all its children.
// level = 0 means visible while level = 255 means invisible.
function set_node_color(node, level) {
	if(node == null)
		return;
	if(node.style != null) {
		var r = Math.round(level / 255.0 * background_color[0] + (1.0 - level / 255.0) * text_color[0]);
		var g = Math.round(level / 255.0 * background_color[1] + (1.0 - level / 255.0) * text_color[1]);
		var b = Math.round(level / 255.0 * background_color[2] + (1.0 - level / 255.0) * text_color[2]);
		node.style.color = 'rgb(' + r + ',' + g + ',' + b + ')';
	}
	var children = node.childNodes;
	for(var i = 0; i < children.length; ++i)
		set_node_color(children[i], level);
}

function initialize_fading() {
	projects = $$('#projects .project');
	if(projects.length > 1) {
		current_project = $random(0, projects.length - 1);
		for(var i = 0; i < projects.length; ++i) {
			if(i != current_project) {
				set_node_color(projects[i], 255);
				projects[i].style.display = 'none';
			}
		}
		projects[current_project].style.display = 'block';
		fade_timeout_id = fade.delay(fade_time, null, [current_project, (current_project + 1) % projects.length, fade_increment, 0]);
	}
	else {
		projects[0].style.display = 'block';
	}
}

function switch_to_project(inc) {
	next = (current_project + inc + projects.length) % projects.length;

	set_node_color(projects[current_project], 255);
	projects[current_project].style.display = 'none';

	set_node_color(projects[next], 0);
	projects[next].style.display = 'block';

	current_project = next;

	// Reinitialize the fade effect.
	if(fade_timeout_id)
		$clear(fade_timeout_id);
	fade_timeout_id = fade.delay(fade_time, null, [current_project, (current_project + 1) % projects.length, fade_increment, 0]);
}

window.addEvent('domready', function() {
	initialize_fading();
});