// Datei pictshow.js
// v2.0 Überarbeitung (c) Mai 2005 Michael Ziemke, Koeln
// v3.0 Überarbeitung (c) Dezember 2009 Michael Ziemke, Koeln
//      Stepper auch in ButtonForm, auch unten; Bilder vorladen, DiaShow

////////////////////////////////////////////////
// dmx slidershow by robert engelhardt © 2003 //
//              womstar@uni.de                //
//       vermerk bitte stehn lassen!          //
////////////////////////////////////////////////
//               Überarbeitung:               //
//     (c) Mai 2005 Michael Ziemke, Koeln     //
//  Neu seit Dez. 2009: Vorladen der Bilder   //
////////////////////////////////////////////////


var aktuell   = 0;
var allePos   = new Array();
var thePos    = dimx = Dimx =0, time;
var bildverz  = 'images/';   // z. B. 'images/';   // ggf. anpassen
var stepPos   = 0;   // Position der Stepper (Erster/Voriger/Nächster/Letzter):
                             // 0 = unterhalb  1 = links  2 = rechts  der Bilder
var stepStyle = 2;  // 0 = default  1 = [Link]  2 = Button
var offset    = 0;

/****************************************************/
/* Die Bilder sollten alle die gleiche Größe haben  */
/* Es können Portrait und Landscape gemischt werden */
/****************************************************/

  var einoffset = 600 - 450/4*3;
      // Einzel-Offset vor Portrait-Bild; z.B. 210 bei BxH 270x360 statt 480x360)
    /*
    // Angabe für einzelne Bilder:
    var bilder = new Array("bild1.gif","bild2.gif");
    */

  // Angabe für durchnummerierte Bilder:
  // Array alleBilder muss zuvor gebildet worden sein!
  // var bilder = alleBilder;
  var bilder = new Array();

  // Flag-Array für Formate aller Bilder: 0=landscape 1=portrait
  // Array alleFlags muss zuvor gebildet worden sein!
  // var port_land = alleFlags;
  var port_land = new Array();
  var srollVarianten = 1;
  // SlideShow-Parameter:
  // Duration of image (in milliseconds)
  var showSpeed = 5000;
  // var showStarted = new Boolean(false);  // funktioniert nicht!
  var showStarted = false;
  var showHandle = -999;  // timeout-Handle für SlideShow


  // statt Standardwerten nun ggf. zuvor definierte Werte übernehmen:
  if (typeof(stepperStyle) == 'number') stepStyle=stepperStyle;
  if (typeof(stepperPos) == 'number') stepPos=stepperPos;
  if (typeof(bildVerzeichnis) == 'string') bildverz=bildVerzeichnis;
  if (typeof(rahmenBreite) == 'number' && typeof(rahmenHoehe) == 'number')
    einoffset = rahmenBreite - rahmenHoehe/4*3;
  if (typeof(alleBilder) == 'object') bilder=alleBilder;
  // if (typeof(alleBilder) != 'object') alert ('typeof(alleBilder)='+typeof(alleBilder));
  if (typeof(alleFlags) == 'object') port_land=alleFlags;
  if (typeof(scrolling) == 'number') srollVarianten=scrolling;
  if (typeof(mitSteps) != 'boolean') mitSteps = new Boolean(false);
  if (!mitSteps || typeof(QuickSteps) != 'object') QuickSteps = new Array();

  // weitere Konstanten:
  rahmenRand    = 2;
  rahmenStil    = "solid";
  rahmenFarbe   = "000000";
  rahmenHintergrundFarbe  = "999999";
  schriftArt    = "verdana";
  schriftFarbe    = "000000";
  schriftGroesse    = 1;
  trennZeichen    = " "; //  bisher "-"    // trennzeichen zwischen den links
  // srollVarianten    = scrolling;    // 0 = von unten nach oben, 1 = von rechts nach links
  // Variable scrolling zuvor individuell initialisieren!

function loadImages() {
  //alert ('Beginn preLoad()');
  for (i = 0; i < bilder.length; i++)
   {
    imgnr = 'img' + i.toString();
    // document.getElementById('bildnr').innerHTML = (i+1).toString();
    // bilder[i] = new Image();
    // bilder[i].src = alleBilder[i];
    document.getElementById(imgnr).src = bildverz + bilder[i];
   }
  //alert ('Ende preLoad()');
 }

function showSteppers(art) {
  stepperA = Array (
   Array('e','Erstes','Zum ersten Bild zurück'),
   Array('v','Voriges','Zum vorigen Bild zurück'),
   Array('n','Nächstes','Zum nächsten Bild vor'),
   Array('l','Letztes','Zum letzten Bild vor'),
   Array('d','DiaShow','Automatische DiaShow an-/abschalten')
  );
  // Darstellung der Stepper Erster / Voriger / Nächster / Letzter
  // unterhalb (stepPos==0), links (1) oder rechts (2) oder oberhalb (3):
  separator = '<br>';
  if (stepPos == 0 || stepPos == 3) separator = '&nbsp;';
  stepperpre  = '[<a href="javascript:showPict(\'XXX\');" title="ZZZ">YYY';
  stepperpost = '</a>]';
  if (art == 2) {
    // Buttons:
    stepperpre  = '<input type="button" style="width:50px; font-size:7pt;" value="YYY" title="ZZZ" onclick="showPict(\'XXX\');">';
    stepperpost = '';
   }
  stepperS = '';
  for (i=0 ; i<5 ; i++) {
    step = stepperpre.replace(/XXX/g, stepperA[i][0]);
    step = step.replace(/YYY/g, stepperA[i][1]);
    step = step.replace(/ZZZ/g, stepperA[i][2]);
    stepperS += step + stepperpost + separator;
    // '[<a href="javascript:showPict(\'' + stepperA[i][0] + '\');">'
   }
  document.getElementById('steppers').innerHTML = stepperS;
 }

function showPict (art) {
  switch (art) {
  case 'e':
    aktuell = 0;
    getPos(allePos[aktuell]);
    break;
  case 'v':
    if (aktuell>0) aktuell -= 1;
    getPos(allePos[aktuell]);
    break;
  case 'n':
    if (aktuell<bilder.length-1) {
      aktuell += 1;
     } else {
      if (showStarted) {
        alert ('Das letzte Bild ist erreicht.\nDie automatische DiaShow wird abgeschaltet.');
        clearInterval(showHandle);
        showStarted = false;
       }
     }
    getPos(allePos[aktuell]);
    break
  case 'l':
    aktuell = bilder.length-1;
    getPos(allePos[aktuell]);
    break;
  case 'd':
    // An- oder Abschalten der SlideShow:
    showStarted = !(showStarted);
    if (!showStarted) {
      alert ('Automatische DiaShow wurde abgeschaltet.');
      clearInterval(showHandle);
     } else {
      alert ('Automatische DiaShow wird gestartet.');
      showHandle = setInterval("showPict('n')", showSpeed);
     }
    break;
  default:
    if (!isNaN(art))
      {
        aktuell = art;
        getPos(allePos[aktuell]);
      }
    else
      alert ('Fehlerhafter Parameter: ' + art + '\nerlaubt: e , v , n , l');
    break;
  }  // von switch
  document.getElementById("bildnr").innerHTML = (aktuell+1).toString();
  document.getElementById("bildanz").innerHTML = bilder.length.toString();
}

function getPos(pos)
{
  thePos  = pos-(pos*2)+18;
  browser = navigator.appName;
  usAgent = navigator.userAgent;

  if (browser == "Microsoft Internet Explorer" || usAgent.indexOf("Opera") >-1)
     clearTimeout(time);

  dmx();
}

function dmx()
{
  time  = setTimeout("dmx()",0);

  dimx  = Math.round(Dimx+=((thePos)-Dimx)*4/20);
  if (document.getElementById)
  {
    (srollVarianten==0) ?
    document.getElementById("jumper").style.top  = dimx :
    document.getElementById("jumper").style.left = dimx;
  }
  else if (document.all)
  {
    (srollVarianten==0) ?
    document.all["jumper"].style.top  = dimx :
    document.all["jumper"].style.left = dimx;
  }

  if (thePos == dimx) clearTimeout(time);
}


//////////////////////////////
// BEGINN DES BODY-AUFBAUS:
//////////////////////////////

document.write (
          '<table style="width:100%; padding:3px; border-style:none;">'
 + '\n' + '  <tr>'
 );

 // Stepper soll oben dargestellt werden:
  if (stepPos == 3)
     document.write (
       '    <tr><td colspan="3" style="text-align:center;">'
      + '<span id="steppers"></span>'
      + '</tr>'
     );

 // Stepper soll rechts dargestellt werden:
  if (stepPos == 2)
     document.write (
       '    <td style="text-align:left;vertical-align:middle;width:50px; margin-left:5px;">'
     );
// Stepper links darstellen:
 if (stepPos == 1)
     document.write (
       '    <td style="text-align:right;vertical-align:middle;width:50px;margin-right:5px;">'
     + '<span id="steppers"></span>'
     + '    </td>'
     );
  document.write(
    '    <td class="body2">'
 );

  document.write("<center>"
  +"<div id='rahmen' style='width:"
  +(rahmenBreite+40)+"; height:"
  +(rahmenHoehe+40)+"; border:"
  +rahmenRand+"px "
  +rahmenStil+" #"
  +rahmenFarbe+"; background-color:#"
  +rahmenHintergrundFarbe+";overflow:hidden'>");

  (srollVarianten==0) ?
  document.write("<div id='jumper' style='position:relative;top:18;left:0'>") :
  document.write("<div id='jumper' style='position:relative;left:18;top:18'>");

  (srollVarianten==0) ?
  document.write("<table width="
  +rahmenBreite+" cellspacing=0 cellpadding=0>") :
  document.write("<table height="
  +rahmenHoehe+" cellspacing=0 cellpadding=0>");

for (i=0;i<bilder.length;i++)
{
  (srollVarianten==0) ?
  document.write("<tr><td width="
  +rahmenBreite+" height="
  +rahmenHoehe+">") :
  document.write("<td width="
  +rahmenBreite+" height="
  +rahmenHoehe+">");

  (srollVarianten==0) ?
  document.write("<img id='img" + i.toString() + "' src=''></td></tr>"
  +"<tr><td height=25></td></tr>") :
  document.write("<img id='img" + i.toString() + "' src=''></td>"
  +"<td><div style='width:25'></div></td>");
}

 document.write("</table></div></div>");
 if (bilder.length == 0) {
   document.write (
     '<p style="color:red; font-weight:bold;">'
   + 'Die Bilddateinamen wurden nicht ordnungsgemäß übergeben.'
   + '</p>'
    );
  } else {
   document.write (
     '<p>'
   + '  Bild <span id="bildnr">1</span> von <span id="bildanz">' + bilder.length.toString() + '</span> Bildern'
   + '&nbsp;&nbsp;<span id="steppers"></span>'
   + '</p>'
    );
  }

 if (QuickSteps.length > 0)
   for (i = 0; i < QuickSteps.length; i++)
     {
      // posY = QuickSteps[i][1];
      StepNr = QuickSteps[i][1];
      StepText = QuickSteps[i][0];
      //  "<a href='javascript:getPos(" + posY + ")' onfocus='this.blur()' "
      document.write(
        "<a href='javascript:showPict(" + StepNr + ")' onfocus='this.blur()' "
        + "style='text-decoration:none'><font size=" + schriftGroesse
        + " color=" + schriftFarbe+" face=" + schriftArt + ">["+StepText+"]</font></a>"
        + "<font style='cursor:default'> " + trennZeichen+" </font>"
      );
     }

 for (i = 0; i < bilder.length; i++)
   {
    offset += port_land[i]*einoffset/2;
    if (i == bilder.length-1) trennZeichen = "";
    (srollVarianten==0) ? (i == 0) ? posY = 0 :
      posY = (rahmenHoehe*i)+(25*i) :
      (i == 0) ? posY = 0 - offset :
      posY = (rahmenBreite*i)+(25*i) - offset;
    allePos[allePos.length] = posY;

    if (QuickSteps.length == 0 && mitSteps == true)
          // Einzelbilder-Links (abgeschaltet)
          //  "<a href='javascript:getPos(" + posY + ")' onfocus='this.blur()' "
          document.write(
            "<a href='javascript:showPict(" + i + ")' onfocus='this.blur()' "
            + "style='text-decoration:none'><font size=" + schriftGroesse
            + " color=" + schriftFarbe+" face=" + schriftArt + ">["+(i+1)+"]</font></a>"
            + "<font style='cursor:default'> " + trennZeichen+" </font>"
          );
     offset += port_land[i]*einoffset/2;
    }

 document.write("</center>");

  document.write (
          '    </td>');

 /*
 if (window.statusbar && window.statusbar.visible == true) {
    alert ('DEBUG 2006-10-04 durch WebMaster\n\nStatuszeile ist sichtbar!\nDerzeit dort angezeigt: '+window.status);
  }
 */

 // Darstellung der Stepper Erster / Voriger / Nächster / Letzter
 // unterhalb (stepPos==0), links (1) oder rechts (2):
 switch (stepPos) {
   case 0:
     document.write (
       '  </tr>'
     );
     break;
   case 1:
     // Stepper wurde links dargestellt:
     document.write (
       '    <td style="text-align:left;vertical-align:middle;width:50px;">'
       );
     break;
   case 2:
     document.write (
       '    <td style="text-align:left;vertical-align:middle;width:50px;">'
     + '<span id="steppers"></span>'
     + '\n' + '    </td>'
     + '\n' + '  </tr>'
     );
     break;
   default:
   break;
   }
 document.write (' </table>');

document.write ('<hr>Bilderanzeige mit dem Programm <a href="http://www.ziemke-koeln.de/download/index.htm#pictshow" target="_blank">PictShow</a> v3.0 &copy; 2005 M. Ziemke, K&ouml;ln');

loadImages();
showSteppers(stepStyle);
// document.getElementById('bildnr').innerHTML = '1';
// Hinweis einblenden:
// alert ('HINWEIS:\nWeitere Bilder bitte erst aufrufen,\nwenn alle Bilder vorgeladen sind,\ndie Statuszeile also die Meldung "Fertig" zeigt.');