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('afbeelding_houder');
	var data				= new Array();
	var nextInterval		= null;
	var nav					= false;
	var _funderings			= new Array();
	var self				= this;
	var _titel				= true;
	
	var title				= null;
	var afbeeldingTitle		= null;
	
	
	var init = function () {
		var getHeaders = new ajaxcall (headerUrl + 'getHeaders');
		getHeaders.onload = function (json) {
			data = getHeaders.toJSON(json);
			
			headerController = new headerTransparantSlider(_base);
			
			
			if (data.length != 0) 
				fillheader();
		};	
	};
	
	this.restart = function () {
		var getHeaders = new ajaxcall (baseUrl + 'Materieel/getProjectHeaders', 'id=' + materieelId);
		getHeaders.onload = function (json) {
			json = getHeaders.toJSON(json);
			if (json.length == 0) 
				return false;
			
			self.destroyView();
			headerController = new headerTransparantSlider(_base);
			data = new Array();
			data = json;
			fillheaderProject();
			
		};
		
	};
	
	var fillheader = function () {
		for ( var i = 0; i < data.length; i++ ) {
			if (data[i] !== undefined) {
				headerController.addItem(baseUrl + headerBaseFolder + data[i]['image']);
			}
		}
		
		headerController.render(function () {
			if (_titel)
				addTitle(headerController.getActiveImage());
			
			if (data.length > 1) {
				nextInterval = window.setInterval(function () {
					headerController.next(function () {
						if (_titel) {
							changeTitle(headerController.getActiveImage());
						}
					});
				}, 5000);
			}
		});
	};
	
	var addTitle = function (index) {
		
		var description 			= document.createElement('div');
			description.className 	= 'description';
			description.id			= 'description';
			_base.appendChild(description);
			
		titel = document.createElement('p');
			if (data[index]['title'].toLowerCase() == 'naam') 
				titel.innerHTML = '&nbsp;';
			else 
				titel.appendChild(document.createTextNode(data[index]['title']));
			description.appendChild(titel);
			
		renderNavigation(description, (index + 1));
		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 = 'arrows';
			description.appendChild(container);
		
		var text 				= 'Afbeelding ' + index + '/' + data.length;
			
			afbeeldingTitle 	= document.createElement('p');
			afbeeldingTitle.appendChild(document.createTextNode(text));
			container.appendChild(afbeeldingTitle);
			
		var left				= document.createElement('img');
			left.src			= baseUrl + 'source/img/arrow-left.png';
			left.alt			= 'Vorige afbeelding';
			left.height			= '16';
			left.width			= '10';
			left.onclick 		= function () {
				headerController.back(function () {
					if (_titel) {
						changeTitle(headerController.getActiveImage());
					}
				});
			};
			container.appendChild(left);
			
		var right				= document.createElement('img');
			right.src			= baseUrl + 'source/img/arrow-right.png';
			right.alt			= 'Volgende afbeelding';
			right.height		= '16';
			right.width			= '10';
			right.onclick 		= function () {
				headerController.next(function () {
					if (_titel) {
						changeTitle(headerController.getActiveImage());
					}
				});
			};
			container.appendChild(right);
			
		
	};
	
	var changeTitle = function (index) {
		titel.innerHTML = '';
		if (data[index]['title'].toLowerCase() == 'naam') 
			titel.innerHTML = '&nbsp;';
		else 
			titel.appendChild(document.createTextNode(data[index]['title']));
		
		afbeeldingTitle.innerHTML = '';
		afbeeldingTitle.innerHTML = 'Afbeelding ' + (index + 1) + '/' + data.length;
	};
	
	this.destroyView = function () {
		if (nextInterval !== null) {
			clearInterval(nextInterval);
			nextInterval = null;
		}
		
		_base.innerHTML = '';
		nav = false;

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