function Timeline(element) {
  var self = this;
  this.root = element;
  this.dates = this.root.find('h3');
  
  this.wrapup = function(target) {
    this.facts = target.next();
    this.temp = this.facts.next();
    while (!this.temp.is('h3') && this.temp.html()) {
      this.facts = this.facts.add(this.temp);
      this.temp = this.temp.next();
    }
    this.facts.wrapAll('<div class="wrapper"></div>');
  }
  for (var i = 0; i < this.dates.length; i++) {
    this.wrapup(this.dates.eq(i));
  }
/* end class to proto */

  this.root.after('<div class="time_table"></div>');
  this.date_line = this.root.next();

  this.events = this.dates.next();
  this.slide_left = this.root.offset().left;
  this.slide_right = this.root.offset().left + this.root.outerWidth();
  this.slide_offset = 30;
  this.date_line_left = 0;
  this.speed = 30;
  this.direction = 1;
  this.xer = 0;
  this.centered = true;
  this.date_line.css('left', this.date_line.position().left);
  this.root_width = this.root.outerWidth(true);
  for (var i = 0; i < this.dates.length; i++) {
    this.dates.eq(i).data('time_iter', i);
    this.dates.eq(i).data('time_left', i * -this.root_width)
    this.events.eq(i).prepend(this.dates.eq(i).clone());
    this.events.eq(i).data('full_height', this.events.eq(i).outerHeight(true));//.css({height : 0});
  }
  this.dates.hover(function() {
    $(this).addClass('over');
  }, function() {
    $(this).removeClass('over');
  });
/*
  this.move_out = function(time_iter) {
    self.events.eq(time_iter).animate({
      left: 1000
    }, {
      duration: 750, 
      easing: "easeInQuad",
      queue: false,
      complete: function() {
        $(this).animate({
          height: 0
        }, {
          duration: 250, 
          easing: "easeInQuad",
          queue: false
        });
      }
    });
  }
  this.move_in = function(time_iter) {
    self.events.eq(time_iter).animate({
      height: self.events.eq(time_iter).data('full_height')
    }, {
      duration: 250, 
      easing: "easeInQuad",
      queue: false
    }).animate({
      left: 0
    }, {duration: 750, 
      easing: "easeOutQuad",
      queue: false
    });
  }


  this.move_out = function(time_iter) {
    self.events.eq(time_iter).animate({
      left: 1000
    }, {
      duration: 750, 
      easing: "easeInQuad",
      queue: false
    });
  }
  this.move_in = function(time_iter) {
    self.events.eq(time_iter).animate({
      left: 0
    }, {duration: 750, 
      easing: "easeOutQuad",
      queue: false
    });
  }
*/	
  this.active = this.dates.eq(0);
  
  this.dates.click(function() {
    var me = $(this);
    me.siblings().removeClass('selected');
    me.addClass('selected');
    self.active = me;
    
    self.root.children().animate({
      left: self.active.data('time_left')
    }, {duration: 350, 
      easing: "easeOutQuad",
      queue: false
    });
    
    self.root.animate({
      height: self.events.eq(me.data('time_iter')).outerHeight()
    }, {duration: 750, 
      easing: "easeOutQuart",
      queue: false
    });
    //self.move_in(me.data('time_iter'));
    //self.move_out(self.active.data('time_iter'));
  });

  
/*
  this.mover = function() {
    self.date_line.stop(true);
    self.date_line.animate({
      left: self.date_line_left
    }, {duration: 750, 
      easing: "linear",
      queue: false
    });
  }
*/
  this.mover = function() {
    self.dates.eq(self.active.data('time_iter') + self.direction).trigger('click');
  }
  this.set_visible_dates = function(e) {
    self.xer = e.pageX;
    if (self.root.hasClass('left')) {
      if (self.direction != -1) {
        self.direction = -1;
      } else {
        
      }
      self.mover();
    } else if (self.root.hasClass('right')) {
      if (self.direction != 1) {
        self.direction = 1;
      } else {
        
      }
      self.mover();
    } else {
      self.date_line.stop(true);
    }
  }
  
  this.date_line.bind('mouseenter', function(e) {
    e.stopPropagation()
    self.date_line.stop(true);
  });
  
  this.back_home = function() {
    self.root.removeClass('left');
    self.root.removeClass('right');
    self.root.children().animate({
      left: self.active.data('time_left')
    }, {duration: 350, 
      easing: "easeOutQuad",
      queue: false
    });
    self.centered = true;
  }
  this.half_way_hover = function(e) {
    if (e.pageX <= (self.slide_left + self.slide_offset) && !self.root.hasClass('left')) {
      self.root.removeClass('right');
      self.root.addClass('left');
      self.root.children().animate({
        left: self.active.data('time_left') + self.speed
      }, {duration: 350, 
        easing: "easeOutQuad",
        queue: false
      });
      self.centered = false;
    } else if (e.pageX >= (self.slide_right - self.slide_offset) && !self.root.hasClass('right')) {
      self.root.removeClass('left');
      self.root.addClass('right');
      self.root.children().animate({
        left: self.active.data('time_left') - self.speed
      }, {duration: 350, 
        easing: "easeOutQuad",
        queue: false
      });
      self.centered = false;
    } else if ((e.pageX < self.slide_right - self.speed - self.slide_offset) && (e.pageX > self.slide_left + self.speed + self.slide_offset) && !self.centered) {
      self.back_home();
    }
  }
  this.root.bind('mouseleave', this.back_home);
  this.root.bind('mousemove', this.half_way_hover);
  this.root.bind('click', this.set_visible_dates);

/*	
  this.slide_left = this.date_line.offset().left;
  this.slide_right = this.date_line.offset().left + this.date_line.parent().outerWidth();
  this.slide_offset = 50;
  this.date_line_left = 0;
  this.date_line.css('left', this.date_line.position().left);
  
  
  self.select_choice = true;
  
  this.set_visible_dates = function(e) {
    e.stopImmediatePropagation();
    if (e.pageX < self.slide_left + self.slide_offset) {
      self.date_line_left = self.date_line_left + 5;
      self.date_line.css('left', self.date_line_left)
    } else if (e.pageX > self.slide_right - self.slide_offset) {
      self.date_line_left = self.date_line_left - 5;
      self.date_line.css('left', self.date_line_left)
    }
  }
*/

/*	
  this.date_line.bind('mousemove', this.set_visible_dates);

  this.get_dates = function(e) {
    var time_iter = $(this).data('time_iter');
    $(this).addClass('selected');
    self.events.eq(time_iter).animate({
      height: self.events.eq(time_iter).data('full_height')
    }, {
      duration: 250, 
      easing: "easeInQuad",
      queue: false
    }).animate({
      left: 0
    }, {duration: 750, 
      easing: "easeOutQuad",
      queue: false
    });
  }
  this.loose_dates = function(e) {
    var time_iter = $(this).data('time_iter');
    $(this).removeClass('selected');
    self.events.eq(time_iter).animate({
      left: 1000
    }, {
      duration: 750, 
      easing: "easeInQuad",
      queue: false,
      complete: function() {
        $(this).animate({
          height: 0
        }, {
          duration: 250, 
          easing: "easeInQuad",
          queue: false
        });
      }
    });
  }
  
  this.date_select = function(e) {
    e.stopImmediatePropagation();
    if(self.select_choice) {
      self.dates.bind('mouseover', self.get_dates);
    } else {
      self.dates.bind('mouseover', self.loose_dates);
    }
  }
  this.date_unselet = function(e) {
    self.select_choice = !self.select_choice
    self.dates.unbind('mouseover');
  }
  this.root.bind('mousedown', this.date_select);
  $(document.body).bind('mouseup', this.date_unselet);
  
*/
  this.date_line.append(this.dates);
  new Slider(this.date_line, 4, 8);
  this.root.css({'visibility': 'visible'});
  this.root.wrapInner('<div class="event_table"></div>').children().width(this.events.length * 461);
  this.active.trigger('click');
}