/* Globale Variablen */
var BILD, MAXX, MAXY, OSIX, OSIY, CLIPX, CLIPY, MOTION, ZOOM;
var xAbs=0, yAbs=0;              // absolute Position des Bildes zu Beginn
var dx=0, dy=0;                  // Verschiebung des Bildes zu Beginn
var POS = { x:0, y:0 };          // Position des anzuzeigenden Ausschnitts
var MARKERS = new Array ();      // Id's der Marker


function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}

MM_reloadPage(true);

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


function openWindow ( cgi, fenstername, breit, hoch ) {
  var newWindow;
  var props = 'scrollBars=yes,resizable=yes,toolbar=no,menubar=no,location=no,directories=no, width='+breit+', height='+hoch;
  newWindow = window.open ( cgi, fenstername, props);
}


function setMarkers () {
  /* Setzt die Markierungspunkte mit den
     aktuellen ZOOM und Auschnitts Parametern */
  var marker;
  for ( var mkid in MARKERS ) {
    marker = document.getElementById ( mkid );
//    marker.style.left = ( MARKERS[mkid][0] - POS.x) * ZOOM.faktor;
//    marker.style.top  = ( MARKERS[mkid][1] - POS.y) * ZOOM.faktor;
    marker.style.left =  MARKERS[mkid][0] * ZOOM.scale - POS.x;
    marker.style.top  =  MARKERS[mkid][1] * ZOOM.scale - POS.y;
  }

}

function getAbsolutePos ( el ) {
    var r = { x: el.offsetLeft, y: el.offsetTop };
    if (el.offsetParent) {
        var tmp = getAbsolutePos(el.offsetParent);
        r.x += tmp.x, r.y += tmp.y;
    }
    return r;
}

function showPos (evt) {
    var x,y;
    var MS=0;

    if (!MS) {
        x = evt.screenX, y = evt.screenY;
    } else {
        x = window.event.clientX, y = window.event.clientY;
    }

    kp  = getAbsolutePos ( BILD );
    cdx = kp.x + POS.x + CLIPX/2 - x;
    cdy = kp.y + POS.y + CLIPY - y;
    dx  = - parseInt ( cdx/(CLIPX/2/3));
    dy  = - parseInt ( cdy/(CLIPY/2/3));
    window.status = 'POS ('+POS.x+','+POS.y+') Cursor ('+x+","+y+") - "+dy+","+cdy;
    return true;
}


function zoom () {
  return true;
  if ( ZOOM.direction == 0) return;

  var newzoom;

  // Zoomfaktor ermitteln
  if ( ZOOM.direction > 0 ) { newzoom = ZOOM.faktor*ZOOM.scale }
  else { newzoom = ZOOM.scale / ZOOM.faktor };

  // Neue Bildgrösse
  var x = parseInt ( BILD.style.width );
  var y = parseInt ( BILD.style.height );
  var nx = x * newzoom;
  var ny = y * newzoom;

  // Nur zoomen, wenn Bildgrösse die zulässigen Grenzen nicht über/unterschreitet
  if ( ( nx < MAXX ) && ( ny < MAXY ) && (nx >= CLIPX) && ( ny >= CLIPY) ){
    ZOOM.scale = newzoom;
    BILD.style.width  = OSIX*ZOOM.scale;
    BILD.style.height = OSIY*ZOOM.scale;
    setMarkers();
  }
}

function setZoom     ( zdir ) { ZOOM.direction = zdir }
function stopMotion  () { window.clearInterval ( MOTION ) }
function startMotion () { MOTION = window.setInterval ( 'move()', 40 ) }

function move() {
  // Während der Ausschnitt über das Bild wandert,
  // bewegt sich das Bild genau in die entgegengesetzte Richtung.
  // Dies erzeugt die Illusion der Bewegung des Bildausschnitts.

  var xv = parseInt(BILD.style.width) -( POS.x + dx );
  var yv = parseInt(BILD.style.height)-( POS.y + dy );
  if ( ( dx > 0 ) && ( xv <= CLIPX ) )  dx=0;
  if ( ( dx < 0 ) && ( POS.x <= 0 ) )   dx=0;
  if ( ( dy > 0 ) && ( yv <= CLIPY ) )  dy=0;
  if ( ( dy < 0 ) && ( POS.y <= 0 ) )   dy=0;
  POS.x += dx, POS.y += dy;
  xAbs  -= dx, yAbs  -= dy;
  /*window.status = POS.x+","+POS.y+","+xAbs+","+yAbs+" ("+(BILD.style.width-POS.x)+","+(image.height-POS.y);*/
  BILD.style.clip = "rect("+POS.y+" "+(POS.x+CLIPX)+" "+(POS.y+CLIPY)+" "+POS.x+")";

  BILD.style.left = xAbs;
  BILD.style.top  = yAbs;
  // Verschieben der Markierungspunkte
  setMarkers ();
}

function moveBildTo (cx, cy) {
  // Bewegt das Bild, so dass cx, cy den Mittelpunkt
  // Bildverschiebung bilden
  // cx, cy sind zwei Koordinaten im Bildkoordinatensystem
  POS.x = parseInt(cx)-CLIPX/2;
  POS.y = parseInt(cy)-CLIPY/2;
  xAbs  = -POS.x;
  yAbs  = -POS.y;
  BILD.style.clip = "rect("+POS.y+" "+(POS.x+CLIPX)+" "+(POS.y+CLIPY)+" "+POS.x+")";
  BILD.style.left = xAbs;
  BILD.style.top  = yAbs;
  setMarkers ();
  // alert ('New Center: ('+cx+','+cy+')');
}


function highLight ( id ) {
  // Versucht das Bild so zu zentrieren, dass der Marker mit der
  // id im Mittelpunkt liegt
  // alert ('Highlicht: marker_'+id );
  return true;
  var fahne   = document.getElementById ('marker_fahne' );
  var aktmark = document.getElementById ('marker_'+id );
  fahne.style.top  = parseInt(aktmark.style.top)-35;
  fahne.style.left = parseInt(aktmark.style.left)+6;
  moveBildTo ( fahne.style.left, fahne.style.top );
}


function initMe () {
  // Initialisierung Globale Variablen

  MAXX = 1000, MAXY=1000; // Maximale Grösse, sonst wirds optisch unschön

  // Clip-Bereich entspricht DIV-Container Dimensionen
  var clip = document.getElementById ("Fenster"); // Container in dem der Bildausschnitt gezeigt wird
  CLIPX = parseInt ( clip.style.width  );
  CLIPY = parseInt ( clip.style.height );

  BILD  = document.getElementById ("Bild"); // HTML-Tag Welches dad Bild enthält
  OSIX  = parseInt ( BILD.style.width );
  OSIY  = parseInt ( BILD.style.height );
  MAXX = OSIX*2, MAXY=OSIY*2; // Maximale Grösse, sonst wirds optisch unschön
  // Events zuordnen
  //BILD.onmousemove=showPos;
  //BILD.onmouseover=startMotion;
  //BILD.onmouseout=stopMotion;

  ZOOM = { faktor:1.25, scale:1.0, direction:1 };  // Aktuelle Zoom-Einstellungen

  // Aufspüren der zu markierenden Positionen
  var marker, alldivs;
  var alldivs = document.getElementsByTagName("div");
  s = '';
  for ( var i=0; i < alldivs.length; i++ ) {
    if ( alldivs[i].id.substr(0,7) == 'marker_') {
       marker = alldivs[i];
       MARKERS[marker.id] = new Array (  parseInt ( marker.style.left) , parseInt(marker.style.top)  );
       s += MARKERS[marker.id][0]+','+ MARKERS[marker.id][1]+'\n';
    }
  }
}