// Global variable for the slideshow object
var ugSlideshow; 


/*
 * Each image is taken from a div with the following structure:
 * <div class="one_slide" style="display: none;">
 * <h2>Limpieza de la lámina de água</h2>
 * <p>
 * <a href="/es/servicios/lucha-contra-la-contaminacion-flotante">
 * </a>
 * <br/>
 * </p>
 * </div>
 *
 *
 */
function loadSlideshow(e) {
  ugSlideshow = new slideshow("ugSlideshow");

  // This method jumpts to the slide number you specify.
  // You can use this to make links that go to a specific slide,
  // or to go to the beginning or end of the slideshow.
  ugSlideshow.gotoSlide = function(n) {
   
    var that = this;

    if (n < this.slides.length && n >= 0) {
       that.current = n;
    }
   
    $("ss_image_and_text").hide();
    that.changeSlideContent();
    $("ss_image_and_text").show();
  }

  ugSlideshow.showSelectedSlide = function(event) {
    var slide_no = parseInt(Event.element(event).attributes["slide_no"].value, 10);
    ugSlideshow.stop();
    ugSlideshow.gotoSlide(slide_no);
    return false;
  }

  // Show direct link for each slide.
  ugSlideshow.showDirectLinks = function() {
    for (var i = 0; i < ugSlideshow.slides.length; i++) {
      var list_li = document.createElement('li');
      list_li.id = "slide_"+i+"_link";

      var link = document.createElement('a'); 
      link.setAttribute('title', ugSlideshow.slides[i].title);
      link.setAttribute('href', "#");
      link.innerHTML = i+1;
      link.setAttribute('id', 'ss_link_'+i);
      link.setAttribute('slide_no', i);
      list_li.appendChild(link)
      $("ss_direct_links_list").appendChild(list_li); 
      Event.observe(link.id, "click", ugSlideshow.showSelectedSlide);
    }
  }

  ugSlideshow.changeSlideContent = function() {
    var that = this;
    var slide = that.slides[ that.current ];
    slide.load();

    // Update the image.
    $("ss_img").src=slide.image.src; 

    // Update the text when the image is loaded.
    Event.observe("ss_img", "load", function(e) {that.display_text();})

    // Call the post-update hook function if one was specified
    if (typeof that.post_update_hook == 'function') {
       that.post_update_hook();
    }
  }

  // Redefine update funciton to use fade and appear effects.
  ugSlideshow.update = function() {
    if (! this.valid_image()) { return; }
  
    var that = this;

    // Convenience variable for the current slide
    var slide = this.slides[ this.current ];

    // Load the slide image if necessary
    slide.load();

    // Fade the image, when fade finishes, change the image source, then appear the image.
    new Effect.Fade("ss_image_and_text",  
                   { from: 1, 
	             to: 0.01, 
	             duration: 2.0, 
                     afterFinish: function() { 
			                        $("ss_img").src=slide.image.src; 
                                                // Update the text
                                                that.display_text();
                                                // Call the post-update hook function if one was specified
                                                if (typeof that.post_update_hook == 'function') {
                                                   that.post_update_hook();
                                                }
		                          } 
		   });


    new Effect.Appear("ss_image_and_text", {from: 0.01, to: 1, duration: 2.0, delay: 3.0});

  }

  ugSlideshow.post_update_hook = function() {
     var that = this;

      // For the select list with the slide titles,
      // set the selected item to the current slide
      var ll = $("ss_direct_links_list");
      ll.cleanWhiteSpace;
      $A(ll.childNodes).each(function(elem, index) {
         elem.className="passive";
      });
      $("slide_"+that.current+"_link").className="active";
    return;
  }


  ugSlideshow.prefetch = -1;
  // Load slides from the div.one_slide elements
  $$("div.one_slide").each (function(elem, index) {
      elem.cleanWhitespace();
      nodes =  $A(elem.childNodes);
      s = new slide();
      s.title = nodes.first().innerHTML;
      s.text = "<h2>"+s.title+"</h2>";
      nodes.each (function(n) {
          if (n.nodeName == "P") {
            s.text = s.text + "<p>"+n.innerHTML+"</p>"
          }
      });

      img_link = nodes[1];
      s.link = img_link.attributes[0].value;

      cont = $A(nodes[1].childNodes)
      img = cont[0];
      s.src = img.src; 
      //s.target = "ss_popup";
      s.timeout = 10000;
      ugSlideshow.add_slide(s);
    }
  );

  ugSlideshow.restore_position('SS_POSITION');
  //ugSlideshow.update();

  if (document.images) {

  // Tell the slideshow which image object to use
  ugSlideshow.image = document.images.ss_img;
  
  // Tell the slideshow the ID of the element
  // that will contain the text for the slide
  ugSlideshow.textid = "ss_text";
  
  // Show direct Links
  ugSlideshow.showDirectLinks();

  // Update the image and the text for the slideshow
  ugSlideshow.update();
 
  // Auto-play the slideshow
  ugSlideshow.play(10000);
  }

  ugSlideshow.next_and_play = function(e) {
    ugSlideshow.next();
    ugSlideshow.play();
    $("ss_start").className = "active";
    $("ss_stop").className = "passive";
    return false; 
  }

  ugSlideshow.stop = function(e) {
    ugSlideshow.pause();
    $("ss_stop").className = "active";
    $("ss_start").className = "passive";
    return false;
  }

  ugSlideshow.followLink = function(e) {
    ugSlideshow.hotlink();
  }

  // Set play and stop links.
  Event.observe("ss_start", "click", ugSlideshow.next_and_play);
  Event.observe("ss_stop", "click", ugSlideshow.stop);
  Event.observe("ss_img_link", "click", ugSlideshow.followLink);
  Event.observe("ss_text", "click", ugSlideshow.followLink);
}

function  unloadSlideshow(e) {
  ugSlideshow.save_position('SS_POSITION');
}


Event.observe(window, 'load', loadSlideshow);
Event.observe(window, 'unload', unloadSlideshow);