var familyItems = new Array();
var imageWidth = 0;
var currentItem = 0;
var selectedFamilyImage = ""
//var myIntervalTimer;
//var timerRunning = true;
//var timerIndex = 0;
//var intervalDuration = 8000;

function tabOver(calledFrom){
	calledFromImg = calledFrom.getElementsByTagName('img')[0];
	//if(calledFromImg.src.indexOf('_on.png') < 0){
	//	calledFromImg.src = calledFromImg.src.split('_off.png').join('_over.png');
	//}
	if(calledFromImg.src != selectedFamilyImage){
	    calledFromImg.src = calledFromImg.src.replace('famOff_','famOn_');
	}
}

function tabOut(calledFrom){
	calledFromImg = calledFrom.getElementsByTagName('img')[0];
	//if(calledFromImg.src.indexOf('_on.png') < 0){
	//	calledFromImg.src = calledFromImg.src.split('_over.png').join('_off.png');
	//}
	if(calledFromImg.src != selectedFamilyImage){
	    calledFromImg.src = calledFromImg.src.replace('famOn_','famOff_');
	}
	
}

function tabClick(calledFrom){
	var calledFromItem = calledFrom.parentNode.parentNode;
	var calledFromIndex = Number(calledFromItem.id.charAt(calledFromItem.id.length-1));
	if(timerRunning){
		timerRunning = false;
		clearInterval(myIntervalTimer);
	}
	setTabs(calledFromIndex);
}

function setTabs(activeIndex){
	//var easeDuration = 1000;
	var setX = 1;
	for(i=0; i<familyItems.length; i++){
		var thisImage = familyItems[i].getElementsByTagName('img')[0];
		var thisBanner = familyItems[i].getElementsByTagName('img')[1];
		$(familyItems[i]).css('left',setX+'px');
		//$(familyItems[i]).animate({left:setX},{queue:false,duration:easeDuration});
		if(i == activeIndex){
			//thisImage.src = thisImage.src.split('_over.png').join('_on.png');
			//thisImage.src = thisImage.src.split('_off.png').join('_on.png');
			thisImage.src = thisImage.src.replace('famOff_','famOn_');
			selectedFamilyImage = thisImage.src;
			$(familyItems[i]).css('width',imageWidth+'px');
			//$(familyItems[i]).animate({width:imageWidth},{queue:false,duration:easeDuration});
			setX += imageWidth;
		}
		else{
			thisImage.src = thisImage.src.split('_on.png').join('_off.png');
			$(familyItems[i]).css('width','30px');
			//$(familyItems[i]).animate({width:30},{queue:false,duration:easeDuration});
			setX += 30;
		}
	}
}

function initFamilySelector(){
	var allChildren = document.getElementById('familySelector').childNodes;
	var activeIndex = 0;
	
	for(i=0; i<allChildren.length; i++){
		if(allChildren[i].id){
			if(allChildren[i].id.indexOf('familyItem') == 0){
				familyItems.push(allChildren[i]);
				if(allChildren[i].className.indexOf('ACTIVE') > 0){
					activeIndex = familyItems.length-1;
				}
			}
		}
	}
	
	
	var defaultWidth = 945;
	var defaultTabs = 6;
	var removeWidth = 0
	if(familyItems.length < defaultTabs){
		removeWidth = Math.round(defaultTabs - familyItems.length) * 30;
	}
	var $selectorContainer = $('#familySelector');
	$selectorContainer.width(defaultWidth - removeWidth).css('left', Math.round(removeWidth/2) + 'px');
	
	var containerWidth = Number(document.getElementById('familySelector').style.width.split('px')[0]) - 3;
	
	
	imageWidth = containerWidth - ((familyItems.length - 1) * 30);
	currentItem = familyItems.length - 1;
	if(document.getElementById('familyHeader')){
		imageWidth -= 30;
		familyItems.push(document.getElementById('familyHeader'));
	}
	setTabs(activeIndex);
	//myIntervalTimer = setInterval("autoChange()",intervalDuration);
}

function autoChange(){
	if(timerIndex < familyItems.length-1){
		timerIndex += 1;
	}
	else{
		timerIndex = 0;
	}
	setTabs(timerIndex);
}