var actFeature = null;
var nextFeature = null;
var actAniFeature = null;
var waitTimer = null;
var aniTimer = null;
var color = [
	{r: 190, g: 190, b: 190},
	{r:44, g: 93, b: 152}
];

window.onload = function() {
	var i, elm;
	var featuremenu = document.getElementById('featuremenu');
	if(featuremenu) {
		var elms = featuremenu.getElementsByTagName('li');
		for(i=0; elm=elms[i]; i++) {
			elm.num = i;
			actAniFeature = actFeature = 0;
			elm.onmouseover = function() {
				blendElement(this.num);
			}
		}
		waitTimer = setTimeout('blendElement(1)', 8000);
	}
	var featuremenucontainer = document.getElementById('info');
	if (featuremenucontainer) {
		featuremenucontainer.onmouseover = function() {
			window.clearTimeout(waitTimer);
		}
		featuremenucontainer.onmouseout = function() {
				waitTimer = setTimeout('blendElement('+nextFeature+')', 8000);
		}
	}
	var login_name = document.getElementById('login_name');
	if(login_name) {
		login_name.focus();
	}
}

function blendElement(num) {
	var featuremenu = document.getElementById('featuremenu');
	if(num!=actAniFeature && featuremenu) {
		actAniFeature = num;
		clearTimeout(waitTimer);
		var elms = featuremenu.getElementsByTagName('li');
		blendObjectToColor(elms[num], 1);
		var div = $('feature_image_'+num).setStyles({
			display:'block',
			opacity: 0
		});
		new Fx.Style(div, 'opacity', {duration: 1000} ).start(1);
		var div3 = $('feature_text_'+num).setStyles({
			display:'block',
			opacity: 0
		});
		new Fx.Style(div3, 'opacity', {duration: 1000} ).start(1);
			
		if(actFeature != null) {
			blendObjectToColor(elms[actFeature], 0);
			var div2 = $('feature_image_'+actFeature);
			new Fx.Style(div2, 'opacity', {duration: 1000} ).start(0);
			var div4 = $('feature_text_'+actFeature);
			new Fx.Style(div4, 'opacity', {duration: 1000} ).start(0);
		}
		actFeature = num;
		var next = num==elms.length-1 ? 0 : num+1;
		nextFeature = next;
		waitTimer = setTimeout('blendElement('+next+')', 8000);
	}
}

function blendObjectToColor(obj, colorNum) {
	if(obj) {
		if(obj.aniInter) {
			clearInterval(obj.aniInter);
		}
		var c = obj.firstChild.style.color;
		if(c.substr(0, 3)=='rgb') {
			var colors = c.substring(c.indexOf('(')+1, c.indexOf(')')).replace(' ', '').split(',');
			var actItemColor = {r: parseInt(colors[0]), g: parseInt(colors[1]), b: parseInt(colors[2])};
		} else if(c.substr(0, 1)=='#') {
			actItemColor = {
				r: parseInt(c.substr(1, 2),16),
				g: parseInt(c.substr(3, 2),16),
				b: parseInt(c.substr(5, 2),16)
			}
		}
		var diff;
		if(colorNum==1) {
			diff = {
				r: actItemColor.r-color[1].r,
				g: actItemColor.g-color[1].g,
				b: actItemColor.b-color[1].b
			}
		} else {
			diff = {
				r: color[0].r-actItemColor.r,
				g: color[0].g-actItemColor.g,
				b: color[0].b-actItemColor.b
			}
		}
		var percent = 0;
		var time = new Date();
		var startTime = time.getTime();
		obj.aniInter = setInterval(function() {
			time = new Date();
			percent = Math.min(100, 100/1000*(time.getTime()-startTime));
			if(colorNum==1) {
			    var r = Math.round(actItemColor.r - (diff.r / 100 * percent));
				var g = Math.round(actItemColor.g - (diff.g / 100 * percent));
				var b = Math.round(actItemColor.b - (diff.b / 100 * percent))				
            } else {
                var r = Math.round(actItemColor.r + (diff.r / 100 * percent));
                var g = Math.round(actItemColor.g + (diff.g / 100 * percent));
                var b = Math.round(actItemColor.b + (diff.b / 100 * percent));
			}
			obj.firstChild.style.color = 'rgb('+r+', '+g+', '+b+')';
			if(percent>=100) {
				clearInterval(obj.aniInter);
			}
		}, 1);
	}
}