var currentMapLeft = 0 ;
  var currentMapTop = 0 ;
  var moveMapActive = false ;
  var currentBicPic = 1 ;
  var currentKamera = 1 ;


function xClientWidth()
{
  var v=0,d=document,w=window;
  if((!d.compatMode || d.compatMode == 'CSS1Compat') && !w.opera && d.documentElement && d.documentElement.clientWidth)
    {v=d.documentElement.clientWidth;}
  else if(d.body && d.body.clientWidth)
    {v=d.body.clientWidth;}
  else if(xDef(w.innerWidth,w.innerHeight,d.height)) {
    v=w.innerWidth;
    if(d.height>w.innerHeight) v-=16;
  }
  return v;
}

var mapPosx ;
var mapPosy ;


function jumpToMainMap(e) {
	var posx = 0;
	var posy = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		posx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}

  windowWidth = Math.floor ( xClientWidth() / 2 ) ;
  //alert ( "windowWidth " + windowWidth ) ;
	// alert ( "this is the current position " + posx + " " + posy ) ;

	//currentMapTop = posx * 3 - 400 ;
	//currentMapLeft = posy * 3 - 400 ;



		//alert ( currentMapTop + " " + currentMapLeft ) ;

	// currentMapTop = 2 ;
	// currentMapLeft = 2 ;
  //  currentMapTop = 50 ;
	//  currentMapLeft = 50 ;

	mapPosy = posy - 250 ;
	mapPosx = posx - windowWidth + 313 - 37 ;

	currentMapLeft = Math.floor( mapPosx * 4 ) - 200 ;
  currentMapTop = Math.floor( mapPosy * 4 ) - 350  ;
  	// 	alert ( "position " + currentMapTop + " " + currentMapLeft ) ;

  if ( currentMapLeft < 0 ) currentMapLeft = 0 ;
  if ( currentMapTop < 0 ) currentMapTop = 0 ;

	//alert ( " map pos " + mapPosx + " " + mapPosy ) ;

  positionMap ( ) ;
	block = document.getElementById("nav1") ;
	block.style.visibility="hidden";
	block = document.getElementById("nav2") ;
	block.style.visibility="visible";
 	block = document.getElementById("nav3") ;
	block.style.visibility="hidden";
 	block = document.getElementById("nav4") ;
	block.style.visibility="hidden";

  block = document.getElementById("bigPicture") ;
  block.style.visibility = "hidden";


  hideAuschnitt () ;

}

       function  hideAuschnitt () {

		   	block = document.getElementById("ausschnitttop") ;
	      block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;
		   	block = document.getElementById("ausschnittleft") ;
	      block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;
		   	block = document.getElementById("ausschnittbottom") ;
	      block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;
		   	block = document.getElementById("ausschnittright") ;
	      block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;

		  }
//------------------------------------

function moveMap ( moveX , moveY ) {
    // alert ( "currentMapLeft" + currentMapLeft ) ;
    // alert ( "currentMapTop" + currentMapTop ) ;
    // alert ( moveX ) ;
    // alert ( moveY ) ;
    // alert ( moveMapActive ) ;

  // alert("got to move map in map.html");
  var maxScrollTop = 2200 ;
  var maxScrollLeft = 2400 ;


  if ( ( moveMapActive == true ) & ( ( moveY < 0 & currentMapTop > 0 ) | ( moveY > 0 & currentMapTop <  maxScrollTop ) ) ) {
    currentMapTop = currentMapTop + moveY ;
  }
  if ( ( moveMapActive == true ) & ( ( moveX < 0 & currentMapLeft > 0 ) | ( moveX > 0 & currentMapLeft <  maxScrollLeft ) ) ) {
    currentMapLeft = currentMapLeft + moveX ;
  }
   /*  alert ( "currentMapLeft" + currentMapLeft ) ;
    alert ( "currentMapTop" + currentMapTop ) ; */
      positionMap ( ) ;
  if ( moveMapActive == true ) {

   window.setTimeout('moveMap(' + moveX + ',' + moveY + ')',10);
  }
}

//------------------------------------

function positionMap ( ) {
	if ( document.getElementById ) {
		block = document.getElementById("bigkarte") ;
		 block.style.top =  "-" + currentMapTop + "px";
		 block.style.left =   "-" + currentMapLeft + "px";
		 maxposx = currentMapTop + 770 ;
		 maxposy = currentMapLeft + 770 ;
	 	block.style.clip = "rect( " + currentMapTop + "px, " + maxposy  + "px, " + maxposx + "px, " + currentMapLeft + "px )";
		block = document.getElementById("smallkarte") ;
		block.style.clip = "rect(0px,0px,0px,0px)" ;
		// now work out which pics are visible
		picIndexX = Math.floor ( (  currentMapTop ) / 200 )  ;
		picIndexY = Math.floor ( (  currentMapLeft ) / 200 )  ;

		startX = picIndexX + 1 ; if ( startX < 1 ) startX = 1 ;
		startY = picIndexY + 1 ; if ( startY < 1 ) startY = 1 ;

		endX = picIndexX + 5 ; if ( endX > 12 ) endX = 12 ;
		endY = picIndexY + 5 ; if ( endY > 14 ) endY = 14 ;

   for ( p = startX ; p <= endX ; p++ ) {
   for ( q = startY ; q <= endY ; q++ ) {

		karte_id = "bigmap_" + p + "_" + q ;
   	block = document.getElementById(karte_id) ;
   	  karte_nr = ( p - 1 ) * 14 + q ;
    if ( karte_nr < 10 ) karte_nr = "0" + karte_nr ;
    src_name = "karte4/GrafschaftWanderwegWeb_" + karte_nr + ".gif";
    imgfile =  block.src ;
    slashpos = imgfile.lastIndexOf ( "/" ) ;
    imgfile = imgfile.substr ( slashpos + 1 ) ;
    if ( imgfile == "wird-geladen.gif" )
    {
    block.src = src_name ;
  }
     } // q
    }  // p
	}
}
 function jumpToOverview () {

	block = document.getElementById("nav1") ;
	block.style.visibility="visible";
	block = document.getElementById("nav2") ;
	block.style.visibility="hidden";
 	block = document.getElementById("nav3") ;
	block.style.visibility="hidden";
 	block = document.getElementById("nav4") ;
	block.style.visibility="hidden";

  block = document.getElementById("bigPicture") ;
  block.style.visibility = "hidden";
  block = document.getElementById("galleriediv") ;
  block.style.visibility = "hidden";


	block = document.getElementById("smallkarte") ;
	block.style.clip = "rect( 0px, 770px, 647px, 0px )" ;
	block = document.getElementById("bigkarte") ;
	block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;

		   	block = document.getElementById("ausschnitttop") ;
	      block.style.clip = "rect( 0px, 200px, 200px, 0px )" ;
		   	block = document.getElementById("ausschnittleft") ;
	      block.style.clip = "rect( 0px, 200px, 200px, 0px )" ;
		   	block = document.getElementById("ausschnittbottom") ;
	      block.style.clip = "rect( 0px, 200px, 200px, 0px )" ;
		   	block = document.getElementById("ausschnittright") ;
	      block.style.clip = "rect( 0px, 200px, 200px, 0px )" ;



  }

	var boxx = 0;
	var boxy = 0;


function showAuschnitt(e) {
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		boxx = e.pageX;
		boxy = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		boxx = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		boxy = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}

  space = window.innerWidth ;

	// alert ( "pos = " + boxx + " / " + boxy + " / " + space ) ;
	adjust = space / 2 - 465 ;
	if (adjust < 0 ) adjust = 0 ;
	adjust = Math.floor ( adjust ) ;
		//alert ( "adjust = " + adjust ) ;
     boxx = boxx - adjust ;

       if ( boxx < 280 ) boxx = 280 ;
       if ( boxy < 338 ) boxy = 338 ;

		   	block = document.getElementById("ausschnitttop") ;
		   	block.style.top = boxy - 220 - 100 + "px" ;
		   	block.style.left = boxx - 180 - 100  + "px" ;

		   	block = document.getElementById("ausschnittleft") ;
		   	block.style.top = boxy - 220 - 100 + "px" ;
		   	block.style.left = boxx - 180 - 100 + "px" ;


		   	block = document.getElementById("ausschnittbottom") ;
		   	block.style.top = boxy - 220 + 60 + "px" ;
		   	block.style.left = boxx - 180 - 100 + "px" ;


		   	block = document.getElementById("ausschnittright") ;
		   	block.style.top = boxy - 220 - 100 + "px" ;
		   	block.style.left = boxx - 180 + 100 + "px" ;





		  }

     function show_thumbnail ( picNo ) {
      //	alert ( picNo ) ;
     	img_src = bilder_array [ picNo ][2] ;

	    block = document.getElementById("thumbpic") ;
   		block.src = "thumbs/" + img_src ;
   		temp = block.src ;
   	//	alert ( temp ) ;
	    block = document.getElementById("thumbpicdiv") ;

   		block.style.visibility = "visible";
   	//	alert (  bilder_array [ picNo ][0] + "px" ) ;
   	  thumbtop =  parseInt ( bilder_array [ picNo ][0] )  + 40  ;
   	  thumbleft =  parseInt ( bilder_array [ picNo ][1] ) + 40 ;
   	 // alert ( thumbtop + " " + thumbleft ) ;
   	// alert ( thumbtop + " " +  currentMapTop ) ;
   	 if (  thumbtop + 120 > currentMapTop + 600 ) thumbtop = parseInt ( bilder_array [ picNo ][0] )  - 160  ;
   	 if (  thumbleft + 120 > currentMapLeft + 700 )thumbleft = parseInt ( bilder_array [ picNo ][1] )  - 160

   		block.style.top  =   thumbtop + "px" ;
   		block.style.left =   thumbleft + "px" ;
              }

      function hide_thumbnail () {
	    block = document.getElementById("thumbpicdiv") ;
   		block.style.visibility = "hidden";
      }

     function previous_pic (  ) {
         currentBicPic -- ;

         if ( currentBicPic < 2 ) {
         	 currentKamera -- ;
         	 if ( currentKamera < 1 )  currentKamera = bilder_array.length   ;
         	 currentBicPic = bilder_array[currentKamera].length - 1 ;
         	}
         // alert ( currentKamera + "/" +	currentBicPic )
    	    block = document.getElementById("bigPicture") ;
     	    block.src = "bigpics/" + bilder_array [ currentKamera ][currentBicPic] ;

        }
     function next_pic (  ) {

         currentBicPic ++ ;

         if ( currentBicPic >= bilder_array[currentKamera].length ) {
         	 currentKamera ++ ;
         	 currentBicPic = 2 ;
         	}
         // 	alert ( "currentKamera " + currentKamera + " == ? " + bilder_array.length ) ;
         	if ( currentKamera >= bilder_array.length  )  currentKamera = 1 ;

    	    block = document.getElementById("bigPicture") ;
     	    block.src = "bigpics/" + bilder_array [ currentKamera ][currentBicPic] ;
        }

     function showBigPic (kamNo, picNo) {
     	// alert ( " picNo " +  picNo ) ;
	    block = document.getElementById("bigPicture") ;
	    img_src = bilder_array [ kamNo ][picNo] ;
	   // alert ( " img_src " + img_src ) ;
	    currentKamera = kamNo ;
	    currentBicPic = picNo ;
	    block.src = "bigpics/" + img_src ;
	    block.style.visibility = "visible";


	block = document.getElementById("nav1") ;
	block.style.visibility="hidden";
	block = document.getElementById("nav2") ;
	block.style.visibility="hidden";
	block = document.getElementById("nav3") ;
	block.style.visibility="visible";
 	block = document.getElementById("nav4") ;
	block.style.visibility="hidden";

	block = document.getElementById("smallkarte") ;
	block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;
	block = document.getElementById("bigkarte") ;
	block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;
  block = document.getElementById("galleriediv") ;
  block.style.visibility = "hidden";

      hideAuschnitt () ;

     	}

     function hideBigPic () {
     	}



function showKamera() {


	currentMapLeft = parseInt ( bilder_array [ currentKamera ][ 1 ] ) - 300  ;
  currentMapTop = parseInt (bilder_array [ currentKamera ][ 0 ] ) - 300 ;
  	// 	alert ( "position " + currentMapTop + " " + currentMapLeft ) ;

  if ( currentMapLeft < 0 ) currentMapLeft = 0 ;
  if ( currentMapTop < 0 ) currentMapTop = 0 ;

	//alert ( " map pos " + mapPosx + " " + mapPosy ) ;

  positionMap ( ) ;
	block = document.getElementById("nav1") ;
	block.style.visibility="hidden";
	block = document.getElementById("nav2") ;
	block.style.visibility="visible";
 	block = document.getElementById("nav3") ;
	block.style.visibility="hidden";
 	block = document.getElementById("nav4") ;
	block.style.visibility="hidden";

  block = document.getElementById("bigPicture") ;
  block.style.visibility = "hidden";
  block = document.getElementById("galleriediv") ;
  block.style.visibility = "hidden";

  hideAuschnitt () ;
  blinkCount = 0 ;

  window.setTimeout("blinkKamera()", 400);

}
     blinkCount = 0 ;
 function blinkKamera () {
 	  divName = "kamera" + currentKamera ;
	  block = document.getElementById(divName) ;

	  // alert (blinkCount+ " " + block.style.visibility );
	  if ( block.style.visibility == "visible" ) block.style.visibility = "hidden" ; else block.style.visibility = "visible" ;
	   blinkCount ++ ;
	  if ( blinkCount <= 16 ) window.setTimeout("blinkKamera()", 400); else  block.style.visibility = "visible" ;

}

  function showGallerie () {

	block = document.getElementById("nav1") ;
	block.style.visibility="hidden";
	block = document.getElementById("nav2") ;
	block.style.visibility="hidden";
 	block = document.getElementById("nav3") ;
	block.style.visibility="hidden";
 	block = document.getElementById("nav4") ;
	block.style.visibility="visible";

  block = document.getElementById("bigPicture") ;
  block.style.visibility = "hidden";

  block = document.getElementById("galleriediv") ;
  block.style.visibility = "visible";


	block = document.getElementById("smallkarte") ;
	block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;
	block = document.getElementById("bigkarte") ;
	block.style.clip = "rect( 0px, 0px, 0px, 0px )" ;

	      hideAuschnitt () ;

        loadGallerie () ;

        displayGallerie () ;


  }

  inx = 1 ;
  kaminx = 1;

  gallerie_array = new Array ( 10 ) ;

  gallerie_index = 0 ;
  gallerie_start = 0 ;

  function loadGallerie () {
 // inx = gallerie_array [ gallerie_index ] [0] ;
 // kaminx = gallerie_array [ gallerie_index ] [1] ;
 // Bilder array wird umgestaltet in gallerie array. jedes Bild bekommt eigener Eintrag.

  for ( count = 1 ; count <= 100 ; count ++ ) {
    inx ++ ;
    if ( inx >= bilder_array[kaminx].length ) {
       kaminx ++ ;
       inx = 2 ;
  	}
    if ( kaminx >= bilder_array.length - 1  ) break ;
       //alert (  " kaminx etc " + kaminx + inx ) ;
     gallerie_index ++ ;
     gallerie_array [ gallerie_index ] = new Array ( kaminx , inx ) ;
     //alert ( " gallerie_array " +  gallerie_array [ gallerie_index ] ) ;


  }

  }

 function displayGallerie () {
  for ( count = 1 ; count <= 20 ; count ++ ) {

    divName = "thumbpic" + count ;

    temp_kaminx = gallerie_array [ gallerie_start + count ] [0] ;
    temp_inx = gallerie_array [ gallerie_start  + count ] [1] ;
      //alert ( " display " + count + ">" + divName + "<" + temp_kaminx + "/" + temp_inx ) ;
	  block = document.getElementById(divName) ;

 // alert ( block ) ;
	 // alert ( block.src ) ;
    block.src =  "thumbs/" + bilder_array[temp_kaminx][temp_inx] ;
     	  //alert ( block.src ) ;

  }
  }

  function nextGallerie () {
  	gallerie_start = gallerie_start + 20 ;
  	if ( gallerie_start > gallerie_array.length - 21) gallerie_start = gallerie_array.length - 21 ;
  	displayGallerie () ;
}
  function previousGallerie () {
  	gallerie_start = gallerie_start - 20 ;
  	if ( gallerie_start < 0 ) gallerie_start = 0 ;
  	displayGallerie () ;

}

    function showBigversion ( position ) {
    kamNr = gallerie_array [ gallerie_start + position ] [0] ;
    picNr = gallerie_array [ gallerie_start  + position ] [1] ;

    	showBigPic ( kamNr , picNr ) ;
}