var INTERVAL = 3000;
var TIMESTEP = 15; //milliseconds
var animatewindow = true;

var slides = [{s:"inc/images/cci2.jpg", t:"CCI Torrevieja - Aktuelle Termine", l:"termine/aktuell/aktuell.html"},
              {s:"inc/images/cci3.jpg", t:"CCI Torrevieja - Informationen rund um den Computer", l:"service/infos.html"},
              {s:"inc/images/cci4.jpg", t:"CCI Torrevieja - Vortr\u00e4ge, Kurse und Workshops", l:"termine/was_wann_wer/2011_vor.html"},
              {s:"inc/images/cci5.jpg", t:"CCI Torrevieja - Galerien: Feiern und Ausfl\u00fcge", l:"foto/feste/feste.html"},
              {s:"inc/images/cci6.jpg", t:"CCI Torrevieja - Vortr\u00e4ge und Downloads", l:"termine/was_wann_wer/was_wann_wer.html"},
              {s:"inc/images/cci7.jpg", t:"CCI Torrevieja - Einsteigerkurse und Workshops", l:"termine/kurse/kurse.html"},
              {s:"inc/images/cci8.jpg", t:"CCI Torrevieja - Fotowettbewerb", l:"foto/fotowet/fotowet.html"},
              {s:"inc/images/cci9.jpg", t:"CCI Torrevieja - Fragen zu PC, Notebook und Netbook", l:"service/infos.html"},
              {s:"inc/images/cci10.jpg", t:"CCI Torrevieja - Fragen zu Hard- und Software", l:"service/index.html"},
              {s:"inc/images/cci11.jpg", t:"CCI Torrevieja - Fotografie", l:"foto/index.html"},
              {s:"inc/images/cci.jpg", t:"CCI Torrevieja", l:"club/club.html"},
              {s:"inc/images/cci.jpg", t:"CCI Torrevieja Lageplan", l:"club/lageplan.html"},
              {s:"foto/feste/fotowanderung_2011/t_cci_fotowanderung_rojales_061.jpg", t:"CCI Fotowanderung 2011 Rojales", l:"foto/feste/fotowanderung_2011/page7.htm"},
              {s:"foto/feste/fotowanderung_2011/t_cci_fotowanderung_rojales_051.jpg", t:"CCI Fotowanderung 2011 Rojales", l:"foto/feste/fotowanderung_2011/page6.htm"},
              {s:"foto/feste/fotowanderung_2011/t_cci_fotowanderung_rojales_img_0186.jpg", t:"CCI Fotowanderung 2011 Rojales", l:"foto/feste/fotowanderung_2011/page16.htm"},
              {s:"foto/feste/fotowanderung_2011/t_cci_fotowanderung_rojales_k800_016.jpg", t:"CCI Fotowanderung 2011 Rojales", l:"foto/feste/fotowanderung_2011/page17.htm"},
              {s:"foto/feste/feste_2011jf/t_004r0010372.jpg", t:"CCI Jahresfeier 2011", l:"foto/feste/feste_2011jf/page1.htm"},
              {s:"foto/feste/feste_2011jf/t_013jf_2011_11.jpg", t:"CCI Jahresfeier 2011", l:"foto/feste/feste_2011jf/page4.htm"},
              {s:"foto/feste/feste_2011jf/t_005img_1656.jpg", t:"CCI Jahresfeier 2011", l:"foto/feste/feste_2011jf/page2.htm"},
              {s:"foto/feste/feste_2011jf/t_093jf_2011_76.jpg", t:"CCI Jahresfeier 2011", l:"foto/feste/feste_2011jf/page12.htm"}
             ]


// {i:id-in, o:id-out ;what:const}
var Anims = [];


function step() {
  if (Anims.length <= 0) return;

  for (var i=0; i<Anims.length; i++) {
    var imgi = document.getElementById(Anims[i].i);
    if (Anims[i].o != -1)
      var imgo = document.getElementById(Anims[i].o);
    else {
      var imgo = -1;
      //Anims[i].what = "fadein";
    }
    
    if (!imgi) {
      Anims[i].what = -1;
      continue;
    }
    
    switch (Anims[i].what) {
      case "fadeout": 
        if (parseFloat(imgo.style.opacity) >= 1) {
          imgo.style.zIndex = 101;
          imgo.style.opacity = 0.99;
          imgi.style.zIndex = 100;    
          imgi.style.opacity = 1;
          imgi.style.display = "block";     
        } else if (parseFloat(imgo.style.opacity) <= 0) { 
          imgo.style.display = "none";
          imgo.style.opacity = 1;
          imgi.style.zIndex = 101;
          Anims[i].what = -1;
        } else {
          imgo.style.opacity = parseFloat(imgo.style.opacity) - 0.01;    
        }
        break;
      case "fadein": 
        if (imgi.style.display != "block") {
          imgi.style.opacity = 0;
          imgi.style.zIndex = 101;
          imgi.style.display = "block";
          if (imgo != -1) imgo.style.zIndex = 100;
        } else if (parseFloat(imgi.style.opacity) >= 1) { 
          if (imgo != -1) imgo.style.display = "none";
          Anims[i].what = -1;
        } else {
          imgi.style.opacity = parseFloat(imgi.style.opacity) + 0.01;    
        }
        break;
      case "shrink": 
        if (!imgo.style.width || parseInt(imgo.style.width) >= 200) {
          imgo.style.width = "198px";
          imgo.style.zIndex = 101;
          imgi.style.zIndex = 100;
          imgi.style.display = "block";
        } else if (parseInt(imgo.style.width) <= 4) { 
          imgi.style.zIndex = 101;
          imgo.style.display = "none";
          imgo.style.width = "200px";
          Anims[i].what = -1;
        } else {
          imgo.style.width = (parseInt(imgo.style.width) - 4) + "px";    
        }
        break;
      case "grow": 
        if (imgi.style.display != "block") {
          imgo.style.zIndex = 100;
          imgi.style.width = "0px";
          imgi.style.zIndex = 101;
          imgi.style.display = "block";       
        } else if (parseInt(imgi.style.width) >= 200) { 
          imgi.style.width = "200px";
          imgo.style.display = "none";
          Anims[i].what = -1;
        } else {
          imgi.style.width = (parseInt(imgi.style.width) + 4) + "px";    
        }
        break;
      case "fall": 
        if (imgi.style.display != "block") {
          Anims[i].h = parseInt(imgi.style.height);
          imgo.style.zIndex = 100;
          imgi.style.height = "0px";
          imgi.style.zIndex = 101;
          imgi.style.display = "block";       
        } else if (parseInt(imgi.style.height) >= Anims[i].h || parseInt(imgi.style.height) > 290) { 
          imgi.style.height = Anims[i].h + "px";
          imgo.style.display = "none";
          Anims[i].what = -1;
        } else {
          imgi.style.height = (parseInt(imgi.style.height) + 3) + "px";    
        }
        break;
      case "rise": 
        if (!Anims[i].h) {
          Anims[i].h = parseInt(imgo.style.height);
          imgo.style.height = (Anims[i].h-1) + "px";
          imgo.style.zIndex = 101;
          imgi.style.zIndex = 100;
          imgi.style.display = "block";
        } else if (parseInt(imgo.style.height) <= 4) { 
          imgi.style.zIndex = 101;
          imgo.style.display = "none";
          imgo.style.height = Anims[i].h + "px";
          Anims[i].what = -1;
        } else {
          imgo.style.height = (parseInt(imgo.style.height) - 3) + "px";    
        }
        break;
      case "explode": 
        if (imgi.style.display != "block") {
          imgo.style.zIndex = 100;
          Anims[i].h = parseInt(imgi.style.height);
          Anims[i].t = parseInt(imgi.style.top);
          Anims[i].l = parseInt(imgi.style.left);
          imgi.style.height = "0px";
          imgi.style.width = "0px";
          imgi.style.top = (Anims[i].t + 100) + "px";
          imgi.style.left = (Anims[i].l + 100) + "px";
          imgi.style.zIndex = 101;
          imgi.style.display = "block";       
        } else if (parseInt(imgi.style.width) >= 200) { 
          imgi.style.width = "200px";
          imgi.style.height = Anims[i].h + "px";
          imgi.style.top = Anims[i].t + "px";
          imgi.style.left = Anims[i].l + "px";
          imgo.style.display = "none";
          Anims[i].what = -1;
        } else {
          imgi.style.width = (parseInt(imgi.style.width) + 4) + "px";    
          imgi.style.height = (parseInt(imgi.style.height) + 3) + "px";    
          imgi.style.top = (parseInt(imgi.style.top) - 2) + "px";    
          imgi.style.left = (parseInt(imgi.style.left) - 2) + "px";    
        }
        break;
      case "implode": 
        if (!imgo.style.width || parseInt(imgo.style.width) >= 200) {
          Anims[i].h = parseInt(imgo.style.height);
          Anims[i].t = parseInt(imgo.style.top);
          Anims[i].l = parseInt(imgo.style.left);
          imgo.style.width = "196px";
          imgo.style.height = (Anims[i].h-3) + "px";
          imgo.style.top = (Anims[i].t + 2) + "px";
          imgo.style.left = (Anims[i].l + 2) + "px";
          imgo.style.zIndex = 101;
          imgi.style.zIndex = 100;
          imgi.style.display = "block";
        } else if (parseInt(imgo.style.width) <= 4 || parseInt(imgo.style.height) <= 3) { 
          imgi.style.zIndex = 101;
          imgo.style.display = "none";
          imgo.style.width = "200px";
          imgo.style.height = Anims[i].h + "px";
          imgo.style.top = Anims[i].t + "px";
          imgo.style.left = Anims[i].l + "px";
          Anims[i].what = -1;
        } else {
          imgo.style.width = (parseInt(imgo.style.width) - 4) + "px";    
          imgo.style.height = (parseInt(imgo.style.height) - 3) + "px";    
          imgo.style.top = (parseInt(imgo.style.top) + 2) + "px";    
          imgo.style.left = (parseInt(imgo.style.left) + 2) + "px";    
        }
        break;
      case "enlarge": 
        if (hasAnim(Anims[i].id)) break;
        if (Anims[i].when > 0) {
          Anims[i].when--;
        } else if (imgi.style.display != "block") {
          var lnk = document.getElementById("lnkbig");
          if (parseInt(imgi.style.top) >= 200) {
            Anims[i].dy = -1;
            lnk.style.top = (parseInt(lnk.style.top) - 151) + "px";
          } else Anims[i].dy = 1;
          if (parseInt(imgi.style.left) >= 300) {
            Anims[i].dx = -1;
            lnk.style.left = (parseInt(lnk.style.left) - 201) + "px";
          } else Anims[i].dx = 1;
          imgi.style.display = "block";
          lnk.style.display = "block";
        } else if (parseInt(imgi.style.width) >= 400) { 
          Anims[i].what = -1;
          imgi.style.width = "400px";
          //imgi.style.height = "300px";
          if (Anims[i].dy == -1) imgi.style.top = "151px";
          if (Anims[i].dx == -1) imgi.style.left = "201px";
          Anims.push({i:"imgbig", o:-1, what:"vanish", when:1000, dx: Anims[i].dx, dy: Anims[i].dy, id: Anims[i].id});          
        } else {
          if (Anims[i].dy == -1) 
            imgi.style.top = (parseInt(imgi.style.top) - 3) + "px";    
          imgi.style.height = (parseInt(imgi.style.height) + 3) + "px";    
          if (Anims[i].dx == -1) 
            imgi.style.left = (parseInt(imgi.style.left) - 4) + "px";    
          imgi.style.width = (parseInt(imgi.style.width) + 4) + "px";    
        }
        break;
      case "vanish": 
        if (Anims[i].when > 0) {
          Anims[i].when--;
        } else if ((isVisible(Anims[i].id) && parseInt(imgi.style.width) <= 200) || parseInt(imgi.style.width) <= 4 || parseInt(imgi.style.height) <= 3) { 
          imgi.style.zIndex = 10;
          imgi.style.display = "none";
          document.getElementById("lnkbig").style.display = "none";
          Gal.blocks = [];
          Anims[i].what = -1;
        } else {
          if (Anims[i].dy == -1) 
            imgi.style.top = (parseInt(imgi.style.top) + 3) + "px"; 
          if (parseInt(imgi.style.height) > 300)
            imgi.style.height = (parseInt(imgi.style.height) - 4) + "px";    
          else
            imgi.style.height = (parseInt(imgi.style.height) - 3) + "px";    
          if (Anims[i].dx == -1) 
            imgi.style.left = (parseInt(imgi.style.left) + 4) + "px";    
          imgi.style.width = (parseInt(imgi.style.width) - 4) + "px";    
        }
        break;
      
      default: break;
    }
    
  }
  
  
  var i = 0;
  while (i<Anims.length) {
    if (Anims[i].what == -1)  Anims.splice(i,1);
    else i++;
  }
  
  if (Anims.length > 0) setTimeout(step, TIMESTEP);    
  
}

function hasAnim(id) {
  for (var i=0; i<Anims.length; i++)
    if (Anims[i].i == id && Anims[i].what != "enlarge") return true;
  return false;
}

function isVisible(id) {
  if (document.getElementById(id).style.display == "block") return true;
  return false;
}


function galImage(simg, i) {
  var IMGHEIGHT = 150;
  this.img = document.createElement("img");
  this.img.src = simg.src;
  this.img.style.position = "absolute";
  this.img.style.zIndex = 101;
  this.img.style.opacity = 1;
  this.img.style.maxWidth = "none";
  this.img.style.width = "200px";
  if (simg.width/simg.height < 1.3) 
    this.img.style.height = (150 + (simg.height-150)/simg.width * 140) + "px";
  else
    this.img.style.height = "150px";
  this.img.style.overflow = "hidden";
  this.img.style.clip = "rect(0, 200px, 150px, 0)";
  this.img.style.display = "none";
  this.img.id = "bild" + i;
  this.img.name = "bild" + i;
  this.rel = parseInt(this.img.height)/150;
  if (this.img.src.search(/kalender/) != -1) 
    this.fldr = this.img.src.replace(/(.*\/).*/, "$1") + "page1.htm";
  else
    for (var j=0; j<slides.length; j++) {
      if (this.img.src.search(slides[j].s) != -1) this.fldr = slides[j].l;
    }
  
  
  this.setPos = function(n) {
    this.img.style.top = (Math.floor(n / 3) * 151) + "px";
    this.img.style.left = (Math.floor(n % 3) * 201) + "px";
  }

  this.copyPos = function(img) {
    this.img.style.left = img.style.left;
    this.img.style.top = img.style.top;
  }
    
  this.setLnk = function(lnk) {
    lnk.title = this.title;
    lnk.href = this.fldr;
  }
    
  this.getID = function() {
    return this.img.id;
  }
  
  this.getTitle = function() {
    if (this.img.src.search(/kalender/) != -1) {
      var month = ["Januar", "Februar", "M\u00e4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
      var path = this.img.src;
      path = path.replace(/.*\//, "");
      path = path.replace(/t_/, "");
      var yr = "20" + path.substring(0,2);
      var mn = path.substring(2,4);
      var ps = path.substring(5,6);
      ps = (4 - parseInt(ps)) + ". Platz "
      mn = mn.replace(/^0/, "");
      //var dt = new Date(yr, mn, 1);
      return ps + month[parseInt(mn)-1] + " " + yr;
    } else {
      for (var j=0; j<slides.length; j++) {
        if (this.img.src.search(slides[j].s) != -1) return slides[j].t;
      }
    }
  }
  
  this.getWidth = function() {
    return this.img.width/this.img.height * IMGHEIGHT;
  }  
  
  this.title = this.getTitle();
   
}


//Galerie-Objekt
function Gallery() {
  this.ani = ["fadein", "fadeout", "fadein", "fadeout", "grow", "shrink", "fall", "rise", "explode", "implode"];
  this.folder = "foto/fotowet/";
  this.canvas;
  this.current = -1;  
  this.prose = 0;
  this.imgs = [];
  this.blocks = [];
  var im = [];
  

  this.init = function() {
    this.loadGallery();
    this.load();
  }


  //Bilderliste generieren
  this.getNames = function() {
    var images = [];
    var curcal = null;

    for (var i=0; i<slides.length; i++) 
      images[i] = slides[i].s;

    var i0 = images.length;

    var dt = new Date();
    var yr = dt.getFullYear();
    var mn = dt.getMonth()+1;

    var curmn = mn;
    var curyr = yr-1;
    
    var curfldr = this.folder;
    
    for (var i=0; i<12; i++) {
      if (curmn < 9 && curyr < yr) curcal = yr;
      else curcal = yr + 1;
      curfldr = this.folder + curcal.toString() + "_kalender/t_";
      images[i0+i*3] = curfldr + curyr.toString().substring(2) + pad(curmn) + "01.jpg";
      images[i0+i*3+1] = curfldr + curyr.toString().substring(2) + pad(curmn) + "02.jpg";
      images[i0+i*3+2] = curfldr + curyr.toString().substring(2) + pad(curmn) + "03.jpg";
      curmn++;
      if (curyr == yr && curmn == mn) break;
      if (curmn > 12) {
        curmn = 1;
        curyr++;
      }
    }
    this.folder = curfldr.replace(/(.*\/).*/, "$1");
    //add. images feste, titel
    
    return images;
  }

  //------------------------------------------------
  //Galerieelemente laden
  this.loadGallery = function() {
    this.canvas = document.getElementById("scrn");
 
    for (var i=0; i<9; i++) 
      this.canvas.appendChild(this.createLnk(i));
    
    this.canvas.appendChild(this.createDiv());
    
    this.createbig(this.canvas);
    
    window.onfocus = function() { animatewindow = true; };
    window.onblur = function() { animatewindow = false; };
    
    //window.onfocus = purgeImage;
    window.setInterval(animImage, INTERVAL);    
  }
 
 
  //------------------------------------------------
  //a-Element erzeugen
  this.createLnk = function(n) {
    var dt = new Date();
    var yr = parseInt(dt.getFullYear()) + 1;

    var lnk = document.createElement("a");
    lnk.href = this.folder + yr + "_kalender/page1.htm";
    lnk.style.position = "absolute";
    lnk.style.width = "198px";
    lnk.style.height = "148px";
    lnk.style.top = (Math.floor(n / 3) * 150) + "px";
    lnk.style.left = (Math.floor(n % 3) * 200) + "px";
    lnk.style.zIndex = 200;
    lnk.style.backgroundColor = "transparent";    
    lnk.className = "lnk";
    lnk.id= "lnk"+n;    
    return lnk;
    
  }
  
  
  this.createbig = function(cnv) {
    var lnk = document.createElement("a");
    lnk.style.position = "absolute";
    lnk.style.width = "398px";
    lnk.style.height = "298px";
    lnk.style.top = "0px";;
    lnk.style.left = "0px";
    lnk.style.zIndex = 202;
    lnk.style.backgroundColor = "transparent";    
    lnk.className = "lnk";
    lnk.id= "lnkbig";    
    lnk.style.display = "none";
    
    cnv.appendChild(lnk);

    var img = document.createElement("img");
    img.style.position = "absolute";
    img.style.width = "198px";
    img.style.height = "148px";
    img.style.top = "0px";;
    img.style.left = "0px";
    img.style.zIndex = 10;
    img.id= "imgbig";    
    img.style.overflow = "hidden";
    img.style.clip = "rect(0, 402px, 302px, 0)";
    img.style.display = "none";

    cnv.appendChild(img);
  }
  
  
  //------------------------------------------------
  //a-Element eines Bildes finden
  this.findLnk = function(img) {
    var i = this.findIndex(img);
    return document.getElementById("lnk"+i);    
  }


  //------------------------------------------------
  this.findIndex = function(img) {
    var top = getMin(parseInt(img.style.top), 151)/151;
    var left = getMin(parseInt(img.style.left), 201)/201;
    var i = (top * 3) + left;
    
    return i;
  }

  //------------------------------------------------
  //Unteres Textlement erzeugen
  this.createDiv = function(n) {
    var div = document.createElement("div");
  
    div.style.position = "absolute";
    div.style.width = "100%";
    div.style.height = "18px";
    div.style.top = "454px";
    div.style.left = "0px";
    div.style.zIndex = 199;
    div.style.backgroundColor = "#fff";
    div.style.borderBottomRightRadius = "10px";
    div.style.borderBottomLeftRadius = "10px";
    div.style.font = "14px/1.0 Arial, sans-serif"; 
    //div.style.fontWeight = "bold"; 
    div.style.padding = "6px 0";
    div.innerHTML = "Gewinner unseres monatlichen <a href='foto/fotowet/fotowet.html'><b>Fotowettbewerbs</b></a> und Bilder der j&auml;hrlichen <a href='foto/feste/feste.html'><b>Clubaktivit&auml;ten</b></a>";
    
    return div;
  }
  
  //------------------------------------------------
  //preload routine
  this.load  = function() {
    var images = this.getNames();
    for (var i=images.length-1; i>=0; i--) {
      im[i] = new Image(); 
      im[i].onerror = imgerror;
      im[i].onload = imgload;
      im[i].src = images[i];
    } 
  }

  this.loadbig  = function(s) {
    var i = im.length;
    im[i] = new Image();
    im[i].onload = imgloadbig;
    im[i].src = s;
  }
 
  //------------------------------------------------
  //Animatinsfunktion
  this.animate = function() {
    if (document.hasFocus() == false || this.imgs.length < 10) return;

    var fout = this.getCurrent();
    var fin = this.getNext();

    if (fin == -1) return;
    
    //if (fout.o != -1) this.clean(fout.o, fin);
       
    this.imgs[fin].setPos(fout.i);
    this.imgs[fin].setLnk(document.getElementById("lnk"+fout.i));
    
    this.current = fin;

    var anim = this.getAnim();

    //grossbild
    if (this.imgs.length > 40 && this.imgs[fin].img.src.search(/kalender.*03.jpg/) != -1) {
      if (rand(2) == 0 && document.getElementById("imgbig").style.display != "block")
        this.loadbig(this.imgs[fin].img.src.replace(/\/t_/, "/"));
    };
        
    if (fout.o == -1) 
      Anims.push({i:this.imgs[fin].getID(), o:-1, what:"fadein"});
    else
      Anims.push({i:this.imgs[fin].getID(), o:this.imgs[fout.o].getID(), what:anim});

    if (Anims.length <= 1 ) step();
  }

  //------------------------------------------------
  //auszublendendes Bild
  this.getCurrent = function() {
    //pos finden
    var i = -1;
    
    while(i == -1) {
      var n = rand(9);
      if (!this.isBlocked(n)) {
        for (var j=0; j<this.imgs.length; j++) {
          if (this.findIndex(this.imgs[j].img) == n && this.imgs[j].img.style.display == "block" && this.imgs[j].img.style.zIndex == 101) {
            if (j != this.current) i = j;
            break;
          }
          if (j == this.imgs.length-1 && i == -1) return {o:-1, i:n};
        }
      }
    }
    if (i != -1 && this.imgs[i].img.src.search(/cci\d/) != -1) this.prose--;
    return {o:i, i:n};

  } 
  
  //einzublendendes Bild
  this.getNext = function() {
    var cntr = 0;
    var found = false;
    var i;
    
    while (found == false) {
      i = rand(this.imgs.length); 
      if (this.imgs[i].img.style.display == "none") {
        if (this.imgs[i].img.src.search(/cci\d/) != -1 && this.prose <= 0) found = true;
        else if (this.imgs.length < 40 || this.imgs[i].img.src.search(/cci\d/) == -1 && this.prose > 1) found = true;
        else if (this.prose == 1) found = true;
      }
      
      cntr++;
      if (cntr > 50) return -1;
    }

    if (this.imgs[i].img.src.search(/cci\d/) != -1) this.prose++;

    return i;
  } 


  this.isBlocked = function(n) {
    if (this.blocks.length <= 0) return false;
    for (var i=0; i<this.blocks.length; i++)
      if (this.blocks[i] == n) return true;
    return false;  
  }
  
  //Zufallszahlt 0..n-1
  var rand = function(n) {
    return Math.floor(Math.random()*(n-0.001));
  } 
  
  
  //welche Animation ausgeführt wird
  this.getAnim = function() {
    //return this.ani[9];
    var i = rand(this.ani.length);
    return this.ani[i];
  } 

  //--------------------------------------------------
  //Säuberungsfunktion pos und grösse wiederherstellen
  this.clean = function(n1, n2)  {
    //Anims = [];
    if (n1 == -1) return;
    var x = parseInt(this.imgs[n1].img.style.left);
    var y = parseInt(this.imgs[n1].img.style.top);
    
    for (var i=0; i<this.imgs.length; i++) {
      if (parseInt(this.imgs[i].img.style.left) == x && parseInt(this.imgs[i].img.style.top) == y) {
        if (i != n1 && i != n2) {
          this.imgs[i].img.style.display = "none";
        } 
      }
      //if (!hasAnim(this.imgs[i].img.id)) {
      this.imgs[i].img.style.width = "200px";
      this.imgs[i].img.style.height = Math.floor(150*this.imgs[i].rel) + "px";
      //}
      if (parseInt(this.imgs[i].img.style.left) % 201 != 0) this.imgs[i].img.style.left = getMin(parseInt(this.imgs[i].img.style.left) , 201) + "px";
      if (parseInt(this.imgs[i].img.style.top) % 151 != 0) this.imgs[i].img.style.top = getMin(parseInt(this.imgs[i].img.style.top), 151) + "px";
    }
  }
  
  var getMin = function(n, step) {
    var grid = step * 3;
    while (grid > n) grid -= step;
    if (grid < 0) grid = 0;
    
    return grid;
  }
  
  
  this.hasAnim = function(id) {
    for (var i=0; i<Anims.length; i++) {
      if (Anims[i].i == id || Anims[i].o == id) return true;
    }
    return false;
  }

  
  //--------------------------------------------------
  //Img-Element erzeugen
  this.createImg = function(simg) { 
    var i = this.imgs.length;
   
    this.imgs[i] = new galImage(simg, i);

    this.canvas.appendChild(this.imgs[i].img);
    this.imgs[i].img.title = this.imgs[i].getTitle();
     
    if (i<9) {
      this.imgs[i].setPos(i);
      this.imgs[i].setLnk(this.findLnk(this.imgs[i].img));
      Anims.push({i:this.imgs[i].getID(), o:-1, what:"fadein"});      
      step();
    } 

  }

  //--------------------------------------------------
  //big Img-Element erzeugen
  this.createImgBig = function(simg) { 
    //this.imgbig =  document.createElement("img");
    //this.imgbig.src = simg.src;
    var ibig = document.getElementById("imgbig")
    var lbig = document.getElementById("lnkbig")
    
    if (ibig.style.display == "block") return;
    var copyimg = this.findimg(simg.src.replace(/.*\//, ""));
     
    if (copyimg != -1) {
      this.checkBlocks(this.imgs[copyimg].img);
      //img + lnk zuweisen, positionieren
      ibig.src = simg.src;
      ibig.style.top = getMin(parseInt(this.imgs[copyimg].img.style.top), 151) + "px";
      ibig.style.left = getMin(parseInt(this.imgs[copyimg].img.style.left), 201) + "px";
      ibig.style.width = "200px";
      ibig.style.height = Math.floor(150*this.imgs[copyimg].rel) + "px";
      ibig.style.zIndex = "201";
      ibig.title = this.imgs[copyimg].title;
      lbig.title = this.imgs[copyimg].title;
      lbig.style.top =ibig.style.top;
      lbig.style.left = ibig.style.left;
      lbig.style.width = "398px";
      lbig.style.height = "298px";
      lbig.style.zIndex = "202";
      this.imgs[copyimg].setLnk(lbig);
      //anim "enlarge" erzeugen
      Anims.push({i:"imgbig", o:-1, what:"enlarge", id:this.imgs[copyimg].img.id, when:70}); 
      if (Anims.length <= 1 ) step();     
    }
  }  
  
  this.checkBlocks = function(img) {
    var indx = this.findIndex(img);
    
    switch(indx) {
      case 0: this.blocks = [0, 1, 3, 4]; break;
      case 1: this.blocks = [1, 2, 4, 5]; break;
      case 2: this.blocks = [2, 1, 4, 5]; break;
      case 3: this.blocks = [3, 4, 6, 7]; break;
      case 4: this.blocks = [4, 5, 7, 8]; break;
      case 5: this.blocks = [5, 4, 7, 8]; break;
      case 6: this.blocks = [6, 7, 3, 4]; break;
      case 7: this.blocks = [7, 8, 4, 5]; break;
      case 8: this.blocks = [8, 7, 4, 5]; break;
    }
  }
  
  this.findimg = function(s) {
    for (var i=0; i<this.imgs.length; i++) 
      if (this.imgs[i].img.src.search(s) != -1 && this.imgs[i].img.style.display == "block")
        return i;
    return -1
  }
  
  this.imgsort = function(a, b) {
    return (a.img.src < b.img.src)?1:-1;
  } 
      
  
  var pad = function (s) {
    if (!s || s.toString().length > 1) return s;
    return "0" + s;
  }  
} 

var Gal = new Gallery();



function purgeImage() {
  if (Gal.prose == 2) Gal.prose--;
  return;
  for (var i=0; i<Anims.length; i++) {
    var imgi = document.getElementById(Anims[i].i);
    if (Anims[i].o != -1)
      var imgo = document.getElementById(Anims[i].o);
    else 
      var imgo = -1;
    
    switch (Anims[i].what) {
      case "fadein":
      case "grow":
      case "fall":
      case "explode":
        imgi.style.zIndex = 101;
        imgi.style.opacity = 1;
        imgi.style.width = "200px";
        if (Anims[i].hasOwnProperty("h")) imgi.style.height = Anims[i].h + "px";
        if (Anims[i].hasOwnProperty("l")) imgi.style.left = Anims[i].l + "px";
        if (Anims[i].hasOwnProperty("t")) imgi.style.top = Anims[i].t + "px";
        if (imgo != -1) {  
          imgo.style.zIndex = 100;
          imgo.style.display = "none";
        }
        break;
      case "fadeout":
      case "shrink":
      case "rise":
      case "implode":
        imgi.style.zIndex = 101;
        imgo.style.zIndex = 100;
        imgo.style.display = "none";
        imgo.style.opacity = 1;
        imgo.style.width = "200px";
        if (Anims[i].hasOwnProperty("h")) imgo.style.height = Anims[i].h + "px";
        if (Anims[i].hasOwnProperty("l")) imgo.style.left = Anims[i].l + "px";
        if (Anims[i].hasOwnProperty("t")) imgo.style.top = Anims[i].t + "px";
        break;
    }
  }
  Anims = [];
  //Gal.purge();
}

function imgerror() {
  return true;
}
 
function imgload() {
  Gal.createImg(this);
  return true;
}  

function imgloadbig() {
  Gal.createImgBig(this);
  return true;
}  


function animImage() {
  Gal.animate();
}