/**
 * @author jurriaan, sven
 */
//we gaan object georienteerd javascript doen
function Tip(speed)
{
	//alert('constructor');
	var changeInterval = speed*1000; //speed of animation 1 = 1s
	var currentActive = 0; //currently active item
	var lastActive = 0; //last active item
	var lastInterval = 0; //interval for cycle of images
	var images = new Array();  // store for registered images
	var items; // store for 
	
	//images to fade
	var displayimages = new Array(2);
	var activeImage = 0;

	//register my public functions
	this.RegisterImage = RegisterImage;
	this.Switch = Switch;
	
	//init after loading
	$(function () {
		//retrieve all li items
		items = $('#tipMenu li');
		
		//init the two images
		displayimages[0] = $("#tipImg0");
		displayimages[1] = $("#tipImg1");
		
		//set the 0th item to active if it exists
		if(items.length > 0)
		{
			items.hover(function(){ 
					clearInterval(lastInterval);
					SetActive(items.index(this));
				}, function(){
					SetActive(lastActive);
					lastInterval = setInterval(Switch, changeInterval);
				});
			SetActive(currentActive);
			lastInterval = setInterval(Switch, changeInterval);
		}else{ //hide the entire binnenkort div
//			$("#tipContainer").hide();
		}
	})
	
	function RegisterImage(id, src)
	{
		//alert("RegisterImage: "+ id + ", " +src);
		image = new Image();
		image.src = src;
		images[id] = image;
	}
	
	function SetActive(id) //takes the ith element and makes it active
	{
		//alert("setActive: " + id);
		items.removeClass("active");
		items.eq(id).addClass("active");
		$("#tipImgLink").attr("href", items.eq(id).children("a").attr("href"));
		displayimages[activeImage].attr("src",images[id].src);
	}
	
	function XFade()
	{
		//alert("xfade");
		displayimages[activeImage].animate({opacity: 'hide'}, changeInterval/2);
		displayimages[1-activeImage].animate({opacity: 'show'}, changeInterval/2);
		activeImage = 1-activeImage;
	}
	
	function Switch()
	{
		//alert("switch");
		currentActive = currentActive+1;
		if(currentActive >= items.length) currentActive = 0;
		$("#tipImgLink").attr("href", items.eq(currentActive).children("a").attr("href"));
		displayimages[1-activeImage].attr("src",images[currentActive].src);
		setTimeout(function(){
				items.removeClass("active");
				items.eq(currentActive).addClass("active");
			}, changeInterval*.15);
		XFade();
		lastActive = currentActive;
	}
}