function _setclass(elm,css) {
	elm.className = css;
}

function _setVal(indx,cnt) {
	document.getElementById('qty'+indx).value = parseInt(document.getElementById('qty'+indx).value) + cnt;
	var pVal = parseFloat(document.getElementById('val'+indx).value);
	var tmpAmt = pVal * cnt;
	var curTotal = parseFloat(document.getElementById('hdTotal').value);
	var newTotal = curTotal + tmpAmt;
	document.getElementById('hdTotal').value = newTotal;
	document.getElementById('total').innerHTML = '';
	document.getElementById('total').innerHTML = newTotal.toFixed(2) + ' &euro;';
	//balance
	var bln = parseFloat(document.getElementById('hdBal').value);
	bln = bln + tmpAmt;	
	document.getElementById('hdBal').value = bln.toFixed(2);
	document.getElementById('balance').innerHTML = '';
	document.getElementById('balance').innerHTML = bln.toFixed(2) + ' &euro;';
	
}

function _removeVal(indx) {
	var curTotal = parseFloat(document.getElementById('hdTotal').value);
	var pVal = parseFloat(document.getElementById('val'+indx).value);
	var cnt =  parseInt(document.getElementById('qty'+indx).value) ;
	var tmpAmt = pVal * cnt;
	var newTotal = curTotal - tmpAmt;
	document.getElementById('qty'+indx).value = 0;
	document.getElementById('hdTotal').value = newTotal;
	document.getElementById('total').innerHTML = '';
	document.getElementById('total').innerHTML =  newTotal.toFixed(2) + ' &euro;';
	//balance
	var bln = parseFloat(document.getElementById('hdBal').value);
	bln = bln - tmpAmt;	
	document.getElementById('hdBal').value = bln.toFixed(2);
	document.getElementById('balance').innerHTML = '';
	document.getElementById('balance').innerHTML = bln.toFixed(2) + ' &euro;';
}

function appendEven(indx,itm,val) {
	var string ='<div class="x-grid3-row" style="width:493px;" onmouseover="_setclass(this,\'x-grid3-row-over\');" onmouseout="_setclass(this,\'x-grid3-row\');"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:493px;"><tbody><tr><td style="width:250px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on">' + itm + '</div></td><td style="width:38px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on">'+ val +'<input type="hidden" name="val' + indx + '" id="val' + indx + '" value="' + val + '" /></div></td><td style="width:32px;" tabindex="0"><div class="x-grid3-cell-inner"><input class="x-grid3-qty" type="text" name="qty' + indx + '" id="qty' + indx + '" value="0" readonly="readonly" /></div></td><td style="width:25px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on"><input type="button" class="x-grid3-btn" value="+1" onclick="_setVal(' + indx + ',1);" /></div></td><td style="width:30px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on"><input type="button" class="x-grid3-btn" value="+10" onclick="_setVal(' + indx + ',10);" /></div></td><td style="width:25px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on"><input type="button" class="x-grid3-btn" value="X" onclick="_removeVal(' + indx + ');" /></div></td></tr></tbody></table></div>';
	return string;
}

function appendOdd(indx,itm,val) {
	var string ='<div class="x-grid3-row x-grid3-row-alt" style="width:493px;" onmouseover="_setclass(this,\'x-grid3-row-over\');" onmouseout="_setclass(this,\'x-grid3-row x-grid3-row-alt\');"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:493px;"><tbody><tr><td style="width:250px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on">' + itm + '</div></td><td style="width:38px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on">'+ val +'<input type="hidden" name="val' + indx + '" id="val' + indx + '" value="' + val + '" /></div></td><td style="width:32px;" tabindex="0"><div class="x-grid3-cell-inner"><input class="x-grid3-qty" type="text" name="qty' + indx + '" id="qty' + indx + '" value="0" readonly="readonly" /></div></td><td style="width:25px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on"><input type="button" class="x-grid3-btn" value="+1" onclick="_setVal(' + indx + ',1);" /></div></td><td style="width:30px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on"><input type="button" class="x-grid3-btn" value="+10" onclick="_setVal(' + indx + ',10);" /></div></td><td style="width:25px;" tabindex="0"><div class="x-grid3-cell-inner" unselectable="on"><input type="button" class="x-grid3-btn" value="X" onclick="_removeVal(' + indx + ');" /></div></td></tr></tbody></table></div>';
	return string;
}

function setInvest(inv) {
	var baln = 0 - inv;
	document.getElementById('invest').innerHTML = '';
	document.getElementById('invest').innerHTML =  inv.toFixed(2) + ' &euro;';
	document.getElementById('hdInvest').value = inv.toFixed(2);
	document.getElementById('balance').innerHTML = '';
	document.getElementById('balance').innerHTML =  baln.toFixed(2) + ' &euro;';
	document.getElementById('hdBal').value = baln.toFixed(2);
}


function visionInit() {
	setInvest(ausgaben);

	var nodeElm = document.getElementById('dataContainer');
	//var nodeElm = document.getElementById('dataContainer').cloneNode(true);
	for(var i=0; i < myData.length; i++) {
		if(i%2==0) {
			var tmpStr = appendEven(i,myData[i][0],myData[i][1]);
		}
		else {
			var tmpStr = appendOdd(i,myData[i][0],myData[i][1]);
		}
		var tmpDiv = document.createElement('div');
		tmpDiv.id = 'dyn_'+i.toString();
		
		nodeElm.appendChild(tmpDiv);
		tmpDiv.innerHTML = tmpStr;
		
	}
	/*var tmpDiv2 = document.createElement('div');
	tmpDiv2.innerHTML = 'Hello';
	nodeElm.appendChild(tmpDiv2);*/
}
