/**
 * Boxflow JS
 * 
 * @author Kjell Bublitz
 */
document.observe('dom:loaded', function(){
	var isFreakingIE6 = (Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5))==6);
	var resetTimeout, nameFx, opaFx, aboutOver = false;
		
	$$('.boxflow .user-image a').invoke('writeAttribute', 'title', '');

	var userBoxes = $$('.boxflow .user');
	var userInfos = $$('.boxflow .user-info');
	var userAbouts = $$('.boxflow .user-about');
	var userImages = $$('.boxflow .headshot');
	var userLoads = $$('.boxflow .user-loading');

	var resetAnimated = function(){
		userAbouts.invoke('hide');
		userInfos.invoke('show');
		userImages.invoke('setOpacity', 1);
	};

	// hover animation
	userBoxes.invoke('observe', 'mouseover', function(event) {
		window.clearTimeout(resetTimeout);
		window.clearTimeout(opaFx);
		
		var element = event.findElement('.user');
		var aboutElement = element.next('.user-about');
		var nameElement = element.down('.user-info');
		var offset = element.positionedOffset();
		
		if ((offset.left) > 700) {
			aboutElement.addClassName('border-left');
			aboutElement.removeClassName('border-right');
			offset.left = offset.left - 300;
		} else {
			aboutElement.addClassName('border-right');
			aboutElement.removeClassName('border-left');
		}
		aboutElement.setStyle({'left':offset.left+'px','top':offset.top+'px'});
		
		resetAnimated();
		if (!isFreakingIE6){
			userImages.without(element.down('.headshot')).invoke('setOpacity', 0.5);
		}
		element.setOpacity(1);
		nameElement.hide();
		aboutElement.show();
		
	}).invoke('observe', 'mouseout', function(event) {
		
		var element = event.findElement('.user');
		var aboutElement = element.next('.user-about');
		var nameElement = element.down('.user-info');

		nameElement.show();
		aboutElement.hide();

		if (!isFreakingIE6){ 
			if (Prototype.Browser.IE) {
				userImages.without(element.down('.headshot')).invoke('setOpacity', 1);
			} else { 
				opaFx = window.setTimeout(function(){ // avoid flicker with timeout
					userImages.without(element.down('.headshot')).invoke('setOpacity', 1);
				}, 200);
			}
		}
		resetTimeout = window.setTimeout(resetAnimated, 200); 
	});

	// mouseover info div = hide
	$$('.boxflow .user-about').invoke('observe', 'mouseover', function(event){
		event.findElement('.user-about').hide();
	});

	// load effect
	$$('.boxflow .user-info, .boxflow .user-image img').each(function(element, i){
		window.setTimeout(function(){
			new Effect.Appear(element, {duration:0.4, afterFinish: function(){
				if (i == (userImages.length*2)-2) { // last iteration
					window.setTimeout(function(){userLoads.invoke('hide');}, 1000);
				}
			}});
		}, (i*20) );
	});
	
});