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 pageId				= undefined;
	var self				= this;
	var loading				= false;
	var activeFundering		= null;
	
	var init = function () {
		
		
		//this.showLoader();
		self.showLoader();
		var getHeaders = new ajaxcall (headerUrl + 'getHeaders');
		
		
		getHeaders.onload = function (json) {
			data = getHeaders.toJSON(json);
			
			_base.innerHTML = "";
			headerController = new headerTransparantSlider(_base);
			
			if (projectId) {
				fillheaderProject();
			} else {
				fillheader();
			}
		};	
	};
	
	this.restart = function (materieelId, paginaId) {
		pageId = paginaId;
		
		if (paginaId === undefined) {
			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();
				
			};
		} else {
			if (!loading) {
				if (paginaId != 0) {
					if (_funderings.length === 0) { 
						loading = true;
						var getHeaders = new ajaxcall (headerUrl + 'getPageHeaders', 'id=' + paginaId);
						getHeaders.onload = function (json) {
							loading = false;
							_funderings = getHeaders.toJSON(json);
							self.destroyView();
							headerController = new headerTransparantSlider(_base);
							data = new Array();
							if (_funderings[paginaId].length != 0) {
								fillheader();
							}
						};
					} else {
						if (activeFundering !== pageId) {
							self.destroyView();
							headerController = new headerTransparantSlider(_base);
							if (_funderings[paginaId].length != 0) {
								fillheader(paginaId);
							}
						}
					}
				} else {
					if (data.length == 0) {
						loading = true;
						var getHeaders = new ajaxcall (headerUrl + 'getHeaders');
						getHeaders.onload = function (json) {
							data = getHeaders.toJSON(json);
							self.destroyView();
							headerController = new headerTransparantSlider(_base);
							fillheader();
							loading = false;
						};	
					} else {
						self.destroyView();
						headerController = new headerTransparantSlider(_base);
						fillheader();
					}
				}
			}
		}	
	};
	
	var fillheader = function () {
		
		
		
		if ((pageId === undefined || pageId == 0) && !loading) {
			activeFundering = null;
			if (data.length != 0 ) {
				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);
				}
			}
		} else {
			if (activeFundering !== pageId && !loading) {
				activeFundering = pageId;
				if (_funderings[pageId].length != 0 ) {
					for ( var i = 0; i < _funderings[pageId].length; i++ ) {
						if (_funderings[pageId][i] !== undefined) {
							headerController.addItem(baseUrl + headerBaseFolder + _funderings[pageId][i]['image']);
						}
					}
					
					
					headerController.render();
					
					addTitle(headerController.getActiveImage(), pageId);
					
					if (data.length > 1) {
						nextInterval = window.setInterval(function () {
							headerController.next();
							addTitle(headerController.getActiveImage());
						}, 4000);
					}
				}
			}
		}
	};
	
	var addTitle = function (index) {
		if (pageId === undefined || pageId == 0) {
				if (document.getElementById('afbeelding_cover'))
				_base.removeChild(document.getElementById('afbeelding_cover'));
			if (document.getElementById('info'))
				_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[index]['title'].toLowerCase() == 'naam') 
					data[index]['title'] = '';
				
			var span					= document.createElement('span');
				span.id					= 'textje';
				span.innerHTML			= data[index]['title'];
				info.appendChild(span);		
		} else {
			if (document.getElementById('afbeelding_cover'))
				_base.removeChild(document.getElementById('afbeelding_cover'));
			if (document.getElementById('info'))
				_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 (_funderings[pageId][index]['title'].toLowerCase() == 'naam') 
					_funderings[pageId][index]['title'] = '';
				
			var span					= document.createElement('span');
				span.id					= 'textje';
				span.innerHTML			= _funderings[pageId][index]['title'];
				info.appendChild(span);		
		}
		
	};
	
	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 + 1;
				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;
	};
	
	this.showLoader = function()
	{
		_base.innerHTML = "";
		
		var imgLoader = 			document.createElement('img');
			imgLoader.className = 	"headerLoader";
			imgLoader.alt = 		"Afbeeldingen worden geladen, een moment geduld a.u.b.";
			imgLoader.src = 		baseUrl + "source/img/ajax-loader-grey.gif";
		_base.appendChild(imgLoader);
	};
	
	
	init();
};