var SproutSlideShow = Class.create();



SproutSlideShow.prototype = {

 initialize: function(container,options) {

      this.container = container

        this.parent    = this.container+'_holder'

        this.pe        = null

        this.stoppedAt = null;

        if (!options || !options.height) {

            alert('You need to set a height for the slideshow!');

            return

        }

        this.options   = {

          seconds  : 5,

            fadeDuration : 1,

            height : 0,

            list : null

        }

        Object.extend(this.options, options || {});

        this.createParent();

    },

    

    start: function(withoutInit) { 

      if (this.options.list && !withoutInit) {

        this.addListClass(0);

          this.addListEvents();

        }

    this.pe = new PeriodicalExecuter(this.cycle.bind(this), this.duration())  

  }, 

    

    stop : function() {

        this.pe.stop()

    },

    

    cycle: function() { 

    new Effect.Fade(this.container, {  

      duration: this.options.fadeDuration, 

      fps: 50, 

      afterFinish: this.finish.bind(this)

        })

  },

    

    finish : function() {

        var imgs = this.elements();

      for(var i = 0;i<imgs.length;i++) {

                    if (Element.visible(imgs[i])) {

                        Element.hide(imgs[i])

                        Element.show(imgs[(i+1)%imgs.length])

                        this.addListClass((i+1)%imgs.length);

                        break

                    }

                }

    new Effect.Appear(this.container, {

       duration: this.options.fadeDuration,

       fps: 50

    })

    },

    

    addListClass : function(num) {

        //$('debug').update(num)

        if (this.options.list) {

            var listItems = $$('#' + this.options.list + ' a ');

            for(var i=0;i<listItems.length;i++) {

              if (i == num) {

              Element.addClassName(listItems[i],'current')

                } else {

                    Element.removeClassName(listItems[i],'current')

                }

            };

        }

    },

    addListEvents : function() {

        var listItems = $$('#' + this.options.list + ' a ');

        for(var i=0;i<listItems.length;i++) {

            listItems[i].onmouseover = this.listOver.bind(this)

            listItems[i].onmouseout  = this.listOut.bind(this)

        }

    },

    listOver : function(e) {

        var imgs = this.elements();

        var event = e || window.event;

      for(var i = 0;i<imgs.length;i++) {

          Element.hide(imgs[i]);

        }

        var listItems = $$('#' + this.options.list + ' a ');

        var target = Event.element(event);



      for(var i=0;i<listItems.length;i++) {

          if (listItems[i] == target) {

                this.stop();

                this.stoppedAt = i;

                Element.addClassName(listItems[i],'current')

                Element.show(imgs[i]);

            } else {

                Element.removeClassName(listItems[i],'current')

            }

        }

    },

    listOut : function(e) {

        this.start(true);

    },



    elements : function() {

      return $(this.container).immediateDescendants();

    },

    

    duration : function() {

        return this.options.fadeDuration * 2 + this.options.seconds;

    },

    

    //Create parent DIV to control height, when hiding/showing elements

    createParent : function() {

      new Insertion.Before(this.container,'<div id="'+this.parent+'" style="height:'+this.options.height+'px"></div>');

        var html = $(this.container).innerHTML

        Element.remove(this.container);

        $(this.parent).update('<div id="'+this.container+'">'+html+'</div>');

    }

    

}