window.addEvent('domready', function() {
		
		var path = 'fileadmin/template/';
		//var path = '';
		/* -----------------------------
			TEASER
		-------------------------------- */
		//slider variables for making things easier below
		var itemsHolder = $('teaser');
		var myItems = $$(itemsHolder.getElements('.item'));
		
		//controls for slider
		var theControls = $('teaser_nav');
		var nummers		= $('teaser_num');
		var numNavHolder = $(nummers.getElement('ul'));
		var thePlayBtn = $(theControls.getElement('.play_btn'));
		var thePrevBtn = $(theControls.getElement('.prev_btn'));
		var theNextBtn = $(theControls.getElement('.next_btn'));
		
		// pas breedte rode achtergrond nummers aan
		numNavHolder.setStyle('width',(myItems.length * 20)+'px');
		
		//create instance of the slider, and start it up		
		var mySlider = new SL_Slider({
			slideTimer: 7000,
			orientation: 'horizontal',      //vertical, horizontal, or none: None will create a fading in/out transition.
			fade: true,                    //if true will fade the outgoing slide - only used if orientation is != None
			isPaused: false,
			container: itemsHolder,
			items: myItems,
			numNavActive: true,
			numNavHolder: numNavHolder,
			playBtn: thePlayBtn,
			prevBtn: thePrevBtn,
			nextBtn: theNextBtn
		});
		mySlider.start();

		/* -----------------------------
			ACCORDION
		-------------------------------- */
		var myAccordion = new Fx.Accordion( $$('#teksttoggle h3'), $$('#teksttoggle .news-toggle'), {
		
			show: 0,
			returnHeightToAuto: false,
			alwaysHide: true,
			opacity: true,
		
			onActive: function(toggler, accordion){

				$(accordion).setStyle('margin', '0px 0px 10px 18px' );
				$(toggler).setStyles({
					'color': '#D81835',
					'background-image': 'url('+path+'img/min_btn.gif)'
				});
			},
			onBackground: function(toggler, accordion){

				$(accordion).setStyle('margin', '0px 0px 0px 18px' );
				$(toggler).setStyles({
					'color': '#575757',
					'background-image': 'url('+path+'img/plus_btn.gif)'
				});
			}
		});	

		/* ---------------------------------
			HIGHTLIGHT TEKSTFIELD
		------------------------------------ */
		//adding a little animated rollover highlight
		var color_org = "#FFF";
		var color_new = "#A19885";

		$$('#teksttoggle h3').each(function(e, i){
		
			e.set('tween', {duration: 2000, transition: 'cubic:out', link: 'cancel'});
			e.addEvents({ 
				'mouseenter' : function() {
					this.tween('background-color', color_new);
				},
				'mouseleave' : function() {
					this.tween('background-color', color_org);
				}
			});
		});
});