var DetailsView = Class.create({
  initialize: function(detail_view_occurence, controller) {
    this.controller = controller;
    this.element = $(detail_view_occurence);
    this.trip_sections = $A(this.element.getElementsByClassName('trip_sections'));
    this.trip_sections.each(function(el) { 
      el.observe("mouseover", this.onMouseOver.bindAsEventListener(this)); 
      el.observe("mouseout", this.onMouseOut.bindAsEventListener(this));
    }.bind(this));
  },
  
  onMouseOver: function(event) {
    var element = Event.element(event);
    if (element && !element.hasClassName('trip_section'))
      element = element.up('.trip_section');
    if(element && !element.hasClassName('hovered')){
      element.addClassName('hovered');
      var elPieces = element.id.split('_');
      var tripIndex = parseInt(elPieces[1]);
      var tripSectionIndex = parseInt(elPieces[3]);
      if ( this.controller!=null) {
        this.controller.tripSectionOver(tripIndex, tripSectionIndex);
      }
    }
  },
  
  onMouseOut: function(event) {
    var element = Event.element(event);
    if (element && !element.hasClassName('trip_section'))
      element = element.up('.trip_section');
    if(element && element.hasClassName('hovered')) {
      element.removeClassName('hovered');
      var elPieces = element.id.split('_');
      var tripIndex = parseInt(elPieces[1]);
      var tripSectionIndex = parseInt(elPieces[3]);
      if ( this.controller!=null) {
        this.controller.tripSectionOut(tripIndex, tripSectionIndex);
      }
    }
  },
  
  release: function() {
    this.tripSections.each(function(el) { 
      el.stopObserving('mouseover');
      el.stopObserving('mouseout');
    });
    this.tripSections.clear();
  }
});