function panelPreview() {

	if(!$('panelpreview')) { return false; }

	// Preload Images
	var imgPreloads = new Array();
	imgPreloads[0] = new Image();
	imgPreloads[0].src = '/i/swim44.jpg';
	imgPreloads[1] = new Image();
	imgPreloads[1].src = '/i/swim42bottom.jpg';
	imgPreloads[2] = new Image();
	imgPreloads[2].src = '/i/swim42top.jpg';
	imgPreloads[3] = new Image();
	imgPreloads[3].src = '/i/swim42toperror.jpg';
	imgPreloads[4] = new Image();
	imgPreloads[4].src = '/i/swim22error.jpg';
	
	var panelQs = new Array(0, 0, 0);
	var panelCount = 0;
	var needsInit = false;
	
	for(var i = 0; i < targets2.length; i++) {
		var q = getValue($(targets2[i]));
		panelQs[i] = q;
		panelCount += q;
		if(q > 0) {
			needsInit = true;	
		}
	}
	
	// We zitten toch niet boven het maximum?
	if(panelCount > getMaxPanels()) {
		
		createPreviewError('panelpreview', 'panelmax');
		return;
	}

	
	if(!needsInit) { return false; }

	var panelRows = new Array();
	var columns = 0;
	var rows = 0;
	var maxPanels44 = 12;

	var swim44error = false;
	var swim42error = false;
	var swim22error = false;
	// Swim 44, is uniek
	if(panelQs[0] > 0 && panelQs[0] != 'NaN') {
		if(panelQs[0] <= maxPanels44) {
			rows = 1;
			columns = panelQs[0];
		
			panelRows[0] = new Array();
			for(var i = 0; i < columns; i++) {
				panelRows[0][i] = new Array();
				panelRows[0][i]['img'] = 'swim44';
				panelRows[0][i]['alt'] = 'Swim 44';
				panelRows[0][i]['title'] = '';
				panelRows[0][i]['class'] = '';
			}
			//createPreviewTable('panelpreview', panelRows);
			//return;
		} else {
			swim44error = true;
			createPreviewError('panelpreview', 'swim44max');
			return;
		}
	}
	
	// Swim 42 onderste rij
	if(panelQs[1] > 0 && panelQs[1] != 'NaN') {
		// Swim 44 mag niet zijn ingevuld
		if(rows < 1) {
		
			columns = Math.ceil(panelQs[1] / 2);
			if(panelQs[1] % 2 > 0) {
				swim42error = true;
			}
			rows = 1;
			
			panelRows[0] = new Array();
			for(var i = 0; i < columns; i++) {
				//panelRows[(rows-1)][i] = 'swim42top';
				panelRows[(rows-1)][i] = new Array();
				panelRows[(rows-1)][i]['img'] = 'swim42bottom';
				panelRows[(rows-1)][i]['alt'] = 'Swim 42';
				panelRows[(rows-1)][i]['title'] = '';
				panelRows[(rows-1)][i]['class'] = '';
			}
		} else {
			swim42error = true;
			createPreviewError('panelpreview', 'swim44combo');
			return;
		}
	}
	// Swim 22
	if(panelQs[2] > 0 && panelQs[2] != 'NaN') {
		// 42 moet ingevuld zijn
		if(rows > 0) {
		
			// de 2 bestaande rijen 42 opgeteld met 10 swim22 panelen in rijen van 5
			rows += Math.ceil(panelQs[2] / columns);
			
			var swim22Count = 0;
			for(var j = 1; j < rows; j++) {
				panelRows[j] = new Array();
				for(var i = 0; i < columns; i++) {
					if(swim22Count < panelQs[2]) {
						//panelRows[j][i] = 'swim22';
						panelRows[j][i] = new Array();
						panelRows[j][i]['img'] = 'swim22';
						panelRows[j][i]['alt'] = 'Swim 22';
						panelRows[j][i]['title'] = '';
						panelRows[j][i]['class'] = '';
					} else {
						//panelRows[j][i] = 'swim22error';
						panelRows[j][i] = new Array();
						panelRows[j][i]['img'] = 'swim22error';
						panelRows[j][i]['alt'] = 'Swim 22';
						panelRows[j][i]['title'] = 'Swim 22 kan enkel zelfde of helft zijn van aantal Swim 42 panelen';
						panelRows[j][i]['class'] = 'caution';
					}
					swim22Count++;
				}
				panelRows[j].reverse();
			}
		} else {
			swim22error = true;
			createPreviewError('panelpreview', 'swim22');
			return;
		}

	}
	// Swim 42 bovenste rij
	if(panelQs[1] > 0 && panelQs[1] != 'NaN') {
		rows += 1;
		
		panelRows[(rows-1)] = new Array();
		for(var i = 0; i < columns; i++) {
			//panelRows[(rows-1)][i] = 'swim42bottom';
			panelRows[(rows-1)][i] = new Array();
			panelRows[(rows-1)][i]['img'] = 'swim42top';
			panelRows[(rows-1)][i]['alt'] = 'Swim 42';
			panelRows[(rows-1)][i]['title'] = '';
			panelRows[(rows-1)][i]['class'] = '';
		}
		
		if(swim42error == true) {
			// Als er een oneven aantal swim 42 is opgegeven, vervang dan de laatste swim42 door swim42error
			//panelRows[(rows-1)][columns-1] = 'swim42bottomerror';
			panelRows[(rows-1)][columns-1] = new Array();
			panelRows[(rows-1)][columns-1]['img'] = 'swim42toperror';
			panelRows[(rows-1)][columns-1]['alt'] = 'Swim 42';
			panelRows[(rows-1)][columns-1]['title'] = 'Swim 42 enkel bestelbaar in veelvouden van 2';
			panelRows[(rows-1)][columns-1]['class'] = 'caution';
			
			panelRows[(rows-1)].reverse();
		}
	}
	
	// Niet meer dan 5 rijen
	if(rows > 5) {
		createPreviewError('panelpreview', 'rows');
		return;
	}
	
	panelRows.reverse();

	createPreviewTable('panelpreview', panelRows);
	return;
}

function getMaxPanels() {
	return spanToFloat('maxpanels');
}

function createPreviewError(parentID, errorID) {
	var parentElem = $(parentID);
	if(!parentElem) { return false; }
	
	var errorMsg;
	
	if(errorID == 'panelmax') {
		errorMsg = 'U koos meer panelen dan geadviseerd. Dit is overbodig voor uw rendement.';
	}	
	if(errorID == 'swim44max') {
		errorMsg = 'Deze configuratie is niet mogelijk: U kan maximum 12 Swim 44 panelen nemen.';
	}
	if(errorID == 'swim44combo') {
		errorMsg = 'Deze combinatie is niet mogelijk: Swim 44 is niet combineerbaar met Swim 42';
	}
	if(errorID == 'swim22') {
		errorMsg = 'Deze configuratie is niet mogelijk.';
	}
	if(errorID == 'rows') {
		errorMsg = 'Deze configuratie is niet mogelijk.';
	}
	
	if(errorMsg != '') {
		myP = new Element('p', {'id': 'panelerror'});
		myP.innerHTML = errorMsg;
		parentElem.update(myP);
	}
	return;
}

function createPreviewTable(parentID, panelRows) {
	var parentElem = $(parentID);
	if(!parentElem) { return false; }
	
	var tbl = new Element('table');
	parentElem.update(tbl);
	// We need a tbody, or IE6 won't display table content
	// http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html
	var tbody = new Element('tbody'); 
	tbl.insert(tbody);

	for(var j = 0; j < panelRows.length; j++) {
		var row = new Element('tr');
		tbody.insert(row);
		
		for(var i = 0; i < panelRows[j].length; i++) {
			var cell = new Element('td')
			var panelImg = new Element('img', {'src': '/i/' + panelRows[j][i]['img'] + '.jpg', 'alt': panelRows[j][i]['alt'], 'title': panelRows[j][i]['title'], 'class': panelRows[j][i]['class']});
			row.insert(cell);
			cell.insert(panelImg);
		}
	}
}

var targets2 = new Array('swim_q1', 'swim_q2', 'swim_q3');
function swimWizardStep2(elemID) {

	var elem = $(elemID);
	if(!elem) { return false; }
	
	for(var i = 0; i < targets2.length; i++) {
		$(targets2[i]).observe('keyup', swimUpdateRow2);
		$(targets2[i]).observe('change', swimUpdateRow2);
	}
}

function swimUpdateRow2(event) {
	swimUpdateRow(event);
	/*
	if(event.element().id == targets2[1]) {
		updateSwim22();
	}
	*/
	swimUpdateTotal2();	
	panelPreview();
}

function updateSwim22() {
	
	// Update enkel als waarde van Swim22 txt leeg is
	if($(targets2[2]).value != '') {
		var q = getValue($(targets2[1]));
		var maxPanels = spanToFloat('maxpanels');
		
		if(q < maxPanels) {
			
		}
	}
}

function spanToFloat(spanID) {
	return parseFloat($(spanID).innerHTML);
}

function floatToSpan(myVal) {
	return myVal.toFixed(2).replace('.', ',')
}

function getValue(elem) {
	var q = 0;
	if((elem.type == 'checkbox' && elem.checked == true) || 
	   (elem.type != 'checkbox' && elem.checked != true)
	   && parseInt(elem.value)) {
		q = parseInt(elem.value);
	}
	return q;
}

function swimUpdateRow(event) {
	var elem = event.element();
	var elemID = elem.id;

	var targetID = elemID.replace('_q', '_t'); // swim_q1 vervangen door swim_t1	
	
	var q = getValue(elem);
	
	if (!isNaN(q)) {
		var priceID = elemID.replace('_q', '_p'); 			// swim_q1 vervangen door swim_p1, omzetten naar float
		var price   = spanToFloat(priceID);
	
		var st = q * price;
		$(targetID).innerHTML = floatToSpan(st);	
	}
}

function swimUpdateTotal2() {
	var st = 0;
	for(var i = 0; i < targets2.length; i++) {	
		var targetID = targets2[i].replace('_q', '_t'); // swim_q1 vervangen door swim_t1
		var price = spanToFloat(targetID);
		st += price;
	}
	$('swim_st').innerHTML = floatToSpan(st);
}

var targets3 = new Array('base_q1', 'base_q2', 'auto_q1', 'auto_q2');
function swimWizardStep3(elemID) {
	var targets3 = new Array('base_q1', 'base_q2', 'auto_q1', 'auto_q2');

	var elem = $(elemID);
	if(!elem) { return false; }
	
	for(var i = 0; i < targets3.length; i++) {
		$(targets3[i]).observe('click', swimUpdateRow3);
	}
}

function swimUpdateTotal3() {
	var st = 0;
	for(var i = 0; i < targets3.length; i++) {	
		var targetID = targets3[i].replace('_q', '_t'); // swim_q1 vervangen door swim_t1
		var price = spanToFloat(targetID);
		st += price;
	}
	$('acc_st').innerHTML = floatToSpan(st);
	var swim_st = spanToFloat('swim_st');
	var total = swim_st + st;
	$('swim_tt').innerHTML = floatToSpan(total);
	
	// Gezinsbond korting
	var discount = total * ( spanToFloat('swim_gz_perc') / 100);
	$('swim_gz').innerHTML = floatToSpan(discount);
}

function swimUpdateRow3(event) {
	swimUpdateRow(event);
	swimUpdateTotal3();
}

function onLoader() {
	swimWizardStep2('swimwizard-form2');
	swimWizardStep3('swimwizard-form3');
	panelPreview();
}
Event.observe(window, 'load', onLoader, false);