var dd = {};

Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5))==6;

dd.ui = {};



dd.ui.Slideshow = Class.create({
  initialize : function(element, options){
    if(!(this.element=$(element))) return;
    this.options = Object.extend({
      item : 'li'
    }, options||{});
    this.index = 0;
    this.build();
    this.play();
  },
  build : function(){
    this.slides = [];
    this.element.select(this.options.item).each(function(item, i){
      var options = {};
      var img = item.down('img');
      options.src = img.src;
      if(img.title){
        options.caption = '<span class="t">'+img.title+'</span>';
      }
      if(img.getAttribute('longdesc')){
        options.caption += '<span class="l">'+img.getAttribute('longdesc')+'</span>';
      }
      var link = item.down('a');
      if(link){
        options.url = link.href;
      }
      this.slides.push(options);
      item.hide();
    }, this);
    this.size = this.slides.length;
    this.wrapper = new Element('div').setStyle({
      'position' : 'relative',
      'height' : '383px',
      'width' : '890px'
    });
    this.nextImg = new Element('img').setStyle({
      'display' :  'block',
      'height' : '100%',
      'width' : '100%',
      'top' : 0,
      'left' : 0,
      'position' : 'absolute',
      'zIndex' : 2
    }).hide();
    this.img = new Element('img', {src: this.slides[0].src}).setStyle({
      'display' : 'block',
      'zIndex' : 1
    });
    this.caption = new Element('div', {className:'caption'}).setStyle({
      'display' :  'block',
      'height' : '100%',
      'width' : '100%',
      'top' : 0,
      'left' : 0,
      'position' : 'absolute',
      'zIndex' : 3
    }).update('<div>'+this.slides[0].caption+'</div>');
    this.nextCaption = new Element('div', {className:'caption'}).setStyle({
      'display' :  'block',
      'height' : '100%',
      'width' : '100%',
      'top' : 0,
      'left' : 0,
      'position' : 'absolute',
      'zIndex' : 4
    });
    this.wrapper.insert(this.img);
    this.wrapper.insert(this.nextImg);
    this.wrapper.insert(this.caption);
    this.wrapper.insert(this.nextCaption);
   //alert('here4');
    this.element.insert(this.wrapper);
   //alert('here5');
    this.element.observe('click', this.onClick.bindAsEventListener(this));
  },
  onClick : function(e){
    e.stop();
    var link = this.slides[this.index].url;
    if(link){
      document.location=link;
    }
  },
  play : function(){
    this.p = new PeriodicalExecuter(this.next.bind(this), 5);
  },
  pause : function(){

  },
  next : function(){
    this.index++;
    this.transition(this.slides[this.index]);
    if(this.index==this.size-1){
      this.index = -1;
    }
  },
  previous : function(){

  },
  transition : function(slide){
    this.nextImg.src = slide.src;
    this.nextImg.setStyle({
      'opacity' : 0
    }).show();
    this.nextCaption.setStyle({
      'top' : '-383px'
    }).show().update('<div>'+slide.caption+'</div>');
    
    var fx = new s2.fx.Parallel([
      new s2.fx.Morph(this.nextImg, {
        'style' : 'opacity:1;'
      }),
      new s2.fx.Morph(this.caption, {
        'style' : 'top:383px;'
      }),
      new s2.fx.Morph(this.nextCaption, {
        'style' : 'top:0;'
      })
    ], {
      duration : 0.5,
      after : function(){
        this.img.src = this.nextImg.src;
        this.nextImg.hide();
        this.caption.update(this.nextCaption.innerHTML).setStyle({
          'top' : 0
        });
        this.nextCaption.hide();
      }.bind(this)
    });
    fx.play();
  }
});

$E = Event[(Object.isFunction(Event.register)) ? 'register' : 'observe'];