/* 
	Created by Shalaw
	email: info@ontube.nl

*/

window.onload = function() {
					animateMarquee();
				};



function animateMarquee() {
// Seek for the ul element with the classname 'trendscontent'. 
// used for loop because native javascript doesn't have getElementByClassName
// U can also just give it an ID and look for that :)
var uls = document.getElementsByTagName('UL');
	for(i=0,l=uls.length; i < l; i++) {
		if(uls[i].className == 'trendscontent') {
		var elm = uls[i];
		}
	}
if(elm) {
	//set the needed variables
	var width = elm.offsetWidth;
	var half = 0 - (width / 2); // negative number
	var scrollPos = 0;
	var ani;
	
	// set the width of elm
	elm.style.width = width + 'px';
	
	// the animation function 
	function marqAni (stop) {
				if(stop == 'stop') {clearInterval(ani); return;}
				ani = setInterval(function() {
				scrollPos -= 1;
				elm.style.left = scrollPos + 'px';
			
				if(scrollPos == Math.round(half)) {
				scrollPos = 0;
				elm.style.left = 0 + 'px';
						}
					},30);
	};
	
	//start animation
	marqAni();
	
	//handle the mouse functions
	elm.onmouseover = function(e) {
	if(!e) {e = window.event; target = window.event.srcElement;} else {target = e.target;}
		if(target.nodeName == 'A') {
		
		//stop animation
		marqAni('stop');
		
		//call tooltip
			var a = {
					name: target.name,
					url: target.href
					};
			var desc = (target.nextSibling.nodeName != '#text') ? target.nextSibling : target.nextSibling.nextSibling;
			var desc = (desc.textContent) ? desc.textContent : desc.innerText;
			var mouseX = (e.clientX) ? e.clientX + document.body.scrollLeft : e.pageX;
			var mouseX = (findPos(target))[0] - 112;
			var timer = setTimeout(function() {toolTip(a,desc,mouseX,'in'); },500);
		//if on mouseout stop tooltip do animation
			target.onmouseout = function() {
								//clear any timeuots
								clearTimeout(timer);
								
								// start scroll animation
								marqAni();
								
								// fade toolTip out
								toolTip('','','','out');
								}
		}
	};
	
	
		// tooltip function
		function toolTip(a,desc,mouseX,fade) {
		var tip = document.getElementById('trendtip');
		
		// check for fade in or out
		if(fade == 'in') {
			var ahref = tip.getElementsByTagName('A')[0];
	
				//opacity variables
				var opacity = 0;
				var opacityIE = 0;
				
				//put contents in tooltip
				(ahref.textContent) ? ahref.textContent= a.name : ahref.innerText = a.name;
				
				
				// do something for description
				
				//
				
				// do position
				var pos = mouseX + ((a.name.length / 2) * 5);
				if(window.innerWidth >= 2250) {
					if(pos <= 20) {
					pos = 20;
					}
				}
				
				tip.style.left = pos + 'px';
				
				// Fade in the tooltip

			if (typeof(tip.style.filter) !== 'undefined') {
					tip.firstChild.style.display = 'none'; // hide the tip for ie in the begining
					tip.style.filter = 'alpha(opacity=0)';
					tip.style.display = 'block';
					
					var fade = setInterval(function(){
					opacityIE += 20;
					tip.style.filter = 'alpha(opacity='+opacityIE+')';
						if(opacityIE == 100) {
						tip.firstChild.style.display = 'block'; // reveal tip when 100 % in internet explorer
						clearInterval(fade);
						opacityIE = 0;
						}
						
					},40);
					
				} else {
					tip.style.opacity = 0;
					tip.style.display = 'block';
					var fade = setInterval(function(){
					opacity += 0.2;
					tip.style.opacity = opacity;
						if(opacity == 1 || opacityIE == 100) {
						clearInterval(fade);
						opacity = 0;
						}
						
					},40);
				}
		
		
		} else if(fade == 'out') {
					
					// fade out the toolTip
			    if (typeof(tip.style.filter) !== 'undefined') {
					tip.firstChild.style.display = 'none'; // hide tip for internet explorer
					var opacityIE = 100;
					
					var fade = setInterval(function(){
					opacityIE -= 20;
					tip.style.filter = 'alpha(opacity='+opacityIE+')';
					
						if(opacityIE <= 0) {
						clearInterval(fade);
						tip.style.filter = 'alpha(opacity=0)';
						tip.style.display = 'none';
						}
						
					},40);
					
				} else {
					var opacity = 1;
					
					var fade = setInterval(function(){
					opacity -= 0.2;
					tip.style.opacity = opacity;
					
						if(opacity <= 0) {
						clearInterval(fade);
						tip.style.opacity = 0; 
						tip.style.display = 'none';
						}
						
					},40);
				}
		
		}

		
		}
	}
}		


// some little functions is used

// find the pos of elm in offsetparent 
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
	do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
	} while (obj = obj.offsetParent);
	return [curleft,curtop];
	}
}