/* SlideShow for Sensement
 *
 * This library requires the JavaScript Framework "JQuery"
 * For details, see http://jquery.com/
/*--------------------------------------------------------------------------------*/

// new SlideShow({images:array_with_urls, container: $("promo"), interval: 3000});

var SlideShow = function(options) {
  this.initialize(options);
}

$.extend(SlideShow.prototype, {
  initialize: function(options) {
    this.images = options.images;
    this.container = options.container;
    this.interval = options.interval;
  this.defaultImage = options.defaultimage;
  this.defaultLink = options.defaultlink;
    this.i = 1;
    this.c = 0;
  },
  run: function() {
    this.container.css('position', "relative");
    this.container.css('zoom', "1");
  this.container.attr('class', 'slider-div');
    this.container.html('\
    <div class="first" style="text-align:center;position:absolute;width:100%;top:0px;left:0px;"><a id="ss_first_a"><img id="ss_first"></a></div>\
    <div class="second" style="text-align:center;position:absolute;width:100%;top:0px;left:0px;"><a id="ss_second_a"><img id="ss_second"></a></div>\
    ');
    this.first = $("#ss_first");
  this.first_a = $("#ss_first_a");
    this.second = $("#ss_second");
  this.second_a = $("#ss_second_a");
  var _this = this;

  this.first.bind('load', function() {    
      this.loaded = true;
    });
    this.second.bind('load',function() {
      this.loaded = true;
    });
    this.first.attr('loaded', false);
    this.second.attr('loaded', false);
  this.second.hide();
    //this.second.css('opacity', 0);
    //this.second.css('filter', "alpha(opacity=0)");

  if(this.images.length <=1)
  {
      this.first.attr('src',(this.images.length == 0)?this.defaultImage:this.images[0]['url']);
    this.first_a.attr('href', (this.images.length == 0)?this.defaultLink:this.images[0]['link']);
    return;
  }
    this.first.attr('src',this.images[0]['url']);
  this.first_a.attr('href', this.images[0]['link']);
    this.second.attr('src', this.images[1]['url']);
  this.second_a.attr('href', this.images[1]['link']);
    setInterval(function(){_this.switchimages();}, this.interval);
  },  
  switchimages: function() {
    var _this = this;
    if(this.c % 2) {
      // launch effect only if new image fully loaded
      if(this.first.attr('loaded')) {
      this.first.fadeIn("slow");
      this.second.fadeOut("slow", function(){_this.changeimages();});
    }
  }
  else {
      // launch effect only if new image fully loaded
      if(this.second.attr('loaded')) {
        this.first.fadeOut("slow");
      this.second.fadeIn("slow", function(){_this.changeimages();});
    }
  }
  },
  changeimages: function() {
  if(++this.i >= this.images.length)
    this.i=0;
    if(this.c % 2) {
      this.second.attr('loaded', false);
    this.second.attr('src',this.images[this.i]['url']);
    this.second_a.attr('href', this.images[this.i]['link']);
  }
  else {
      this.first.attr('loaded', false);
    this.first.attr('src', this.images[this.i]['url']);
    this.first_a.attr('href', this.images[this.i]['link']);
  }
  this.c++;
  }
});