var animFadeInTimer;
var animFadeOutTimer;
var animLoopTimer;
var animInitTimer;
var ttTimer = null;
var clearedTimers = false;
var cancelAnimation = false;

var restartTime  = 1000;
var fadeDelay    = 1200;
var fadeOutSpeed = 50;
var fadeInSpeed  = 100;
var opacityStep  = 10;

var timerBase;

function startTimer() {
	return;
   var dt = new Date();
	timerBase = dt.getTime();
}

function getTimer() {
	return;
	var dt = new Date();
	return (timerBase - dt.getTime());
}

function writeLog(txt) {
	return;
   var txtNode = document.createElement('div');
   txtNode.innerHTML = txt;
	document.getElementById('log').appendChild(txtNode);
}

function highlightFinger(index) {
	writeLog('highlightFinger(' + index + ');');
	if( index > 4 ) {
		writeLog('[index > 5]:return highlightFinger(' + index + ');');
		return;
	}

   startTimer();
	writeLog('[fadeIn] starthighlightFinger(' + index + ');');
	var curFinger  = document.getElementById('finger_' + index);
	var curLabel   = document.getElementById('label_' + index);
	var curOpacity = (arguments.length == 1 ? 0 : arguments[1]);
	curFinger.firstChild.style.opacity = curOpacity / 100;
	curFinger.firstChild.style.filter  = 'alpha(opacity=' + curOpacity + ')';
	curLabel.firstChild.style.opacity = curOpacity / 100;
	curLabel.firstChild.style.filter  = 'alpha(opacity=' + curOpacity + ')';

	if( index == 1 && curOpacity == 0 ) window.setTimeout(function() { tooltipFader('in', 0); }, 500);

	if( curOpacity <= 100 ) {
		writeLog('[fadeIn: ' + getTimer() + 'ms] highlightFinger(' + index + ');');
		animFadeInTimer = window.setTimeout(function() { highlightFinger(index, (curOpacity + opacityStep)); }, fadeInSpeed);
	}
	else {
		writeLog('[fadeNext: ' + getTimer() + 'ms] highlightFinger(' + index + ');');
		animInitTimer = window.setTimeout(function() { highlightFinger(index + 1); fadeFinger(index); }, fadeDelay);
	}
}

function fadeFinger(index) {
	if( index > 5 ) {
      writeLog('[index > 5]:return fadeFinger(' + index + ');');
		return;
	}

   startTimer();
	var curFinger  = document.getElementById('finger_' + index);
	var curLabel   = document.getElementById('label_' + index);
	var curOpacity = (arguments.length == 1 ? 100 : arguments[1]);
	curFinger.firstChild.style.opacity = curOpacity / 100;
	curFinger.firstChild.style.filter  = 'alpha(opacity=' + curOpacity + ')';
	curLabel.firstChild.style.opacity = curOpacity / 100;
	curLabel.firstChild.style.filter  = 'alpha(opacity=' + curOpacity + ')';

	if( curOpacity > 0 ) {
      writeLog('[fadeIn: ' + getTimer() + 'ms] fadeFinger(' + index + ')');
		animFadeOutTimer = window.setTimeout(function() { fadeFinger(index, (curOpacity - opacityStep)); }, fadeOutSpeed);
	}
	else if( index == 4 ) {
		writeLog('call restartAnimTimers() from fadeFinger(' + index + ')');
		restartAnimTimers();
	}
}

function clearAnimTimers() {
	writeLog('[init] clearAnimTimers()');
	if( !clearedTimers ) {
		writeLog('[clear] clearAnimTimers()');
		window.clearTimeout(animFadeInTimer);
		window.clearTimeout(animFadeOutTimer);
		window.clearTimeout(animLoopTimer);
		window.clearTimeout(animInitTimer);
	}

	for( var i = 1; i <= 4; i++ ) {
		writeLog('[reset:' + i + '] clearAnimTimers()');
		document.getElementById('finger_' + i).firstChild.style.opacity = 0.0;
		document.getElementById('finger_' + i).firstChild.style.filter  = 'alpha(opacity=0)';
		document.getElementById('label_' + i).firstChild.style.opacity = 0.0;
		document.getElementById('label_' + i).firstChild.style.filter  = 'alpha(opacity=0)';
	}

   writeLog('[done] clearAnimTimers()');
	clearedTimers = true;
}

function restartAnimTimers() {
	writeLog('[init] restartAnimTimers()');
	if( !clearedTimers ) {
		writeLog('[!clearedTimers]:return restartAnimTimers()');
      clearAnimTimers();
		//return;
	}

   writeLog('[restart] restartAnimTimers()');
	animLoopTimer = window.setTimeout(function() { highlightFinger(1); }, restartTime);
	clearedTimers = false;
}

function tooltipFader(fadeMode, opacity) {
	if( cancelAnimation ) return;
	var ttElement  = document.getElementById('infotooltip');
	var curOpacity = opacity;

	if( fadeMode == 'in' ) curOpacity += 10;
	else if( fadeMode == 'out' ) curOpacity -= 10;

	ttElement.firstChild.style.opacity = curOpacity / 100;
	ttElement.firstChild.style.filter  = 'alpha(opacity=' + curOpacity + ')';

   if( fadeMode == 'in' && curOpacity < 100 ) {
		ttTimer = window.setTimeout(function() { tooltipFader(fadeMode, curOpacity); }, 50);
	}
	else {
		window.clearTimeout(ttTimer);
		cancelAnimation = true;
	}
   /*
	else if( fadeMode == 'out' && curOpacity > 0 ) {
		ttTimer = window.setTimeout(function() { tooltipFader(fadeMode, curOpacity); }, 50);
	}
	else {
      if( fadeMode == 'in' && curOpacity == 100 ) {
      	window.clearTimeout(ttTimer);
      	ttTimer = window.setTimeout(function() { tooltipFader('out', 100); }, 4000);
		}
	}
	*/
}