Cufon.replace('#header h1');
Cufon.replace('#content h2');

window.addEvent('domready', function(){
	if (Browser.Engine.trident){
		ieId();
	}
	if($('carouGal')){
		thumbToBig();
		cScroll();
	}
	if($('player')){
		embedFlv('includes/player.swf','player',{videoSrc: 'speeltuin_large.flv',vLength: 60});
	}
	if($('treinplayer')){
		embedFlv('includes/player.swf','treinplayer',{videoSrc: 'amsteltrein.flv',vLength: 21});
	}
	if($('route')){
		embedFlv('includes/route.swf','route',{});
	}
});

var ieId = function(){
	if(Browser.Engine.version == 4){
		$$('body').set('id','ie6');
	} else if(Browser.Engine.version == 5){
		$$('body').set('id','ie7');
	}
};

var embedFlv = function(flv, container, aVars){
	//if you changed the movie, please define the length of the movie in seconds at vLength.
	var obj = new Swiff(flv, {
		id: 'swfComponent',
		container: container,
		width: 560,
		height: 380,
		params: {
			wmode: 'opaque'
		},
		vars: aVars
	});

	
};

var changeColors = function(){
	//change the website colors with the active menu background color
	var bgColor = $$('#nav .active').getParent().getStyle('background-color');
	$$('a').setStyle('color', bgColor);
	$$('hr').setStyle('border-color', bgColor);
	$$('#header h1').setStyle('color', bgColor);
	$('container').setStyle('background-color', bgColor);
	$$('#content h2').setStyle('color', bgColor);
	$('footer').setStyle('color', bgColor);
	$$('footer a').setStyle('color', bgColor);
	$$('.active').setStyle('color','#412E0A');
};

var thumbToBig = function(){
	//add click event to each thumbnail
	$$('#galTCont a').each(function(el){
		el.addEvent('click',function(e){
			e.stop();
			$('galBig').getElement('img').src = this.getElement('img').src.replace("_t","");
		});
								   
	});
	//also automagicly show the first thumbnail as a big picture:
	$('galBig').getElement('img').src = $('galCarousel').getElement('img').src.replace("_t","");
};

var cScroll = function() {
	//hide carousel when there is only 1 image
	//hide arrows when there are less then 6 elements 
	//else set width of the container
	if ($$('#galCarousel a').length == 1){
		$('galCarCont').setStyle('display','none');
	}
	else if($$('#galCarousel a').length < 6){
		$('galLeft').fade('hide');
		$('galRight').fade('hide');
	} else {
		$('galTCont').setStyle('width', $$('#galCarousel a').length * (94+6));
		activArrows();
	}
};

var activArrows = function(){
	var arrowInterval;
	//activate the scrolling behavour on the arrows
	$('galLeft').hover(
		function(){
			arrowInterval = setInterval(scrollLeft, 30);
		},
		function(){
			clearInterval(arrowInterval);					   
		});
	$('galRight').hover(
		function(){
			arrowInterval = setInterval(scrollRight, 30);
		},
		function(){
			clearInterval(arrowInterval);					   
		});

};

var scrollLeft = function(){
	if ($('galTCont').getStyle('margin-left').toInt()<0){
		$('galTCont').editStyle('margin-left',6);
	}
};

var scrollRight = function(){
	if ((-$('galTCont').getStyle('width').toInt()+500)<$('galTCont').getStyle('margin-left').toInt()){
		$('galTCont').editStyle('margin-left',-6);
	}
};

Element.implement({
	'hover': function(fn1,fn2) {
		return this.addEvents({
			'mouseenter': function(e) {
				fn1.attempt(e,this);
			},
			'mouseleave': function(e) {
				fn2.attempt(e,this);
			}
		})
	},
	'TweenTo': function(property,value) {
	    var oldValue = this.getStyle(property).toInt();
	    this.tween(property, oldValue+value);
	    return this;
	},
	'editStyle': function(property,value) {
	    var oldValue = this.getStyle(property).toInt();
	    this.setStyle(property, oldValue+value);
	    return this;
	}
});