'use strict';

var $ = require('../util/jquery');
var oo = require('../util/oo');
var Component = require('./Component');
var $$ = Component.$$;

function Panel() {
  Component.apply(this, arguments);
}

Panel.Prototype = function() {

  // This method must be overriden with your panel implementation
  this.render = function() {
    return $$("div")
      .addClass("panel")
      .append(
        $$('div')
          .addClass('panel-content')
          .append('YOUR_PANEL_CONTENT')
      );
  };

  this.getController = function() {
    return this.context.controller;
  };

  this.getDocument = function() {
    return this.props.doc;
  };

  this.getPanelContentElement = function() {
    return this.refs.panelContent.$el[0];
  };

  this.getScrollableContainer = function() {
    return this.refs.panelContent.$el[0];
  };

  // Returns the cumulated height of a panel's content
  this.getContentHeight = function() {
    // initialized lazily as this element is not accessible earlier (e.g. during construction)
    // get the new dimensions
    // TODO: better use outerheight for contentheight determination?
    var contentHeight = 0;
    var panelContentEl = this.getPanelContentElement();

    $(panelContentEl).children().each(function() {
     contentHeight += $(this).outerHeight();
    });
    return contentHeight;
  };

  // Returns the height of panel (inner content overflows)
  this.getPanelHeight = function() {
    var panelContentEl = this.getPanelContentElement();
    return $(panelContentEl).height();
  };

  this.getScrollPosition = function() {
    var panelContentEl = this.getPanelContentElement();
    return $(panelContentEl).scrollTop();
  };

  // Get the current coordinates of the first element in the
  // set of matched elements, relative to the offset parent
  // Please be aware that it looks up until it finds a parent that has
  // position: relative|absolute set. So for now never set relative somewhere in your panel
  this.getPanelOffsetForElement = function(el) {
    var offsetTop = $(el).position().top;
    return offsetTop;
  };

  this.scrollToNode = function(nodeId) {
    // var n = this.findNodeView(nodeId);
    // TODO make this generic
    var panelContentEl = this.getScrollableContainer();

    // Node we want to scroll to
    var targetNode = $(panelContentEl).find('*[data-id="'+nodeId+'"]')[0];

    if (targetNode) {
      $(panelContentEl).scrollTop(this.getPanelOffsetForElement(targetNode));
    } else {
      console.warn(nodeId, 'not found in scrollable container');
    }
  };
};

oo.inherit(Panel, Component);

module.exports = Panel;

@@ -1681,343 +1681,501 @@
 %0A%0A  
-// Get the current coordinates of the first element in the%0A
+this.getPanelOffsetForElement = function(el) %7B%0A    // initial offset%0A    var offset = $(el).position().top;%0A%0A 
   
+ 
 // 
-set of matched elements, relative to the offset parent%0A
+Now look at the parents%0A    function addParentOffset(el) %7B%0A      var parentEl = el.parentNode;%0A%0A   
   
+ 
 // 
-Please be aware that it looks up until it finds a parent that has%0A  // position: relative%7Cabsolute set. So for now never set relative somewhere in your panel%0A  this.getPanelOffsetForElement = function(el
+Reached the panel or the document body. We are done.%0A      if ($(el).hasClass('panel-content-inner') %7C%7C !parentEl) return;%0A%0A      // Found positioned element (calculate offset!)%0A      if ($(el).css('position') === 'absolute' %7C%7C $(el).css('position') === 'relative'
 ) %7B%0A    
 var 
@@ -2174,22 +2174,20 @@
     
-var
+   
  offset
-Top
  
++
 = $(
@@ -2206,16 +2206,100 @@
 ().top;%0A
+      %7D%0A      addParentOffset(parentEl);%0A    %7D%0A%0A    addParentOffset(el.parentNode);%0A
     retu
@@ -2307,19 +2307,16 @@
 n offset
-Top
 ;%0A  %7D;%0A%0A

Make Panel.scrollTo work in presence of relative positioned children.