// -- Apollo carrousel script

// variabelen aanmaken
var car_item	= new Array();

var carrousel	= new Object();
var car_back	= new Object();
var car_titel	= new Object();
var car_prijs	= new Object();
var car_extra	= new Object();

var car_cur_id	= Number();
var car_mover	= false;
var car_fader	= false;
var car_fade	= 1;

function car_do_fade()
{	// set de transparantie van de carrousel in
	car_back.style.opacity = car_fade;
	car_back.style.filter = 'Alpha(Opacity='+(100*car_fade)+')';
}

function car_change_fade()
{	// verander de huidige transparantie totdat deze op 100% staat
	if( car_fade == 0.8 )
	{
		clearInterval(car_fader);
		car_fader = false;
		car_fade = 0.999;
	}
	else
	{
		car_fade += 0.2
	}
	
	car_do_fade();
}

function car_start_fade()
{	// start het 'faden'
	car_fade = 0;
	car_do_fade();
	if( !car_fader )
	{
		car_fader = setInterval('car_change_fade()', 80);
	}
}

function car_init()
{	// pagina is geladen, gegevens kunnen uit de HTML-code gehaald worden
	carrousel	= document.getElementById('carrousel');
	
	car_back	= document.getElementById('main_item');
	car_prijs	= document.getElementById('car_prijs');
	car_extra	= document.getElementById('car_extra');
	
	// verwijzingen naar de carrousel items in een array plaatsen
	for(i=1;i<5;i++)
	{
		car_item[i] = document.getElementById('car_item'+i);
		
		car_item[i].onmouseover = function()
		{	// onmouseover-event voor de items
			car_over(this.name);
		}
	}
	
	// carrousel stoppen en weer laten bewegen bij mouse-events
	carrousel.onmouseover	= function(){ car_stop_move(); }
	
	carrousel.onmouseout	= function(){ car_start_move(); }
	
	car_back.onclick = function()
	{
		document.location.href = car_item[car_cur_id].getElementsByTagName('a')[0].href;	
	}
	
	car_cur_id = 4;
	
	// de eerstvolgende carrouselitem actief maken
	car_next();
	// de carrousel bewegen
	car_start_move();
}

function car_over(id)
{	// wat moet er gebeuren bij een mouseover ?
	if( (id < 1) || (id > 4) )
	{	// als de id niet binnen 1 en 4 valt
		return false;
	}
	
	if( car_cur_id == id )
	{	// voer nooit twee keer dezelfde actie uit
		return false;
	}
	
	// de carrousel 'faden'
	car_start_fade();
	
	// vorige item niet mee onderstrepen, en de nieuwe onderstrepen
	car_item[car_cur_id].getElementsByTagName('a')[0].className		= '';
	car_cur_id = id;
	car_item[car_cur_id].getElementsByTagName('a')[0].className		= 'active';
	
	// alle gegevens van de huidige item binnenhalen
	cur_item = car_item[id].getElementsByTagName('input');
	
	// aan de hand van die gegevens de afbeelding en de teksten wijzigen
	car_back.style.backgroundImage = 'url('+cur_item[0].value+')';				// afbeelding
	car_extra.style.display = cur_item[1].value > '' ? 'block' : 'none'			// al dan niet tonen
	car_extra.innerHTML = cur_item[1].value;									// extra tekst
	car_prijs.style.display = cur_item[2].value > '' ? 'block' : 'none'			// al dan niet tonen
	car_prijs.innerHTML = cur_item[2].value + ',-';									// de prijs
}

function car_next()
{	// volgend item actief maken
	var car_next_id = car_cur_id != 4 ? Number(car_cur_id) + 1 : 1;
	car_over(car_next_id);
}

function car_start_move()
{
	if( car_mover == false )
	{	// als de interval niet al loopt, maak deze dan aan
		car_mover = setInterval('car_next()', 4000);
	}
}

function car_stop_move()
{
	if( car_mover != false)
	{	// als de interval niet al gestopt is, stop deze dan
		clearInterval(car_mover);
		car_mover = false;
	}
}

// voeg de handler toe
if( window.addEventListener )
{
	window.addEventListener("load", car_init, false);
}
else if( window.attachEvent )
{
	window.attachEvent("onload", car_init);
}