// superGraphics(sSID, sId) JavaScript object
// sSID.................<%data sys.sessionid%>
// sId..................id of <div></div> where the grahic should be inserted
//							 ..specify width= and height= of <div> for dimensions of graphic
// this.start...........start date
// this.periode.........periode length
// this.insertType......insertType of graphic
// this.extraParameter..extra URL parameter for the graphic.png, must begin with &
// this.curve0-9........URL parameter list for curve(n)
// this.visible0-9......true/false flag for each curve(n)
//
// this.cursorPos1_.....X offset of cursor 1 (out)
// this.cursorPos2_.....X offset of cursor 2 (out)
//
// this.Update(bForce)	Refresh graphic
// this.moveRR()			Move one period in to the past
// this.moveR()			Move one page in to the past
// this.moveF()			Move one page in to the future
// this.moveFF()			Move one period in to the future
// this.moveLM()			Go to end of measurement data
// this.zoomOut()			Zoom out

var superGraphicsList__ = new Array();
var superGraphicAct__=0;
var dragedGraphic__=0;
var downPosX__=0, actX__=0;
var dragedCsrs__=0;

function superGraphics(sSID, sId)
	{
	this.sSID=sSID;
	this.sId=sId;
	this.objDiv=document.getElementById(this.sId);
	this.objDiv.style.position='relative';
	this.objDiv.style.backgroundColor='#FFFFFF';
	this.detailed_=1;
	this.move_=0;
	this.extraParameter='';
	this.bZoomMode=false;
	this.enabled_=true;
	this.cursor_=false;
	this.actCursor_=0;
	this.zoomOutPeriode=0;
	this.zoomOutStart=0;
	this.firstUpdate_=true;
	this.uniqueCounter_=Math.random()*1000000;
	this.periode=-999999999;
	this.insertVisibility_=2;
	
	// register my self in global list	
	this.id=superGraphicsList__.length;
	superGraphicsList__[this.id]=this;
	
	// generate html code of graphics object
	if(bIE6)
		{
		sHTML ='<table cellspacing=0 cellpadding=0 width=100% height=100% onMouseOver="toolTip(\'Upgrade your browser to a newer version<br>to have full interactivity!\')"><tr>';
	
		sHTML+='	<td valign=top>';
		
		sHTML+='	<div id="curves_frame_'+this.sId+'" style="position:relative;">';
		sHTML+='		<div id="curves_'+this.sId+'" style="position:absolute;">';
		sHTML+='			<img id="curves_img_'+this.sId+'" '+(bIE?'src="spacer.gif" ':'')+'onLoad="superGraphicsList__['+this.id+'].onCurvesLoad()" onError=document.location.href="index.htm">';
		sHTML+='		</div>';
		
		sHTML+='		<div id="loading_'+this.sId+'" style="position:absolute; width:100%; height:100%;">';
		sHTML+='			<div style="position:absolute; width:100%; height:100%;">';
		sHTML+=' 			<table cellspacing=0 cellpading=0 width=100% height=100% ><tr><td align=center>';
		sHTML+='					<div class="opacity70"><img src="loading_background.gif"></div>';
		sHTML+='				</td></tr></table>';
		sHTML+='			</div>';
		sHTML+='			<div style="position:absolute; width:100%; height:100%;">';
		sHTML+='				<table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=center>';
		sHTML+='					<img src="loading.gif">';
		sHTML+='				</td></tr></table>';
		sHTML+='			</div>';
		sHTML+='		</div>';
		sHTML+='	</div>';
	
		sHTML+='	</td>';
		sHTML+='</tr></table>';
	
		this.objDiv.innerHTML=sHTML;
	
		// get pointers of sub objects
		this.objCurves				=document.getElementById('curves_'+this.sId);
		this.objCurvesImg			=document.getElementById('curves_img_'+this.sId);
		this.objLoading			=document.getElementById('loading_'+this.sId);
		this.objCurvesFrame		=document.getElementById('curves_frame_'+this.sId);
		
		this.objCurvesFrame.style.width=parseInt(this.objDiv.style.width);
		this.objCurvesFrame.style.height=parseInt(this.objDiv.style.height);
		this.objCurvesImg.width=parseInt(this.objDiv.style.width);
		this.objCurvesImg.height=parseInt(this.objDiv.style.height);
		}
	else
		{
		sHTML ='<table cellspacing=0 cellpadding=0 width=100% height=100%><tr>';
	
		sHTML+='	<td valign=top>';
		sHTML+='   <img id="labels_'+this.sId+'" src="spacer.gif" onLoad="superGraphicsList__['+this.id+'].onLabelsLoad()"><br>';
	
		sHTML+='   <div class="graphic_panel_tool_box" onSelectStart="return false" onMouseDown="return false">';
		sHTML+='     <table cellspacing=0 cellpadding=0 class="graphic_panel_tool"><tr>';
		sHTML+='       <td>';
		sHTML+='         <img id="img_info_onoff_'+this.sId+'" src="sg_info_off.gif" style="cursor:pointer;" onClick="superGraphicsList__['+this.id+'].onClickInfoOnOff()" onMouseOver="toolTip(\'Toggle details\')">';
		sHTML+='       </td>';
		sHTML+='     </tr></table>';
		sHTML+='     <table id="sg_csrs_onoff_tool_'+this.sId+'" cellspacing=0 cellpadding=0 class="graphic_panel_tool"><tr>';
		sHTML+='       <td>';
		sHTML+='         <img id="img_csrs_onoff_'+this.sId+'" src="cursor.gif" style="cursor:pointer;" onClick="superGraphicsList__['+this.id+'].onClickCursorOnOff()" onMouseOver="toolTip(\'Toggle measurement cursor\')">';
		sHTML+='       </td>';
		sHTML+='     </tr></table>';
		sHTML+='   </div>';
		sHTML+=' </td>';
	
		sHTML+='	<td style="background-image:url(watermark.png); background-repeat:no-repeat;">';
		sHTML+='		<div id="curves_frame_'+this.sId+'" style="position:relative; overflow:hidden; width:100; height:100;">';
	
		sHTML+='			<div id="selected_'+this.sId+'" class="graphic_select" style="position:absolute; visibility:hidden;">';
		sHTML+='			</div>';
	
		sHTML+='			<div id="curves_moved_'+this.sId+'" style="position:absolute;">';
		sHTML+='				<img id="curves_moved_img_'+this.sId+'" src="spacer.gif" onLoad="superGraphicsList__['+this.id+'].onCurvesMovedLoad()" onError=document.location.href="index.htm">';
		sHTML+='			</div>';
	
		sHTML+='			<div id="curves_'+this.sId+'" style="position:absolute;">';
		sHTML+='				<img id="curves_img_'+this.sId+'" '+(bIE?'src="spacer.gif" ':'')+'onLoad="superGraphicsList__['+this.id+'].onCurvesLoad()" onError=document.location.href="index.htm">';
		sHTML+='			</div>';
	
		sHTML+='			<div id="curves_zoomed_'+this.sId+'" style="position:absolute;">';
		sHTML+='				<img id="curves_zoomed_img_'+this.sId+'" src="spacer.gif" style="visibility:hidden;">';
		sHTML+='			</div>';
	
		sHTML+='			<div id="insert_'+this.sId+'" class="hide_if_printing_in_chrome" style="position:absolute;">';
		sHTML+='				<table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=center>';
		sHTML+='					<img id="insert_img_'+this.sId+'" src="spacer.gif" onLoad="superGraphicsList__['+this.id+'].onInsertLoad()">';
		sHTML+='				</td></tr></table>';
		sHTML+='			</div>';
	
		sHTML+='			<div id="loading_'+this.sId+'" style="position:absolute; width:100%; height:100%;">';
		sHTML+='				<div style="position:absolute; width:100%; height:100%;">';
		sHTML+=' 				<table cellspacing=0 cellpading=0 width=100% height=100% ><tr><td align=center>';
		sHTML+='						<div class="opacity70"><img src="loading_background.gif"></div>';
		sHTML+='					</td></tr></table>';
		sHTML+='				</div>';
		sHTML+='				<div style="position:absolute; width:100%; height:100%;">';
		sHTML+='					<table cellspacing=0 cellpadding=0 width=100% height=100%><tr><td align=center>';
		sHTML+='						<img src="loading.gif">';
		sHTML+='					</td></tr></table>';
		sHTML+='				</div>';
		sHTML+='			</div>';
	
		sHTML+='       <div id="sg_tooltip_'+this.sId+'" class="graphic_tooltip">';
		sHTML+='         &nbsp;';
		sHTML+='			</div>';
	
		sHTML+='			<div id="drag_'+this.sId+'" class="hide_if_printing_in_chrome" style="position:absolute; cursor:pointer; border-style:solid; border-width:1;" onMouseDown="superGraphicsList__['+this.id+'].dragBegin()" onMouseOver="superGraphicsList__['+this.id+'].onMouseOver()">';
		sHTML+='				<img id="drag_img_'+this.sId+'" src="spacer.gif">';
		sHTML+='			</div>';
	
		sHTML+='       <div id="sg_csrs_1_'+this.sId+'" style="position:absolute; cursor:e-resize; left:20; top:0; width:20; height:200; visibility:hidden;" onMouseDown="superGraphicsList__['+this.id+'].dragCsrsBegin(1)">';
		sHTML+='				<table cellspacing=0 cellpadding=0 width=100% height=100%>';
		sHTML+='					<tr> <td></td> <td style="background-image:url(csrs_line.gif); width:2;"></td> <td></td>';
		sHTML+='					<tr height=17> <td colspan=3 style="background-image:url(cursor_marker1.gif);"></td>';
		sHTML+='				</tr></table>';
		sHTML+='			</div>';
	
		sHTML+='       <div id="sg_csrs_1_time_'+this.sId+'" class="graphic_cursor_time">';
		sHTML+='         &nbsp;00:00:00&nbsp;';
		sHTML+='			</div>';
	
		sHTML+='       <div id="sg_csrs_2_'+this.sId+'" style="position:absolute; cursor:e-resize; left:200; top:0; width:20; height:200; visibility:hidden;" onMouseDown="superGraphicsList__['+this.id+'].dragCsrsBegin(2)">';
		sHTML+='				<table cellspacing=0 cellpadding=0 width=100% height=100%>';
		sHTML+='					<tr> <td></td> <td style="background-image:url(csrs_line.gif); width:2;"></td> <td></td>';
		sHTML+='					<tr height=17> <td colspan=3 style="background-image:url(cursor_marker2.gif);"></td>';
		sHTML+='				</tr></table>';
		sHTML+='			</div>';
	
		sHTML+='       <div id="sg_csrs_2_time_'+this.sId+'" class="graphic_cursor_time">';
		sHTML+='         &nbsp;00:00:00&nbsp;';
		sHTML+='			</div>';
	
		sHTML+='       <div id="sg_csrs_time_offset_'+this.sId+'" class="graphic_cursor_time">';
		sHTML+='         &nbsp;00:00:00&nbsp;';
		sHTML+='			</div>';
	
		sHTML+='		</div>';
		sHTML+='	</td>';
	
		sHTML+='</tr></table>';
	
		this.objDiv.innerHTML=sHTML;
	
		// get pointers of sub objects
		this.objCurves				=document.getElementById('curves_'+this.sId);
		this.objCurvesImg			=document.getElementById('curves_img_'+this.sId);
		this.objCurvesMoved		=document.getElementById('curves_moved_'+this.sId);
		this.objCurvesMovedImg	=document.getElementById('curves_moved_img_'+this.sId);
		this.objCurvesZoomed		=document.getElementById('curves_zoomed_'+this.sId);
		this.objCurvesZoomedImg	=document.getElementById('curves_zoomed_img_'+this.sId);
		this.objCurvesFrame		=document.getElementById('curves_frame_'+this.sId);
		this.objLoading			=document.getElementById('loading_'+this.sId);
		this.objLabels				=document.getElementById('labels_'+this.sId);
		this.objInsert				=document.getElementById('insert_'+this.sId);
		this.objInsertImg			=document.getElementById('insert_img_'+this.sId);
		this.objDrag				=document.getElementById('drag_'+this.sId);
		this.objDragImg			=document.getElementById('drag_img_'+this.sId);	// dummy for IE
		this.objSelected			=document.getElementById('selected_'+this.sId);
		this.objCursorOnOffImg  =document.getElementById('img_csrs_onoff_'+this.sId);
		this.objInfoOnOffImg    =document.getElementById('img_info_onoff_'+this.sId);
		this.objCsrs1				=document.getElementById('sg_csrs_1_'+this.sId);
		this.objCsrs2				=document.getElementById('sg_csrs_2_'+this.sId);
		this.objCsrs1Time			=document.getElementById('sg_csrs_1_time_'+this.sId);
		this.objCsrs2Time			=document.getElementById('sg_csrs_2_time_'+this.sId);
		this.objCsrsTimeOffset	=document.getElementById('sg_csrs_time_offset_'+this.sId);
		this.objToolTip			=document.getElementById('sg_tooltip_'+this.sId);
		this.objCsrsOnOffTool   =document.getElementById('sg_csrs_onoff_tool_'+this.sId);

		// set sizes
		if(!parseInt(this.objDiv.style.width))
			return;
		
		this.objCurvesFrame.style.width=parseInt(this.objDiv.style.width)-50;	// let some space for not yet loaded lable image
		this.objCurvesFrame.style.height=parseInt(this.objDiv.style.height)-50;
		this.objCsrs1.style.height=parseInt(this.objDiv.style.height)-22;
		this.objCsrs2.style.height=parseInt(this.objDiv.style.height)-22;
		this.objCsrs1Time.style.top=parseInt(this.objDiv.style.height)-12;
		this.objCsrs2Time.style.top=parseInt(this.objDiv.style.height)-12;
		this.objCsrsTimeOffset.style.top=parseInt(this.objDiv.style.height)-12;
		}

	// define member functions
	this.Update=function(bForce, bMoved)
		{
		if(!this.enabled_)
			return;
	
		if(this.periode==-999999999)	// not yet initialized (IE7)
			return;	
				
		if(!bMoved)
			{
			// reset zoom out to prev values
			this.zoomOutPeriode=0;
			this.zoomOutStart=0;
			}

		var Layered="1";
		
		if(bIE6)
			Layered="0";
						
	   var newSrcHeader="graphic.png?sid="+this.sSID+"&gid="+this.sId;
		var newSrc="&layered="+Layered+"&start="+this.start;
	
		newSrc+="&width="+parseInt(this.objDiv.style.width);
		newSrc+="&height="+parseInt(this.objDiv.style.height);
		newSrc+="&periode="+this.periode;
		newSrc+="&titlesLeft=0";
		newSrc+="&insertType="+this.insertType;
		newSrc+="&move="+this.move_;
		
		if(this.bZoomMode)
			{
			newSrc+="&pixelOffset=-"+getPosX(this.objSelected);
			newSrc+="&pixelZoom="+parseInt(this.objSelected.style.width);
			this.zoomMode(false);
			}
		else
			newSrc+="&pixelOffset="+getPosX(this.objCurves);
			
		newSrc+=this.extraParameter;
		
		if(this.visible0)	newSrc+=this.curve0;
		if(this.visible1)	newSrc+=this.curve1;
		if(this.visible2)	newSrc+=this.curve2;
		if(this.visible3)	newSrc+=this.curve3;
		if(this.visible4)	newSrc+=this.curve4;
		if(this.visible5)	newSrc+=this.curve5;
		if(this.visible6)	newSrc+=this.curve6;
		if(this.visible7)	newSrc+=this.curve7;
		if(this.visible8)	newSrc+=this.curve8;
		if(this.visible9)	newSrc+=this.curve9;

		// send url parts if itīs too long (IE)
		var newSrcFull=newSrcHeader+newSrc;
		
		// reset move command after execution
		this.move_=0;
				
		if(bMoved)
			{
			// load moved graphic on offset=0
			if(bIE6 || bIE7)
				newSrc=this.sendURLparts(newSrcHeader, newSrc);
			
			this.objCurvesMovedImg.fullSrc_=newSrcFull;
			this.objCurvesMovedImg.src=newSrcHeader+newSrc+"&unique="+this.uniqueCounter_;
			this.uniqueCounter_++;
			}
		else
			{
			// check if something has changed, otherwise exit and doīnt view loading image
			if(!bForce && this.objCurvesImg.fullSrc_==newSrcFull)
				{
//				Log('sg.Update(same)');
				return;
				}

			// load new graphic
			if(bIE6 || bIE7)
				newSrc=this.sendURLparts(newSrcHeader, newSrc);
			
			this.objCurvesImg.fullSrc_=newSrcFull;
			this.objCurvesImg.src=newSrcHeader+newSrc+"&unique="+this.uniqueCounter_;
			this.uniqueCounter_++;
//			Log('sg.Update(loading)');
			}
		
		this.objLoading.style.visibility='visible';
		}


	this.sendURLparts=function(newSrcHeader, newSrc)
		{
		var diExtra=1;
			
		while(newSrcHeader.length+newSrc.length > 1800)
			{
			var sendLen=0;
				
			for(var i=0; i<newSrc.length; i++)
				{
				if(newSrc.charAt(i)=='&')
					{
					if(i > 1800-newSrcHeader.length)
						break;
							
					sendLen=i;
					}
				}
				
			ajaxSendGetURL(newSrcHeader+"&extra="+diExtra+newSrc.substring(0, sendLen)+"&unique="+this.uniqueCounter_);
			newSrc=newSrc.substring(sendLen);
			diExtra++;
			}
			
		return(newSrc);
		}

	this.onCurvesMovedLoad=function()
		{
		if(this.objCurvesMovedImg.src.indexOf('spacer.gif')>-1)
			return;
		
//		Log('onCurvesMovedLoad');
		
		// swap moved image with normal image
		this.objCurvesImg.style.visibility='hidden';
		setPos(this.objCurves, 0, -999999);
		
		// swap images
		this.objCurvesImg.fullSrc_=this.objCurvesMovedImg.fullSrc_;
		this.objCurvesImg.src=this.objCurvesMovedImg.src;
		
		// hide zoomed curves
		this.objCurvesZoomedImg.style.visibility='hidden';
		}
		
	this.onCurvesLoad=function()
		{
//		Log('onCurvesLoad width='+this.objCurvesImg.width+' height='+this.objCurvesImg.height);

		if(bIE6)
			{
			// callback
			if(this.onLoad_)
				eval(this.onLoad_);
			
			this.objLoading.style.visibility='hidden';
			return;
			}

		// hide toolTip first time here, must initially be visible for IE6
		if(this.firstUpdate_)
			{
			this.firstUpdate_=false;
			this.objToolTip.style.visibility='hidden';
			}

		if(this.objCurvesImg.width<=2)	// spacer.gif was loaded
			{
			this.Update(true);
			return;
			}

		// swap from moved image to normal image if graphic was draged or zoomed
		this.objCurvesImg.style.visibility='visible';
		this.objCurvesMovedImg.src='spacer.gif';

		if(this.cursor_)
			{
			// adjust position of cursors after zoom out
			var zoomOutFactor=ajaxGetValue('graphic.'+this.sId+'.zoomOutFactor');
			var zoomOutOffset=ajaxGetValue('graphic.'+this.sId+'.zoomOutOffset');
			this.zoomCursors(zoomOutFactor, zoomOutOffset);
			}

		// callback
		if(this.onLoad_)
			eval(this.onLoad_);

		// refresh cursor time lables			
		if(this.cursor_)
			this.refreshCsrsTimes();

		// resize layers
		this.objCurvesFrame.style.width=this.objCurvesImg.width;
		this.objCurvesFrame.style.height=this.objCurvesImg.height;
		
		this.objDragImg.width=this.objCurvesImg.width-2;
		
		var diNewHeight=this.objCurvesImg.height-41;
		this.objSelected.style.height=diNewHeight;
		
		if(bIE)
			diNewHeight-=3;
		
		this.objDragImg.height=diNewHeight;
		
		// reaload child layers
		this.objLabels.busy_=true;
		this.objInsertImg.busy_=true;
		
		// reload labels
		var newSrc="tmp/"+this.sSID+"_graphic_labels_"+this.sId+".png";
		var Jetzt = new Date();
		newSrc+="?dummy="+Jetzt.getHours()*3600+Jetzt.getMinutes()*60+Jetzt.getSeconds();	// to be sure browser gets new image from server
		
		this.objLabels.src=newSrc;
		
		// reload insert
		var newSrc="tmp/"+this.sSID+"_graphic_insert_"+this.sId+".png";
		newSrc+="?dummy="+Jetzt.getHours()*3600+Jetzt.getMinutes()*60+Jetzt.getSeconds();	// to be sure browser gets new image from server
		
		this.objInsertImg.src=newSrc;
		}
		
	this.onLabelsLoad=function()
		{
		if(this.objLabels.src.indexOf('spacer.gif')>-1)
			return;
		
//		Log('onLabelsLoad');
		
		this.objLabels.busy_=false;
		
		if(!this.objInsertImg.busy_)
			this.objLoading.style.visibility='hidden';
		}
		
	this.onInsertLoad=function()
		{
		if(this.objInsertImg.src.indexOf('spacer.gif')>-1)
			return;
		
//		Log('onInsertLoad');
		
		this.objInsertImg.busy_=false;
		
		if(!this.objLabels.busy_)
			this.objLoading.style.visibility='hidden';
		}
		
	this.dragBegin=function()
		{
		superGraphicAct__=this;
		this.objCsrs1.oldX_=parseInt(this.objCsrs1.style.left);
		this.objCsrs2.oldX_=parseInt(this.objCsrs2.style.left);
		dragedCsrs__=0;
		downPosX__=actX__;
		
		Log('dragBegin downPosX__='+downPosX__);
		
		if(this.bZoomMode)
			{
			var offsetLeft=getLeft(this.objDrag);
			this.objSelected.startPos_=actX__+document.body.scrollLeft-offsetLeft;
			setPos(this.objSelected, this.objSelected.startPos_, -999999);
			this.objSelected.style.width=1;
			this.objSelected.style.visibility="visible";
			}
			
		dragedGraphic__=this;
		}

	this.dragCsrsBegin=function(diCrsr)
		{
		superGraphicAct__=this;
		this.actCursor_=diCrsr;
		
		if(diCrsr==1)
			this.objCsrs1Time.style.visibility="hidden";
		else
			this.objCsrs2Time.style.visibility="hidden";
		
		this.objCsrsTimeOffset.style.visibility="hidden";
		
		this.objCsrs1.oldX_=parseInt(this.objCsrs1.style.left);
		this.objCsrs2.oldX_=parseInt(this.objCsrs2.style.left);
		
		dragedCsrs__=diCrsr;
		downPosX__=actX__;
		Log('dragCsrsBegin downPosX__='+downPosX__);
		dragedGraphic__=this;
		}

	this.moveRR=function()
		{
		this.move_=-2;
		this.Update();
		}
				
	this.moveR=function()
		{
		this.move_=-1;
		this.Update();
		}
				
	this.moveF=function()
		{
		this.move_=1;
		this.Update();
		}
				
	this.moveFF=function()
		{
		this.move_=2;
		this.Update();
		}
				
	this.zoomOut=function()
		{
		if(bIE6)
			return;
		
		this.objCsrs1Time.style.visibility="hidden";
		this.objCsrs2Time.style.visibility="hidden";
		this.objCsrsTimeOffset.style.visibility="hidden";
		
		if(this.zoomOutPeriode)
			{
			this.periode=this.zoomOutPeriode;
			this.start=this.zoomOutStart;
			}
		else
			this.move_=999999;
			
		this.Update();
		}
		
	this.zoomMode=function(bEnable)
		{
		if(bIE6)
			return;
		
		this.bZoomMode=bEnable;

		var objZoomInButton=document.getElementById(this.sId+'_zoomInButton');
		
		if(!objZoomInButton)
			objZoomInButton=document.getElementById('sg_zoomInButton');
		
		if(bEnable)	
			{
			this.objDrag.style.cursor="crosshair";
			
			if(objZoomInButton)
				objZoomInButton.src="graphic_zoom_ind.gif";
			}
		else
			{
			this.objDrag.style.cursor="pointer";
			this.objSelected.style.visibility="hidden";
			
			if(objZoomInButton)
				objZoomInButton.src="graphic_zoom_in.gif";
			}
		}
		
	this.zoomCursors=function(zoomFactor, zoomOffset)
		{
		var FrameWidth=parseInt(this.objCurvesFrame.style.width);
			
		var newX=this.cursorPos1_ * zoomFactor - zoomOffset*zoomFactor;

		if(newX<0)				newX=0;
		if(newX>=FrameWidth)	newX=FrameWidth-1;
						
		newX=parseInt(newX);	// truncate decimal places
		this.cursorPos1_			 = newX;
		this.objCsrs1.style.left = newX-9;
			
		newX=this.cursorPos2_ * zoomFactor - zoomOffset*zoomFactor;

		if(newX<0)				newX=0;
		if(newX>=FrameWidth)	newX=FrameWidth-1;
									
		newX=parseInt(newX);	// truncate decimal places
		this.cursorPos2_			 = newX;
		this.objCsrs2.style.left = newX-9;
		}
		
	this.Zoom=function()
		{
		if(!this.bZoomMode)
			return;

		this.zoomOutPeriode=this.periode;
		this.zoomOutStart=this.start;

		var zoomFactor=this.objCurvesImg.width / parseInt(this.objSelected.style.width);
		var zoomOffset=getPosX(this.objSelected);

		// move cursors to zoomed position
		if(this.cursor_)
			{
			this.objCsrs1Time.style.visibility="hidden";
			this.objCsrs2Time.style.visibility="hidden";
			this.objCsrsTimeOffset.style.visibility="hidden";
			
			this.zoomCursors(zoomFactor, zoomOffset);
			}
			
		// zoom objCurvesZoomedImg and overlay it until new image has loaded
		this.objCurvesZoomedImg.src=this.objCurvesImg.src;
		
		setPos(this.objCurvesZoomed, -zoomOffset * zoomFactor, -999999);
		
 		this.objCurvesZoomedImg.width=this.objCurvesImg.width * zoomFactor;
		this.objCurvesZoomedImg.height=this.objCurvesImg.height;

		// swap normal curves with zoomed curves
		this.objCurvesZoomedImg.style.visibility='visible';
		this.objCurvesImg.style.visibility='hidden';
		}
		
	this.onClickCursorOnOff=function()
		{
		if(this.cursor_)
			{
			this.cursor_=false;
			this.objCursorOnOffImg.src="cursor.gif";
			this.objCsrs1.style.visibility="hidden";
			this.objCsrs2.style.visibility="hidden";
			this.objCsrs1Time.style.visibility="hidden";
			this.objCsrs2Time.style.visibility="hidden";
			this.objCsrsTimeOffset.style.visibility="hidden";
			}
		else
			{
			this.cursor_=true;
			this.objCursorOnOffImg.src="cursor_off.gif";
			
			var diWidth=parseInt(this.objCurvesFrame.style.width);
			
			this.objCsrs1.style.left=diWidth*0.25 -9;
			this.objCsrs2.style.left=diWidth*0.75 -9;
			
			this.cursorPos1_=parseInt(this.objCsrs1.style.left)+9;
			this.cursorPos2_=parseInt(this.objCsrs2.style.left)+9;
			
			this.objCsrs1.style.visibility="visible";
			this.objCsrs2.style.visibility="visible";
			
			this.refreshCsrsTimes();
			}
			
		// callback
		if(this.onDetailedToggle_)
			eval(this.onDetailedToggle_);
			
		// callback
		if(this.onLoad_)
			eval(this.onLoad_);
		}

	this.setDetailed=function(bDetailed)
		{
		if(!bIE6)
			{
			if(bDetailed)
				this.objInfoOnOffImg.src="sg_info_off.gif";
			else				
				this.objInfoOnOffImg.src="sg_info_on.gif";
				
			if(this.insertVisibility_==1 || (this.insertVisibility_==2 && bDetailed))
				this.objInsert.style.visibility='visible';
			else				
				this.objInsert.style.visibility='hidden';
			}
		
		this.detailed_=bDetailed;
		
		// callback
		if(this.onDetailedToggle_)
			eval(this.onDetailedToggle_);
		}
		
	this.onClickInfoOnOff=function()
		{
		this.setDetailed(!this.detailed_);
		}
		
	this.UpdateCsrs=function()
		{
		// callback
		if(this.onLoad_)
			eval(this.onLoad_);
		}
		
	this.refreshCsrsTimes=function()
		{
		var X1=parseInt(this.objCsrs1.style.left)+9;
		var X2=parseInt(this.objCsrs2.style.left)+9;
		
		ajaxLoadSpan('sg_csrs_1_time_'+this.sId, 'include/ajax_graphicCsrsTime.htm?sid=<%data sys.sessionid%>&autoreload=1&id='+this.sId+'&x='+X1);
		ajaxLoadSpan('sg_csrs_2_time_'+this.sId, 'include/ajax_graphicCsrsTime.htm?sid=<%data sys.sessionid%>&autoreload=1&id='+this.sId+'&x='+X2);
		ajaxLoadSpan('sg_csrs_time_offset_'+this.sId, 'include/ajax_graphicCsrsTimeOffset.htm?sid=<%data sys.sessionid%>&autoreload=1&id='+this.sId+'&x1='+X1+'&x2='+X2);
		}
				
	this.onKeyDown=function(keynum)
		{
		this.objCsrs1.oldX_=parseInt(this.objCsrs1.style.left);
		this.objCsrs2.oldX_=parseInt(this.objCsrs2.style.left);
		
		if(keynum==39 && this.actCursor_==1)	// ->
			{
			var oldPos=this.cursorPos1_;
			this.cursorPos1_=sgSetCsrsPos(this.objCsrs1,  1, this.objCurvesFrame.style.width);
			
			if(this.cursorPos1_!=oldPos)
				{
				this.objCsrs1Time.style.visibility="hidden";
				this.objCsrsTimeOffset.style.visibility="hidden";
				this.UpdateCsrs();
				this.refreshCsrsTimes();
				}
			}
			
		if(keynum==39 && this.actCursor_==2)	// ->
			{
			var oldPos=this.cursorPos2_;
			this.cursorPos2_=sgSetCsrsPos(this.objCsrs2,  1, this.objCurvesFrame.style.width);
			
			if(this.cursorPos2_!=oldPos)
				{
				this.objCsrs2Time.style.visibility="hidden";
				this.objCsrsTimeOffset.style.visibility="hidden";
				this.UpdateCsrs();
				this.refreshCsrsTimes();
				}
			}			
			
		if(keynum==37 && this.actCursor_==1)	// <-
			{
			var oldPos=this.cursorPos1_;
			this.cursorPos1_=sgSetCsrsPos(this.objCsrs1, -1, this.objCurvesFrame.style.width);
			
			if(this.cursorPos1_!=oldPos)
				{
				this.objCsrs1Time.style.visibility="hidden";
				this.objCsrsTimeOffset.style.visibility="hidden";
				this.UpdateCsrs();
				this.refreshCsrsTimes();
				}
			}
			
		if(keynum==37 && this.actCursor_==2)	// <-
			{
			var oldPos=this.cursorPos2_;
			this.cursorPos2_=sgSetCsrsPos(this.objCsrs2, -1, this.objCurvesFrame.style.width);
			
			if(this.cursorPos2_!=oldPos)
				{
				this.objCsrs2Time.style.visibility="hidden";
				this.objCsrsTimeOffset.style.visibility="hidden";
				this.UpdateCsrs();
				this.refreshCsrsTimes();
				}
			}
		}
		
	this.onMouseOver=function()
		{
		superGraphicAct__=this;
		}
				
	this.onMouseMove=function(e)
		{
		clearTimeout(this.toolTipTimer_);
		this.objToolTip.style.visibility='hidden';

		if(dragedGraphic__)
			return;
		
		if(this.objLoading.style.visibility=='visible')
			return;
			
		var FrameWidth=parseInt(this.objCurvesFrame.style.width);
		var FrameHeight=parseInt(this.objCurvesFrame.style.height)-39;
		
		var imgTop =getTop(this.objCurvesImg);
		var imgLeft=getLeft(this.objCurvesImg);

		var posX=e.clientX+document.body.scrollLeft-imgLeft;
		var posY=e.clientY+document.body.scrollTop-imgTop;
		
		if(posX<0 || posX>=FrameWidth || posY<0 || posY>=FrameHeight)
			this.objToolTip.style.visibility='hidden';
		else
			{
			this.objToolTip.style.left=0;
			this.objToolTip.style.top =0;
			this.objToolTip.x_=posX;
			this.objToolTip.y_=posY;
			this.toolTipTimer_=setTimeout("ajaxLoadSpan('sg_tooltip_"+this.sId+"', 'include/ajax_graphicToolTip.htm?sid=<%data sys.sessionid%>&autoreload=1&id="+this.sId+"&x="+posX+"&y="+posY+"')", 100);
			}
		}
			
	this.showCsrsTimes=function()
		{
		this.objCsrs1Time.style.visibility="visible";
		this.objCsrs2Time.style.visibility="visible";
		this.objCsrsTimeOffset.style.visibility="visible";
		}

	this.showToolTip=function()
		{
		var objToolTipSpan=document.getElementById('graphic_toolTip_span'+this.sId);
		
		var Width =objToolTipSpan.offsetWidth;
		var Height=objToolTipSpan.offsetHeight;
		var Left  =this.objToolTip.x_;
		var Top   =this.objToolTip.y_-Height-5;
		
		var FrameWidth =parseInt(this.objCurvesFrame.style.width);
		var FrameHeight=parseInt(this.objCurvesFrame.style.height)-39;

		if(Left+Width > FrameWidth)
			this.objToolTip.style.left=Left-Width;
		else
			this.objToolTip.style.left=Left;
		
		if(Top < 0)
			this.objToolTip.style.top=this.objToolTip.y_+23;
		else
			this.objToolTip.style.top=Top;
			
		this.objToolTip.style.visibility='visible';
		}
								
	this.enableCursorTool=function(bEnable)
		{
		if(bIE6)
			return;
		
		if(bEnable)
			this.objCsrsOnOffTool.style.display='block';
		else
			this.objCsrsOnOffTool.style.display='none';
		}
																				
	this.repositionCsrsTimes=function()
		{
		var Width1=this.objCsrs1Time.offsetWidth;
		var newLeft1=this.cursorPos1_-(Width1/2);
		
		var Width2=this.objCsrs2Time.offsetWidth;
		var newLeft2=this.cursorPos2_-(Width2/2);
		
		if(newLeft1<0)
			newLeft1=0;
		
		if(newLeft2<0)
			newLeft2=0;
			
		var FrameWidth=parseInt(this.objCurvesFrame.style.width);
		
		if(newLeft1+Width1 > FrameWidth)
			newLeft1=FrameWidth-Width1;
			
		if(newLeft2+Width2 > FrameWidth)
			newLeft2=FrameWidth-Width2;

		var WidthO=this.objCsrsTimeOffset.offsetWidth;
		var newLeftO=(newLeft1 + Width1/2 + newLeft2 + Width2/2)/2 - (WidthO/2);
						
		if(newLeft1<=newLeft2)
			{
			var Overlap = (newLeft1+Width1) - newLeft2 +4+ WidthO;
			
			if(Overlap>0)
				{
				newLeft1-=Overlap/2;
				newLeft2+=Overlap/2;

				if(newLeft1<0)
					{
					newLeft2+=-newLeft1;
					newLeft1=0;
					}
						
				if(newLeft2+Width2 > FrameWidth)
					{
					newLeft1-=newLeft2+Width2-FrameWidth;
					newLeft2=FrameWidth-Width2;
					}
					
				newLeftO=newLeft1+Width1+2;
				}
			}
		else
			{
			var Overlap = (newLeft2+Width2) - newLeft1 +4+ WidthO;
			
			if(Overlap>0)
				{
				newLeft1+=Overlap/2;
				newLeft2-=Overlap/2;

				if(newLeft2<0)
					{
					newLeft1+=-newLeft2;
					newLeft2=0;
					}
						
				if(newLeft1+Width1 > FrameWidth)
					{
					newLeft2-=newLeft1+Width1-FrameWidth;
					newLeft1=FrameWidth-Width1;
					}
					
				newLeftO=newLeft2+Width2+2;
				}
			}
		
		this.objCsrs1Time.style.left=newLeft1;
		this.objCsrs2Time.style.left=newLeft2;
		this.objCsrsTimeOffset.style.left=newLeftO;
		}
	}

function sgDragEnd()
	{
	if(dragedGraphic__)
		{
		dragedGraphic__.cursorPos1_=parseInt(dragedGraphic__.objCsrs1.style.left)+9;
		dragedGraphic__.cursorPos2_=parseInt(dragedGraphic__.objCsrs2.style.left)+9;
		
		if(dragedCsrs__)
			{
			dragedGraphic__.UpdateCsrs();
			dragedGraphic__.refreshCsrsTimes();
			}
		else
			{			
			dragedGraphic__.Zoom();
			dragedGraphic__.Update(false, true);
			}
			
		dragedGraphic__=0;
		}
	}

function sgSetCsrsPos(objCsrs, newPosX, diFrameWidth)
	{
	var setPosX=objCsrs.oldX_+newPosX;

	diFrameWidth=parseInt(diFrameWidth);

	if(setPosX<-9)						setPosX=-9;
	if(setPosX>diFrameWidth-11)	setPosX=diFrameWidth-11;
			
	setPos(objCsrs, setPosX, -999999);
	return(setPosX+9);
	}
	
function sgDrag(e)
	{
   if(!e)
		e=window.event;

	actX__=e.clientX;

	if(superGraphicAct__)
		superGraphicAct__.onMouseMove(e);

	if(!dragedGraphic__)
		return;

	var newPosX=e.clientX-downPosX__;

//	Log('sgDrag e.clientX='+e.clientX+' downPosX__='+downPosX__+' newPosX='+newPosX);

	if(dragedCsrs__)
		{
		if(dragedCsrs__==1)
			dragedGraphic__.cursorPos1_=sgSetCsrsPos(dragedGraphic__.objCsrs1, newPosX, dragedGraphic__.objCurvesFrame.style.width);
		else
			dragedGraphic__.cursorPos2_=sgSetCsrsPos(dragedGraphic__.objCsrs2, newPosX, dragedGraphic__.objCurvesFrame.style.width);
		}
	else
		{
		if(dragedGraphic__.bZoomMode)
			{
			if(newPosX<0)
				{
				setPos(dragedGraphic__.objSelected, dragedGraphic__.objSelected.startPos_+newPosX, -999999);
				dragedGraphic__.objSelected.style.width=-newPosX;
				}
			else
				{
				setPos(dragedGraphic__.objSelected, dragedGraphic__.objSelected.startPos_, -999999);
				dragedGraphic__.objSelected.style.width=newPosX;
				}
			}
		else
			{
			setPos(dragedGraphic__.objCurves, newPosX, -999999);
			dragedGraphic__.cursorPos1_=sgSetCsrsPos(dragedGraphic__.objCsrs1, newPosX, dragedGraphic__.objCurvesFrame.style.width);
			dragedGraphic__.cursorPos2_=sgSetCsrsPos(dragedGraphic__.objCsrs2, newPosX, dragedGraphic__.objCurvesFrame.style.width);
			dragedGraphic__.repositionCsrsTimes();
			}
		}
		
	return false;		// donīt let IE interpret mousemove it will make a canīt drag/drop symbol!
	}

function sgDoNothing()
	{
	if(dragedGraphic__)
		return(false); // donīt let NS/Chrome interpret onmousedown it will make a canīt drag/drop symbol!
	}

function sgOnKeyDown(keynum)
	{
	if(superGraphicAct__)
		superGraphicAct__.onKeyDown(keynum);
	
	if(keynum!=16)	// just hook Shift (17=Ctrl but is used on Mac for pop up menu)
		return;
		
	for(sg=0; sg<superGraphicsList__.length; sg++)
		superGraphicsList__[sg].zoomMode(true);
	}

function sgOnKeyUp(keynum)
	{
	if(keynum!=16)	// just hook Shift (17=Ctrl)
		return;
	
	for(sg=0; sg<superGraphicsList__.length; sg++)
		superGraphicsList__[sg].zoomMode(false);
	}

if(!bIE6)
	{
	OnMouseMoveHook=sgDrag;
	OnMouseUpHook=sgDragEnd;
	OnMouseDownHook=sgDoNothing;
	OnKeyDownHook=sgOnKeyDown;	
	OnKeyUpHook=sgOnKeyUp;
	}