var class_header = function () {

	var headerElement = null;
	
	this.start = function () {
		headerElement = new header();
	};
	
	this.restart = function (materieelId, pageId) {
		headerElement.restart(materieelId, pageId);
	};
	
	this.close = function () {
		headerElement.destroyView();
	};
};

function header () {	
	var headerController 	= null;
	var _base				= document.getElementById('imagevak');
	var data				= new Array();
	var nextInterval		= null;
	var nav					= false;
	var _funderings			= new Array();
	var self				= this;
	var _title				= true;
	
	var init = function () {
		var getHeaders = new ajaxcall (siteUrl + 'getHeaders/' + module + ':' + moduleId);
		getHeaders.onload = function (json) {
			data = getHeaders.toJSON(json);			
			headerController = new headerTransparantSlider(_base);			
			if (data.length != 0) 
				fillheader();
		};	
	};
	
	this.restart = function () {
	};
	
	var fillheader = function () {
		for ( var i = 0; i < data.length; i++ ) {
			if (data[i] !== undefined) {
				headerController.addItem(baseUrl + headerBaseFolder + data[i]['image']);
			}
		}
		
		headerController.render();
		
		addTitle(headerController.getActiveImage());
		
		if (data.length > 1) {
			nextInterval = window.setInterval(function () {
				headerController.next();
				changeTitle(headerController.getActiveImage());
			}, 4000);
		}
	};
	
	var addTitle = function (index) {
		
		var description 			= document.createElement('div');
			description.className 	= 'textvak';
			description.id			= 'fotoheadertext';
			_base.appendChild(description);
		
		renderNavigation(description, index);
		nav = true;
		
	};
	
	var fillheaderProject = function () {
		
		for ( var i = 0; i < data.length; i++ ) {
			if (data[i] !== undefined) {
				headerController.addItem(baseUrl + headerBaseFolder + data[i]['image']);
			}
		}
		
		headerController.render();
		
		renderNavigation();
		
	};
	
	var renderNavigation = function (description, index) {
		
		var container 			= document.createElement('div');
			container.className = 'content';
			description.appendChild(container);
			
			boven				= document.createElement('div');
			boven.className		= 'boven';
			container.appendChild(boven);
			
			onder				= document.createElement('div');
			onder.className		= 'onder';
			container.appendChild(onder);	
		
			onder.innerHTML		= 'Dat is zichtbaar Groen';
			boven.innerHTML 	= data[index]['title'];
			
		var navigation				= document.createElement('div');
			navigation.className 	= 'navigatie';
			container.appendChild(navigation);
			
		var left				= document.createElement('img');
			left.className		= "leftnav";
			left.src			= baseUrl + "source/img/left_arrow.png";
			left.alt			= 'Vorige afbeelding';
			left.onclick 		= function () {
				headerController.back();
				changeTitle(headerController.getActiveImage());
			};
			navigation.appendChild(left);
			
		var tween				= document.createElement('img');
			tween.className		= "tween";
			tween.src			= baseUrl + "source/img/stroke_tween.png";
			tween.alt			= 'Balk';
			navigation.appendChild(tween);

		var right				= document.createElement('img');
			right.className		= "rightnav";
			right.src			= baseUrl + "source/img/right_arrow.png";
			right.alt			= 'Volgende afbeelding';
			right.onclick 		= function () {
				headerController.next();
				changeTitle(headerController.getActiveImage());
			};
			navigation.appendChild(right);
			
		
	};
	
	var changeTitle = function (index) {
		boven.innerHTML = '';
		if (data[index]['title'].toLowerCase() == 'naam') 
			boven.innerHTML = '&nbsp;';
		else 
			boven.appendChild(document.createTextNode(data[index]['title']));
		
		onder.innerHTML = '';
		onder.innerHTML = 'Dat is zichtbaar Groen';
	};
	
	this.destroyView = function () {
		if (nextInterval !== null) {
			clearInterval(nextInterval);
			nextInterval = null;
		}
		
		_base.innerHTML = '';
		nav = false;

		headerController.destroy();
		return;
	};
	
	
	init();
};