var imgsrcarray=new  Array();
var imgsarray=new Array();
var indexcontainer=new Array();
var animarray=new Array();
var animdivids=new Array();
var animimgids=new Array();
var animparids=new Array();
window.onload=doonload;
animator1=setInterval('changesrc()',2000);

//I should work the other way around: I know the syntax of the id of the elements on which I want to set an animation
//And I know the set of images per id I want to cycle through

var myImgCyclers=new Array()
//can only be filled on load

imgsrcarray[0]=[
  "./images/ahw/ahwr/ahw01.jpg",
  "./images/ahw/ahwr/ahw02.jpg",
  "./images/ahw/ahwr/ahw03.jpg",
  "./images/ahw/ahwr/ahw04.jpg",
  "./images/ahw/ahwr/ahw05.jpg",
  "./images/ahw/ahwr/ahw06.jpg",
  "./images/ahw/ahwr/ahw07.jpg",
  "./images/ahw/ahwr/ahw08.jpg",
  "./images/ahw/ahwr/ahw09.jpg",
  "./images/ahw/ahwr/ahw10.jpg"
  ]

imgsrcarray[1]=[
  "./images/tan/tanr/tan1.jpg",
  "./images/tan/tanr/tan2.jpg"
  ]

imgsrcarray[2]=[
  "./images/ton/tonr/ton1.jpg",
  "./images/ton/tonr/ton2.jpg"
  ]

imgsrcarray[3]=[
  "./images/tpl/tplr/tpl01.jpg",
  "./images/tpl/tplr/tpl02.jpg",
  "./images/tpl/tplr/tpl03.jpg",
  "./images/tpl/tplr/tpl04.jpg",
  "./images/tpl/tplr/tpl05.jpg",
  "./images/tpl/tplr/tpl06.jpg",
  "./images/tpl/tplr/tpl07.jpg",
  "./images/tpl/tplr/tpl08.jpg",
  "./images/tpl/tplr/tpl09.jpg",
  "./images/tpl/tplr/tpl10.jpg",
  "./images/tpl/tplr/tpl11.jpg",
  "./images/tpl/tplr/tpl12.jpg",
  "./images/tpl/tplr/tpl13.jpg",
  "./images/tpl/tplr/tpl14.jpg",
  "./images/tpl/tplr/tpl15.jpg",
  "./images/tpl/tplr/tpl16.jpg",
  "./images/tpl/tplr/tpl17.jpg",
  "./images/tpl/tplr/tpl18.jpg",
  "./images/tpl/tplr/tpl19.jpg",
  "./images/tpl/tplr/tpl20.jpg",
  "./images/tpl/tplr/tpl21.jpg",
  "./images/tpl/tplr/tpl22.jpg",
  "./images/tpl/tplr/tpl23.jpg",
  "./images/tpl/tplr/tpl24.jpg",
  "./images/tpl/tplr/tpl25.jpg",
  "./images/tpl/tplr/tpl26.jpg",
  "./images/tpl/tplr/tpl27.jpg",
  "./images/tpl/tplr/tpl28.jpg",
  "./images/tpl/tplr/tpl29.jpg",
  "./images/tpl/tplr/tpl30.jpg"
  ]

imgsrcarray[4]=[
  "./images/bnw/ahw03.jpg",
  "./images/bnw/tan02.jpg",
  "./images/bnw/ton01.jpg",
  "./images/bnw/tpl06.jpg",

  ]

function doonload()
  {
  prepAnimArray(imgsrcarray,imgsarray);
  collectObjects();
  }

function prepAnimArray(srcarray,destarray)
  {
  for (var i=0;i<srcarray.length;i++)
    {
    destarray[i]=new Array();
    indexcontainer[i]=0;
    for (var j=0;j<srcarray[i].length;j++)
      {
      destarray[i][j]=new Image();
      destarray[i][j].src=srcarray[i][j];
      }
    }
  }

function collectObjects()
  {
  for (var i=0;i<imgsrcarray.length-1;i++)
    {
    var mydivid="imgbox" + i;
    var myimgid="animbox" + i;
    var myparid="textsuper" + i;
    animdivids[i]=(mydivid);
    animparids[i]=(myparid);
    animimgids[i]=(myimgid);
    document.getElementById(mydivid).onmouseover=grayoutAnim;
    document.getElementById(mydivid).onmouseout=resumeAnim;
    document.getElementById(mydivid).onclick=changeurl;
    }
  }

function grayoutAnim()
   {
   //alert(this.id);
   var idstring=this.id;
   var intIndex=idstring.substring(idstring.length-1);
   var parid="textsuper" + intIndex;
   var imgid="animbox" + intIndex;
   //alert(parid);
   document.getElementById(parid).style.display="block";
   document.getElementById(imgid).src=imgsrcarray[imgsrcarray.length-1][intIndex];
   clearAnim(intIndex);
   }

function resumeAnim()
  {
  //alert(this.id);
  var idstring=this.id;
  var intIndex=idstring.substring(idstring.length-1);
  var parid="textsuper" + intIndex;
  var imgid="animbox" + intIndex;
  //alert(parid);
  document.getElementById(parid).style.display="none";
  document.getElementById(imgid).src=imgsrcarray[intIndex][0];
  resetAnim(intIndex);
  }


function clearAnim(index)
  {
  animimgids.splice(index,1);
  clearInterval(animator1);
  animator1=setInterval('changesrc()',2500);
  }

function resetAnim(index)
  {
  var imgid="animbox" + index;
  animimgids.splice(index,0,imgid);
  clearInterval(animator1);
  animator1=setInterval('changesrc()',2500);
  }

function changesrc()
  {
  //alert("anim");
  for (var i=0; i < animimgids.length;i++)
    {
    var idstring=animimgids[i];
    var intIndex=idstring.substring(idstring.length-1);
    if (indexcontainer[intIndex]==imgsarray[intIndex].length-1)
      {
      indexcontainer[intIndex]=0;
      }
    else
      {
      indexcontainer[intIndex]++;
      }
    var count=indexcontainer[intIndex];
    //var imgid="animbox" + i;
    //alert(count);
    document.getElementById(animimgids[i]).src=imgsrcarray[intIndex][count];
    }
  }

function changeurl()
  {
  myurl="./" + this.id+".html";
  //alert(myurl);
  window.location=myurl;
  }