	var barheight=30;
	var barwidth=6;
	var textAreaWidth=32;
	var totalWidth=40;
	var totalHeight=40;
	var renderRestarts=0;
	var rerenderGraph=null;
	
	//-----------------------------------------------
	function graph(id,minVal,medVal,maxVal,val,tt, x, y, parent, axis, visible, unit, showVal){
		this.id=id;
		this.minVal=minVal;
		this.medVal=medVal;
		this.maxVal=maxVal;
		this.val=val;
		this.tt=tt;
		this.x=x;
		this.y=y;
		this.parent=getRawObject(parent);
		this.axis = axis;
		this.visible=visible;
		this.unit=unit;
		this.showVal=showVal;
		this.tag="";
		this.title="";
	}//object graph
	
	graph.prototype.draw = function(){
		if (this.parent){
			if (this.id){
				if (!getRawObject(this.id))
					drawInitialGraph(this);
				redrawGraph(this);					
			}
		}
	}
	

	graph.prototype.getScreenMed = function(){
		return screenVal(this.unit,this.medVal);
	}
	graph.prototype.getScreenMax = function(){
		return screenVal(this.unit,this.maxVal);
	}
	graph.prototype.getScreenMin = function(){
		return screenVal(this.unit,this.minVal);
	}
	graph.prototype.getScreenVal = function(){
		return screenVal(this.unit,this.val, this.tag);
	}
	
	
	function screenVal(unit,val, tag){
		switch (unit){
			case "DATE":
				return cal_generate_shortdate(new Date(val));
				break;
	/*		case "SUMT":
				return (Math.round(val) );
				break;
			case "SUMP":
				return (Math.round(val) );
				break;
			case "SUME":
				return (Math.round(val) );
				break;
			case "SUMR":
				return (Math.round(val) );
				break; */
				
			default:
				return (Math.round(val) + unit);
		}

	}
	
		
	function redrawGraph(grph){
		//alleen nodig bij een restart als tekst nog niet gerendered is.
		if (typeof grph=='undefined')
			grph=rerenderGraph;
	
			
		var i=0;
		var w=0;
		if (grph.visible){
			//set bar
			var obj = getObject(grph.id + "_bar");
			var top=0;
			if ((grph.maxVal-grph.minVal) != 0) 
				top = (((grph.maxVal-grph.minVal)-(grph.val-grph.minVal))/(grph.maxVal-grph.minVal)) * (barheight-3);
			top = Math.round(top);
			if (obj)
				obj.top = top + "px";

			//show actual value
			if (grph.showVal){
				obj=getRawObject(grph.id + "_val");
				setContent(obj, grph.getScreenVal());
			
				//20-4-2004 soms is het bijschrift nog niet gerendered, en kun je dus de w en h niet
				// bepalen. In dat geval een timeout instellen die deze routine na 0,1 sec opnieuw opstart
				// (er van uitgaand dat de tekst dan wel gerendered is) Dit maar 3 keer doen!
				w = getObjectWidth(obj);
				if (w==0 && renderRestarts<3){
					renderRestarts++;
					rerenderGraph=grph;
					setTimeout("redrawGraph()",500);
					return;
				}
				
				var h = getObjectHeight(obj);
				obj=getObject(grph.id + "_val");
				shiftTo(obj, (textAreaWidth-w), top );
				show(obj);

			} else {
				hide(grph.id + "_val");
			}
			
			//set axis values and visibility
			if (grph.axis) {
				var obj=getRawObject(grph.id + "_yticksMax");
				rightAlignText(obj,grph.getScreenMax());
				obj=getRawObject(grph.id + "_yticksMed");
				rightAlignText(obj,grph.getScreenMed());
				obj=getRawObject(grph.id + "_yticksMin");
				rightAlignText(obj,grph.getScreenMin());
				
				show(grph.id + "_yaxis");
				show(grph.id + "_yticks");
				
			}else{
				hide(grph.id + "_yaxis");
				hide(grph.id + "_yticks");
			}
			show(grph.id);
		}else{
			hide(grph.id);
		}
	}
	function rightAlignText(obj, cont){
		theObj=getRawObject(obj);
		setContent(theObj, cont);
		thObj=getObject(theObj);
		var w = getObjectWidth(theObj);
		var top = getObjectTop(theObj);
		shiftTo(theObj, (textAreaWidth-2-w), top);
		show(theObj);
	}

//	"<span id=\"" + grph.id + "_val\" style=\"position:absolute;visibility:hidden;left:0px;width:" + (textAreaWidth-2) + "px;top:0px;margin-right:1px;font-size:7pt;text-align:right;border:0px silver solid;background-color:white;\"></span>"+  
//							"<div id=\"" + grph.id + "_val\" style=\"position:absolute;visibility:hidden;left:0px;width:" + (textAreaWidth-2) + "px;top:0px;margin-right:1px;font-size:7pt;text-align:right;border:0px silver solid;\"></div>"+  
	function drawInitialGraph(grph){	
		if (isIE4){
			html= 	"<div id =\"" + grph.id + "\" style=\"position:absolute;top:" + grph.y + "px;left:"+ grph.x + "px;height:"+ totalHeight + "px;width:" + totalWidth +  "px;margin:0px;padding:0px;border:0px silver solid;visibility:hidden;font-size:7pt;text-align:right;z-index:100;overflow:visible;\">" + 
						"<!-- yaxis titles -->" + 
						"<div id=\"" + grph.id + "_yticks\" style=\"position:absolute;left:0px;top:0px;margin-top:0px;margin-bottom:0px;height:" + totalHeight + "px;overflow:visible;visibility:hidden;border-width:0px;border-color:silver;border-style:solid;\">" + 
							"<span id=\"" + grph.id + "_val\" style=\"position:absolute;visibility:hidden;left:0px;top:0px;margin-right:1px;font-size:7pt;text-align:right;border:0px silver solid;background-color:white;white-space: nowrap;\"></span>"+  
							"<div id=\"" + grph.id + "_yticksMax\" style=\"position:absolute;left:0px;width:" + (textAreaWidth-2) + "px;top:0px;margin-right:1px;font-size:7pt;text-align:right;white-space: nowrap;\">100</div>" + 
							"<div id=\"" + grph.id + "_yticksMed\" style=\"position:absolute;left:0px;width:" + (textAreaWidth-2) + "px;top:14px;right;margin-right:1px;font-size:7pt;text-align:right;white-space: nowrap;\">50</div>" + 
							"<div id=\"" + grph.id + "_yticksMin\" style=\"position:absolute;left:0px;width:" + (textAreaWidth-2) + "px;top:29px;margin-right:1px;font-size:7pt;text-align:right;white-space: nowrap;\">0</div>" + 
						"</div>" + 
						"<div style=\"position:absolute;left:" + textAreaWidth + "px;width:"+ (totalWidth-textAreaWidth) + "px;margin:0px;overflow:visible;padding:0px;border-width:0px;border-color:silver;border-style:solid;margin-top:5px;margin-bottom:5px;height:" + barheight + "px;\">" + 
							"<!-- y axis -->" + 
							"<div id=\"" + grph.id + "_yaxis\" style=\"position:absolute;height:" +  barheight + "px;width:"+ barwidth + "px;left:0px;border-width:0px;visibility:hidden;\">" + 
								"<div style=\"position:absolute;top:0px;left:0px;height:" + (barheight/2) + "px;width:" + barwidth + "px;overflow:hidden;border-style:solid;border-color:black;border-width:0px;border-bottom-width:1px;border-top-width:1px;\"></div>" + 
								"<div style=\"position:absolute;left:0px;top:" + (barheight/2) + "px;height:" + (barheight/2) + "px;overflow:hidden;width:" + barwidth + "px;border-style:solid;border-color:black;border-width:0px;border-bottom-width:1px;border-top-width:0px;\"></div>" + 
							"</div>" + 
							"<!-- bar -->" + 
							"<div style=\"position:absolute;height:" +  barheight + "px;width:"+ barwidth + "px;left:" + ((totalWidth-textAreaWidth)-barwidth) + "px;overflow:hidden;background-color:white;border-color:black;border-width:1px;border-style:solid;\">" + 
								"<div id=\"" + grph.id + "_bar\" style=\"position:absolute;top:" + (((100-grph.val)/100) * (barheight-3)) + "px;height:" + barheight + "px;width:" + barwidth + "px;left:0px;background-color:red;margin:0px;padding:0px;border-style:solid;border-color:black;border-width:0px;border-top-width:1px;\"></div>" + 
							"</div>" + 
						"</div>" + 
						"<!-- cover up with transp image to be able to show tooltips -->" + 
						"<!--img id=\"" + grph.id + "_imgtt\" src=\"img/1by1transp.gif\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" style=\"position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;\" title=\"" + grph.tt + "\"-->"+ 
					"</div>";
					//Q269802: Internet Explorer Stops Responding When You Download dynamicly generated Images. tt image hangs ie, so it is disabled
			}else{
				if (isW3C){
					html= 	"<div id=\"" + grph.id + "\" style=\"position:absolute;top:" + grph.y + "px;left:"+ grph.x + "px;height:"+ totalHeight + "px;width:" + totalWidth +  "px;margin:0px;padding:0px;border-width:0px;border-color:silver;border-style:solid;font-size:7pt;text-align:right;overflow:visible\">" + 
						"<!-- yaxis titles -->" + 
						"<div id=\"" + grph.id + "_yticks\" style=\"position:absolute;left:0px;width:" + textAreaWidth + "px;margin-top:0px;margin-bottom:0px;height:" + totalHeight + "px;overflow:visible;visibility:hidden;border-width:0px;border-color:silver;border-style:solid;\">" + 
							"<span id=\"" + grph.id + "_val\" style=\"position:absolute;visibility:hidden;left:0px;top:0px;margin-right:1px;font-size:7pt;text-align:right;border:0px silver solid;white-space: nowrap;\"></span>"+  
							"<span id=\"" + grph.id + "_yticksMax\" style=\"position:absolute;top:0px;margin-right:1px;font-size:7pt;border: 0px solid black;white-space: nowrap;\">100</span>" + 
							"<span id=\"" + grph.id + "_yticksMed\" style=\"position:absolute;top:14px;margin-right:1px;font-size:7pt;border: 0px solid black;white-space: nowrap;\">50</span>" + 
							"<div id=\"" + grph.id + "_yticksMin\" style=\"position:absolute;top:29px;margin-right:1px;font-size:7pt;border: 0px solid black;text-align:right;overflow:visible;white-space: nowrap;\">0</div>" + 
						"</div>" + 
						"<div style=\"position:absolute;left:" + textAreaWidth + "px;width:10px;overflow:hidden;margin:0px;padding:0px;border-width:0px;margin-top:5px;margin-bottom:5px;height:" + barheight + "px;\">" + 
							"<!-- y axis -->" + 
							"<div id=\"" + grph.id + "_yaxis\" style=\"position:absolute;height:" +  barheight + "px;width:"+ barwidth + "px;left:0px;border-width:0px;visibility:hidden;\">" + 
								"<div style=\"position:absolute;top:0px;height:" + ((barheight-2)/2) + "px;width:" + barwidth + "px;overflow:hidden;border-style:solid;border-color:black;border-width:0px;border-bottom-width:1px;border-top-width:1px;\"></div>" + 
								"<div style=\"position:absolute;top:" + (((barheight-2)/2)+1) + "px;height:" + ((barheight-2)/2) + "px;overflow:hidden;width:" + barwidth + "px;border-style:solid;border-color:black;border-width:0px;border-bottom-width:1px;border-top-width:0px;\"></div>" + 
							"</div>" + 
							"<!-- bar -->" + 
							"<div style=\"position:absolute;height:" +  (barheight-2) + "px;width:"+ (barwidth-2) + "px;left:4px;overflow:hidden;background-color:white;border-color:black;border-width:1px;border-style:solid;\">" + 
								"<div id=\"" + grph.id + "_bar\" style=\"position:absolute;top:" + (((100-grph.val)/100) * (barheight-3)) + "px;height:" + barheight + "px;width:" + barwidth + "px;background-color:red;margin:0px;padding:0px;border-style:solid;border-color:black;border-width:0px;border-top-width:1px;\"></div>" + 
							"</div>" + 
						"</div>" + 
						"<!-- cover up with transp image to be able to show tooltips -->" + 
						"<!--img id=\"" + grph.id + "_imgtt\" src=\"img/1by1transp.gif\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" style=\"position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;\" title=\"" + grph.tt + "\"-->"+ 
					"</div>";
			}
		}

		if (grph.parent && !getRawObject(grph.id)) {
			grph.parent.innerHTML += html;
		}
		//"<div style=\"float:right;width:10px;margin-top:5px;margin-bottom:5px;height:100%;\">" + 
	} //drawinitialgraph "<div id=\"" + grph.id + "_val\" style=\"position:absolute;visibility:hidden;\"></div>"+  

