var header = function (data, appendTo) {
	
	var self		= this;
	var slider;
	
	/* Config */
	// Titel
	var title		= true;
	var T_container;
	
	// Numbers
	var numbers		= true;
	var N_container;
	
	// Navigatie
	var navigation	= true;
	var NAV_container;
	
	// interval usage
	var sliding		= true;
	var interval;
	
	var init = function () {
		data	= json_decode(data);
		
		slider	= new headerTransparantSlider(appendTo);
		
		start();
	};
	
	var start	= function () {
		for ( var i = 0; i < data.length; i++ ) {
			slider.addItem(baseUrl + headerBaseFolder + data[i]['image']);
		}
		
		slider.render();
		
		if (sliding)
			setInterval();
			
		onchange(slider.getActiveImage());
	};
	
	var onchange = function (index) {
		if (title) 
			renderTitle(data[index]);
		
		if (numbers)
			renderNumbers(data[index]);
			
		if (navigation && data.length > 1)
			renderNavigation(data[index]);
			
		return;
	};
	
	var setInterval = function () {
		if (data.length > 1) {
			interval	= window.setInterval(function () {
				slider.next(function () {
					onchange(slider.getActiveImage());
				});
			}, 4000)
		}
	};
	
	var renderTitle = function (d) {
		T_container = document.getElementById('header-title');

		if (data.length > 1) {
			T_container.style.marginTop = '-69px';
		}
		if (d.title != 'Naam')
			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) {
		NAV_container = document.getElementById('header-nav');

		NAV_container.innerHTML = '';

		var img			= document.createElement('img');
			img.src		= baseUrl + 'source/img/arrow-green-left.png';
			img.alt		= 'back';
			img.onclick = function () {
				slider.back(function () {
					onchange(slider.getActiveImage());
				});
			}
			NAV_container.appendChild(img);

			img			= document.createElement('img');
			img.src		= baseUrl + 'source/img/arrow-green-right.png';
			img.alt		= 'next';
			img.onclick = function () {
				slider.next(function () {
					onchange(slider.getActiveImage());
				});
			};
			NAV_container.appendChild(img);


	};
	
	init();
};