function CanvasWizard(){
	this.oShoppingCart = globalId('amountInShoppingCart');
	
	//Div
	this.oWizardDiv = document.createElement('div');
	this.oFormDiv = document.createElement('div');
	this.oFormDiv.className = 'formdiv';
	this.oControlDiv = document.createElement('div');
	this.oControlDiv.className = 'controls';
	this.oInfoDiv = document.createElement('div');
	this.oInfoDiv.className = 'wizardInfo';	
	
	//form
	this.oItemInput = document.createElement('textarea');
	this.oAmountInput = document.createElement('input');
	this.oSelectSize = null;
	this.oAmountInput.setAttribute('value',1);
	this.oArtTextInput = document.createElement('textarea');
	
	//ajax
	this.oAjax = new Ajax();
	this.oAjax.set('sUrl', document.URL);
	this.oAjax.set('sMethod', 'POST');
	this.oAjax.set('oReturnObject', this);	
	
	//popupje 
	this.oPopupje = new Popup();
	this.oPopupje.sPopupId = 'childArtWizard';
	this.oPopupje.iWidth = 805;
	this.oPopupje.iHeight = 550;
	this.oPopupje.toCenter = false;
	this.oPopupje.iXlocation = 180;
	this.oPopupje.iYlocation = 129;
	
	//values
	this.bUpdate = false;
	this.iProductIndex = 0;
	this.iProductId = null;
	this.oCurrentData = null;
 }
 
 CanvasWizard.prototype.load = function(){
 	this.oPopupje.show();
	this.oPopupje.oPopup.appendChild(this.oWizardDiv);
	this.oWizardDiv.appendChild(this.oInfoDiv);
	this.oWizardDiv.appendChild(this.oFormDiv);
	this.oWizardDiv.appendChild(this.oControlDiv);
	

	//Control
	var oThis = this;

	//close
	var oClose = document.createElement('a');
	var oCloseText = document.createTextNode('<< Stoppen');
	oClose.appendChild(oCloseText);
	oClose.className = 'cancel';
	this.oControlDiv.appendChild(oClose);
	oClose.onclick = function(){
		oThis.oPopupje.close();
	}
	
	//add
	var oAdd = document.createElement('a');
	var oAddText = document.createTextNode('Toevoegen aan uw mandje >>');
	oAdd.appendChild(oAddText);
	oAdd.className = 'next';
	this.oControlDiv.appendChild(oAdd);
	oAdd.onclick = function(){
		oThis.add();
	}
	
	this.oAjax.set('sQuery', '{"sAction":"getSizes"}');
	this.oAjax.set('sSendCode', g_sSendCode);
	this.oAjax.set('sReturnDataTo', 'showForm');
	this.oAjax.doSend();		
 }
 
 CanvasWizard.prototype.showForm = function(){
	if (this.oAjax.sRequestedData != '') {
		try {
		
			this.oCurrentData = eval('(' + this.oAjax.sRequestedData + ')');
			g_sSendCode = this.oCurrentData.sJsSendCode;
			
			//number
			var oLabel = document.createElement('label');
			var oLabelText = document.createTextNode('Geef hier het geboortekaartjenummer op of omschrijf welk geboortekaartje u op canvas wilt.');
			oLabel.setAttribute('for', 'card_number');
			oLabel.appendChild(oLabelText);
			this.oFormDiv.appendChild(oLabel);
			
			this.oFormDiv.appendChild(this.oItemInput);
			this.oItemInput.setAttribute('id', 'card_number');
			this.oItemInput.setAttribute('name', 'card_number');

			//size
			oLabel = document.createElement('label');
			oLabelText = document.createTextNode('Geef aan wat voor canvas formaat u wilt');
			oLabel.setAttribute('for', 'size');
			oLabel.appendChild(oLabelText);
			this.oFormDiv.appendChild(oLabel);
			
			this.oSelectSize = document.createElement('select');
			this.oSelectSize.setAttribute('id', 'size');
			this.oSelectSize.setAttribute('name', 'size');
			
			this.oFormDiv.appendChild(this.oSelectSize);
			var oTempOption = null;
			for(i=0; i < this.oCurrentData.aSizes.length; i++){
				oTempOption = document.createElement('option');
				oTempOption.setAttribute('value', this.oCurrentData.aSizes[i].iId);
				oTempOption.innerHTML = this.oCurrentData.aSizes[i].sName + ' &euro;' + this.oCurrentData.aSizes[i].fPrice;
				if(this.oCurrentData.aSizes[i].iId == this.iProductId){
					oTempOption.setAttribute('selected', 'selected');
				}
				this.oSelectSize.appendChild(oTempOption);
			}
			
			
			//amount
			oLabel = document.createElement('label');
			oLabelText = document.createTextNode('Aantal');
			oLabel.setAttribute('for', 'amount');
			oLabel.appendChild(oLabelText);
			this.oFormDiv.appendChild(oLabel);
			
			this.oAmountInput.setAttribute('name', 'amount');
			this.oAmountInput.setAttribute('id', 'amount');
			this.oAmountInput.setAttribute('type', 'text');
			this.oAmountInput.onkeyup = function(){
				var oRegEx = /^[0-9]+$/
				if (this.value != '') {
					if (!oRegEx.test(this.value)) {
						this.value = 1;
					}
				}
			}
			this.oFormDiv.appendChild(this.oAmountInput);
			
			oLabel = document.createElement('label');
			oLabelText = document.createTextNode('Als u een tekst op het schilderij wilt, kunt u die hier opgeven. ( niet verplicht )');
			oLabel.setAttribute('for', 'art_text');
			oLabel.appendChild(oLabelText);
			this.oFormDiv.appendChild(oLabel);
			
			this.oFormDiv.appendChild(this.oArtTextInput);
			this.oItemInput.setAttribute('id', 'art_text');
			this.oItemInput.setAttribute('name', 'art_text');
		} 
		catch (e) {
			//alert(e);
		}
	}
 }
 
 CanvasWizard.prototype.add = function(){
 	var sPostData = '';
	var oRegEx = /^[0-9]+$/
	if(oRegEx.test(this.oAmountInput.value) && parseInt(this.oAmountInput.value) > 0 && !empty(this.oItemInput.value)){
		sPostData += '"iAmount":'+ this.oAmountInput.value +',';		
		sPostData += '"sItem":"' + this.oItemInput.value + '",';
		sPostData += '"sArtText":"' + this.oArtTextInput.value + '",'; 
		
		//action & id
		sPostData += '"iId":' + this.oSelectSize.options[this.oSelectSize.selectedIndex].value + ',';
		if (this.bUpdate) {
			sPostData += '"iProductIndex":' + this.iProductIndex + ',';
			sPostData += '"sAction":"canvasUpdate"';
		}else{
			sPostData += '"sAction":"add"';
		}
		
		//alert(sPostData);
		
		//send
		this.oAjax.set('sQuery', '{' + sPostData + '}');
		this.oAjax.set('sSendCode', g_sSendCode);
		this.oAjax.set('sReturnDataTo', 'end');
		this.oAjax.doSend();
	} 
 }

 CanvasWizard.prototype.end = function(){
 	//reload
	if(this.bUpdate){
		location.reload();
	}
	
 	this.oPopupje.close();
	var oThis = this;
	try{
		
		this.oCurrentData = eval('(' + this.oAjax.sRequestedData + ')');
		g_sSendCode = this.oCurrentData.sJsSendCode;
		this.oShoppingCart.innerHTML = this.oCurrentData.iAmountInShoppingCart;
			
		//Status popup
	 	this.oPopupje = new Popup();
		this.oPopupje.show();	
		var oClose = document.createElement('a');
		var oCloseText = document.createTextNode('>> Verder winkelen');
		oClose.appendChild(oCloseText);
		oClose.className = 'cancelCart';
		oClose.onclick = function(){
			oThis.oPopupje.close();
		}
		
		var oRemove = document.createElement('a');
		var oRemoveText =  document.createTextNode('>> Bestelling afronden');
		oRemove.appendChild(oRemoveText);
		oRemove.className = 'goCart';
		oRemove.onclick = function(){
			location.href = '/shoppingcart';
		}
		
		var oPopUpDiv = document.createElement('div');
		oPopUpDiv.className = 'PopupDiv';
		var oMessage = document.createElement('p');
		var oMessageText = document.createTextNode('Het schilderij is correct toegevoegd aan uw winkelmandje');
		oMessage.appendChild(oMessageText);
		
		oPopUpDiv.appendChild(oMessage);
		oPopUpDiv.appendChild(oRemove);
		oPopUpDiv.appendChild(oClose);
		
		this.oPopupje.oPopup.appendChild(oPopUpDiv);				
			
			
	}catch(e){
		//alert(this.oAjax.sRequestedData);
		location.reload();
	}
 }
 
 CanvasWizard.prototype.setOldValue = function(){
 	//alert(this.oAjax.sRequestedData);
	try {
		this.oCurrentData = eval('(' + this.oAjax.sRequestedData + ')');
		g_sSendCode = this.oCurrentData.sJsSendCode;
		
		this.iProductId = this.oCurrentData.aCartData.iProductId; 
		this.oAmountInput.value = this.oCurrentData.aCartData.iAmount;
		this.oArtTextInput.value = this.oCurrentData.aCartData.sText;
		this.oItemInput.value = this.oCurrentData.aCartData.sItem;
		
		this.bUpdate = true;
		
		this.load();
	}catch(e){
		//alert(e);
	}
 }
 
 CanvasWizard.prototype.reload = function(p_iId){
 	this.iProductIndex  = p_iId;
	this.oAjax.set('sQuery', '{"sAction":"getProduct","iProductIndex":'+ p_iId +'}');
	this.oAjax.set('sSendCode', g_sSendCode);
	this.oAjax.set('sReturnDataTo', 'setOldValue');
	this.oAjax.doSend(); 	
 }