function class_kleurkeuze_content () {
	
	this.handle = function (data, waaiers) {
		
		kleurencache.handle();
		this.showMain(data, waaiers);
		this.showWaaier(waaiers[0]['id']);
		
	};
	
	
	this.showMain = function (data, waaiers) {
		
		var vak = document.getElementById('top_content');
		vak.innerHTML = '';
		
		var element = document.createElement('div');
		element.className = 'left';
		element.id = 'left';
		vak.appendChild(element);
		
		
		vak = document.getElementById('left');
		element = document.createElement('h1');
		element.appendChild(document.createTextNode(data['titel']));
		vak.appendChild(element);
		
		element = document.createTextNode('Maak hier een keuze tussen de verschillende kleuren.');
		vak.appendChild(element);
		
		vak.appendChild(document.createElement('br'));
		vak.appendChild(document.createElement('br'));
		
		element = document.createElement('label');
		element.innerHTML = 'Kleur waaiers:';
		vak.appendChild(element);
		element = document.createElement('select');
		element.id = 'waaier_select';
		element.onchange = function () {
			
			color_content.showWaaier(this.value);
			
		};
		element.innerHTML = '';
		for (var i = 1; i < kleurencache.waaiers.length; i++)
		{
			var check = false;
			for (var b = 0; b < waaiers.length; b++)
			{
				if (waaiers[b]['id'] == i)
				{
					check = true;
				}
			}
			if (check)
			{
				var option = document.createElement('option');
				option.value = i;
				option.innerHTML = kleurencache.waaiers[i]['naam'];
				element.appendChild(option);
			}
		}
		vak.appendChild(element);
		
		vak.appendChild(document.createElement('br'));
		vak.appendChild(document.createElement('br'));
		
		element = document.createElement('label');
		element.innerHTML = 'Zoek een kleur:';
		vak.appendChild(element);
		
		element = document.createElement('input');
		element.type = 'text';
		element.id = 'search_kleur';
		element.onkeyup = function () {
			
			var number = document.getElementById('waaier_select').value;
			color.zoeken(this.value, number);
			
		};
		vak.appendChild(element);
		
		vak = document.getElementById('top_content');
		element = document.createElement('div');
		element.className = 'right';
		element.id = 'right_div';
		vak.appendChild(element);
		
		vak = document.getElementById('right_div');
		element = document.createTextNode('We hebben op aanvraag ook kleuren (24000) uit verschillende bekende kleurwaaiers (RAL, NCS en gangbare merken).');
		vak.appendChild(element);
		
		vak.appendChild(document.createElement('br'));
		vak.appendChild(document.createElement('br'));
		
		element = document.createTextNode('Opgelet! De kleuren zullen afwijken door de kleurinstellingen van uw scherm. Wij adviseren de kleur ook te bekijken met een kleurenwaaier.'  + 
		'Metallic en lichtgevende kleuren zijn niet mogelijk.');
		vak.appendChild(element);
		
		
		
		vak = document.getElementById('top_content');
		element = document.createElement('div');
		element.style.clear = 'both';
		vak.appendChild(element);
		
		vak.appendChild(document.createElement('br'));
		
		vak.appendChild(document.createElement('hr'));
		
		
	};
	
	this.showWaaier = function (number) {
		
		var vak = document.getElementById('main_colors');
		vak.innerHTML = '';
		var element = document.createElement('h1');
		element.appendChild(document.createTextNode(kleurencache.waaiers[number]['naam']));
		vak.appendChild(element);
		
		element = document.createElement('div');
		element.id = 'kleuren_scrolldiv';
		element.className = 'kleuren_scrolldiv';
		vak.appendChild(element);
		
		
		for (var i = 0; i < kleurencache.waaiers[number].length; i++)
		{
			if (kleurencache.waaiers[number][i][0] != undefined)
			{
				vak = document.getElementById('kleuren_scrolldiv');
				element = document.createElement('div');
				element.className = 'kleur';
				element.id = 'colornumber' + i;
				element.title = i;
				element.onmouseover = function () {
					
					color.mouseover(kleurencache.waaiers[number][this.title], this.id);
					
				};
				element.onmouseout = function () {
					
					color.mouseout(this.id);
					
				};
				element.onclick = function () {
					
					color.ReturnColor(kleurencache.waaiers[number][this.title]);
					
				};
				element.style.backgroundColor = kleurencache.waaiers[number][i][2];
				vak.appendChild(element);
			}
		}
		
		
		
	};
	
	this.searchShow = function (data, number) {
		
		var vak = document.getElementById('main_colors');
		vak.innerHTML = '';
		var element = document.createElement('h1');
		element.appendChild(document.createTextNode(kleurencache.waaiers[number]['naam']));
		vak.appendChild(element);
		
		element = document.createElement('div');
		element.id = 'kleuren_scrolldiv';
		element.className = 'kleuren_scrolldiv';
		vak.appendChild(element);
		
		
		for (var i = 0; i < data.length; i++)
		{
			if (data[i][0] != undefined)
			{
				vak = document.getElementById('kleuren_scrolldiv');
				element = document.createElement('div');
				element.className = 'kleur';
				element.id = 'colornumber' + i;
				element.title = i;
				element.onmouseover = function () {
					
					color.mouseover(data[this.title], this.id);
					
				};
				element.onmouseout = function () {
					
					color.mouseout(this.id);
					
				};
				element.onclick = function () {
					
					color.ReturnColor(data[this.title]);
					
				};
				element.style.backgroundColor = data[i][2];
				vak.appendChild(element);
			}
		}
		
	};
	
	
};
var color_content = new class_kleurkeuze_content();