/* Detect IE6: ie6 gebruikt geen PNG transparantie, dus gebruik dan GIF */
var imgExt;
if (Browser.Engine.trident4) {
	imgExt = 'gif';
	window.addEvent('domready', function() {
		if ($('close')) {
			$('close').setStyle('background-image', 'url(../css/close.gif)');
		}
	});
	if (showAnim == 'y'){
		alert("Waarschuwing: deze website is geoptimaliseerd voor Internet Explorer 7+ en Firefox 2+.");
	}
}
else imgExt = 'png';
/*  ====== ====== */

// left top storage
var lefttop = {};

// don't show animation if referred from within the site
var duration;
if (showAnim == 'y') {
	duration = 2500;
}
else duration = 1;

// ----------------- event handlers -------------------------------//
function showRound(el){
	var top = parseInt(el.getStyle('top'));
	var left = parseInt(el.getStyle('left'));
	lefttop.top = top;
	lefttop.left = left;
	var first = el.getFirst();
	if (first.getStyle('display') == 'none') return false; // check of situatie klopt
	first.setStyle('display','none');
	el.getLast().setStyle('display','block');
	el.setStyles({
		'top': top-40,
		'left': left-40,
		'z-index': 2
	});
}

function hideRound(el){
	var top = parseInt(el.getStyle('top'));
	var left = parseInt(el.getStyle('left'));
	var last = el.getLast();
	if (last.getStyle('display') == 'none') return false; // check of situatie klopt
	last.setStyle('display','none');
	el.getFirst().setStyle('display','block');
	el.setStyles({
		'top': top+40,
		'left': left+40,
		'z-index': 1
	});
}

var storePos = {}; // 
function clickImg(el){
	//indien muisaanwijzer al in rondje stond
	if (el.getLast().getStyle('display') == 'none'){
		showRound(el);
	}
	storePos.top = parseInt(el.getStyle('top')) + 40;
	storePos.left = parseInt(el.getStyle('left')) + 40;
	var box = new Box();
	el.setStyle('z-index',7);
	var ef1 = el.set('morph',{duration: 300, transition: Fx.Transitions.Cubic.easeIn});
	var ef2 = el.getLast().set('morph',{duration: 300, transition: Fx.Transitions.Cubic.easeIn});
	ef1.get('morph').start({
			'left': 32,
			'top': -68
	});
	ef2.get('morph').start({
			'width': 576,
			'height': 576,
			'opacity': 0
	}).chain(function(){
		// voor konqueror/safari
		hideRound(el);
		
		el.setStyles({
			'left': storePos.left,
			'top': storePos.top
		});
		el.getLast().setStyles({
			'width':96,
			'height':96,
			'z-index':1,
			'opacity':1
		});
		//resetStippen();
	});
	if (el.id == 'zwitserland'){
		box.open({info: picInfo[el.id], type:'image', path:'../images', group: new Array('zwitserland','zwitserland2','zwitserland3')});
	}
	else {
		box.open({info: picInfo[el.id], type:'image', path:'../images', name: el.id});
	}
	trap();
}

// ----- end event handlers ----- //

function resetStippen() {
	var divs = $$('div.stip');
	divs.each(function(el,index,object){
			el.setStyles({
					'top': StippenPos[index].top,
					'left': StippenPos[index].left
			});
	});
}

var StippenPos = {
	'0': {
		'top': 198,
		'left': 244
	},
	'1': {
		'top': 92,
		'left': 288
	},
	'2': {
		'top': 288,
		'left': 88
	},
	'3': {
		'top': 276,
		'left': 310
	},
	'4': {
		'top': 123,
		'left': 308
	},
	'5': {
		'top': 92,
		'left': 357
	},
	'6': {
		'top': 126,
		'left': 365
	},
	'7': {
		'top': 118,
		'left': 398
	},
	'8': {
		'top': 143,
		'left': 445
	},
	'9': {
		'top': 169,
		'left': 461
	},
	'10': {
		'top': 193,
		'left': 518
	},
	'11': {
		'top': 124,
		'left': 543
	},
	'12': {
		'top': 105,
		'left': 301
	}
}


window.addEvent('domready', function() {
	//adaptSize(false); // for view windows less than the min size, prevents too high negative top position
	window.addEvent('resize', adaptSize.pass(true)); // recalculate after window resize
	
	// ========================================================== //
	
	// info tooltip
	var infott = $('info');
	infott.addEvent('mouseenter', function(){
		$('tool-tip').setStyle('visibility', 'visible');
		$('tool-tip-text').setStyle('visibility', 'visible');
	});
	infott.addEvent('mouseleave', function(){
		$('tool-tip').setStyle('visibility', 'hidden');
		$('tool-tip-text').setStyle('visibility', 'hidden');
	});
	// hide until animation
	if (showAnim == 'y'){
		$('middle').set('opacity',0);
		$('middle').setStyle('border-width',0);
		$('title').set('opacity',0);
		$('info').set('opacity',0);
	}
	
	var divs = $$('div.stip');
	function animateStippen(){
		// show info button
		$('info').set('opacity',1);
		$('middle').setStyle('border-width',1);
		var myElementsEffects = new Fx.Elements(divs, {
				duration: duration,
				transition: Fx.Transitions.Quad.easeInOut
		});
		myElementsEffects.start(StippenPos).chain(function(){
			//preload images
			var i = 0; var ar = new Array();
			divs.each(function(el){
					ar[i] = '../images/'+el.id+'.jpg';
					i = i+1;
			});
			// extra zwitserland plaatjes
			ar[i] = '../images/zwitserland2.jpg';
			ar[i+1] = '../images/zwitserland3.jpg';
			var images_preloaded = new Asset.images(ar);
			
			// add events
			divs.each(function(el){
					el.addEvent('mouseenter', showRound.pass(el) );
					el.addEvent('mouseleave', hideRound.pass(el) );
					el.addEvent('click', clickImg.pass(el) );
			});
		});
	}
	
	//preload round images
	var i = 0; var ar = new Array();
	divs.each(function(el){
			ar[i] = '../images/round/'+el.id+'_round.'+imgExt;
			i = i+1;
	});
	var round_preloaded = new Asset.images(ar);
	
	//start effects
	if (showAnim == 'y'){
		var slideTitle = new Fx.Slide('title', {duration: 1000 });
		$('title').set('opacity',1);
		slideTitle.hide();
		slideTitle.slideIn().chain(function(){
				// animate letter colors
				var letters = $$('span#gekleurd span');
				var colors = new Array('green','blue','purple','red','orange','yellow');
				var stdColor = $('gekleurd').getStyle('color');
				var colorDelay = 130;
				letters.each(function(el){
						el.addEvents({
								'firstColor': function(el){
									var index = letters.indexOf(el);
									el.setStyle('color',colors[0]);
									(function(){
											el.fireEvent('secondColor',el);
											// pass to next letter
											if ($defined(letters[index+1]))
												letters[index+1].fireEvent('firstColor',letters[index+1]);
									}).delay(colorDelay);
								},
								'secondColor': function(el){
									var index = letters.indexOf(el);
									el.setStyle('color',colors[1]);
									(function(){
											el.fireEvent('thirdColor',el);
											// pass to next letter
											if ($defined(letters[index+1]))
												letters[index+1].fireEvent('secondColor',letters[index+1]);
									}).delay(colorDelay);
								},
								'thirdColor': function(el){
									var index = letters.indexOf(el);
									el.setStyle('color',colors[2]);
									(function(){
											el.fireEvent('fourthColor',el);
											// pass to next letter
											if ($defined(letters[index+1]))
												letters[index+1].fireEvent('thirdColor',letters[index+1]);
									}).delay(colorDelay);
								},
								'fourthColor': function(el){
									var index = letters.indexOf(el);
									el.setStyle('color',colors[3]);
									(function(){
											el.fireEvent('fifthColor',el);
											// pass to next letter
											if ($defined(letters[index+1]))
												letters[index+1].fireEvent('fourthColor',letters[index+1]);
									}).delay(colorDelay);
								},
								'fifthColor': function(el){
									var index = letters.indexOf(el);
									el.setStyle('color',colors[4]);
									(function(){
											el.fireEvent('sixthColor',el);
											// pass to next letter
											if ($defined(letters[index+1]))
												letters[index+1].fireEvent('fifthColor',letters[index+1]);
									}).delay(colorDelay);
								},
								'sixthColor': function(el){
									var index = letters.indexOf(el);
									el.setStyle('color',colors[5]);
									(function(){
											el.setStyle('color',stdColor);
											// pass to next letter
											if ($defined(letters[index+1]))
												letters[index+1].fireEvent('sixthColor',letters[index+1]);
									}).delay(colorDelay);
								}
						});
				});
				letters[0].fireEvent('firstColor',letters[0]);/* lijkt geen doel te hebben?
				for(var i=0; i<letters.length; i++){
					letters[i].setStyles
				}*/
				// do middle slide
				var slide = new Fx.Slide('slidediv', {duration: 1200, mode: 'horizontal'});
				$('middle').set('opacity',1);
				slide.hide();
				slide.slideIn().chain(animateStippen);
		});
	}
	else {
		animateStippen();
	}
	
	trap(); // prevent right-click context menu on images
});