
   // CONFIG START
   var gf_start_cor = "mr_kopf_y";
   var gf_start_sag = "mr_kopf_x";
   var gf_start_tra = "mr_kopf_z";
   var gf_end = ".png";
   var dim = 255;
   var dir = "/MR-JS/mrimages/";
   var dir_back = "/MR-JS/mrimages/";
   var dir_inv = "/MR-JS/mrimagesinverted/";
   var fuehr_nullen = false;
   var offset_x = 42;
   
   var infotext = 'MRT-Datensatz: KOPF, T1\nTechnische Daten:\nModality                   MR\nManufacturer          SIEMENS\nModel       MAGNETOM Symphony\nInstitut  Dr. Assheuer, Koeln\nStudy Description        KOPF\nSlice Thickn.  001.071429E+00\nRepetit. Time  001.108000E+01\nEcho Time      004.300000E+00\nNumber of Averages      1\nImaging Freq.  006.368282E+01\nEcho Number(s)          1\nMagn. Field Strength 1.494981\nEcho Train Length       0\nRows                   256\nColumns                256\nPixel 9.76562E-01\\9.76562E-01\nBits Allocated         16\nBits Stored            12\nHigh Bit               11\nWindow Center       118 \\ 118\nWindow Width        294 \\ 294';
   
   var xo = 55;
   var y = 118;
   var z = 99;
   var x = xo + offset_x;
   // CONFIG END
   
   var infob = true;
   
   function invert()
   {
	   	var color;
		if(dir == dir_back) {dir = dir_inv; color='#FFF';} else {dir = dir_back; color='#000';}
		$("#sag").css("background-image","url("+dir+gf_start_sag+to_string(xo)+gf_end+")");
		$("#cor").css("background-image","url("+dir+gf_start_cor+to_string(y)+gf_end+")");
		$("#tra").css("background-image","url("+dir+gf_start_tra+to_string(z)+gf_end+")");
		$("#sag").css("background-color",color);
		$("#cor").css("background-color",color);
		$("#tra").css("background-color",color);
		
   }
   
   function add(dw,z)
   {
		if(dw == "dw")
		{
			var temp = parseInt($("#"+z).attr('value'))-1;
			if(temp >= 0){$("#"+z).attr('value',temp);}
			repaint();
		}
		else
		{
			var temp = parseInt($("#"+z).attr('value'))+1;
			if(temp <= dim){$("#"+z).attr('value',temp);}
			repaint();
		}
   }
   
   function info()
   {
		if(infob)
		{
			$("#infobobd").css("display","none");
			infob = false;
		}
		else
		{
			$("#infobobd").css("display","block");
			infob = true;	
		}
   }
   
   function to_string(zahl)
   {
		if(!fuehr_nullen)return zahl;
		zahl_str = ""+zahl+"";
		if(zahl_str.length == 3){return zahl;}
		else if(zahl_str.length == 2){return "0"+zahl;}
		else if(zahl_str.length == 1){return "00"+zahl;}
		return "000";
   }
   

   function paint_pfad(pos,a,b)
   {
	   	//alert("a"+a+" b"+b);
		$("#"+pos+"-linie-oben").css("left",a+"px");$("#"+pos+"-linie-oben").css("height",(b-7)+"px");
		$("#"+pos+"-linie-links").css("top",b+"px");$("#"+pos+"-linie-links").css("width",(a-7)+"px");
		$("#"+pos+"-linie-unten").css("left",a+"px");$("#"+pos+"-linie-unten").css("height",(dim-b-7)+"px");
		$("#"+pos+"-linie-rechts").css("top",b+"px");$("#"+pos+"-linie-rechts").css("width",(dim-a-7)+"px");
		$("#"+pos+"-punkt").css("left",a+"px");$("#"+pos+"-punkt").css("top",b+"px");
   }
   
   function paint_pfadk(pos)
   {
		paint_pfad('cor',x,z);
   		paint_pfad('sag',y,z);
   		paint_pfad('tra',x,y);
		$("#fadfot").html("Fadenkreuz: x: "+xo+"; y: "+y+"; z: "+z+";");
		$("#x").attr('value', xo);
		$("#y").attr('value', y);
		$("#z").attr('value', z);
   }
   
   function repaint()
   {
	   if(parseInt($("#x").attr('value')) <= (dim-offset_x) && parseInt($("#x").attr('value')) >=0){xo = parseInt($("#x").attr('value')); x = xo + offset_x;}
	   if(parseInt($("#y").attr('value')) <= dim && parseInt($("#y").attr('value')) >=0){y = parseInt($("#y").attr('value'));}
	   if(parseInt($("#z").attr('value')) <= dim && parseInt($("#z").attr('value')) >=0){z = parseInt($("#z").attr('value'));}
	   paint_pfadk("cor");
	   $("#sag").css("background-image","url("+dir+gf_start_sag+to_string(xo)+gf_end+")");
	   $("#cor").css("background-image","url("+dir+gf_start_cor+to_string(y)+gf_end+")");
	   $("#tra").css("background-image","url("+dir+gf_start_tra+to_string(z)+gf_end+")");
   }

$(document).ready(function() {
            
  $("#mrviewer").append("<table bgcolor='#EEEEEE' border='0' cellpadding='5' cellspacing='5' align='center'><tr><td width='"+dim+"' height='"+dim+"'><div id='sag' style='width:"+dim+"px; height:"+dim+"px;background:#000000 url("+dir+""+gf_start_sag+""+to_string(xo)+""+gf_end+") no-repeat top left;'></div></td><td width='"+dim+"' height='"+dim+"'><div id='cor' style='width:"+dim+"px; height:"+dim+"px;background:#000000 url("+dir+""+gf_start_cor+""+to_string(y)+""+gf_end+") no-repeat top left;' ></div></td></tr><tr><td><div style='width:"+dim+"px; height:"+dim+"px;position:relative;' id='infobox'></div></td><td width='"+dim+"' height='"+dim+"'><div id='tra' style='width:"+dim+"px; height:"+dim+"px;background:#000000 url("+dir+""+gf_start_tra+""+to_string(z)+""+gf_end+") no-repeat top left;' ></div></tr><tr><td><div id='fadfot'></div></td><td></td></tr></table>");
   
   $("#cor").append('<div style="width:'+dim+'px; height:'+dim+'px; position:relative;"><div id="cor-linie-oben" style="width:2px; height:120px; background:#ff0000; position:absolute; left:127px; top:0px;"></div><div id="cor-linie-links" style="width:120px; height:2px; background:#ff0000; position:absolute; left:0px; top:127px;"></div><div id="cor-linie-unten" style="width:2px; height:120px; background:#ff0000; position:absolute; left:127px; bottom:0px;"></div><div id="cor-linie-rechts" style="width:120px; height:2px; background:#ff0000; position:absolute; top:127px; right:0px;"></div><div id="cor-punkt" style="width:2px; height:2px; background:#ff0000; position:absolute; left:127px; top:127px;"></div></div>');
   $("#sag").append('<div style="width:'+dim+'px; height:'+dim+'px; position:relative;"><div id="sag-linie-oben" style="width:2px; height:120px; background:#ff0000; position:absolute; left:127px; top:0px;"></div><div id="sag-linie-links" style="width:120px; height:2px; background:#ff0000; position:absolute; left:0px; top:127px;"></div><div id="sag-linie-unten" style="width:2px; height:120px; background:#ff0000; position:absolute; left:127px; bottom:0px;"></div><div id="sag-linie-rechts" style="width:120px; height:2px; background:#ff0000; position:absolute; top:127px; right:0px;"></div><div id="sag-punkt" style="width:2px; height:2px; background:#ff0000; position:absolute; left:127px; top:127px;"></div></div>');
   $("#tra").append('<div style="width:'+dim+'px; height:'+dim+'px; position:relative;"><div id="tra-linie-oben" style="width:2px; height:120px; background:#ff0000; position:absolute; left:127px; top:0px;"></div><div id="tra-linie-links" style="width:120px; height:2px; background:#ff0000; position:absolute; left:0px; top:127px;"></div><div id="tra-linie-unten" style="width:2px; height:120px; background:#ff0000; position:absolute; left:127px; bottom:0px;"></div><div id="tra-linie-rechts" style="width:120px; height:2px; background:#ff0000; position:absolute; top:127px; right:0px;"></div><div id="tra-punkt" style="width:2px; height:2px; background:#ff0000; position:absolute; left:127px; top:127px;"></div></div>');
   
   $("#infobox").html('<div id="kopfimage" style=" background:#000000 url(/MR-JS/sonstiges/normal.jpg) no-repeat top left;"></div><div id="koordbox"><div style="margin-top:10px;"><label>X:</label><input onChange="repaint();" name="x" id="x" type="text" style="width:23px;"><input onClick="add(\'dw\',\'x\')"  name="" value="&nbsp;" type="button" class="xominus"><input onClick="add(\'up\',\'x\')"  name="" value="&nbsp;" type="button" class="xoplus"></div><div><label>Y:</label><input onChange="repaint();" name="y" id="y" type="text" style="width:23px;"><input onClick="add(\'dw\',\'y\')"  name="" value="&nbsp;" type="button" class="xominus"><input onClick="add(\'up\',\'y\')"  name="" value="&nbsp;" type="button" class="xoplus"></div><div><label>Z:</label><input onChange="repaint();" name="z" id="z" type="text" style="width:23px;" ><input onClick="add(\'dw\',\'z\')"  name="" value="&nbsp;" type="button" class="xominus"><input onClick="add(\'up\',\'z\')"  name="" value="&nbsp;" type="button" class="xoplus"></div></div><div id="infobobd" style=" display:block; position:absolute; left:0px; top:105px; "><textarea style="height:125px; width:'+dim+'px" disabled="disabled" name="infotext" id="infotext">'+infotext+'</textarea></div><div id="buttonbox"><input onClick="info();" name="info" value="Info" type="button" style="width:74px;"><input onClick="invert();" name="invert" value="Invertieren" type="button" style="width:74px;"></div>');
   
   paint_pfadk('cor');
   paint_pfadk('sag');
   paint_pfadk('tra');
  
  $("#mrviewer").find("#sag").click(function(e){
		var pos = $(this).position();
		pos.left = parseInt(pos.left);
		pos.top = parseInt(pos.top);
		y = e.pageX - pos.left;
		z = e.pageY - pos.top;
		$("#cor").css("background-image","url("+dir+gf_start_cor+to_string(y)+gf_end+")");
		$("#tra").css("background-image","url("+dir+gf_start_tra+to_string(z)+gf_end+")");
		$("#kopfimage").css("background-image","url(/MR-JS/sonstiges/sag.jpg)");
		paint_pfadk('sag');		
	});
  
   $("#mrviewer").find("#cor").click(function(e){
		var pos = $(this).position();
		pos.left = parseInt(pos.left);
		pos.top = parseInt(pos.top);
		xo = e.pageX - pos.left - offset_x;
		x = e.pageX - pos.left;
		if(xo < 0){xo=0;x=offset_x;}
		z = e.pageY - pos.top;
		$("#sag").css("background-image","url("+dir+gf_start_sag+to_string(xo)+gf_end+")");
		$("#tra").css("background-image","url("+dir+gf_start_tra+to_string(z)+gf_end+")");
		$("#kopfimage").css("background-image","url(/MR-JS/sonstiges/cor.jpg)");
		paint_pfadk('cor');
	});
   
     $("#mrviewer").find("#tra").click(function(e){
		var pos = $(this).position();
		pos.left = parseInt(pos.left);
		pos.top = parseInt(pos.top);
		xo = e.pageX - pos.left - offset_x;
		x = e.pageX - pos.left;
		if(xo < 0){xo=0;x=offset_x;}
		y = e.pageY - pos.top;
		$("#sag").css("background-image","url("+dir+gf_start_sag+to_string(xo)+gf_end+")");
		$("#cor").css("background-image","url("+dir+gf_start_cor+to_string(y)+gf_end+")");
		$("#kopfimage").css("background-image","url(/MR-JS/sonstiges/tra.jpg)");
		paint_pfadk('tra');
	});
	 
	  $("#mrviewer").find("#kopfimage").click(function(e){
		$("#kopfimage").css("background-image","url(/MR-JS/sonstiges/normal.jpg)");
	});
  
 });

