// Funktioniert nur mit folgendem Aufruf (siehe Abschnitt Startup):
// http://www.kronauer.info/xxx.htm?id=Jeannette
// Man muss die Variable id im Link mitgeben.
// Das Auswahlmenü ist im Original auf einer separaten Seite
// (hat nichts mit dem Drop down menu zu tun).


var pl = new Array();

function pictanim(files, filesPath, w, h, ttfr, tten, stfr, sten) {
  this.files = files;
  this.filesPath = filesPath;
  this.w = w;
  this.h = h;
  this.ttfr = ttfr;
  this.tten = tten;
  this.stfr = stfr;
  this.sten = sten;
  return this
  }

function langage() {return (document.location.href.indexOf('htmlfr')!=-1) ? 'fr' : 'en'}

function dropMenu() {
  document.write('<form name="choix" action="" method="get" style="margin:0px"><select name="id" onChange="this.form.submit()">');
  for(var i in pl) {
    var selected = i == animID ? ' selected' : '';
    var text = langage() == 'fr' ? pl[i].ttfr : pl[i].tten;
    document.write('<option value="' + i + '"' + selected + '>' + text + '</option>');
    }
  document.write('</select></form>');
  }

// Data animations ========================================================
// Keine Umlaute in den eckigen Klammern!
// Syntax der Werte in den runden Klammern:
// Bildernamen durch Semikolon getrennt, Pfad, Breite, Höhe, Text Drop down menu F, Text Drop down menu EN, Titel F, Titel EN

pl['beat_gt2009'] = new pictanim('beat_gt2009_1.jpg;beat_gt2009_2.jpg;beat_gt2009_3.jpg;beat_gt2009_4.jpg;beat_gt2009_5.jpg', '../images/3D-Flip/', 600, 450, ';beat_gt2009', 'beat_gt2009', '', '');


// Affichage image et map ====================================================

// Startup
// Funktioniert nur mit folgendem Aufruf:
// http://www.kronauer.info/xxx.htm?id=Jeannette
// Bei einem einzelenen Bild, also ohne "Drop down menu", könnte man "var animID = args['id'];"
// ausklammern und das Bild mit "var animID = 'Jeannette';" vorgeben.

var args = getArgs();
var animID = 'beat_gt2009';
// var animID = args['id'];
var files = pl[animID].files.split(';');
var filesPath = pl[animID].filesPath;
var w = pl[animID].w;
var h = pl[animID].h;

// Drop down menu -----------------------------------------------------------
// dropMenu();

// Titre et sous-titre
var tt = pl[animID].ttfr;
var st = pl[animID].stfr;
if(langage() != 'fr') {
   tt = pl[animID].tten;
   st = pl[animID].sten;
   }
//document.write('<b>' + tt + '</b><br>' + st + '<p>');
document.write(st + '<p>');

// Label pour blend
var blendText = (langage() == 'fr') ? 'Avec fondu des images' : 'Blend images';

// Detection navigateur avec DOM
var hasDom = document.getElementById ? true : false;

if(hasDom) {

// Map rollover
var mapOffset = 1;
var mapStep = intPart(w / files.length); // integer part
var mapOffset2 = mapStep;
var mapBlend = intPart(mapStep / 6); // integer part

document.write('<map name="flipmap">\n');
for (var i = 0; i < files.length; i++) {
   mapOffset = mapStep * i;
   mapOffset2 = mapOffset + mapStep - 1;
   if(i > 0) { // blend avec celle du dessous (precedente)
     document.write('<area shape="rect" coords="' + mapOffset + ', 1, ' + (mapOffset+mapBlend) + ', ' + h + '" href="javascript:;" OnMouseOver="blendImage(' + i + ',0.66)">\n');
     }
   else {
     document.write('<area shape="rect" coords="' + mapOffset + ', 1, ' + (mapOffset+mapBlend) + ', ' + h + '" href="javascript:;" OnMouseOver="blendImage(' + i + ',1)">\n');
     }
   // Image principale a 100%
   document.write('<area shape="rect" coords="' + (mapOffset+mapBlend) + ', 1, ' + (mapOffset2-mapBlend) + ', ' + h + '" href="javascript:;" OnMouseOver="blendImage(' + i + ',1)">\n');
   if(i < files.length-1) { // blend avec celle du dessus (suivante)
     document.write('<area shape="rect" coords="' + (mapOffset2-mapBlend) + ', 1, ' + mapOffset2 + ', ' + h + '" href="javascript:;" OnMouseOver="blendImage(' + (i+1) + ',0.33)">\n');
     }
   else {
     document.write('<area shape="rect" coords="' + (mapOffset2-mapBlend) + ', 1, ' + mapOffset2 + ', ' + h + '" href="javascript:;" OnMouseOver="blendImage(' + i + ',1)">\n');
     }
   }
document.write('</map>\n');

// Images
document.write('<div style="position:relative; width:' + w + '; height:' + h + '; overflow:hidden">');
for (var i = 0; i < files.length; i++) {
   document.write('<div id="flipimage' + i + '" style="position: absolute; width:' + w + ';height:' + h + ';top:0;filter:alpha(opacity=100);-moz-opacity:0.99;-khtml-opacity:1;opacity:1">');
   document.write('<img src="' + filesPath + files[i] + '" width=' + w + ' height=' + h + ' usemap="#flipmap" ismap border="0" style="cursor:move" /><br />');
   document.write('</div>');
   }
document.write('</div>');


// Thumbnails (et preloading)
// -----------------------------------------------------------------
// Auf die Thumbnails verzichte ich:
// document.write('<table cellspacing="0" cellpadding="0" border="0"><tr><td>');
// var thumbHeight = 32;
// var thumbWidth = intPart(w * (thumbHeight/h)); // integer part
// var thumbMax = intPart(w / thumbWidth);
// for (var i = 0; i < files.length; i++) {
//    document.write('<img src="' + filesPath + files[i] + '" width="' + thumbWidth + '" height="' + thumbHeight + '">');
//    if((i + 1) % thumbMax == 0) document.write('<br />')
//    }
// document.write('</td><td>&nbsp;</td>');


// Checkbox pour blend
// -----------------------------------------------------------------
if(hasOpacity(document.getElementById('flipimage0'))) {
   // Ohne Blend finde ich den Effekt schöner.
   // Hier blende ich die Auswahl aus:
   // document.write('<td><form name="flipform" id="flipform" style="margin: 0px; padding: 0px"><input type="checkbox" name="blend" id="blend" checked="true" /><label for="blend">' + blendText + '</label></form>');
   // document.write('</td>');
  }
document.write('</tr></table>');

} else {

// Navigateur sans Dom
document.write('Désolé, votre navigateur n\'est pas supporté.<br>IE6 et Mozilla/Firefox');
}

// === Fin script ===

// === Changement d'image ==========================================
function blendImage(imgNum, opacity) {
  if(hasOpacity(document.getElementById('flipimage' + imgNum))) {
  
    // quantise opacité si pas de blend
	// Ohne Blend finde ich den Effekt schöner.
	// Ich habe ihn hier deaktiviert:

//  if(!document.flipform.blend.checked && opacity >= .5) opacity = 1
//  if(!document.flipform.blend.checked && opacity < .5) opacity = 0
    if(opacity >= .5) opacity = 1
    if(opacity < .5) opacity = 0
	
    // ajuste transparences respectives
    for (var i = 0; i < files.length; i++) {
      var imgObj = document.getElementById('flipimage' + i);
      if(imgNum-1 == i) { // image de dessous
        setOpacity(imgObj, 1) // montre image du dessous
        }
      else {
        if(imgNum == i) { // image courante
          setOpacity(imgObj, opacity) // montre image courante
          }
        else { // autres images
          setOpacity(imgObj, 0) // cache autres images
          }
        }
      }
    }
  else { // pas d'opacity: change visibility
    if(opacity < .5) {imgNum--}
    for (var i = 0; i < files.length; i++) {
      if(i != imgNum) document.getElementById('flipimage' + i).style.visibility = 'hidden'  // hide all
      if(i == imgNum) document.getElementById('flipimage' + i).style.visibility = 'visible'  // Show imgNum
      }
    }
  }

// === Functions ====================================================

// Detection propriete opacity ou equivalent
function hasOpacity(imgObj) {
  if(imgObj.filters) if(imgObj.filters.alpha && navigator.appVersion.indexOf('Mac') == -1) return true	// IE pas Mac
  if(imgObj.style.MozOpacity) return true	// Moz/Firefox
  if(imgObj.style.KHTMLOpacity) return true	// Safari<1.2, Konqueror
  if(imgObj.style.opacity) return true		// Safari>1.2, CSS3
  return false
  }

// Change opacité selon propriété disponible
function setOpacity(imgObj, opacity) {
  opacity = (opacity == 1) ? .999 : opacity; // Moz/Firefox opacity 'blink' bug
  if(imgObj.filters) imgObj.filters.alpha.opacity = opacity * 100	// IE
  if(imgObj.style.MozOpacity) imgObj.style.MozOpacity = opacity		// Moz/Firefox
  if(imgObj.style.KHTMLOpacity) imgObj.style.KHTMLOpacity = opacity	// Safari<1.2, Konqueror
  if(imgObj.style.opacity) imgObj.style.opacity = opacity		// Safari>1.2, CSS3
  }

// Gestion des arguments - search
function getArgs() {
  var args = new Array()
  var s = document.location.search;
  if(s.length) {
    var al = s.split('&');
    al[0] = al[0].substring(1, al[0].length);
    for (var i=0; i<al.length; i++) {
	var a = al[i].split('=');
        args[a[0]] = a[1];
      }
    }
  return args
  }

// integer part
function intPart(num) {return ('' + num).split('.')[0] * 1}