var windowX;  // fenster breite
  var windowY;  //         höhe

  var popUp;    // popup ein/aus

  var picI;     //  laufendes bild nummer
  var picX;     //                 breite
  var picY;     //                 höhe
  var picU = "";      //           quelle
  var f_showP = 0;  // flag für ie die showPicture-routine bei fenstergrößenveränderung nicht zu oft zu durchlaufen 0 / 1
  var f_prevC = 1;  // hintergrund weiss

  var koerperM;    //  margin-left
  var koerperX;    //  width
  var koerperY;    //  height

  var bild = new Array();
  bild[0] = new Array();
  bild[1] = new Array();
  bild[2] = new Array();
  bild[3] = new Array();
  bild[4] = new Array();
  bild[5] = new Array();
  bild[6] = new Array();

  window.onresize = showPic_1;

function init()
{
  document.getElementById("i_p_txt").firstChild.data="bilder";
  document.getElementById("i_p_0a_img").src="bild/image-0a_60x15.jpg";
  document.getElementById("i_p_0b_img").src="bild/image-0b_60x15.jpg";
  document.getElementById("i_p_0c_img").src="bild/image-0c_60x15.jpg";
//  document.getElementById("i_p_0d_img").src="bild/image-0d_60x15.jpg";
  document.getElementById("k_index_1").style.display = "block";
  document.getElementById("k_index_2").style.display = "block";
  }

function popUpClose()
{
  if (popUp) popUp.close();
}

function windowSize()
{
  var x,y;
  if (self.innerHeight) // all except Explorer
  {
    x = self.innerWidth;
    y = self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientHeight)
   // Explorer 6 Strict Mode
  {
   x = document.documentElement.clientWidth;
   y = document.documentElement.clientHeight;
  }
  else if (document.body) // other Explorers
  {
   x = document.body.clientWidth;
   y = document.body.clientHeight;
  }
  windowX = x;
  windowY = y;
}

function changeOpacity (a,b,c)
{
  document.getElementById(a).style.opacity = b;
  document.getElementById(a).style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity =" + b * 100 + ")";

  if (a == "hg_bild")   document.getElementById(a).style.display = "none";

}


function changePrevO (id,val)  // preview aktiv
{
  if (val == 0)
  {
    prevVal = 0.3;
    if (f_prevC == 0) prevVal = 0.6;
  }
  if (val == 1) prevVal = 0.9;

  changeOpacity("i_p_0" + id + "_img",prevVal);
}


function setBackgroundColors(id)
{
    if (id == 0) // schwarz
    {
      document.getElementsByTagName("body")[0].style.backgroundColor = "black";
      document.getElementById("box").style.backgroundColor = "black";
      document.getElementById("box").style.borderColor = "#808080";
      document.getElementById("kopf").style.color = "silver";
      document.getElementById("koerper").style.borderColor = "#404040";
      document.getElementById("index").style.color = "silver";
      c = "#606060";
      document.getElementById("i_p_00_img").style.borderColor = c;
      document.getElementById("i_p_01_img").style.borderColor = c;
      document.getElementById("i_p_02_img").style.borderColor = c;
      document.getElementById("i_p_03_img").style.borderColor = c;
      document.getElementById("i_p_04_img").style.borderColor = c;
      document.getElementById("i_p_05_img").style.borderColor = c;
      document.getElementById("i_p_06_img").style.borderColor = c;
      document.getElementById("i_p_0a_img").style.borderColor = c;
      document.getElementById("i_p_0b_img").style.borderColor = c;
      document.getElementById("i_p_0c_img").style.borderColor = c;
      o = 0.6;
      document.getElementById("i_p_00_img").style.opacity = o;
      document.getElementById("i_p_01_img").style.opacity = o;
      document.getElementById("i_p_02_img").style.opacity = o;
      document.getElementById("i_p_03_img").style.opacity = o;
      document.getElementById("i_p_04_img").style.opacity = o;
      document.getElementById("i_p_05_img").style.opacity = o;
      document.getElementById("i_p_06_img").style.opacity = o;
      document.getElementById("i_p_0a_img").style.opacity = o;
      document.getElementById("i_p_0b_img").style.opacity = o;
      document.getElementById("i_p_0c_img").style.opacity = o;
    }

    if (id == 1) // weiss
    {
      document.getElementsByTagName("body")[0].style.backgroundColor = "white";
      document.getElementById("box").style.backgroundColor = "white";
      document.getElementById("box").style.borderColor = "black";
      document.getElementById("kopf").style.color = "black";
      document.getElementById("koerper").style.borderColor = "silver";
      document.getElementById("index").style.color = "black";
      c = "black";
      document.getElementById("i_p_00_img").style.borderColor = c;
      document.getElementById("i_p_01_img").style.borderColor = c;
      document.getElementById("i_p_02_img").style.borderColor = c;
      document.getElementById("i_p_03_img").style.borderColor = c;
      document.getElementById("i_p_04_img").style.borderColor = c;
      document.getElementById("i_p_05_img").style.borderColor = c;
      document.getElementById("i_p_06_img").style.borderColor = c;
      document.getElementById("i_p_0a_img").style.borderColor = c;
      document.getElementById("i_p_0b_img").style.borderColor = c;
      document.getElementById("i_p_0c_img").style.borderColor = c;
      o = 0.3;
      document.getElementById("i_p_00_img").style.opacity = o;
      document.getElementById("i_p_01_img").style.opacity = o;
      document.getElementById("i_p_02_img").style.opacity = o;
      document.getElementById("i_p_03_img").style.opacity = o;
      document.getElementById("i_p_04_img").style.opacity = o;
      document.getElementById("i_p_05_img").style.opacity = o;
      document.getElementById("i_p_06_img").style.opacity = o;
      document.getElementById("i_p_0a_img").style.opacity = o;
      document.getElementById("i_p_0b_img").style.opacity = o;
      document.getElementById("i_p_0c_img").style.opacity = o;
    }

    f_prevC = id;   //0 1 weiss schwarz
}


function showPic_1()
{
  if((picU != "") && (f_showP == 0))
  {
    f_showP = 1;
    active = window.setTimeout("showPicture(picI)",1000);
  }
}

function showPicture (id)
{
  picI = id;

  if (popUp) popUp.close();

  document.getElementById("koerper").style.display = "none";

    if (f_showP == 0)
    {
      document.getElementById("hg_bild").style.display = "none";
    }

    windowSize();

    picU = bild[picI][2];
    picX = bild[picI][3];
    picY = bild[picI][4];

    setBackgroundColors(bild[picI][5]);

    if (picY == 900)
    {
      if (screen.availHeight > 900)
      {
        popUp = window.open(picU,'popUp',"width =" + picX + ",height =" + picY + ", resizable = no, scrollbars = no");
      }
      else
      {
        popUp = window.open(picU,'popUp',"width =" + picX + 25 + ",height =" + picY + ", resizable = no, scrollbars = yes");
      }
      popUp.focus();
    }

    else if((picY == 600) && (windowY < 770) || (picY == 500) && (windowY < 640))
    {
      popUp = window.open(picU,'popUp',"width =" + picX + ",height =" + picY + ", resizable = no, scrollbars = no");
      popUp.focus();
    }
    else                          // originalgröße
    {
      koerperM = - (picX/ 2);
      koerperX = picX;
      koerperY = picY;

      document.getElementById("koerper").style.marginLeft = koerperM;
      document.getElementById("koerper").style.width = koerperX;
      document.getElementById("koerper").style.height = koerperY;

      document.getElementById("koerper").style.display = "block";
      document.getElementById("k_bild").src = picU;
    }
    f_showP = 0;
}

function showPreviews (indexNo)
{
  if (indexNo == 0)
  {
    bild[0][0] = 'bild/monde-2_160x80.jpg';
    bild[0][1] = 'monde 2';
    bild[0][2] = 'monde-2/monde-2.html';
    bild[0][3] = 550;
    bild[0][4] = 500;
    bild[0][5] = 1;

    bild[1][0] = 'bild/mond-1_160x80.jpg';
    bild[1][1] = 'mond 1';
    bild[1][2] = 'mond-1/mond-1.html';
    bild[1][3] = 550;
    bild[1][4] = 500;
    bild[1][5] = 1;

    bild[2][0] = 'bild/skizzen-1_160x80.jpg';
    bild[2][1] = 'skizzen 1';
    bild[2][2] = 'skizzen-1/skizzen-1.html';
    bild[2][3] = 550;
    bild[2][4] = 500;
    bild[2][5] = 1;

    bild[3][0] = 'bild/car-4-1_160x80.jpg';
    bild[3][1] = 'car 4 1';
    bild[3][2] = 'car-4-1/car-4-1.html';
    bild[3][3] = 550;
    bild[3][4] = 500;
    bild[3][5] = 1;

    bild[4][0] = 'bild/paar-1_160x80.jpg';
    bild[4][1] = 'paar 1';
    bild[4][2] = 'paar-1/paar-1.html';
    bild[4][3] = 660;
    bild[4][4] = 600;
    bild[4][5] = 1;

    bild[5][0] = 'bild/paare-2_160x80.jpg';
    bild[5][1] = 'paare 2';
    bild[5][2] = 'paare-2/paare-2.html';
    bild[5][3] = 660;
    bild[5][4] = 600;
    bild[5][5] = 1;

    bild[6][0] = 'bild/flash_160x80.jpg';
    bild[6][1] = 'poor man\'s flash';
    bild[6][2] = 'flash/flash.html';
    bild[6][3] = 990;
    bild[6][4] = 900;
    bild[6][5] = 1;

    bgC = 1;                      // hintergrund weiss
  }

  if (indexNo == 1)
  {
    bild[0][0] = 'bild/snake-2_160x80.jpg';
    bild[0][1] = 'schlange 2';
    bild[0][2] = 'schlange-2/schlange-2.html';
    bild[0][3] = 660;
    bild[0][4] = 600;
    bild[0][5] = 0;

    bild[1][0] = 'bild/snake-3_160x80.jpg';
    bild[1][1] = 'schlange 3';
    bild[1][2] = 'schlange-3/schlange-3.html';
    bild[1][3] = 660;
    bild[1][4] = 600;
    bild[1][5] = 0;

    bild[2][0] = 'bild/kk-ascii_160x80.jpg';
    bild[2][1] = 'kk ascii';
    bild[2][2] = 'kk-ascii/kk-ascii.html';
    bild[2][3] = 550;
    bild[2][4] = 500;
    bild[2][5] = 0;

    bild[3][0] = 'bild/fishmovie_160x80.jpg';
    bild[3][1] = 'fishmovie';
    bild[3][2] = 'fishmovie/fishmovie.html';
    bild[3][3] = 660;
    bild[3][4] = 600;
    bild[3][5] = 0;

    bild[4][0] = 'bild/face_160x80.jpg';
    bild[4][1] = 'face';
    bild[4][2] = 'face/face.html';
    bild[4][3] = 660;
    bild[4][4] = 600;
    bild[4][5] = 0;

    bild[5][0] = 'bild/grosser-schlaf_160x80.jpg';
    bild[5][1] = 'der große schlaf';
    bild[5][2] = 'grosser-schlaf/grosser-schlaf.html';
    bild[5][3] = 660;
    bild[5][4] = 600;
    bild[5][5] = 0;

    bild[6][0] = 'bild/t.gif';
    bild[6][1] = '';
    bild[6][2] = '';
    bild[6][3] = 0;
    bild[6][4] = 0;
    bild[6][5] = 0;

    bgC = 0;                      // hintergrund schwarz
  }

  if (indexNo == 2)
  {
    bild[0][0] = 'bild/schmetterling-1_160x80.jpg';
    bild[0][1] = 'butterfly 1';
    bild[0][2] = 'schmetterling-1/schmetterling-1.html';
    bild[0][3] = 550;
    bild[0][4] = 500;
    bild[0][5] = 1;

    bild[1][0] = 'bild/schmetterling-2_160x80.jpg';
    bild[1][1] = 'butterfly 2';
    bild[1][2] = 'schmetterling-2/schmetterling-2.html';
    bild[1][3] = 660;
    bild[1][4] = 600;
    bild[1][5] = 1;

    bild[2][0] = 'bild/schmetterling-3_160x80.jpg';
    bild[2][1] = 'butterfly 3';
    bild[2][2] = 'schmetterling-3/schmetterling-3.html';
    bild[2][3] = 809;
    bild[2][4] = 500;
    bild[2][5] = 1;

    bild[3][0] = 'bild/baum_160x80.jpg';
    bild[3][1] = 'baum';
    bild[3][2] = 'baum/baum.html';
    bild[3][3] = 550;
    bild[3][4] = 500;
    bild[3][5] = 1;

    bild[4][0] = 'bild/hahn-1_160x80.jpg';
    bild[4][1] = 'hähne';
    bild[4][2] = 'hahn/hahn-1.html';
    bild[4][3] = 660;
    bild[4][4] = 600;
    bild[4][5] = 1;

    bild[5][0] = 'bild/typen-1_160x80.jpg';
    bild[5][1] = 'typen';
    bild[5][2] = 'typen/typen-1.html';
    bild[5][3] = 660;
    bild[5][4] = 600;
    bild[5][5] = 1;

    bild[6][0] = 'bild/ente_160x80.jpg';
    bild[6][1] = 'ente';
    bild[6][2] = 'ente/ente.html';
    bild[6][3] = 660;
    bild[6][4] = 600;
    bild[6][5] = 1;

    bgC = 1 ;                      // hintergrund weiss
  }

  if (indexNo == 3)
  {
    bild[0][0] = 'bild/litfass_160x80.jpg';
    bild[0][1] = 'litfass-säule';
    bild[0][2] = 'schlange-2/schlange-2.html';
    bild[0][3] = 660;
    bild[0][4] = 600;
    bild[0][5] = 0;

    bild[1][0] = 'bild/snake-3_160x80.jpg';
    bild[1][1] = 'schlange 3';
    bild[1][2] = 'schlange-3/schlange-3.html';
    bild[1][3] = 660;
    bild[1][4] = 600;
    bild[1][5] = 0;

    bild[2][0] = 'bild/kk-ascii_160x80.jpg';
    bild[2][1] = 'kk ascii';
    bild[2][2] = 'kk-ascii/kk-ascii.html';
    bild[2][3] = 550;
    bild[2][4] = 500;
    bild[2][5] = 0;

    bild[3][0] = 'bild/fishmovie_160x80.jpg';
    bild[3][1] = 'fishmovie';
    bild[3][2] = 'fishmovie/fishmovie.html';
    bild[3][3] = 660;
    bild[3][4] = 600;
    bild[3][5] = 0;

    bild[4][0] = 'bild/face_160x80.jpg';
    bild[4][1] = 'face';
    bild[4][2] = 'face/face.html';
    bild[4][3] = 660;
    bild[4][4] = 600;
    bild[4][5] = 0;

    bild[5][0] = 'bild/grosser-schlaf_160x80.jpg';
    bild[5][1] = 'der große schlaf';
    bild[5][2] = 'grosser-schlaf/grosser-schlaf.html';
    bild[5][3] = 660;
    bild[5][4] = 600;
    bild[5][5] = 0;

    bild[6][0] = 'bild/t.gif';
    bild[6][1] = '';
    bild[6][2] = '';
    bild[6][3] = 0;
    bild[6][4] = 0;
    bild[6][5] = 0;

    bgC = 0;                      // hintergrund schwarz
  }

  changeOpacity("hg_bild",0,1500); // hintergrundbild aus

  setBackgroundColors(bgC);        // Hintergrund weiss/schwarz

  document.getElementById("i_p_00_img").src = bild[0][0];
  document.getElementById("i_p_00_txt").firstChild.data = bild[0][1];
  document.getElementById("i_p_01_img").src = bild[1][0];
  document.getElementById("i_p_01_txt").firstChild.data = bild[1][1];
  document.getElementById("i_p_02_img").src = bild[2][0];
  document.getElementById("i_p_02_txt").firstChild.data = bild[2][1];
  document.getElementById("i_p_03_img").src = bild[3][0];
  document.getElementById("i_p_03_txt").firstChild.data = bild[3][1];
  document.getElementById("i_p_04_img").src = bild[4][0];
  document.getElementById("i_p_04_txt").firstChild.data = bild[4][1];
  document.getElementById("i_p_05_img").src = bild[5][0];
  document.getElementById("i_p_05_txt").firstChild.data = bild[5][1];
  document.getElementById("i_p_06_img").src = bild[6][0];
  document.getElementById("i_p_06_txt").firstChild.data = bild[6][1];


  document.getElementById("koerper").style.display = "none";
  document.getElementById("index").style.display = "block";
}