var headeffect;
var images = Array('','0-1','0-2','0-3','0-4','0-5','0-6','0-7','0-8','0-9','1-0','1-1','1-2','1-3','1-4','1b-5b','1b-6b','1b-7b','1b-8b');
var number = 1;
var zindex = 1;

var bezig = false;
var height;
var topW;
var teller1 = 0;
var do1 = false;
var pe;

//ouders
var oudersnr = '';
var zindex;
var oudersImages;
var oe;

function changeImageOuders()
{
	if ($('oudersTopFoto'))
	{
		if (oudersnr == '')
		{
			oudersImages = $('oudersTopFoto').childElements();
			zindex = oudersImages.length;
			oudersnr = 0;
		}
		if (oudersnr == oudersImages.length)
			oudersnr = 0;
		
		if (oudersImages.length > 1)
		{
			oudersImages[oudersnr].style.zIndex = zindex;
			oudersImages[oudersnr].style.display = 'none';
			oe = new Effect.Appear(oudersImages[oudersnr], {delay: 8, duration: 2.0, afterFinish: function(){
					oudersnr += 1;
					zindex += 1;
					changeImageOuders();
				}
			});
		}
	}
}

function setAge()
{
	if (age > 1)
	{
		var pad;
		if ($('cntHolder'))
		{
			pad = '/sjablonen/3/images/teller/'
			fup1 = $('frontup1');
			fup2 = $('frontup2');
			fdown1 = $('frontdown1');
			fdown2 = $('frontdown2');
		}
		if ($('cntHolders'))
		{
			pad = '/sjablonen/3/images/teller_small/'
			fup1 = $('frontup1s');
			fup2 = $('frontup2s');
			fdown1 = $('frontdown1s');
			fdown2 = $('frontdown2s');
		}
		if (typeof(fup1) != "undefined") 
		{
			if (fup1)
			{
				teller1 = images[age].split('-')[0];
				fup1.src = pad + images[age].split('-')[0] + 'u.png';
				fdown1.src = pad + images[age].split('-')[0] + 'd.png';
				
				fup2.src = pad + images[age].split('-')[1] + 'u.png';
				fdown2.src = pad + images[age].split('-')[1] + 'd.png';
				number = age;
			}
		}
	}
}

function gotoLanding()
{
	var locId;
	switch (number)
	{
		case 1:
		case 2:
		case 3:
		case 4:
			locId = 0;
			break;
		case 5:
		case 6:
		case 7:
		case 8:
		case 9:
		case 10:
			locId = 1;
			break;
		case 11:
		case 12:
		case 13:
		case 14:
			locId = 2;
			break;
		case 15:
		case 16:
		case 17:
		case 18:
			locId = 3;
			break;
	}
	
	//arrLanding wordt gedefinieerd in layout_begin
	document.location.href = "/sjablonen/3/infotype/webpage/view.asp?objectID=" + arrLanding[locId] + "&age=" + number;
}

// teller
function klik(dir, size)
{
	var heightdown = 142;
	var heightup = 153;
	var steps = 30;
	var speedup = 0.01;
	var speeddown = 0.03;
	
	
	var fup1 = $('frontup1');
	var fup2 = $('frontup2');
	var fdown1 = $('frontdown1');
	var fdown2 = $('frontdown2');
	
	var bup1 = $('backup1');
	var bup2 = $('backup2');
	var bdown1 = $('backdown1');
	var bdown2 = $('backdown2');
	
	var pad = '/sjablonen/3/images/teller/'
	
	if (size == 'small')
	{
		heightdown = 48;
		heightup = 52;
		steps = 10;
		speedup = 0.01;
		speeddown = 0.03;
		
		fup1 = $('frontup1s');
		fup2 = $('frontup2s');
		fdown1 = $('frontdown1s');
		fdown2 = $('frontdown2s');
		
		bup1 = $('backup1s');
		bup2 = $('backup2s');
		bdown1 = $('backdown1s');
		bdown2 = $('backdown2s');
		
		pad = '/sjablonen/3/images/teller_small/'
	}
	
	if (!bezig)
	{
		if (dir == 'up')
		{
			if (number < images.length-1)
			{
				bezig = true;
				number += 1;
				// zet de achterafbeelding
				bup2.src = pad + images[number].split('-')[1] + 'u.png';
				bdown2.src = pad + images[number-1].split('-')[1] + 'd.png';

				if (teller1 != images[number].split('-')[0])
				{
					bup1.src = pad + images[number].split('-')[0] + 'u.png';
					bdown1.src = pad + images[number-1].split('-')[0] + 'd.png';
					do1 = true;
					teller1 = images[number].split('-')[0];
				}
				topW = 0;
				height = heightup;
				
				pe = new PeriodicalExecuter(function(pe) {
					if (height > 0)
					{
						topW += steps;
						height -= steps;
						if (height < 0)
							height = 0;

						fup2.setStyle({'top':topW+'px','height':height+'px'});
						if (do1)
							fup1.setStyle({'top':topW+'px','height':height+'px'});
					}
					else
					{
						pe.stop();
						fup2.src = pad + images[number].split('-')[1] + 'u.png';
						fup2.setStyle({'top':'0px','height':heightup + 'px'});
						if (do1)
						{
							fup1.src = pad + images[number].split('-')[0] + 'u.png';
							fup1.setStyle({'top':'0px','height':heightup + 'px'});
						}
						height = 0;
						fdown2.setStyle({'height':height+'px'});
						fdown2.src = pad + images[number].split('-')[1] + 'd.png';
						if (do1)
						{
							fdown1.setStyle({'height':height+'px'});
							fdown1.src = pad + images[number].split('-')[0] + 'd.png';
						}
					
						pe = new PeriodicalExecuter(function(pe) {
							if (height < heightdown)
							{
								height += steps;
								if (height > heightdown)
									height = heightdown;
									
								fdown2.setStyle({'height':height+'px'});
								if (do1)
									fdown1.setStyle({'height':height+'px'});
							}
							else
							{
								pe.stop();
								if (do1)
								{
									fdown1.setStyle({'height':heightdown+'px'});
									do1 = false
								}
								bezig = false;
							}
						}, speedup);
					}
				}, speeddown);
			}
		}
		else
		{
			if (number > 1)
			{
				bezig = true;
				number -= 1;
				// zet de achterafbeelding
				bup2.src = pad + images[number+1].split('-')[1] + 'u.png';
				bdown2.src = pad + images[number].split('-')[1] + 'd.png';

				if (teller1 != images[number].split('-')[0])
				{
					bup1.src = pad + images[number+1].split('-')[0] + 'u.png';
					bdown1.src = pad + images[number].split('-')[0] + 'd.png';
					do1 = true;
					teller1 = images[number].split('-')[0];
				}
				
				topW = 0;
				height = heightup;
				pe = new PeriodicalExecuter(function(pe) {
					if (height > 0)
					{
						height -= steps;
						if (height < 0)
							height = 0;
						fdown2.setStyle({'height':height+'px'});
						if (do1)
							fdown1.setStyle({'height':height+'px'});
					}
					else
					{
						pe.stop();
						fdown2.src = pad + images[number].split('-')[1] + 'd.png';
						fdown2.setStyle({'height':heightdown + 'px'});
						if (do1)
						{
							fdown1.src = pad + images[number].split('-')[0] + 'd.png';
							fdown1.setStyle({'height':heightdown + 'px'});
						}
						height = 0;
						fup2.setStyle({'height':height+'px'});
						fup2.src = pad + images[number].split('-')[1] + 'u.png';
						if (do1)
						{
							fup1.setStyle({'height':height+'px'});
							fup1.src = pad + images[number].split('-')[0] + 'u.png';
						}
					
						topW = heightup;
						pe = new PeriodicalExecuter(function(pe) {
							if (height < heightup)
							{
								height += steps;
								topW -= steps;
								if (height > heightup)
								{
									height = heightup;
									topW = 0;
								}
								fup2.setStyle({'top':topW+'px','height':height+'px'});
								if (do1)
									fup1.setStyle({'top':topW+'px','height':height+'px'});
							}
							else
							{
								pe.stop();
								if (do1)
								{
									fup1.setStyle({'top':'0px','height':heightup+'px'});
									do1 = false
								}
								bezig = false;
							}
						}, speedup);
					}
				}, speeddown);
			}
		}
	}
}

//top banner
function showHead()
{
	headeffect = new Effect.Move('head', {
		x: 0, y: -90, mode: 'relative', delay: 5,
		transition: Effect.Transitions.sinoidal,
		afterFinish: function() {
			hideHead();
		}
	});
}

function hideHead()
{
	headeffect = new Effect.Move('head', {
		x: 0, y: 90, mode: 'relative', delay: 10,
		transition: Effect.Transitions.sinoidal,
		afterFinish: function() {
			showHead();
		}
	});
}

//kroonjuwelen
function openJuwel(objectid)
{
	var url = '/sjablonen/3/inc/getJuwel.asp?objectid=' + objectid;
	new Ajax.Request(url, {
		method: 'get',
		onSuccess: function(transport) {
			var jsonBody = transport.responseJSON.juwel;
			$('boxTitel').innerHTML = jsonBody.titel;
			$('boxContent').innerHTML = jsonBody.body;
			
			$('photoStrip').innerHTML = '';
			var image;
			for(var i = 0; i < jsonBody.images.length; i++)
			{
				image = new Element('img', {'id': 'image' + i, 'src' : jsonBody.images[i]});	
				$('photoStrip').insert(image);
			}
			
			tcw = $('containerTotal').getHeight();
			if (tcw > document.viewport.getHeight())
				$('kjHolder').style.height = tcw + 'px';
			$('kjHolder').style.display = 'block';
			$('kjbg').style.display = 'block';
		}
	});
}

function closeJuwel()
{
	$('kjHolder').style.display = 'none';
	$('kjbg').style.display = 'none';
}

var cntImages = 3;
var activeImage = 0
var slideEffect;
var busy = false;
var width;

function slideLeft()
{
	if (!busy)
	{
		if (activeImage > 0)
		{
			activeImage -= 1;
			if ($('image'+activeImage))
			{
				busy = true;
				width = $('image'+activeImage).width;
				slideEffect = new Effect.Move($('photoStrip'),{
					x: width,
					y:0,
					duration: 1,
					mode:'relative',
					afterFinish: function() {
						busy = false;
					}
				});
			}
		}
	}
}

function slideRight()
{
	if (!busy)
	{
		if (activeImage < cntImages-1)
		{
			if ($('image'+activeImage))
			{
				busy = true;
				width = $('image'+activeImage).width;
				slideEffect = new Effect.Move($('photoStrip'),{
					x: -width,
					y:0,
					duration: 1,
					mode:'relative',
					afterFinish: function() {
						busy = false;
					}
				});
				activeImage += 1;
			}
		}
	}
}


Event.observe(window, 'load', showHead);
Event.observe(window, 'load', setAge);
Event.observe(window, 'load', changeImageOuders);