/**
 * @author nico.schober, germaine.stolper
 *
 */

String.prototype.trim = function() {
    return(this.replace(/^[\s\n]+/,'').replace(/[\s\n]+$/,''));
}

function showLayer(id) {
        Effect.Appear(id, {duration:0.3, from:0, to:1.0});
}

function showLayerChange(id) {
        var theObj = document.getElementById(id);

        if (theObj.style.display!="none") {
                Effect.Fade(theObj, {duration:0.3, from:1.0, to:0})
        } else {
                Effect.Appear(theObj, {duration:0.3, from:0, to:1.0});
        }
}


function hideLayer(id) {
        Effect.Fade(id, {duration:0.3, from:1.0, to:0});
}

function changeLayer(id1, id2) {
        Effect.Fade(id2, {duration:0.3, from:1.0, to:0});
        pause(1000);
        Effect.Appear(id1, {duration:0.3, from:0, to:1.0});
        //changeLayer('RezAnBildAusblenden', 'RezAnBildAusblendenLastCheck');
}

function changeLayerSubmit(id1, id2) {
        Effect.Fade(id2, {duration:0.3, from:1.0, to:0});
        Effect.Appear(id1, {duration:0.3, from:0, to:1.0});
}

function showHideCookBookSelects(id1, id2, id3) {

        var theObjToShow = document.getElementById(id1);
        var spanToShow = document.getElementById(id2);
        var spanToShow2 = document.getElementById(id3);

        if (theObjToShow.style.display!='none') {
                Effect.Fade(id1, {duration:0.3, from:1.0, to:0});
                theObjToShow.style.display = 'none';
                if(spanToShow && spanToShow2) {
                        pause(200);
                        Effect.Appear(id2, {duration:0.3, from:0.0001, to:1.0});
                        Effect.Appear(id3, {duration:0.3, from:0.0001, to:1.0});
                }
        } else {
                if (spanToShow && spanToShow2) {
                        Effect.Fade(id2, {duration:0.3, from:1.0, to:0});
                        Effect.Fade(id3, {duration:0.3, from:1.0, to:0});
                        pause(200);
                }
                Effect.Appear(id1, {duration:0.3, from:0.0001, to:1.0});
        }
}

var openedShowHideLayer = new Array();
function showHideSelectsSimple(id1, id2) {
  isOpenedKey = id1+'_'+id2;
  if (openedShowHideLayer[isOpenedKey]) {
    hideShowSelects(id1, id2);
    openedShowHideLayer[isOpenedKey] = false;
  } else {
    showHideSelects(id1, id2);
    openedShowHideLayer[isOpenedKey] = true;
  }
}

function showHideSelects(id1, id2) {
	if(document.getElementById(id2)) {
	  $(id2).style.visibility = 'hidden';
		//Effect.Fade(id2, {duration:0.3, from:1.0, to:0});
		//pause(200);
	}
	Effect.Appear(id1, {duration:0.3, from:0.0001, to:1.0});
}
function hideShowSelects(id1, id2) {
	if(document.getElementById(id2)) {
		$(id2).style.visibility = 'visible';
	  //Effect.Appear(id2, {duration:0.3, from:0.0001, to:1.0});
		//pause(200);
	}
	Effect.Fade(id1, {duration:0.3, from:1.0, to:0});
}


 function pause(numberMillis){
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true){
                now = new Date();
                if (now.getTime() > exitTime)
                return;
        }
}

function toggleLayer(id) {
        Effect.toggle(id,'appear');
}


function replaceText(el, text) {
  if (el != null) {
    clearText(el);
    var newNode = document.createTextNode(text);
    el.appendChild(newNode);
  }
}

function clearText(el) {
  if (el != null) {
    if (el.childNodes) {
      for (var i = 0; i < el.childNodes.length; i++) {
        var childNode = el.childNodes[i];
        el.removeChild(childNode);
      }
    }
  }
}

function getText(el) {
  var text = "";
  if (el != null) {
    if (el.childNodes) {
      for (var i = 0; i < el.childNodes.length; i++) {
        var childNode = el.childNodes[i];
        if (childNode.nodeValue != null) {
          text = text + childNode.nodeValue;
        }
      }
    }
  }
  return text;
}



/***********************************************************************
 * Funktionen fr die Zubereitungsschritte
 */


function addZubereitungsschritt() {

  // Hilfsvariablen, um die Divs hochz�len zu k�nen
  var topDiv = document.getElementById('myDiv');

  //Auslesen, des hidden Input-Feldes
  var numi = document.getElementById('theValue');
  var num = (numi.value -1)+ 2;

  numi.value = num;
  var newdiv = document.createElement('div');

  // Eindeutige Benennung des Divs
  var divIdName = 'zubereitung'+num;
  newdiv.setAttribute('id', divIdName);
  newdiv.setAttribute('class', 'myDiv');
  newdiv.setAttribute('className', 'myDiv');

  var divSelectName = divIdName;

  //Generierung der Z�lvariablen
  var n1 = document.createElement('LABEL');
          n1.setAttribute('class', 'rezepteingabesteps2');
          n1.setAttribute('className', 'rezepteingabesteps2');
        var txt1=document.createTextNode(num +'. ');
        n1.appendChild(txt1);

  //Generierung des Links fr die Entfernung diese Divs
  var a1=document.createElement('A');
        a1.setAttribute('title','Eingabefeld entfernen');
        a1.setAttribute('href','#');
        a1.onclick = function(){removeZubereitungsschritt(divSelectName); return false;};
        a1.setAttribute('class',  'xlink');
        a1.setAttribute('className',  'xlink');
        var txt1=document.createTextNode('[X]');
        a1.appendChild(txt1);

  //Generierung der Textarea
  var t1 = document.createElement('TEXTAREA');
    t1.name = 'eingabe';
    t1.id = 'eingabe'+num;
    t1.cols = '50';
    t1.rows = '3';
    t1.className = 'area2';

  newdiv.appendChild(n1);
  newdiv.appendChild(t1);
  newdiv.appendChild(a1);

  topDiv.appendChild(newdiv);

}


function removeZubereitungsschritt(divName) {

  var deleteDivNumber = divName;
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divName);

  olddiv = updateZubereitungsschrittDivs(divName);
}


//Funktion, um das gew�lte Div zu l�chen, und die angezeigten IDs der Divs zu �dern
function updateZubereitungsschrittDivs (divName) {

        var topDivMyDiv = document.getElementById('myDiv');
        var startFrom = 1;
        var numIncrease = 0;
        var hiddenNumber = document.getElementById('theValue').value;
        var returnOldDivName = "";
        var counter = 1;
        var tmp;
        var tmpDel;

        //Heraussuchen der Child-Divs des "myDiv" aus dem DOM
        for (var i = 0; i < topDivMyDiv.childNodes.length; i++) {
                if (topDivMyDiv.childNodes[i].nodeName.toLowerCase()=="div") {
                        //Durchz�len, wieviele zus�zliche Divs es wirklich gibt
                        numIncrease = numIncrease + 1;
                }
        }
        //alert("Es gibt "+ numIncrease + "Child Divs");

        //Neu-Setzen der Id's der Child-Divs (dazu werden die IDs direkt angesteuert, da wir ja den derzeitigen
        //Hidden-Input-Value kennen)
        //Die IDs der Child-Divs ergeben sich aus der maximalen Anzahl minus der Anzahl der zus�zlichen Divs
        for (var j = (hiddenNumber - numIncrease); j < hiddenNumber; j++) {
                //das zu l�chende Div wird schon einmal ausgespart
                counter = counter + 1;
                if (('zubereitung'+(j+1)) != divName) {
                        //jew. Div wird angesprochen (+1 da die Auflistung bei 1 beginnt, nicht bei 0)
                        tmp = document.getElementById('zubereitung'+(j+1));
                        //alert("get Div mit Nr. " + (j+1) + " - set new ID: " + counter);
                        //neue Id wird gesetzt
                        tmp.setAttribute('id', ('zubereitung'+counter));

                        updateIdsInZubereitungsschritten(counter);

                } else {
                        //der Name des alten Divs bleibt bestehen (um dieses zu L�chen)
                        tmpDel = document.getElementById(divName);
                        returnOldDivName = divName;
                        //der Counter muss um 1 dekrementiert werden, da das Div ja gel�cht wird
                        counter = counter - 1;
                        topDivMyDiv.removeChild(tmpDel);
                }
        }
        //Letztendlich wird noch der HiddenValue aktualisiert
        updateHiddenValue(numIncrease);

        return returnOldDivName;
}

//Funktion um die Anzeige der IDs vor den Textfeldern upzudaten
function updateIdsInZubereitungsschritten (counter){
        var topLevelDiv = document.getElementById('hiddenValue');
        var selectedDiv = document.getElementById('zubereitung'+counter);

        for (k = 0; k < selectedDiv.childNodes.length; k++) {
                if (selectedDiv.childNodes[k].nodeName.toLowerCase()=="label") {

                        var textNode = selectedDiv.childNodes[k];
                        var txt1 = textNode.getElementsByTagName('txt1');

                        selectedDiv.removeChild(textNode);
                        var n1 = document.createElement('LABEL');
                                n1.setAttribute('class', 'rezepteingabesteps2');
                                n1.setAttribute('className', 'rezepteingabesteps2');
                                var txt1=document.createTextNode(counter+'. ');
                                n1.appendChild(txt1);
                        selectedDiv.appendChild(n1);
                }

                if (selectedDiv.childNodes[k].nodeName.toLowerCase()=="textarea") {

                        //Neusetzen der Divs nur fr die Reihenfolge n�ig
                        var textArea = selectedDiv.childNodes[k];
                        selectedDiv.removeChild(textArea);
                        selectedDiv.appendChild(textArea);
                }

                if (selectedDiv.childNodes[k].nodeName.toLowerCase()=="a") {
                         var divSelectName = 'zubereitung'+counter;

                         var linkNode = selectedDiv.childNodes[k];

                         selectedDiv.removeChild(linkNode);

                         var a1=document.createElement('A');
                                a1.setAttribute('title','Eingabefeld entfernen');
                                a1.setAttribute('href','#');
                                a1.onclick = function(){removeZubereitungsschritt(divSelectName); return false;};
                                a1.setAttribute('class',  'xlink');
                                a1.setAttribute('className',  'xlink');
                                var txt1=document.createTextNode('[X]');
                                a1.appendChild(txt1);

                        selectedDiv.appendChild(a1);
                }

        }

}

function updateHiddenValue (newDivAmount){

        var topLevelDiv = document.getElementById('hiddenValue');
        var prevInput;
        var input = document.createElement("input");
        input.id="theValue";
        input.name="theValue";
        input.type="hidden";
        input.value=newDivAmount;


        for (m = 0; m < topLevelDiv.childNodes.length; m++) {
                if (topLevelDiv.childNodes[m].nodeName.toLowerCase()=="input") {
                        prevInput = topLevelDiv.childNodes[m];
                        topLevelDiv.replaceChild(input, prevInput)
                }
        }
}


function resetHiddenZubereitungsschritteValue () {
        var topLevelDiv = document.getElementById('hiddenValue');
        var prevInput;
        var input = document.createElement("input");
        input.id="theValue";
        input.name="theValue";
        input.type="hidden";
        input.value=1;


        for (m = 0; m < topLevelDiv.childNodes.length; m++) {
                if (topLevelDiv.childNodes[m].nodeName.toLowerCase()=="input") {
                        prevInput = topLevelDiv.childNodes[m];
                        topLevelDiv.replaceChild(input, prevInput)
                }
        }
}


/***********************************************************************
 * Funktionen fr die Zutaten
 */

function addZutat() {

  // Hilfsvariablen, um die Divs hochz�len zu k�nen
  var zu = document.getElementById('myZutatenDiv');

  //Auslesen, des hidden Input-Feldes
  var zutatenV = document.getElementById('theZutatenValue');
  var zutatenCount = (zutatenV.value -1)+ 2;

  zutatenV.value = zutatenCount;
  var newdivZutaten = document.createElement('div');

  // Eindeutige Benennung des Divs
  var divIdNameZutat = 'zutaten'+zutatenCount;
  newdivZutaten.setAttribute('id', divIdNameZutat);
  newdivZutaten.setAttribute('class', 'myZutatenDiv');
  newdivZutaten.setAttribute('className', 'myZutatenDivIe');


  //Generierung des Links fr die Entfernung dieses Divs
  var a2=document.createElement('a');
        a2.setAttribute('title','Eingabefeld entfernen');
        a2.setAttribute('href','#');
        a2.onclick = function(){removeZutatenDivs(divIdNameZutat); return false;};
        a2.setAttribute('class',  'xlink2');
        a2.setAttribute('className',  'xlink2');
        var txt2=document.createTextNode('[X]');
        a2.appendChild(txt2);

  //Generierung der Input-Felder und zugeh�igen Label in dem jwlg. Div
  var newMengeDiv = document.createElement('div');
  var newEinheitDiv = document.createElement('div');
  var newZutatDiv = document.createElement('div');
  var newLinkDiv = document.createElement('div');

  // Eindeutige Benennung des Divs
  var divMengeId = 'zutatMenge'+zutatenCount;
  newMengeDiv.setAttribute('id', divMengeId);
  newMengeDiv.setAttribute('class', 'formularzeile');
  newMengeDiv.setAttribute('className', 'formularzeile');

  var divEinheitId = 'zutatEinheit'+zutatenCount;
  newEinheitDiv.setAttribute('id', divEinheitId);
  newEinheitDiv.setAttribute('class', 'formularzeile formzeile2');
  newEinheitDiv.setAttribute('className', 'formularzeile formzeile2ie');

  var divZutatId = 'zutatZutatId'+zutatenCount;
  newZutatDiv.setAttribute('id', divZutatId);
  newZutatDiv.setAttribute('class', 'formularzeile formzeile2');
  newZutatDiv.setAttribute('className', 'formularzeile formzeile2ie');

  var divLinkId = 'zutatLink'+zutatenCount;
  newLinkDiv.setAttribute('id', divLinkId);
  newLinkDiv.setAttribute('class', 'formularzeile xpos');
  newLinkDiv.setAttribute('className', 'formularzeile xpos');


  var no1 = document.createElement('label');
          var txtno1=document.createTextNode('Menge');
          no1.appendChild(txtno1);

  var inp1 = document.createElement('input');
          inp1.setAttribute('class', 'input3');
          inp1.setAttribute('className', 'input3');
          inp1.setAttribute('maxlength', '25');


  newMengeDiv.appendChild(no1);
  newMengeDiv.appendChild(inp1);

  var no2 = document.createElement('label');
      no2.setAttribute('className', 'formzeileLabelInputIe');
          var txtno2=document.createTextNode('Einheit*');
          no2.appendChild(txtno2);

  var inp2 = document.createElement('input');
          inp2.setAttribute('class', 'input4');
          inp2.setAttribute('className', 'input4ie');
          inp2.setAttribute('maxlength', '25');

  newEinheitDiv.appendChild(no2);
  newEinheitDiv.appendChild(inp2);


  var no3 = document.createElement('label');
      no3.setAttribute('className', 'formzeileLabelInputIe');
          var txtno3=document.createTextNode('Zutat*');
          no3.appendChild(txtno3);

  var inp3 = document.createElement('input');
          inp3.setAttribute('class', 'input6');
          inp3.setAttribute('className', 'input6ie');
          inp3.setAttribute('maxlength', '25');

  newZutatDiv.appendChild(no3);
  newZutatDiv.appendChild(inp3);

  newLinkDiv.appendChild(a2);

  var newBr = document.createElement('BR');
          newBr.setAttribute('class', 'clearboth');
          newBr.setAttribute('className', 'clearboth');

  //Anh�gen ans umgebende Div
  newdivZutaten.appendChild(newMengeDiv);
  newdivZutaten.appendChild(newEinheitDiv);
  newdivZutaten.appendChild(newZutatDiv);
  newdivZutaten.appendChild(newLinkDiv);
  newdivZutaten.appendChild(newBr);


  zu.appendChild(newdivZutaten);

}


function removeZutatenDivs(divName) {

  var getTopDiv = document.getElementById('myZutatenDiv');
  var olddiv = document.getElementById(divName);

 try
  {
    getTopDiv.removeChild(olddiv);
  }
  catch(x)
  {
    alert(x)
  }

}


function change_class(element) {
        element.className = 'mouseOver';
}






/***********************************************************************
 * Slideshow Rezepteingabe
 */


//Die Anzahl der Bilder muss dann aus der DB gelesen und gesetzt werden.
var maxnr = 3;
//Startbild - in diesem Fall Nr. 1
var picNr = 1;


function bild(nr) {
  picNr += nr;
  if (picNr < 1)
        picNr = maxnr;
  else if (picNr > maxnr)
        picNr = 1;
//Die IMG-Namen mssen dann an die in der DB gespeicherte Namenskonvention angepasst werden
// >> oder dieser Namen muss hier immer ausgelesen und eingefgt werden
 //Effect.Fade(document.slide.src="img/rezept_foto" + nr + ".gif");
 //Effect.Appear(document.slide.src="img/rezept_foto" + picNr + ".gif");
 document.slide.src="img/rezept_foto" + picNr + ".gif"
}

function bild(nr, authorName) {
  picNr += nr;
  if (picNr < 1)
        picNr = maxnr;
  else if (picNr > maxnr)
        picNr = 1;
//Die IMG-Namen mssen dann an die in der DB gespeicherte Namenskonvention angepasst werden
// >> oder dieser Namen muss hier immer ausgelesen und eingefgt werden
 //Effect.Fade(document.slide.src="img/rezept_foto" + nr + "_bg.gif");
 //Effect.Appear(document.slide.src="img/rezept_foto" + picNr + "_bg.gif");
 document.slide.src="img/rezept_foto" + picNr + ".gif";
  appendNewAuthorTag(authorName, picNr);
}

function bild_bg(nr, authorName) {
  picNr += nr;
  if (picNr < 1)
        picNr = maxnr;
  else if (picNr > maxnr)
        picNr = 1;
//Die IMG-Namen mssen dann an die in der DB gespeicherte Namenskonvention angepasst werden
// >> oder dieser Namen muss hier immer ausgelesen und eingefgt werden
 //Effect.Appear(document.slide.src="img/rezept_foto" + picNr + "_bg.gif");
 document.slide.src="img/rezept_foto" + picNr + "_bg.gif";
 appendNewPicNr(picNr, maxnr);
 appendNewAuthorTag(authorName, picNr);
}


function appendNewPicNr (picNr, maxnr) {

        var spanId = document.getElementById('spanAmount');
        var spanIdParent = spanId.parentNode;

        var spanAmount = document.createElement('span');
                spanAmount.setAttribute('id', 'spanAmount');
                spanAmount.setAttribute('class', 'boldAmount');
                spanAmount.setAttribute('className', 'boldAmount');
        //Die Anzahl der Bilder als String
        var picAmount;
        //Fr die Positionierung:
        if (maxnr < 10) {
                picAmount = document.createTextNode('Bild ' + picNr + ' von ' + maxnr +' ');
        } else {
                picAmount = document.createTextNode('Bild ' + picNr + ' von ' + maxnr);
        }
                spanAmount.appendChild(picAmount);

        spanIdParent.replaceChild(spanAmount, spanId);
}


function appendNewAuthorTag(author, nr) {


        var getAuthorTag = document.getElementById('picAuthor');
        var getAuthorTagTopDiv = getAuthorTag.parentNode;

        var authorDivRepl = document.createElement('div');
        //Die ID des AuthorDivs muss gleich bleiben, um in "bild()" ersetzt werden zu k�nen
                authorDivRepl.setAttribute('id', 'picAuthor');
                authorDivRepl.setAttribute('class', 'picAuthor');
                authorDivRepl.setAttribute('className', 'picAuthor');
        //Ob der Author ein Fotograf ist oder User, muss hier unterschieden und entsprechend
        //gesetzt werden.
        var authorLinkRepl = document.createElement('a');
                authorLinkRepl.setAttribute('href', '#');
                var txtAuthorO = document.createTextNode('Foto: ' + nr.toString() + ' bzw. ');
                authorLinkRepl.appendChild(txtAuthorO);
                var txtAuthorNew = document.createTextNode(author);
                authorLinkRepl.appendChild(txtAuthorNew);

        authorDivRepl.appendChild(authorLinkRepl);

        getAuthorTagTopDiv.removeChild(getAuthorTag);
        getAuthorTagTopDiv.appendChild(authorDivRepl);

}



function exchangeDivs(picnr, author, maxPics) {

        //ParentDiv, in dem ersetzt wird
        var contentDiv = document.getElementById('leftSideTop');
        var contentDivAll = document.getElementById('rezeptansicht');

        var replaceDiv = document.getElementById('picframe');

        var remPicturedetails = document.getElementById('picturedetails');
        var remBildAusblenden = document.getElementById('RezAnBildAusblenden');
        var remBildAusblendenLC = document.getElementById('RezAnBildAusblendenLastCheck');
        var remDetails = document.getElementById('leftSideBottom');



        var prevnr;
        if (picnr > 1) {
                prevnr = picnr -1;
        } else {
                prevnr = 1;
        }

        //Aufsetzen des neuen Divs fr das Bild
        var replaceWith = document.createElement('div');
                replaceWith.setAttribute('class', 'pictureframeBig');
                replaceWith.setAttribute('className', 'pictureframeBig');
                replaceWith.setAttribute('id', picnr);


        var linkBackDiv = document.createElement('div');
                linkBackDiv.setAttribute('id', 'linkBackDiv');
                linkBackDiv.setAttribute('class', 'linkBackDiv');
                linkBackDiv.setAttribute('className', 'linkBackDiv');
        //A-Tag zum Rcksetzen der Anzeige >> einfach Reload der Seite
        var linkReloadPage = document.createElement('a');
                linkReloadPage.setAttribute('href', '#');
                linkReloadPage.setAttribute('class', 'linkBackLupe');
                linkReloadPage.setAttribute('className', 'linkBackLupe');
                linkReloadPage.onclick = function(){window.location.reload(); return false;};
                var txtBack = document.createTextNode('Zurck zum Rezept');
                linkReloadPage.appendChild(txtBack);
                linkBackDiv.appendChild(linkReloadPage);



        var linkOptionsDiv = document.createElement('div');
                linkOptionsDiv.setAttribute('id', 'linkOptionsDiv');
                linkOptionsDiv.setAttribute('class', 'linkOptionsDiv');
                linkOptionsDiv.setAttribute('className', 'linkOptionsDiv');

        //A-Tag zum zurckschalten
        var linkPrev = document.createElement('a');
                linkPrev.setAttribute('href', '#');
                linkPrev.setAttribute('id', 'linkprev');
                //Der Authorname muss dann aus der DB gespeist werden
                linkPrev.onclick = function(){bild_bg(-1, 'vorheriger Author - Grossansicht'); return false;};

        //Img zum zurckschalten
        var inputImgPrev = document.createElement('img');
                inputImgPrev.setAttribute('src', './img/0100_pfeil_b.gif');
                inputImgPrev.setAttribute('value', 'prev');
                //Der Authorname muss dann aus der DB gespeist werden
                inputImgPrev.onclick = function(){bild_bg(-1, 'vorheriger Author - Grossansicht'); return false;};
                inputImgPrev.setAttribute('class', 'img6');
                inputImgPrev.setAttribute('className', 'img6');

        linkPrev.appendChild(inputImgPrev);
        var txtLinkPrev = document.createTextNode('zurck');
                linkPrev.appendChild(txtLinkPrev);


        var spanAmount = document.createElement('span');
                spanAmount.setAttribute('id', 'spanAmount');
                spanAmount.setAttribute('class', 'boldAmount');
                spanAmount.setAttribute('className', 'boldAmount');
        //Die Anzahl der Bilder als String
        var picAmount;
        //Fr die Positionierung:
        if (maxPics < 10) {
                picAmount = document.createTextNode('Bild ' + picnr + ' von ' + maxPics +' ');
        } else {
                picAmount = document.createTextNode('Bild ' + picnr + ' von ' + maxPics);
        }
                spanAmount.appendChild(picAmount);


        //A-Tag zum weiterschalten
        var linkNext = document.createElement('a');
                linkNext.setAttribute('href', '#');
                linkNext.setAttribute('id', 'linknext');
                //Der Authorname muss dann aus der DB gespeist werden
                linkNext.onclick = function(){bild_bg(1, 'n�hster Author - Grossansicht'); return false;};
                var txtLinkNext = document.createTextNode('vor');
                linkNext.appendChild(txtLinkNext);

        //Img zum weiterschalten
        var inputImgNext = document.createElement('img');
                inputImgNext.setAttribute('src', './img/0100_pfeil.gif');
                //Der Authorname muss dann aus der DB gespeist werden
                inputImgNext.onclick = function(){bild_bg(1, 'n�hster Author - Grossansicht'); return false;};
                inputImgNext.setAttribute('value', 'next');
                inputImgNext.setAttribute('class', 'img7');
                inputImgNext.setAttribute('className', 'img7');

        linkNext.appendChild(inputImgNext);



        //Das eigentiche Bild
        var curImg;
        //IE hack: Der IE nimmt "name" nicht ber "setAttribute" sondern nur bei der
        //ersten Erzeugung
        try {
                curImg = document.createElement('<img name="slide">');
        } catch (e) {
                curImg = document.createElement('img');
                curImg.setAttribute('name','slide');

        }
                curImg.setAttribute('src', 'img/rezept_foto' + picnr + '_bg.gif');
                curImg.setAttribute('class', 'img8');
                curImg.setAttribute('className', 'img8');
                curImg.setAttribute('alt', '');

        //Dieses Div wird beim Weiterschalten ausgetauscht
        var authorDiv = document.createElement('div');
        //Die ID des AuthorDivs muss gleich bleiben, um in "bild()" ersetzt werden zu k�nen
                authorDiv.setAttribute('id', 'picAuthor');
                authorDiv.setAttribute('class', 'midGrey marginTop5');
                authorDiv.setAttribute('className', 'midGrey marginTop5');
        //Ob der Author ein Fotograf ist oder User, muss hier unterschieden und entsprechend
        //gesetzt werden.
        var authorLink = document.createElement('a');
                authorLink.setAttribute('href', '#');
                var txtAuthor1 = document.createTextNode('Foto: ' + author + ' bzw. ');
                authorDiv.appendChild(txtAuthor1);
                var txtAuthor2 = document.createTextNode(author);
                authorLink.appendChild(txtAuthor2);
                authorDiv.appendChild(authorLink);



        linkOptionsDiv.appendChild(linkBackDiv);
        linkOptionsDiv.appendChild(linkPrev);
        linkOptionsDiv.appendChild(spanAmount);
        linkOptionsDiv.appendChild(linkNext);

        replaceWith.appendChild(linkOptionsDiv);
        replaceWith.appendChild(curImg);
        replaceWith.appendChild(authorDiv);




        try {

                contentDiv.removeChild(remPicturedetails);
                contentDiv.removeChild(remBildAusblenden);
                contentDiv.removeChild(remBildAusblendenLC);
                contentDivAll.removeChild(remDetails);

                contentDiv.replaceChild(replaceWith, replaceDiv);

        } catch (x) {
                alert(x);
        }

}





/***********************************************
* Layer "relativ" positionieren
***********************************************/

function getposOffset(overlay, offsettype){
        var totaloffset;
        if(offsettype == "left"){
                totaloffset=overlay.offsetLeft;
        }
         else {
                totaloffset=overlay.offsetTop;
        }
        var parentEl=overlay.offsetParent;
        while (parentEl!=null){
                totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
                parentEl=parentEl.offsetParent;
        }
        return totaloffset;
}

function focusUsernameElement(obj){
	$('username').focus();
}

function overlay(objToGet, subobjstr, opt_position, classNameOff, classNameOn, buttonPos){
  if (document.getElementById){

        var subobj=document.getElementById(subobjstr);
        var curobj=document.getElementById(objToGet);
        
        // which callbacks are possible -- append here addidition callbacks
        var possibleCallBacks = ['focusUsernameElement'];

        /** check, if there is flash to blend out for the big quickreg layer */
        if (navigator.userAgent.indexOf('Mac') >- 1 && objToGet == 'registerLink') {
          flas = $$('.teaserbox object');
          visibility = 'hidden';
          if (subobj.style.display != 'none') {
            visibility = 'visible';
          }
          if (flas.length > 0) {
            for (f=0; f<flas.length; f++) {
              flas[f].style.visibility = visibility;
            }
          }
          //flas.style.display = 'none';
        }

        if (subobj.style.display!="none") {
                Effect.Fade(subobj, {duration:0.3, from:1.0, to:0.0})
                curobj.className=classNameOff;
        } else {
        				// normally we have six arguments for this method, check if we have seven for special features
        				// and if so, check if it's ok.
      					if(overlay.arguments.length > 6 && possibleCallBacks.indexOf(overlay.arguments[6]) > -1){
        					eval('var myOptions = {duration:0.3, from:0, to:1.0, afterFinish: '+overlay.arguments[6]+' };');
        				}else{
        					var myOptions = {duration:0.3, from:0, to:1.0};
        				}
                Effect.Appear(subobj, myOptions);
                curobj.className=classNameOn;
        }

        var xpos;
        if (buttonPos == "buttonIsLeft") { //wenn layer rechts vom button öffnet
                // for the layers in userAsset profile: in IE move layer 1px to the left, ph 11.3.07
                var layerXOffset = opt_position.indexOf("arrow") != -1 && navigator.appVersion.match(/\bMSIE\b/) ? -1 : 0;
                xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0) + layerXOffset;
        }
        else if (buttonPos == "buttonIsRight") { //wenn layer links vom button öffnet
                xpos=(getposOffset(curobj, "left")-($(subobj).getWidth()-$(curobj).getWidth()))-((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0);
        }
        else if (buttonPos == "buttonIsRight2") { //wenn layer rechts vom button öffnet, aber icon rechts vom link steht
                xpos=(getposOffset(curobj, "left")-(-$(curobj).getWidth()+32))-((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0);
        }
        else if (buttonPos == "buttonIsRight3") { //wenn layer rechts vom button öffnet, aber icon rechts vom link steht
                xpos=(getposOffset(curobj, "left")-(-$(curobj).getWidth()+39))-((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0);
        }
        // for the layers in userAsset profile: set layer 15px from top (the height of the arrow itself...), ph 11.3.07
        var arrowYOffset = opt_position.indexOf("arrow") != -1 ? 15 : 0;
        var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0) + arrowYOffset;
        subobj.style.left=xpos+"px";
        subobj.style.top=ypos+"px";
  }
  else {
        return true;
  }
}



function overlayclose(curobj, subobj, txt, newClassName, newLayerName, newAlignment, classNameOff, classNameOn, buttonpos){

var theLayer = document.getElementById(subobj);

Effect.Fade(theLayer, {duration:0.3, from:1.0, to:0});

var linkStyle = document.getElementById(curobj);
var linkParent = linkStyle.parentNode;

try {
        linkParent.removeChild(linkStyle);
} catch (z) {
        alert(z);
}

var newLinkStyle = document.createElement('a');
                newLinkStyle.setAttribute('href', '#');
                newLinkStyle.setAttribute('class', newClassName);
                newLinkStyle.setAttribute('className', newClassName);
                newLinkStyle.setAttribute('id', curobj);
                newLinkStyle.onclick = function(){overlay(curobj, newLayerName, newAlignment, classNameOff, classNameOn, buttonpos); return false;};
                newLinkStyle.onfocus = function(){if(this.blur)this.blur()};
                var linkText = document.createTextNode(txt);
                        newLinkStyle.appendChild(linkText);

try {
        linkParent.appendChild(newLinkStyle);
} catch (b) {
        alert(b);
}

}

function overlayImg(objToGet, subobjstr, opt_position, classNameOff, classNameOn, buttonPos){
if (document.getElementById){

        var subobj=document.getElementById(subobjstr);
        var curobj=document.getElementById(objToGet);

        subobj.style.display='block';
        curobj.className=classNameOn;


        var xpos;
        if (buttonPos == "buttonIsLeft") { //wenn layer rechts vom button �fnet
                xpos=getposOffset(curobj, "left")+((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0);
        }
        else if (buttonPos == "buttonIsRight") { //wenn layer links vom button �fnet
                xpos=(getposOffset(curobj, "left")- ($(subobj).getWidth()-$(curobj).getWidth()))-((typeof opt_position!="undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth-curobj.offsetWidth) : 0);
        }
        var ypos=getposOffset(curobj, "top")+((typeof opt_position!="undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0);
        subobj.style.left=xpos+"px";
        subobj.style.top=ypos+"px";
        return false;
}
else
        return true;
}




function overlaycloseImg(curobj, subobj, txt, newClassName, newLayerName, newAlignment, classNameOff, classNameOn){

var theLayer = document.getElementById(subobj);


document.getElementById(curobj).className=classNameOff;
theLayer.className=classNameOff;

theLayer.style.display='none';
}


function overlaycloseOnChange(curobj, subobj, txt, newClassName, newLayerName, newAlignment, classNameOff, classNameOn, buttonpos){

var theLayer = document.getElementById(subobj);
Effect.Fade(theLayer, {duration:0.3, from:1.0, to:0});

}




/***********************************************************************
 * Funktionen zum Checken und Unchecken der Checkboxes per Link und Box
 */


function CheckMarks(formName, checkBoxNames) {

    if(!document.forms[formName]) {
            return;
    }
    var checkBoxesToCheck = document.forms[formName].elements[checkBoxNames];
    if(!checkBoxesToCheck) {
            return;
    }
    var countCheckBoxes = checkBoxesToCheck.length;
    if (!countCheckBoxes) {
      /** just one checkbox is not a node list!!! */
      if(!checkBoxesToCheck.checked){
	      checkBoxesToCheck.click();
      }
    } else {
      for(var j = 0; j < countCheckBoxes; j++) {
      	if(!checkBoxesToCheck[j].checked){
       		checkBoxesToCheck[j].click();
      	}
      }
    }

}


function UncheckMarks(formName, checkBoxNames) {
        if(!document.forms[formName]) {
                return;
        }
        var checkBoxesToCheck = document.forms[formName].elements[checkBoxNames];
        if(!checkBoxesToCheck) {
                return;
        }
        var countCheckBoxes = checkBoxesToCheck.length;
        if (!countCheckBoxes) {
          /** just one checkbox is not a node list!!! */
          if(checkBoxesToCheck.checked){
            checkBoxesToCheck.click();
          }
        } else {
          for(var j = 0; j < countCheckBoxes; j++) {
          	if(checkBoxesToCheck[j].checked){
              checkBoxesToCheck[j].click();
          	}
          }
        }
}

function checkMarksHideBox(formName, checkBoxNames, boxId) {

        if(!document.forms[formName]) {
                return;
        }
        var checkBoxesToCheck = document.forms[formName].elements[checkBoxNames];
        if(!checkBoxesToCheck) {
                return;
        }
        var countCheckBoxes = checkBoxesToCheck.length;

        for(var j = 0; j < countCheckBoxes; j++) {
                if (checkBoxesToCheck[j].checked == true) {
                checkBoxesToCheck[j].checked = false;
                } else {
                checkBoxesToCheck[j].checked = true;
                }
        }

        if (document.getElementById(boxId).style.display!="none") {
                document.getElementById(boxId).style.display='none';
        } else {
                document.getElementById(boxId).style.display='block';
        }
}


function CheckUserName (userNameQuick) {

        var checkUserName = userNameQuick.value;

        //Dummy-Aufruf (false)
        //Diese Funktion muss dann den Checks des Usernames gegen die bereits vorhandenen
        //Namen in der Datenbank beinhalten. Wenn dieser Positiv verl�ft, dann return.

        if (1!=1) {
                return;
        } else {

        //Ansonsten Aufruf des Fehlerlayers

                overlay('usernameLink', 'layerUsernameUsed', 'bottom', 'xlinkUsername', 'xlinkUsername', 'buttonIsLeft');
                return false;
        }

}


function AddToUserNameField (inputFieldNr) {

        var topElementInput = document.getElementById('usernameLink');
        var removeInput = document.getElementById('usernameQuick');
        var getSelectedSuggestion = document.getElementById('hiddenSuggestion'+inputFieldNr);

        var newInputField = document.createElement('input');
                newInputField.setAttribute('id', 'usernameQuick');
                newInputField.setAttribute('class', 'input7 fehlerInput');
                newInputField.setAttribute('className', 'input7 fehlerInput');
                newInputField.onchange = function(){CheckUserName(this);};
                newInputField.setAttribute('value', getSelectedSuggestion.value);
                newInputField.setAttribute('maxlength', '25');

        topElementInput.removeChild(removeInput);
        topElementInput.appendChild(newInputField);

}




// Funktion um die ausgew�lte Option des Selects, und davon abh�gig, die Anzeige der zweiten
// DropDown-Box zu steuern.
// Die IDs und Values mssen fr den Ablauf bestehen bleiben, oder DB-gesteuert angepasst werden.

function CheckForSelect (selectId, removeSelect, removeButton, selectedValue) {
        var checkValue = selectedValue.value;

        var topElementForSelect = document.getElementById(selectId).parentNode;

        var removableSelect = document.getElementById(removeSelect);
        var goSubmit = document.getElementById(removeButton);

        if (checkValue==3) {
                topElementForSelect.removeChild(removableSelect);
        } else {

                if (removableSelect == null) {

                        topElementForSelect.removeChild(goSubmit);

                        removableSelect = document.createElement('select');
                        removableSelect.setAttribute('id', 'selectDestination');
                        removableSelect.setAttribute('class', 'select3');
                        removableSelect.setAttribute('className', 'select3');

                                var option1ForSelect = document.createElement('option');
                                        var option1Text = document.createTextNode('... Ordner');
                                option1ForSelect.appendChild(option1Text);

                                var option2ForSelect = document.createElement('option');
                                        var option2Text = document.createTextNode('... Verzeichnis');
                                option2ForSelect.appendChild(option2Text);

                        removableSelect.appendChild(option1ForSelect);
                        removableSelect.appendChild(option2ForSelect);


                        goSubmit = document.createElement('button');
                        goSubmit.setAttribute('id', 'goSubmit');
                        goSubmit.setAttribute('type', 'button');
                        goSubmit.setAttribute('class', 'button button6');
                        goSubmit.setAttribute('className', 'button button6');

                                var submitButtonText = document.createTextNode('Go');
                        goSubmit.appendChild(submitButtonText);

                        topElementForSelect.appendChild(removableSelect);
                        topElementForSelect.appendChild(goSubmit);

                }
        }


}

function getEventFired(e) {
        var eventFired = e.type;
        alert("Typ: "+ e.type);
        return eventFired;
}

/*
function getEvent(dest, e, myLink)
{
        var jsEventTypeClick    = "click";
        var jsBlank                             = "";

        var jsEventType;
        var jsEventSource;
        var jsEventSourceTtpe;

        jsEventType = getEventFired(e);

        alert("Ein Event wurde ausgel�t: " + jsEventType);


        if (getEventFired(e) == 'href') {
                alert("Auf den Link geklickt.");
                window.location = dest;
                return;
        } else {
                cancelClick(e);
                alert("Klick - Event gecancelled");
        }
}
*/


function handleEvent (dest, e, myLink) {

        var eventArray = new Array();

        alert("EventArray ist " + eventArray.length + " Elemente gross.");

        if (eventArray.length > 0) {
                if (getEventFired(e) == 'href') {
                        alert("Auf den Link geklickt.");
                        eventArray[eventArray.length+1] = 'href';
                        cancelClick(e);
                        alert("ClickEvent EventArray hinzugefgt, Click gecancelt.")
                }

        } else {
                if (getEventFired(e) == 'href') {
                        alert("Element " + getEventFired(e) + " am Index 0 eingefgt.");
                        eventArray[0] = 'href';
                }
        }

}

function draghandler(elementId, dest, e, myLink) {
        var dragElement = document.getElementById(elementId);

        if (dragElement.ondrag || dragElement.ondragstart || dragElement.ondragend) {
                cancelClick(e);
        } else {
                window.location = dest;
        }
}


function cancelClick(e) {
        if (window.event && window.event.returnValue) {
                window.event.returnValue = false;
        }
        if (e && e.preventDefault) {
                e.preventDefault;
        }
}


function submitMailAbo(form) {

        var formEle = document.getElementById(form);
        var formRemEl = document.getElementById('formContent');

        formEle.removeChild(formRemEl);

        var newFormEl = document.createElement('div');
                newFormEl.setAttribute('id', 'formContent');

        var newHeadline = document.createElement('h3');
                newHeadline.setAttribute('class', 'h3');
                newHeadline.setAttribute('className', 'h3');
                var textValueHead = document.createTextNode('Bestätigung');

        var newLinkSpan = document.createElement('span');
                newLinkSpan.setAttribute('class', 'mailLayerClose');
                newLinkSpan.setAttribute('className', 'mailLayerClose');

        var newLinkStyleForm = document.createElement('a');
                newLinkStyleForm.setAttribute('href', '#');
                newLinkStyleForm.setAttribute('class', 'xlinkAbo');
                newLinkStyleForm.setAttribute('className', 'xlinkAbo');
                newLinkStyleForm.onclick = function(){overlayclose('rezeptAboLink', 'layerMailRedaktion', ' Mail an die Redaktion', 'arrowAbo textlink', 'layerMailRedaktion', 'bottom left', 'arrowAbo textlink', 'arrowredAbo textlink', 'buttonIsLeft'); return false;};
                newLinkStyleForm.onfocus = function(){if(this.blur)this.blur()};
                var linkText = document.createTextNode('[X]');
                        newLinkStyleForm.appendChild(linkText);
                newLinkSpan.appendChild(newLinkStyleForm);

        var newBr = document.createElement('br');
                newBr.setAttribute('class', 'clearboth');
                newBr.setAttribute('className', 'clearboth');

        var newSpan = document.createElement('span');
                newSpan.setAttribute('class', 'subheadlineblConf');
                newSpan.setAttribute('className', 'subheadlineblConf');

        var newConfirmation = document.createTextNode('Ihr Rezept-Abo-Wunsch wurde erfolgreich an die Redaktion geschickt.');

                newSpan.appendChild(newConfirmation);
                newHeadline.appendChild(textValueHead);
                newHeadline.appendChild(newLinkSpan);

        var heightTrenner = document.createElement('p');


        newFormEl.appendChild(newHeadline);
        newFormEl.appendChild(newBr);
        newFormEl.appendChild(newBr);
        newFormEl.appendChild(newSpan);

        formEle.appendChild(newFormEl);
}


/************************************************************************************************
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Rezeptansicht: Kategorien und Tags aufklappen
 * >> Die angezeigten Kategorien und Tags mssen dann aus der DB gelesen werden!!
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * **********************************************************************************************
 */

function blindDownKats(divId) {

        var katDiv = document.getElementById('allKatsLink');
        var katParentDiv = katDiv.parentNode;

        var divKatLink = document.createElement('div');
                divKatLink.setAttribute('id', 'allKatsLink');
        var hideKatLink = document.createElement('a');
                hideKatLink.setAttribute('href', '#');
                hideKatLink.setAttribute('class', '');
                hideKatLink.setAttribute('className', '');
                hideKatLink.onclick = function(){blindUpKats(divId); return false;};
                var hideKatTxt = document.createTextNode('Weniger Kategorien');
                hideKatLink.appendChild(hideKatTxt);
        divKatLink.appendChild(hideKatLink);


katParentDiv.removeChild(katDiv);
katParentDiv.appendChild(divKatLink);


Effect.BlindDown(divId, {duration:1.5});
}

function blindUpKats(divId) {

        var katDiv = document.getElementById('allKatsLink');
        var katParentDiv = katDiv.parentNode;

        var divKatLink = document.createElement('div');
                divKatLink.setAttribute('id', 'allKatsLink');
        var hideKatLink = document.createElement('a');
                hideKatLink.setAttribute('href', '#');
                hideKatLink.setAttribute('class', '');
                hideKatLink.setAttribute('className', '');
                hideKatLink.onclick = function(){blindDownKats(divId); return false;};
                var hideKatTxt = document.createTextNode('Alle Kategorien');
                hideKatLink.appendChild(hideKatTxt);
        divKatLink.appendChild(hideKatLink);


katParentDiv.removeChild(katDiv);
katParentDiv.appendChild(divKatLink);


Effect.BlindUp(divId, {duration:1.5});
}


function blindDownTags(divId) {

        var tagDiv = document.getElementById('allTagsLink');
        var tagParentDiv = tagDiv.parentNode;

        var divTagLink = document.createElement('div');
                divTagLink.setAttribute('id', 'allTagsLink');
        var hideTagLink = document.createElement('a');
                hideTagLink.setAttribute('href', '#');
                hideTagLink.setAttribute('class', '');
                hideTagLink.setAttribute('className', '');
                hideTagLink.onclick = function(){blindUpTags(divId); return false;};
                var hideTagTxt = document.createTextNode('Weniger Tags');
                hideTagLink.appendChild(hideTagTxt);
        divTagLink.appendChild(hideTagLink);


tagParentDiv.removeChild(tagDiv);
tagParentDiv.appendChild(divTagLink);


Effect.BlindDown(divId, {duration:1.5});
}


function blindUpTags(divId) {

        var tagDiv = document.getElementById('allTagsLink');
        var tagParentDiv = tagDiv.parentNode;

        var divTagLink = document.createElement('div');
                divTagLink.setAttribute('id', 'allTagsLink');
        var hideTagLink = document.createElement('a');
                hideTagLink.setAttribute('href', '#');
                hideTagLink.setAttribute('class', '');
                hideTagLink.setAttribute('className', '');
                hideTagLink.onclick = function(){blindDownTags(divId); return false;};
                var hideTagTxt = document.createTextNode('Alle Tags');
                hideTagLink.appendChild(hideTagTxt);
        divTagLink.appendChild(hideTagLink);


tagParentDiv.removeChild(tagDiv);
tagParentDiv.appendChild(divTagLink);


Effect.BlindUp(divId, {duration:1.5});
}


//IE Workaround, damit auch Images zum "labeln" benutzt werden k�nen


function imgLabels (){
  if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
  {
    var a = document.getElementsByTagName("label");
    for(var i=0,j=a.length;i<j;i++){
      if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
      {
        a[i].childNodes.item(0).forid = a[i].htmlFor;
        a[i].childNodes.item(0).onclick = function(){
          var e = document.getElementById(this.forid);
          switch(e.type){
            case "radio": e.checked|=1;break;
            case "checkbox": e.checked=!e.checked;break;
          }
        }
      }
    }
  }
}

/**
 * checks/unchecks checkboxes with classname "classname"
 * @param string<classname> classname classname of desired checkbox(es)
 * @param boolean onoff set true for check or false for uncheck
 */
function checkBoxes(classname, onoff){
  var checkboxes = document.getElementsByClassName(classname);
  checkboxes.each(function(checkbox){checkbox.checked = onoff});
}

/**
 *  checks boxes with classname for checked boxes, returns true if at least one is checked
 *  @param string <classname> classname of desired checkbox(es)
 */
function hasCheckedBoxes(classname){
  ret = false;
  var checkboxes = document.getElementsByClassName(classname);
  checkboxes.each(function(checkbox){
      if (checkbox.checked) ret = true;
  });
  return ret;
}

/** string.trim(), ph 12.3.07 */
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/, ''); };