/**
  <div id="slideshow-container"
    $images    []  - image array
    $index     0   - current index of images buffered
    $interval  0   - timer interval key
    $target    0   - current target of images to be hidden
  >
    <div class="slideshow-wrapper">
      <div class="layer-0">
        <img $position />
        <img $position />
        <img $position />
      </div>
      <div class="layer-1">
        <img $position />
        <img $position />
        <img $position />
      </div>
    </div>
  </div>
*/

(function($)
{

var methods =
{
  init: function(options)
  {
    return this.each(function()
    {
      var settings = 
      {
        images: [],
        index: 0,
        interval: 0,
        target: 0
      };

      if(options)
      {
        settings = $.extend(settings, options);
      }


      if(!settings.images.length)
      {
        return;
      }

      var $this = $(this);
      $this.data("settings", settings);

      render($this);

      /*

      */
    });

  },

  play: function()
  {
    return this.each(function()
    {
    });
  },

  pause: function()
  {
    return this.each(function()
    {
    });
  },

  start: function()
  {
    return this.each(function()
    {
    });
  },

  rotate: function()
  {
    return this.each(function()
    {
    });
  }

};

$.fn.slideshow = function(method)
{
  if(methods[method])
  {
    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  }
  else
  if(typeof method === 'object' || ! method)
  {
    return methods.init.apply(this, arguments);
  }
  else
  {
    $.error('Method ' +  method + ' does not exist on jQuery.slideshow');
  }
};

function createTimer(target)
{
  var $this = target;
  var settings = $this.data("settings");

  if (settings.interval)
  {
    return;
  }

  settings.interval = setInterval(function(){ rotateImages(target); }, 9000);
};

function killTimer(target)
{
  var $this = target;
  var settings = $this.data("settings");

  if(!settings.interval)
  {
    return;
  }

  clearInterval(settings.interval);
  settings.interval = 0;
};

function render(target)
{
    var $this = target;
    var settings = $this.data("settings");

    var images;
    var idx;
    var n;

    $this.append(" <div class=\"slideshow-wrapper\"> <div class=\"layer-0\"> <img /> <img /> <img /> </div> <div class=\"layer-1\"> <img /> <img /> <img /> </div> </div>");
    $this.data("settings", settings);

    var layer0 = $("div.layer-0 img", $this);
    var layer1 = $("div.layer-1 img", $this);

    layer0.bind("load", function()
    {
      var $this = $(this);
      
      $this.animate({opacity: 1.0}, 600);
      $this.unbind("load");

      createTimer(target);
    });

    images = settings.images[settings.index];
    layer0.css({opacity: 0.0});

    n = layer0.length < images.length ?
        layer0.length :
        images.length
    ;
    
    for(idx=0; idx<n; idx++)
    {
      $(layer0[idx]).data("position", idx);
      layer0[idx].id = "layer-0-" + idx;
      layer0[idx].src = images[idx];
    }

    images = settings.images[settings.index + 1];
    layer1.css({opacity: 0.0});

    for(idx=0; idx<n; idx++)
    {
      $(layer1[idx]).data("position", idx);
      layer1[idx].id = "layer-1-" + idx;
      layer1[idx].src = images[idx];
    }

    /*
    settings.index = 0;
    settings.target = 1;
    */

    settings.index = 1;
    settings.target = 0;
};

function rotateImages(target)
{
  var $this = target;
  var settings = $this.data("settings");

  var image;
  var images;
  var index_hide = settings.target; 
  var index_show = settings.target ? 0 : 1 ;

  var elements_hide = $(".layer-" + index_hide + " img", $this);
  var elements_show = $(".layer-" + index_show + " img", $this);
  /*

  console.log(index_hide, index_show);

  elements_hide.css({opacity: 0.0});
  elements_hide.hide();
  elements_show.css({opacity: 1.0});
  elements_show.show();
  */

  settings.index++;
  if(settings.index >= settings.images.length)
  {
    settings.index = 0;
  }

  images = settings.images[settings.index];

  var idx;
  var element;

  elements_hide.each(function(index)
  {
      /*console.log(index, this.id); */

    image = images[index];

    $(this).show();
    $(this).css({opacity: 1.0});
    $(this).animate({opacity: 0.0}, 600 + index * 600, function()
    {
      this.src = images[$(this).data("position")];//images[index];
    });
  });

  elements_show.each(function(index)
  {
    $(this).show();
    $(this).css({opacity: 0.0});
    $(this).animate({opacity: 1.0}, 600 + index * 600);
  });

  settings.target = index_show;
}

})(jQuery);