// Slideshow
(function(){
  Slideshow = Class.create({
    initialize: function(slideshow){
      this.slideshow = $(slideshow);
      this.photos = this.slideshow.select(".photo");
      this.dots = this.slideshow.select(".dot");
      this.timeout = 5;
      this.current = 0;
      this.timer = null;
      this.photos_length = this.photos.length;

      this.photos.each(function(photo, x){
        photo.setStyle({zIndex: x == 0 ? 1 : 0});
      }, this);

      this.slideshow.on("click", "a.dot", this.dotClick.bind(this));

      this.startTimeout();
    },

    dotClick: function(event){
      event.stop();

      clearTimeout(this.timer);
      this.show(this.dots.indexOf(event.element()));
      this.startTimeout();
    },

    show: function(index){
      var self = this;
      if(index == this.current) return; 
  
      this.resetZindexes(index);
      this.resetDots(index);

      this.photos[this.current].fade({
        afterFinish: function(effect){
          effect.element.style.zIndex = 0;
          Element.show(effect.element);
          Element.setOpacity(effect.element, 1);
        }
      });

      this.current = index;// (this.current + 1) % this.photos_length;
    },

    resetDots: function(index){
      this.dots.invoke("removeClassName", "selected");
      this.dots[index].addClassName("selected");
    },

    resetZindexes: function(index){
      this.photos.each(function(x){ x.setStyle({zIndex: 0}); });

      // place next image behind current
      this.photos[index].setStyle({zIndex: 1});
      this.photos[this.current].setStyle({zIndex: 2});
    },

    startTimeout: function(){
      this.timer = setTimeout(function(){
        this.show((this.current + 1) % this.photos_length);
        this.startTimeout();
      }.bind(this), this.timeout * 1000);
    }
  });

  document.observe("dom:loaded", function(){ 
    $$(".block_article_photo.slideshow").each(function(slideshow){
      window.slideshow = new Slideshow(slideshow);
    })
  })
})();


// organization_widget
(function(){
  var OrganizationWidget = Class.create({
    initialize: function(widget){
      this.widget = $(widget);
      this.input_search = this.widget.down(".search");
      this.employees = Employee.all();

      this.input_search.on("keyup", this.keyup.bind(this));
      this.widget.on("click", ".employee", this.handleClick.bind(this));
    },

    keyup: function(event){
      this.search(this.input_search.value)
    },

    search: function(value){
      this.employees.each(function(employee){
        if( employee.match(value) )
          employee.show();
        else
          employee.hide();
      });

      this.widget.select(".department > h2").each(function(header){
        if( this.has_visisble_employees(header.innerHTML))
          header.show();
        else
          header.hide();
      }, this);
    },

    has_visisble_employees: function(header){
      return this.employees.any(function(e){
        return e.department == header && e.visible
      });
    },

    handleClick: function(event){
      var element = event.element();
      element = element.hasClassName("employee") ? element : element.up(".employee");
      var mediabox = element.down(".employee_inner");
      var show = element.down(".show");

      if( mediabox.visible() ){
        mediabox.blindUp({duration: .5});
        show.blindDown({duration: .5});
      } else {
        show.blindUp({duration: .5});
        mediabox.blindDown({duration: .5});
      }
    }
  });

  document.observe("dom:loaded", function(){
    $$(".organization_widget").each(function(widget){
      new OrganizationWidget(widget);
    });
  });
})();