/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
function afficheGalerie()
{
$(document).ready(function(){
           jQuery(function($){
          $('#coms').after( $(document.createElement("div")).attr({id: "commentairePhoto"}));
  
  var settings = {
    thumbListId: "thumbs",
    imgViewerId: "viewer",
    activeClass: "active",
    after:"galerie",
    activeTitle: "Document en cours de visualisation",
    loaderTitle: "Chargement en cours...",
    loaderImage: "IMG/ajax-loader.gif"
  };

  var thumbLinks = $("#"+settings.thumbListId).find("a"),
    firstThumbLink = thumbLinks.eq(0),
    highlight = function(elt){
      thumbLinks.removeClass(settings.activeClass).removeAttr("title");
      elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
    },
    loader = $(document.createElement("img")).attr({
      alt: settings.loaderTitle,
      title: settings.loaderTitle,
      src: settings.loaderImage,
      style:"width:20px"
    });

  highlight(firstThumbLink);
  if(firstThumbLink.attr("href")!=null)
      {

        $("#"+settings.after).after(
    $(document.createElement("p"))
      .attr("id",settings.imgViewerId)
      .append(
        $(document.createElement("img")).attr({
          alt: "",
          src: firstThumbLink.attr("href")
        })
      ).append(
        $(document.createElement("br"))

      ).append(
        $(document.createElement("input"))
        .click(function(){if(this.value=="Pseudo"){this.value=''}})
        .attr({
          type: "text",
          maxlength:50,
          value: "Pseudo",
          id:"pseudo"
        })
      )
      .append(
        $(document.createElement("input"))
        .click(function(){if(this.value=="Saisir un commentaire..."){this.value=''}})
        .attr({
          type: "text",
          maxlength:300,
          value: "Saisir un commentaire...",
          id:"com"
        })
      ).append(
        $(document.createElement("br"))

      )
          .append(
        $(document.createElement("input"))
        .click(function(){ajoutCommentaire(firstThumbLink.attr("id"))})
        .attr({
          type: "button",
          value: "Commenter",
          id:"bouton"
        })
      ).append(
        $(document.createElement("br"))
      )
         
  );
              

    }
    
  affComs(firstThumbLink.attr("id"));
  var imgViewer = $("#"+settings.imgViewerId),
    bigPic = imgViewer.children("img");

  thumbLinks
    .click(function(e){
      e.preventDefault();
      var $this = $(this),
        target = $this.attr("href");
        var id=$this.attr("id");
             

      if (bigPic.attr("src") == target) return;
      highlight($this);
      imgViewer.html(loader);
      bigPic
        .load(function()
        {
          imgViewer.html($(this).fadeIn(250)).append(
        $(document.createElement("br"))

      ).append(
        $(document.createElement("input"))
        .click(function(){if(this.value=="Pseudo"){this.value=''}})
        .attr({
          type: "text",
          maxlength:50,
          value: "Pseudo",
          id:"pseudo"
        })
      )
      .append(
        $(document.createElement("input"))
        .click(function(){if(this.value=="Saisir un commentaire..."){this.value=''}})
        .attr({
          type: "text",
          maxlength:300,
          value: "Saisir un commentaire...",
          id:"com"
        })
      ).append(
        $(document.createElement("br"))

      )
          .append(
        $(document.createElement("input"))
        .click(function(){ajoutCommentaire(id)})
        .attr({
          type: "button",
          value: "Commenter",
          id:"bouton"
        })
      
      ).append(
        $(document.createElement("br"))
      )

        })
        .attr("src",target);

        affComs(id);
    });

});
});

}

function ajoutCommentaire(id)
{


    if(addslashes(document.getElementById("pseudo").value)!="Pseudo" && addslashes(document.getElementById("com").value)!="Saisir un commentaire..." && addslashes(document.getElementById("pseudo").value).replace(' ', '')!="" && addslashes(document.getElementById("com").value).replace(' ', '')!="")
        {
    


    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState == 4 && xhr.status == 200){
            var leselect = xhr.responseText;
            // On se sert de innerHTML pour rajouter les options a la liste
            document.getElementById('commentairePhoto').innerHTML = leselect;
            document.getElementById("pseudo").value="Pseudo";
            document.getElementById("com").value="Saisir un commentaire...";
            document.getElementById("com").style.height="20px";
            document.getElementById("com").style.marginTop="2px";
        }
    }

    // Ici on va voir comment faire du post
    xhr.open("POST",'application/view/photoCommentaire.php',true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    xhr.send("idPhoto="+id+"&pseudo="+addslashes(document.getElementById("pseudo").value)+"&texte="+addslashes(document.getElementById("com").value));
        }
}

function affComs(id)
{
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState == 4 && xhr.status == 200){
            var leselect = xhr.responseText;
            // On se sert de innerHTML pour rajouter les options a la liste
            document.getElementById('commentairePhoto').innerHTML = leselect;
            
        }
    }

    // Ici on va voir comment faire du post
    xhr.open("POST",'application/view/photoCommentaire.php',true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    xhr.send("idPhoto="+id);
}


function supCommentaire(id,idCom)
{



    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
        // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(xhr.readyState == 4 && xhr.status == 200){
            leselect = xhr.responseText;
            // On se sert de innerHTML pour rajouter les options a la liste
            document.getElementById('commentairePhoto').innerHTML = leselect;
        }
    }

    // Ici on va voir comment faire du post
    xhr.open("POST",'application/view/photoCommentaire.php',true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    xhr.send("idPhoto="+id+"&idCom="+idCom);
        
}