var Slider = new Class({
  initialize: function(id){
    this.container = $(id);
    this.nextEl = this.container.getElement(".next");
    this.previousEl = this.container.getElement(".previous");    
    this.windowEl = this.container.getElement(".window");
    this.reelEl = this.windowEl.getFirst();
    this.elements = this.reelEl.getChildren();
    
    this.current = 0;
    this.currentPos = 0;
    var pos = this.positions = $A([]);
    
    // Setup reel width;
    var width = 0;
    this.elements.each(function(el){
      pos.push(width);      
      width += el.getSize().x;
    });
    this.reelEl.set("styles", {
      "width" : width + 100
    });
    
    // Setup prev/next
    this.nextEl.addEvents({
      click : function(ev){ev.preventDefault(); this.next()}.bind(this)
    });
    this.previousEl.addEvents({
      click : function(ev){ev.preventDefault(); this.previous()}.bind(this)
    });
    
    this.fx = new Fx.Morph(this.reelEl);
  },
  next : function(){
    if(this.current + 1 == this.elements.length){
      return;
    }
    this.current += 1;
    this.goTo(this.current);
  },
  previous : function(){
    if(this.current == 0){
      return;
    }
    this.current -= 1;    
    this.goTo(this.current);
  },
  goTo : function(idx){
    var el = this.elements[idx];
    var x = this.positions[idx];
    this.fx.start({"left": [this.currentPos,-1* x]});
    this.currentPos = -1 *x;
  }
});

var Tabs = new Class({
  initialize : function(id){
    this.container = $(id);
    this.tabElements = this.container.getElements(".tabs a");
    this.windowEl = this.container.getElement(".window");
    this.contentElements = this.windowEl.getChildren();
    
    this.currentTab = this.container.getElement(".tabs a.active");
    this.currentIdx = this.tabElements.indexOf(this.currentTab);
    
    this.activate(this.currentTab);
    
    this.tabElements.addEvents({
      click: function(ev){
        this.activate($(ev.target));
        ev.preventDefault();
      }.bind(this)
    })
  },
  activate : function(tabEl){
    var idx = this.tabElements.indexOf(tabEl);
    this.contentElements[this.currentIdx].removeClass("active");
    this.tabElements[this.currentIdx].removeClass("active");    
    this.currentIdx = idx;
    this.contentElements[this.currentIdx].addClass("active");   
    this.tabElements[this.currentIdx].addClass("active");         
  }
});

var Munten = {};
Munten.GeschiedenisVanMunten = {};

Munten.GeschiedenisVanMunten.Timeline = new Class({
  initialize: function(id){
    var el = this.element = $(id);
    this.element.getElements(".line a").addEvents({
      click : function(ev){
        var t = $(ev.target);
        el.set("class",t.get("class"));
      }
    });
  }
});

// Enable IE hovering
window.addEvent('domready',function() { 
  $$('button').each(function(el){
    el.addEvents({
      'mouseenter' : function() {
        el.addClass("hover");
      },
      'mouseleave' : function() {
        el.removeClass("hover");
      }
    })
  });
});