

function SlideShow(){
  this.guid = "slideshow-"+(Math.random * 1000).round
  this.timeBetweenSentences = 4000;
  this.timeBetweenPairs = 4500;
  this.timeBetweenSlides = 5000;
  this.timeOffset = 0;
  this.slides = [];
  this.Slide = function(image){
    this.image = image;
    this.pairs = [];
    this.addPair = function(s1,s2){
      this.pairs[this.pairs.length] = [s1,s2];
    }
  }
  this.slidePointer = 0;
  this.addImage = function(imgSrc){
    this.slides[this.slides.length] = new this.Slide(imgSrc);
  }
  // add sentence pair to current image
  this.addPair = function(s1, s2){
    this.slides[this.slides.length-1].addPair(s1,s2);
  }
  this.run = function(){
    document.writeln('<div class="slideshow" id="' + this.guid + '">');
    document.writeln('The slideshow will begin "en un momentito"');
    document.writeln('</div>');
    this.slideTimeout(5000);
  }
  this.nextSlide = function(){
    /// foreach pair - fade in 1st sentence, pause, fade in 2nd sentence
    if(this.slidePointer >= this.slides.length){
      $(this.guid).innerHTML = "The slideshow is now finished";
      return;
    }
    var html = '';
    var curSlide = this.slides[this.slidePointer];
    // preload image
    var img = new Image();
    img.src = curSlide.image;
    html += '<img src="' + curSlide.image + '" id="slide-image-' + this.guid + '" style="display:none;" />';
    pairs_html = '<div class="slideshow-pair"><div style="display:none" class="first" id="first-sentence-' + this.guid + '"></div>';
    pairs_html += '<div style="display:none" class="second" id="second-sentence-' + this.guid + '"></div></div>';
    html += '<div id="pairs-' + this.guid + '">' + pairs_html + '</div>';
    $(this.guid).innerHTML = html;
    Effect.Appear('slide-image-'+ this.guid, { duration: 3.0 });
    pairs = $('pairs-' + this.guid)
    for(var j=0; j<curSlide.pairs.length; j++){
      var curPair = curSlide.pairs[j];
      this.timeOffset += this.timeBetweenPairs;
      this.sentenceTimeout('first', curPair[0], this.timeOffset);
      this.timeOffset += this.timeBetweenSentences;
      this.sentenceTimeout('second', curPair[1], this.timeOffset);
    }

    this.slidePointer++;    
    this.slideTimeout(this.timeBetweenSlides + this.timeOffset);
  }
  this.sentenceTimeout = function(num, sentence, ms){
    var _self = this;
    setTimeout(function(ms){
      var the_id = num + '-sentence-' + _self.guid;
      if(num=='first'){
        $('first-sentence-' + _self.guid).style.display = 'none';
        $('second-sentence-' + _self.guid).style.display = 'none';
      }
      $(the_id).innerHTML = sentence;
      Effect.Appear(the_id, { duration: 2.0} );
    }, ms);
  }
  this.slideTimeout = function(ms){
    var _self = this;
    setTimeout(function(ms){
      _self.nextSlide();
      _self.timeOffset=0;
    }, ms);
  }




}

