var interval = null;
var active = 0;

document.observe("dom:loaded", function() {
	//Fade
	$('search').setOpacity(0.8)
	
	$('searchStr').onfocus = function() {
		$('search').setOpacity(1)
	}
	
	$('searchStr').onblur = function() {
		$('search').setOpacity(0.8)
	}

});

function switchPosts() {

	//Hide all but first
	var posts = $$('#post .first');
	var images = new Array();
	
	posts.each(function(el, i) {
		var user = el.className.substr(el.className.indexOf(' u')+2)
		images.push(HOST+user+'/background');
	
		if(i > 0) {
			el.setOpacity(0)
			el.style.display = 'none';
		} else {
			//Set background for first post			
			$('post').style.backgroundImage = 'url('+HOST+user+'/background)';
		}
		
	})

	var icons = $$('#users ul li a');
	icons.each(function(el) {
	
		el.onclick = function() {
			showPost(this);
			return false;		
		}
		
	})
	
	//Preload backgrounds
	var loaded = 0;
	for(i = 0; i < images.length; i++) {
		var im = new Image;
		im.onload = function() {
			loaded++;

			if(loaded == 4)
				startAutoShow();
		}
		im.src = images[i];
		
	}

}

function showPost(el) {

	var posts = $$('#post .first');

	var show = $(el.parentNode.className);
	if(show.style.display != 'none')
		return false;
	
	//Hide selected
	posts.each(function(el) {
		if(el != show)
			new Effect.Fade(el, { from: 1, to: 0}) 
	});
	
	//Show selected
	show.setOpacity(0);
	show.style.display = 'block';
	new Effect.Fade(show, { from: 0, to: 1})
	
	//Change background
	var user = show.className.substr(show.className.indexOf(' u')+2)
	$('post').style.backgroundImage = 'url('+HOST+user+'/background)';
	
	return false;
			
}

function autoShowPost() {
	active++;
	var icons = $$('#users ul li a');
	
	if(active > icons.length-1)
		active = 0;
	
	showPost(icons[active]);
}

function startAutoShow() {

	if(interval == null)
		interval = setInterval('autoShowPost()', 5000);
		
}