function action_init() {
	var detail = $('toggle_action_detail');
	if(detail) {
		detail.onclick = function() {
			return toggle_action_detail(this);
		}
	}
}

function toggle_action_detail(elem) {
	var effect_y = 204;
	var new_className = 'detail_hidden';
	var new_img_src = '/img/nav_up.png';
	var new_img_alt = 'Toon';

	if(elem.className == "detail_hidden") {
		effect_y = -204;
		new_className = 'detail_opened';
		new_img_src = '/img/nav_down.png';
		new_img_alt = 'Verberg';
	}

	new Effect.Move('page_detail_3',{x:0,y:effect_y,duration:0.6,delay:0,
		afterFinish: function(effect) {
			elem.className = new_className;
			var inner_img = elem.getElementsByTagName('img')[0];
			inner_img.src = new_img_src;
			inner_img.alt = new_img_alt;
		}
	});

	return false;
}

Event.observe(window, 'load', action_init, false);

function detail_init() {
	var detail = $('toggle_detail');
	if(detail) {
		detail.onclick = function() {
			return toggle_detail(this);
		}
	}
}

function toggle_detail(elem) {
	var effect_y = 96;
	var new_className = 'detail_hidden';
	var new_img_src = '/img/nav_up.png';
	var new_img_alt = 'Toon';

	if(elem.className == "detail_hidden") {
		effect_y = -96;
		new_className = 'detail_opened';
		new_img_src = '/img/nav_down.png';
		new_img_alt = 'Verberg';
	}


	new Effect.Move('page_detail',{x:0,y:effect_y,duration:0.6,delay:0,
		afterFinish: function(effect) {
			elem.className = new_className;
			var inner_img = elem.getElementsByTagName('img')[0];
			inner_img.src = new_img_src;
			inner_img.alt = new_img_alt;
		}
	});

	return false;
}

Event.observe(window, 'load', detail_init, false);

function nav_init() {

	// Add hover-behaviour to every non-active link (without class="active")
	// in main nav and subnav <ul>'s
	$$('#main_ul_nav a', '#sub_ul_nav a').each(function(el) {
		// Moved condition inside hover function, so that button stays active
		// when nav is in level1 or higher
		// if(!el.hasClassName('active')) {
			el.onmouseover = function() {
				hover(this, 'in');
			}
			el.onmouseout = function() {
				hover(this, 'out');
			}
		// }
	});
	/*
	Verwijderd zodat men direct naar de betreffende productcategoriepagina gaat,
	met speciefieke achtergrondbeelden voor die categorie.
	// Add click-behaviour to every non-active link (without class="active")
	// in subnav <ul>
	$$('#sub_ul_nav a').each(function(el) {
		// Moved condition inside transform_level0 function, so that active button
		// does not perform the action (again)
		// if(!el.hasClassName('active')) {
			el.onclick = function() {
				return transform_level0(this);
			}
		// }
	});
	*/
}

function transform_level0(elem) {
	if(!elem.hasClassName('active')) {
		$$('#sub_ul_nav li.active').each(function(el) {
			new Effect.Fade(el.down('ul'), {duration:0.6,delay:0,
				afterFinish: function(effect) {
					effect.element.up('li').removeClassName('active');
				}
			});
		});

		$$('#sub_ul_nav a.active').each(function(el) {
			el.removeClassName('active');
			hover(el, 'out');
		});

		elem.up('li').addClassName('active');
		elem.up('li').down('ul').style.display = 'none';
		elem.addClassName('active');
		hover(elem, 'in');

		if($('page_producten').hasClassName('level0')) {
			$('opac_submenu_2').removeClassName('submenu_hide');
			new Effect.Move('page_producten',{x:0,y:-110,duration:0.6,delay:0,
				afterFinish: function(effect) {
					effect.element.removeClassName('level0');
					effect.element.addClassName('level1');
				}
			});
			new Effect.Appear(elem.up('li').down('ul'), {duration:0.6,delay:0.6});
			$('background').select('img')[0].src = 'img/afbeelding.jpg';
		} else if($('page_producten').hasClassName('level1')) {
			$('background').select('img')[0].src = 'img/afbeelding.jpg';
			console.log($('background').select('img')[0]);
			new Effect.Appear(elem.up('li').down('ul'), {duration:0.6,delay:0.3});
		}
	}

	return false;
}

function hover(elem, mode) {
	if(!elem.hasClassName('active')) {
		if(elem.getElementsByTagName('img')[0]) {
			var current_ext = '_idle';
			var new_ext = '_hover';
			if(mode == 'out') {
				current_ext = '_hover';
				new_ext = '_idle';
			}
			var new_img_src = '/img/' + elem.id + new_ext + '.png'; // /img/nav_winkels_hover.png
			elem.getElementsByTagName('img')[0].src = new_img_src;
		}
	}
}
Event.observe(window, 'load', nav_init, false);

function Slideshow(slideshow, timeout, panning_enabled, fadeonclick, slides) {
	this.slides = new Array();
	this.panning_enabled = panning_enabled;
	var slider = $('background');

	if(slider && slider.className == 'slideshow') {

	}

	for (var i = 0; i < slides.length; i++) {
		var mySlide = document.createElement('img');
		mySlide.src = slides[i];
		mySlide.className = 'slide';
		mySlide.style.zIndex = slides.length - i;
		slider.appendChild(mySlide);

		this.slides.push(mySlide);
	}
	this.timeout = timeout;
	this.current = 0;

	// Remove first child
	slider.removeChild(slider.getElementsByTagName('img')[0]);

	Element.show(slideshow);
	setTimeout((function(){this.next();}).bind(this), this.timeout);
}
Slideshow.prototype = {
	next: function() {
		for (var i = 0; i < this.slides.length; i++) {
			var slide = this.slides[(this.current + i) % this.slides.length];
			slide.style.zIndex = this.slides.length - i;
//			slide.setStyle({left:'0px'});
			slide.style.left = '0px';
		}

		if(this.panning_enabled) {
			var fade_delay = 4.8;
		} else {
			var fade_delay = 0;
		}

		if(this.panning_enabled) {
			new Effect.Move(this.slides[this.current],{x:-100,y:0,transition:Effect.Transitions.linear,duration:5.8,delay:0});
		}
		new Effect.Fade(this.slides[this.current], {duration:1.0,delay:fade_delay,
			afterFinish: function(effect) {
				effect.element.style.zIndex = 0;
				Element.show(effect.element);
				Element.setOpacity(effect.element, 1);
//				effect.element.setStyle({left:'0px'});
				effect.element.style.left = '0px';
			}
		});

		this.current = (this.current + 1) % this.slides.length;
		setTimeout((function(){this.next();}).bind(this), this.timeout);
	}
}

function init_slideshow() {
	//var slides = new Array('/img/afbeelding.jpg', '/img/afbeelding2.jpg', '/img/afbeelding3.jpg', '/img/afbeelding4.jpg', '/img/afbeelding5.jpg');
	if($('extra_backgrounds')) {
		var slides = new Array();
		slides[0] = $('background').getElementsByTagName('img')[0].src;

		var extra_images = $('extra_backgrounds').getElementsByTagName('a');
		for(var i = 0; i < extra_images.length; i++) {
			slides[(i+1)] = extra_images[i].href;
		}

		var pan = false;
		if($('background').hasClassName('pan')) {
			pan = true;
		}
		var fadeonclick = false;
		if($('background').hasClassName('fadeonclick')) {
			fadeonclick = true;
		}
		new Slideshow('background', 5800, pan, fadeonclick, slides);
	}


}
Event.observe(window, 'load', init_slideshow, false);

var pointer = 0;
var visibles = 3; // 3 elements visible
var step = 100;	// slide 100px at a time (will be changed by init_scroller)
var free = true;

function init_scroller()
{
	var scroller = $('text_submenu_3');
	if(scroller) {
		// Calculate nr of li's, width of 1 li and the number of pixels to shift when clicked
		var lis = scroller.getElementsByTagName('li');
		var li_count = lis.length;	// number of li's
		var li_width = Element.getStyle(lis[0], 'width'); // width of a li
		li_width = li_width.replace(/px/, "");
		var step = li_width * visibles; // pixels to shift when clicked


		// Prev button
		$('nav_vorige').onclick = function() {
			goto_prev(step, visibles, li_count, this);
			return false;
		}

		// Next button
		var elem = document.createElement('a');
		$('nav_volgende').onclick = function() {
			goto_next(step, visibles, li_count, this);
			return false;
		}
	}
}

function goto_next(step, visibles, li_count, elem)
{
	if(free == true) {
		// Voodoo magic
		if(pointer + visibles < li_count) {
			var scroller = $('sub_img');

			if((pointer + visibles) > (li_count-visibles)) {
				var old_pointer = pointer; // 6 = 6
				pointer = li_count-visibles; // 7 = 10 - 3
				var foo =  step / visibles; // 240 = 960 / 3
				step = (pointer - old_pointer) * foo; // 240 = (7 - 6) * 240
			} else {
				pointer += visibles;
			}
			free = false;
			new Effect.Move(scroller, {y:0, x:-step, duration: 0.7, afterFinish: function() { free = true; }});
		}
	}
}
function goto_prev(step, visibles, li_count, elem)
{
	if(free == true) {
		// Voodoo magic in reverse
		if(pointer > 0) {
			var scroller = $('sub_img');
			if((pointer - visibles) < 0) {

				var foo =  step / visibles;
				step = (pointer * foo);

				pointer = 0;
			} else {
				pointer -= visibles;
			}
			free = false;
			new Effect.Move(scroller, {y:0, x:step, duration: 0.7, afterFinish: function() { free = true; }});
		}
	}
}

Event.observe(window, 'load', init_scroller, false);

function transform_rel() {
	var W3CDOM = (document.createElement && document.getElementsByTagName);
	if (!W3CDOM) return; // If the browser doesn't support the W3C DOM, don't do anything.

	var links = document.getElementsByTagName('a');
	for(var i = 0; i < links.length; i++) {
		if(links[i].getAttribute('href') && links[i].getAttribute('rel') == 'external') {
			links[i].target = '_blank';
		}
		if(links[i].getAttribute('href') && links[i].getAttribute('rel') == 'popup') {
			links[i].onclick = function() {
				popup(this.href, this.className);
				return false;
			}
		}
	}
}
Event.observe(window, 'load', transform_rel, false);