/**
 * Yahonza photo gallery widget
 */

var __activeGallery = "none";
var __popup = "";

function closeGalleryPopup()
{
  __popup.destroy();
}


function respondToClick(event) 
{
  if (null === $("gallerypopup"))
  {
    var displayDiv = document.createElement('div');
    displayDiv.id = "gallerypopup";
    displayDiv.setStyle("display: none;");
    document.body.appendChild(displayDiv);
  }

  __popup = new YahPopup("gallerypopup", "/new/public/gallery/galleryPopup1.html", "closeGalleryPopup", "500px", 400);
  __popup.render();
  var id = this.id;
  //doSlides(__activeGallery.url, event.currentTarget.id);
  doSlides(__activeGallery.url, id);

  // need to select image - no server side code allowed
  // coud client side replace ????
  // or further ajax lod in popup window ??
  // cos neex fwd and next
//  __popup = new YahPopup("gallerypopup", , closeGalleryPopup());
//  __popup.render();
  return false;
}


var YahGallery = Class.create
({
// target div, instance name
  initialize: function(target, popupTarget, url, columns,  popupWidth) 
  {
    this.target = target;
    this.popupTarget = popupTarget;
    this.url = url;
    this.columns = columns;
    this.popupWidth = popupWidth
  },


  render: function() 
  {
    __activeGallery=this;
    new Ajax.Request(this.url, {asynchronous: true,
                                method: 'get',
                                evalJSON: 'force',
                                onSuccess: this.renderGallery,
                                onFailure: this.renderGalleryFail});
  },


  renderGallery: function(response)
  {
    var html = "";
    var content = response.responseJSON.content;
    var target = __activeGallery.target;

    html = "<div class=\"yahgallery\">";
    html += "<div id=\"galleycontainer\" style=\"display: none\"><div style=\"z-index: 2\"></div></div>";
    for (index = 0; index < content.size(); ++index)
    {
      html += "<a id=\"" + index + "\" class=\"yahthumb\" href=\"#thumb\"><img class=\"thumbimage\" src=\"";
      html += content[index].thumb;
      html += "\"/><span><input type=\"hidden\" value=\"";
      html += content[index].image;
      html += "\"/>";
      html += content[index].annotation;
      html += "</span></a>";
    }
    html += "</div>";
    $(target).innerHTML = html;

    $$("a.yahthumb").each(function(item) 
    {
      item.observe('click', respondToClick);
    });
  },


  renderGalleryFail: function(response)
  {
    alert("failed " + response);
  }
});