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 self				= this;
	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();
				addTitle(headerController.getActiveImage());
			}, 4000);
		}
	};

	var addTitle = function (index) {

		if (nav) {
			_base.removeChild(document.getElementById('overlay'));
		}

		if (document.getElementById('afbeelding_cover'))
			_base.removeChild(document.getElementById('afbeelding_cover'));
		if (document.getElementById('info'))
			_base.removeChild(document.getElementById('info'));

		var overlay 			= document.createElement('div');
			overlay.className 	= 'overlay';
			overlay.id			= 'overlay';
			_base.appendChild(overlay);

			if (data[index]['title'].toLowerCase() == 'naam')
				data[index]['title'] = '';

		var info			= document.createElement('p');
			info.innerHTML	= data[index]['title'];
			overlay.appendChild(info);

		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 () {
		if (nav) {
			_base.removeChild(document.getElementById('afbeelding_cover'));
			_base.removeChild(document.getElementById('info'));
		}

		var cover 		= document.createElement('div');
			cover.id 	= 'afbeelding_cover';
			_base.appendChild(cover);


		var info		= document.createElement('div');
			info.id		= 'info';
			_base.appendChild(info);

		if (data.length != 1) {
			var imgLeft					= document.createElement('img');
				imgLeft.id				= 'arrow_left';
				imgLeft.className 		= 'arrow_nav';
				imgLeft.alt				= 'Vorige';
				imgLeft.src				= baseUrl + 'source/img/nav_bullet_redbg_left.jpg';
				imgLeft.onclick = function () {
					headerController.back(function () {
						renderNavigation();
					});
				};
				info.appendChild(imgLeft);
		}

			var titel = data[headerController.getActiveImage()]['title'];
			if (titel.toLowerCase() == 'naam')
				titel = 'Afbeeldingen';

			var activeNumber = headerController.getActiveImage();
				activeNumber = activeNumber + 2;
				if (activeNumber == (data.length + 1)) {
					activeNumber = 1;
				}


		var span					= document.createElement('span');
			span.id					= 'textje';
			span.style.marginRight	= '15px';
			span.innerHTML			= '<b>' + titel + '</b> (' + activeNumber + '/' + data.length + ')';
			info.appendChild(span);

		if (data.length != 1) {
			var imgRight				= document.createElement('img');
				imgRight.id				= 'arrow_left';
				imgRight.className 		= 'arrow_nav';
				imgRight.alt			= 'Vorige';
				imgRight.src			= baseUrl + 'source/img/nav_bullet_redbg_right.jpg';
				imgRight.onclick = function () {
					headerController.next(function () {
						renderNavigation();
					});
				};
				info.appendChild(imgRight);
		}


		nav = true;
	};

	this.destroyView = function () {
		if (nextInterval !== null) {
			clearInterval(nextInterval);
			nextInterval = null;
		}

		_base.innerHTML = '';
		nav = false;

		headerController.destroy();
		return;
	};


	init();
}