// JavaScript Document

// Einführung der Variablen
var ShapeFormular
var farbe
var bilder
var nodeWrapper
var infos
var sichtbarkeit = new Array();
var rot;
var gelb;
var blau;
var aktiv = new Array();
var act
var zaehler = 0;
var hoehe =  386;
var breite = 306;
var kleinhoehe = 106;
var kleinbreite = 81;
var schonGross="nichts";
var div_schonGross="";
var dasBild
var vorigesBild
var wrapper_width
var hoch
var altesLinks
var altesTop
var neuesLinks
var neuesTop
var aktuellesZurueck = false;
var geschwindigkeit = 0.5; 
var sortGeschw=0.1;
var actStyle;
var actShape;
var allPics;
var aktiv;
var nI;
var nameInput="";
var abstand_listen = 112;
var altesRechts;
var vorherigerName = "";

window.onload = function(){
  // Speicherung in Variablen
  ShapeFormular = window.document.getElementById("ShapeForm");
  shape_feld = document.getElementsByName('Shape');
  style_feld = document.getElementsByName('Style');
  if(document.getElementById("schonGross")){
    div_schonGross = document.getElementById("schonGross").innerHTML;
  }
  if(div_schonGross==""){
    schonGross="nichts";
  }else{
    schonGross=div_schonGross;
  }
  
  actStyle = getChecked(style_feld);
  if(actStyle==null){
    actStyle="All_Styles";
  }
  actShape = getChecked(shape_feld);
  if(actShape==null){
    actShape="All_Shapes";
  }
  //window.document.getElementById(actStyle).className = "selected";
  //window.document.getElementById(actShape).className = "selected";
  
  //Create Array of All HTML Tags
  var allHTMLTags=document.getElementsByTagName("*");  
  //Loop through all tags using a for loop  
  alleBilder=new Array();
  for (i=0; i<allHTMLTags.length; i++) { 
    //Get all tags with the specified class name.
    if (allHTMLTags[i].className=="grosses_bildlink") {
      allPics = allHTMLTags[i].id.replace(/glink/g, "");
      alleBilder.push(allPics);    
    }
  }
  
  //bilderPositionieren();
}

  function vergleichen(formular,wahl){
     /*for (i=0; i < bilder.length; i++){
        var Ausdruck1 = new RegExp('\\b'+rot+'\\b','i');
        var Ausdruck2 = new RegExp('\\b'+gelb+'\\b','i');
        var Ausdruck3 = new RegExp('\\b'+blau+'\\b','i');
        var Aussage = infos["bild"+i];
        var Ergebnis1 = Ausdruck1.test(Aussage);
        var Ergebnis2 = Ausdruck2.test(Aussage);
        var Ergebnis3 = Ausdruck3.test(Aussage);
        if((Ergebnis1 || Ergebnis2 || Ergebnis3) == true){
           window.document.getElementById("bild"+i).className="wrap1 display";
        }else{
           window.document.getElementById("bild"+i).className="wrap1 noneDisplay";
        }
     }*/
      
      if(formular=="Shapes"){
        actShape=wahl;
      }else{
        actStyle=wahl;
      }
       
      einAusBlenden();
      
      /*for(var i=0;i<alleBilder.length;i++){
        var bildShape = document.getElementById("shape_"+alleBilder[i]).innerHTML;
        var bildStyle = document.getElementById("style_"+alleBilder[i]).innerHTML;
        if((bildShape==actShape && bildStyle==actStyle) || (bildShape==actShape && actStyle=="All_Styles") || (actShape=="All_Shapes" && bildStyle==actStyle) || (actShape=="All_Shapes" && actStyle=="All_Styles")){
          window.document.getElementById("bild"+alleBilder[i]).className="wrap1 display";
        }else{
          window.document.getElementById("bild"+alleBilder[i]).className="wrap1 noneDisplay";
        } 
      } 
        
       
       
     neuPositionieren(); */
  }
  
  function einAusBlenden(){
      for(var i=0;i<alleBilder.length;i++){
        var bildShape = document.getElementById("shape_"+alleBilder[i]).innerHTML;
        var bildStyle = document.getElementById("style_"+alleBilder[i]).innerHTML;
        // Durchsucht Style-String nach dem richtigen Style
        var styleSuche = bildStyle.search(actStyle);
        // Durchsucht Shape-String nach dem richtigen Style
        var shapeSuche = bildShape.search(actShape);
        // Bildtitel für Input-Suche
        var bT = document.getElementById("img"+alleBilder[i]).alt;
        var bTk = bT.toLowerCase();
        var bildTitel = bTk.substr(0, nameInput.length);
        if(((bildTitel==nameInput) || (nameInput=="")) && ((shapeSuche!= -1 && styleSuche != -1) || (shapeSuche!= -1 && actStyle=="All_Styles") || (actShape=="All_Shapes" && styleSuche != -1) || (actShape=="All_Shapes" && actStyle=="All_Styles"))){
          window.document.getElementById("bild"+alleBilder[i]).className="wrap1 display";
        }else{
          window.document.getElementById("bild"+alleBilder[i]).className="wrap1 noneDisplay"; 
        }
  }
  neuPositionieren(); 
}
  
  function Vg(){
    nI = document.getElementById('name_input').value;
    nameInput = nI.toLowerCase(); 
    if(vorherigerName!=nameInput){
      einAusBlenden();
      vorherigerName = nameInput;
    }
  }
  
  function nameVergleichen(){
    aktiv = window.setInterval("Vg()", 100);
  }
  
  function clearInt(){ 
    window.clearInterval(aktiv);
  }
  
  
  
  /*meinFormular.Farbe[0].onchange = function(){
    //alert(meinFormular.Farbe[0].checked+"/"+meinFormular.Farbe[0].value);
    for (i=0; i < bilder.length; i++) {
      sichtbarkeit[i]=false;
      if(meinFormular.Farbe[0].checked==true){
        if(infos["bild"+i]["rot"]==true){
          sichtbarkeit[i]=true;
        }
      }
      /*if(infos["bild"+i]["rot"]==meinFormular.Farbe[0].checked){
        //bilder[i].display="none";
        sichtbarkeit[i]=meinFormular.Farbe[0].checked;
      }else{
        //bilder[i].display="display";
        sichtbarkeit[i]!=meinFormular.Farbe[0].checked;
      } 
    
    } 
  }
  meinFormular.Farbe[1].onchange = function(){
    //alert(meinFormular.Farbe[1].checked+"/"+meinFormular.Farbe[1].value);
  }
  meinFormular.Farbe[2].onchange = function(){
    //alert(meinFormular.Farbe[2].checked+"/"+meinFormular.Farbe[2].value);
  }*/
  
  // Sichtbarkeit ändern
  /*for (i=0; i < bilder.length; i++) {
    alert(sichtbarkeit[i]);
    if(sichtbarkeit[i]==false){
      window.document.getElementById("bild"+i).className="bild noneDisplay";
    }else{
      window.document.getElementById("bild"+i).className="bild display";
    }
  }
}*/


/*function bildErstellen(bild){
    // Erstellt divs für Schatten
    var nodeWrap1 = window.document.createElement ("div");
    nodeWrap1.className = "wrap1 display";
    var nodeWrap2 = window.document.createElement ("div");
    nodeWrap2.className = "wrap2";
    var nodeWrap3 = window.document.createElement ("div");
    nodeWrap3.className = "wrap3";
    nodeWrap1.id = "bild"+bild;
    // Erstellt ein neues Element: div für Bild
    var nodeBildDiv = window.document.createElement ("div");
    // Setzt ein Attribut
    nodeBildDiv.className = "bild";
    //nodeBildDiv.id = "bild"+bild;
    // Erstellt ein neues Element: img
    nodeBild = window.document.createElement("img");
    // Weist dem Bild einen alternativen Text zu
    nodeBild.alt = "Bild "+bild;
    nodeBild.setAttribute("onClick","grossMachen("+bild+")","false");
    nodeBild.id = "img"+bild;
    nodeBild.width = "80";
    nodeBild.height = "100";
    // Gibt die Source des Bildes an, indem er den Array an der i-ten Stelle verwendet
    nodeBild.src = "bilder/"+bilder[bild];
    // Hängt img-Tag an BildDiv-Tag
    nodeBildDiv.appendChild(nodeBild);
    // Hängt BildDiv-Tag an Wrapper
    nodeWrap3.appendChild(nodeBildDiv);
    nodeWrap2.appendChild(nodeWrap3);
    nodeWrap1.appendChild(nodeWrap2);
    nodeWrapper.appendChild(nodeWrap1);
} */

/*function grossMachen(bild){
  act=window.document.getElementById("img"+bild);
  function init(){
 t3 = new Sequence();
 var elem = document.getElementById('sq' + i);
 t3.addChild(new Tween(elem.style,'width',Tween.bounceEaseOut,25,100,0.5,'px'));
}

  act.height = act.height+hoehe/40;
  //act.width = 100+"px";
  act.width = act.width+breite/40;
  if (zaehler<40){
    setTimeout("grossMachen("+bild+")",5);
    zaehler++;
  }else{
    zaehler=0;
  }
} */

function grossMachen(bild){
   var bildwrap =  document.getElementById('bild' + bild);
   t1 = new Parallel();
   var elem = document.getElementById('img' + bild);
   var link = document.getElementById("link"+bild);
   var gelem = document.getElementById("gimg"+bild);
   var glink = document.getElementById("glink"+bild);
   document.getElementById("bild"+bild).style.zIndex=1000;
   t1.addChild(new Tween(elem.style,'width',Tween.strongEaseInOut,kleinbreite,breite,geschwindigkeit,'px'));
   t1.addChild(new Tween(elem.style,'height',Tween.strongEaseInOut,kleinhoehe,hoehe,geschwindigkeit,'px'));
   t1.addChild(new Tween(gelem.style,'width',Tween.strongEaseInOut,kleinbreite,breite,geschwindigkeit,'px'));
   t1.addChild(new Tween(gelem.style,'height',Tween.strongEaseInOut,kleinhoehe,hoehe,geschwindigkeit,'px'));
   //t1.addChild(new OpacityTween(link,Tween.strongEaseInOut,100,0,geschwindigkeit));
   t1.addChild(new OpacityTween(glink,Tween.strongEaseInOut,0,100,geschwindigkeit));
   /*if((link.className == 3) || (link.className == 4)){
     altesLinks = parseInt(bildwrap.style.left);
     neuesLinks = altesLinks-(breite-kleinbreite);
     t1.addChild(new Tween(bildwrap.style,'left',Tween.strongEaseInOut,altesLinks,neuesLinks,geschwindigkeit,'px'));
   }*/
   var lauscher = new Object();
   lauscher.onMotionStarted= function(){
     glink.style.visibility="visible";
     if(schonGross!="nichts"){
      kleinMachen(schonGross);
     }
   }
   lauscher.onMotionFinished= function(){
    schonGross = bild;
    //link.style.visibility="hidden";
    neueKonsole = document.getElementById("detail_"+bild).innerHTML;
    document.getElementById("detail").innerHTML = neueKonsole;
    document.getElementById("detail").className = "visible";
    document.getElementById("konsole").className = "invisible";
    //link.attachEvent ('onclick', alleKleinMachen(schonGross), false);
    //link.addEventListener("onClick",alleKleinMachen(schonGross),false);
    //link.onclick = 'alert("geht")';
   } 
   t1.addListener(lauscher);
   t1.start();
}

function kleinMachen(altesBild){
   var bildwrap =  document.getElementById('bild' + altesBild);
   t2=new Parallel();
   var alt = document.getElementById('img' + altesBild);
   var link = document.getElementById("link"+altesBild);
   var galt = document.getElementById('gimg' + altesBild);
   var glink = document.getElementById("glink"+altesBild);
   t2.addChild(new Tween(alt.style,'width',Tween.strongEaseInOut,breite,kleinbreite,geschwindigkeit,'px'));
   t2.addChild(new Tween(alt.style,'height',Tween.strongEaseInOut,hoehe,kleinhoehe,geschwindigkeit,'px'));
   t2.addChild(new Tween(galt.style,'width',Tween.strongEaseInOut,breite,kleinbreite,geschwindigkeit,'px'));
   t2.addChild(new Tween(galt.style,'height',Tween.strongEaseInOut,hoehe,kleinhoehe,geschwindigkeit,'px'));
   t2.addChild(new OpacityTween(glink,Tween.strongEaseInOut,100,0,geschwindigkeit));
   //t2.addChild(new OpacityTween(link,Tween.strongEaseInOut,0,100,geschwindigkeit));
   /*if((link.className == 3) || (link.className == 4)){
     altesLinks = parseInt(bildwrap.style.left);
     neuesLinks = altesLinks+(breite-kleinbreite);
     t2.addChild(new Tween(bildwrap.style,'left',Tween.strongEaseInOut,altesLinks,neuesLinks,geschwindigkeit,'px'));
   }*/ 
   var lauscher2 = new Object();
   lauscher2.onMotionStarted= function(){
     //link.style.visibility="visible";
     window.setTimeout("zIndexAuf1('"+altesBild+"')",300);
   }
   lauscher2.onMotionFinished= function(){
    glink.style.visibility="hidden";
    //document.getElementById("bild"+altesBild).style.zIndex=1;
   }
   t2.addListener(lauscher2);
   t2.start();
}

function alleKleinMachen(altes){
   var bildwrap =  document.getElementById('bild' + altes);
   t3=new Parallel();
   var alt = document.getElementById('img' + altes);
   var link = document.getElementById("link"+altes);
   var galt = document.getElementById('gimg' + altes);
   var glink = document.getElementById("glink"+altes);
   t3.addChild(new Tween(alt.style,'width',Tween.strongEaseInOut,breite,kleinbreite,geschwindigkeit,'px'));
   t3.addChild(new Tween(alt.style,'height',Tween.strongEaseInOut,hoehe,kleinhoehe,geschwindigkeit,'px'));
   t3.addChild(new Tween(galt.style,'width',Tween.strongEaseInOut,breite,kleinbreite,geschwindigkeit,'px'));
   t3.addChild(new Tween(galt.style,'height',Tween.strongEaseInOut,hoehe,kleinhoehe,geschwindigkeit,'px'));
   t3.addChild(new OpacityTween(glink,Tween.strongEaseInOut,100,0,geschwindigkeit));
   //t3.addChild(new OpacityTween(link,Tween.strongEaseInOut,0,100,geschwindigkeit));
   /*if((link.className == 3) || (link.className == 4)){
     altesLinks = parseInt(bildwrap.style.left);
     neuesLinks = altesLinks+(breite-kleinbreite);
     t3.addChild(new Tween(bildwrap.style,'left',Tween.strongEaseInOut,altesLinks,neuesLinks,geschwindigkeit,'px'));
   }*/ 
   var lauscher3 = new Object();
   lauscher3.onMotionStarted= function(){
     //link.style.visibility="visible";
   }
   lauscher3.onMotionFinished= function(){
    glink.style.visibility="hidden";
    document.getElementById("bild"+altes).style.zIndex=1; 
    schonGross = "nichts";
    document.getElementById("detail").className = "invisible";
    document.getElementById("konsole").className = "visible"; 
    //window.document.getElementById(actStyle).className = "selected";
    //window.document.getElementById(actShape).className = "selected";
    //window.document.getElementById("name_input").value = nameInput;
   }
   t3.addListener(lauscher3);
   t3.start();
}

/*function bilderPositionieren(){
   //Create Array of All HTML Tags
  var allHTMLTags=document.getElementsByTagName("*");  
  //Loop through all tags using a for loop  
  sammlung=new Array();
  for (i=0; i<allHTMLTags.length; i++) { 
    //Get all tags with the specified class name.
    if (allHTMLTags[i].className=="wrap1 display") {
      sammlung.push(allHTMLTags[i].id);    
    }
  }
  hoch = 0;
  for(c=0;c<sammlung.length;c++){
      dasBild=window.document.getElementById(sammlung[c]);
      vorigesBild=window.document.getElementById(sammlung[c-1]);
      if(c==0){
        dasBild.style.left=0+"px";
        dasBild.style.top=0+"px";
      }else{
        if(parseInt(vorigesBild.style.left)<=(2*abstand_listen)){
          dasBild.style.left=parseInt(vorigesBild.style.left)+abstand_listen+"px";
          dasBild.style.top=(hoch*140)+"px";
        }else{
          hoch++;
          dasBild.style.left=0+"px";
          dasBild.style.top=(hoch*140)+"px";
        }
      }
  }
} */ 

function neuPositionieren(){
   //Create Array of All HTML Tags
  var allHTMLTags=document.getElementsByTagName("*");  
  //Loop through all tags using a for loop  
  sammlung=new Array();
  for (i=0; i<allHTMLTags.length; i++) { 
    //Get all tags with the specified class name.
    if (allHTMLTags[i].className=="wrap1 display") {
      sammlung.push(allHTMLTags[i].id);    
    }
  }
  hoch = 0;
  runde=0;
  var reihen_platz=0;
  durchlauf();
  
  function durchlauf(){
      dasBild=window.document.getElementById(sammlung[runde]);
      if(dasBild!=null){
        vorigesBild=window.document.getElementById(sammlung[runde-1]);
        altesLinks=dasBild.style.left;
        if(altesLinks==""){
          altesLinks=reihen_platz*abstand_listen;
        }
        altesRechts=dasBild.style.right;
        if(altesRechts==""){
          altesRechts=(4-reihen_platz)*abstand_listen;
        }
        altesTop=dasBild.style.top;
        s7 = new Parallel();
        /*if(runde==0){
          neuesLinks=0;
          neuesTop=0;
          s7.addChild(new Tween(dasBild.style,'left',Tween.strongEaseInOut,parseInt(altesLinks),parseInt(neuesLinks),sortGeschw,'px'));
        }else{
          if(parseInt(vorigesBild.style.left)<abstand_listen){
            neuesLinks=abstand_listen;
            neuesTop=(hoch*140);
            s7.addChild(new Tween(dasBild.style,'left',Tween.strongEaseInOut,parseInt(altesLinks),parseInt(neuesLinks),sortGeschw,'px'));
          }else if(parseInt(vorigesBild.style.left)==abstand_listen){
            neuesRechts=abstand_listen;
            neuesTop=(hoch*140); 
            s7.addChild(new Tween(dasBild.style,'right',Tween.strongEaseInOut,parseInt(altesRechts),parseInt(neuesRechts),sortGeschw,'px'));
          }else if(parseInt(vorigesBild.style.right)==abstand_listen){
            neuesRechts=0;
            neuesTop=(hoch*140); 
            s7.addChild(new Tween(dasBild.style,'right',Tween.strongEaseInOut,parseInt(altesRechts),parseInt(neuesRechts),sortGeschw,'px'));
          }else{
            hoch++;
            neuesLinks=0;
            neuesTop=(hoch*140);
            s7.addChild(new Tween(dasBild.style,'left',Tween.strongEaseInOut,parseInt(altesLinks),parseInt(neuesLinks),sortGeschw,'px'));
          }
        }*/
        if(reihen_platz <= 1){
          reihen_platz++;
          neuesTop=(hoch*140);
          neuesLinks=abstand_listen*(reihen_platz-1);
          dasBild.style.right="";
          s7.addChild(new Tween(dasBild.style,'left',Tween.strongEaseInOut,parseInt(altesLinks),parseInt(neuesLinks),sortGeschw,'px'));
        }else{
          reihen_platz++;
          neuesTop=(hoch*140);
          neuesRechts=abstand_listen*(4-reihen_platz);
          dasBild.style.left="";  
          s7.addChild(new Tween(dasBild.style,'right',Tween.strongEaseInOut,parseInt(altesRechts),parseInt(neuesRechts),sortGeschw,'px'));
          if(reihen_platz == 4){
            reihen_platz = 0;
            hoch++;
          }
        }
        var bild_id = sammlung[runde].split('bild');
        window.document.getElementById('detail_table_'+bild_id[1]).style.marginTop = neuesTop+'px';
        s7.addChild(new Tween(dasBild.style,'top',Tween.strongEaseInOut,parseInt(altesTop),parseInt(neuesTop),sortGeschw,'px'));
        s7.start();
        s7.onMotionFinished=function(){
          runde++;
          durchlauf();
        }
      } 
  } 
}

function getChecked(feld){
  for (i=0; i < feld.length; i++){
   if(feld[i].checked == true){
      return feld[i].value;
   }
  }
}

function zIndexAuf1(bild){
  document.getElementById("bild"+bild).style.zIndex=1;
}

function deleteInputBtn(){
  document.getElementById("name_input").value = "";
  nameVergleichen();
}