/**
 * Yahonza slideshow
 */

var __activeSlidehow = "none";

var YahSlideshow = Class.create
({
  initialize: function(target, url, imageIndex, width)
  {
    this.target = target;
    this.url = url;
    this.imageIndex = imageIndex;
    this.width = width
  },


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



  showImage: function(index)
  {
    //$("loading_spinner").hide();
    $("image-swap").textContent = __activeSlideshow.content[index].image;
    html =  "<img class=\"yahimgtag\"  style=\"padding-right: 30px; width: " + __activeSlideshow.width + "\" src=\"" + $("image-swap").textContent + "\"/>";
    html += "<p id=\"image-swap\" style=\"display: none\"></p>";
    $("image-holder").innerHTML = html;
    //$("image-holder").setStyle("display: block");
    $("image-holder").appear({ duration: 0.5 });
    $("loading_spinner").hide();
  },



  renderSlideshow: function(response)
  {
    var html = "";
    var content = response.responseJSON.content;
    var target = __activeSlideshow.target;
    var width = __activeSlideshow.width;
    var newImage = null;           

    __activeSlideshow.content = content;
    __activeSlideshow.imageCount = content.length;
    html = "<div class=\"yahnavimgdiv\"><a href=\"javascript:slides.showPrevious();\" class=\"yahnavimglink\"><img class=\"yahnavimg\" src=\"/new/public/components/yahslideshow/arrow-prev.png\"/></a></div>";
    html += "<div class=\"image-container\" style=\"width: " + width + "\">";
    html += "<div style=\"display: none\" id=\"image-holder\"></div>";
    html += "<div class=\"loading_spinner\" id=\"loading_spinner\">Loading...</div>";
    html += "<p id=\"image-swap\" style=\"display: none\"></p></div>";
    html += "<div class=\"yahnavimgdivright\"><a href=\"javascript:slides.showNext();\" class=\"yahnavimglink\"><img class=\"yahnavimg\" src=\"/new/public/components/yahslideshow/arrow-next.png\"/></a></div>";
    $(target).innerHTML = html;

    newImage = new Image();      
    newImage.src = content[__activeSlideshow.imageIndex].image;
    if (newImage.complete) 
    {        
      __activeSlideshow.showImage(__activeSlideshow.imageIndex);
    } 
    else
    {
      newImage.onload = function()
                        {  
                          __activeSlideshow.showImage(__activeSlideshow.imageIndex);
                        }.bind(this);
    }
  },

 

  showNext: function() 
  {
    var imageShow = this.imageIndex - 1 + 2;
    var imageHide = this.imageIndex;

    if (imageShow == this.imageCount) 
    {
      this.swapImage(0, imageHide);	
      this.imageIndex = 0;
    } 
    else 
    {
      this.swapImage(imageShow, imageHide);			
      ++this.imageIndex;
    }
  },


  showPrevious: function () 
  {
    var imageShow = this.imageIndex - 1;
    var imageHide = this.imageIndex;

    if (this.imageIndex == 0) 
    {
      this.swapImage(this.imageCount - 1, imageHide);	
      this.imageIndex = this.imageCount - 1;		
    } 
    else 
    {
      this.swapImage(imageShow, imageHide);			
      --this.imageIndex;
    }
  },


  swapImage: function(newImageIndex, oldImageIndex)
  {		
    var html;
    var newImage;

    $("image-swap").textContent = this.content[newImageIndex].image;
    $("image-holder").hide();
    $("loading_spinner").show();

    newImage = new Image();      
    newImage.src = this.content[newImageIndex].image;
    if (newImage.complete) 
    {        
      __activeSlideshow.showImage(newImageIndex);
    } 
    else
    {
      newImage.onload = function()
                        {  
                          __activeSlideshow.showImage(newImageIndex);
                        }.bind(this);
    }
  }
});