$(document).ready(function(){
	
	var iStart = 0;
	var sTemplate = '<div id="name-{index}"><a href="' + sUri + '/de/mitglieder"><strong>{name}</strong><br />{job}</a></div>';
	var aHeights = new Array(180, 180, 128, 140);
	var iCurrItem = 1;

	addMembersToHeader();
	membersStartReset();
	membersStartFadeIn(1);
	
	function addMembersToHeader(){
		$('#header-names').empty();
		var sOut = '';
		for(var i = iStart; i < 4; i++){
			var oObj = new Object();
			oObj['index'] = i+1;
			oObj['name'] = aMembers[i]['name'];
			oObj['job'] = aMembers[i]['job'];
			sOut += replacePlaceholder(sTemplate, oObj);
		}
		$('#header-names').html(sOut);
		return true;
	}
	
	function membersStartFadeIn(iCurr){
		$('#header-names div#name-' + iCurr).animate({
			height : aHeights[iCurr - 1] + 'px'
		}, {
			duration: 900
		}).animate({
			width : 120 + 'px'
		}, {
			duration: 700,
			complete: function() {
				var i = iCurr + 1;
				if(i < 5){	 
					membersStartFadeIn(i);
				} else {
					iStart = 4;
					animateNextItem();
				}
			}
		});
	}
	
	function membersStartReset(){
		if(iStart == 0){
			$.map( $('#header-names div'), function(oObj, index){
				$(oObj).css({
					width: 0 + 'px',
					height: 0 + 'px'
				});
			});
		}
	}
	
	function animateNextItem(){
		
		$('#header-names div#name-' + iCurrItem).animate({
			width : 0 + 'px'
		}, {
			duration: 1400,
			complete: function() {
				var oObj = new Object();
				oObj['index'] = iCurrItem;
				oObj['name'] = aMembers[iStart]['name'];
				oObj['job'] = aMembers[iStart]['job'];
				sOut = replacePlaceholder(sTemplate, oObj);
				
				$('#header-names div#name-' + iCurrItem).remove();
				$('#header-names').append(sOut);
				$('#header-names div#name-' + iCurrItem).css({
					width: 0 + 'px'
				}).animate({
					width : 120 + 'px'
				}, {
					duration: 1600,
					complete: function() {
						if(iCurrItem == 4){
							iCurrItem = 1;
						} else {
							iCurrItem++;
						}
						if(iStart == aMembers.length - 1){
							iStart = 0;
						} else {
							iStart++;
						}
						
						animateNextItem();
					}
				});
			}
		});
	}
	
	function replacePlaceholder(sText, oObj){
		$.each(oObj, function(index, value){
			sText = sText.replace( new RegExp('{' + index + '}', 'gi'), value);
		});
		return sText;
	}
	
});