var header = function (data, appendTo, main) {
	
	var self			= this;
	var slider;
	var timeOut			= null;
	var time			= 5000;
	var timeOutTime		= 15000;
	
	/* Config */
	// Titel
	var title			= true;
	var T_container;
	
	// Numbers
	var numbers			= false;
	var N_container;
	
	// Navigatie
	var navigation		= true;
	var NAV_container;
	
	// interval usage
	var sliding			= true;
	var interval;
	
	var init = function () {
		$(function () {
			data	= json_decode(data);
			
			if (data.length == 0)
				alert('Er zijn geen header afbeeldingen geselecteerd in het bluecms');

			slider	= new headerTransparantSlider(appendTo);

			T_container = document.getElementById('headerDescription');
			
			start();
		});
	};
	
	var start	= function () {
		for ( var i = 0; i < data.length; i++ ) {
			slider.addItem(baseUrl + headerBaseFolder + data[i]['image']);
		}
		
		slider.render();
		
		if (sliding && data.length > 1)
			setInterval();
			
		onchange(slider.getActiveImage());
	};
	
	var onchange = function (index) {
		if (title) 
			renderTitle(data[index]);
		
		if (numbers)
			renderNumbers(data[index]);
			
		if (navigation)
			renderNavigation(data[index], data.length);
			
		return;
	};
	
	var setInterval = function () {
		if (data.length > 1) {
			interval	= window.setInterval(function () {
				slider.next(function () {
					onchange(slider.getActiveImage());
				});
			}, 4000);
		}
	};


	var renderTitle = function (d) {
		d.title = ((d.title.toLowerCase() != 'geen titel')? d.title : '');
		T_container.innerHTML = d.title;
		return;
	};
	
	var renderNumbers = function (d) {
		if (data.length > 1) {
			
			if (N_container === undefined) {
				N_container		= document.createElement('div');
				N_container.id	= 'page';
				appendTo.appendChild(N_container);
			} else
				N_container.innerHTML = '';
			
			for ( var i = 0; i < data.length; i++ ) {			
				var a				= document.createElement('a');				
					a.className		= (d.id == data[i].id)? 'activeSlide': '';				
					a.href			= '#';				
					a.innerHTML 	= (i+1);				
					a.rel			= i;				
					a.onclick 		= function () {										
						slider.callImage(function () {						
							onchange(slider.getActiveImage());
						}, this.rel);				
					};				
					
				N_container.appendChild(a);		
			}	
		}
	};
	
	var renderNavigation = function (d, length) {
		var base	= document.getElementById('header_hover');
		var right	= base.children[1];

		if (length > 1) {
			right.children[0].onclick = function () {
				slider.back(function () {
					setTimeOut();
					onchange(slider.getActiveImage());
				});
			};

			right.children[1].onclick = function () {
				slider.next(function () {
					setTimeOut();
					onchange(slider.getActiveImage());
				});
			};
		} else {
			right.children[0].style.visibility = 'hidden';
			right.children[1].style.visibility = 'hidden';
		}
	};

	var setTimeOut = function () {
		if (interval !== null) {
			window.clearInterval(interval);
			interval = null;
			timeOut = window.setTimeout(function () {
				setInterval();
			}, timeOutTime);
		}
	};
	
	init();
};