"use strict";

var _ = require('underscore');
var NodeView = require("./nodes/node").View;
var $$ = require ("substance-application").$$;

var DEFAULT_OPTIONS = {
  header: false,
  zoom: false
};

// Note: this is only a mix-in.
// Call this in your Prototype function:
//     _.extend(this, ResourceView.prototype);
//
// You should call the constructor, and make use of `this.renderHeader()` somewhere in the render() implementation

var ResourceView = function(options) {
  this.options = _.extend({}, DEFAULT_OPTIONS, options);
};

ResourceView.Prototype = function() {

  // add this to the prototype so that every class that uses this mixin has this property set
  this.isResourceView = true;

  this.render = function() {
    NodeView.prototype.render.call(this);
    this.renderHeader();
    this.renderBody();
    return this;
  };

  // Rendering
  // =============================
  //

  this.renderHeader = function() {
    var node = this.node;
    if (this.options.header) {
      var headerEl = $$('.resource-header');
      headerEl.appendChild($$('a.name', {
          href: "#",
          html: this.getHeader(),
          "sbs-click": "toggleResource("+node.id+")"
        }));
      if (this.options.zoom) {
        headerEl.appendChild($$('a.toggle-fullscreen', {
          "href": "#",
          "html": "<i class=\"icon-resize-full\"></i><i class=\"icon-resize-small\"></i>",
          "sbs-click": "toggleFullscreen("+node.id+")"
        }));
      }
      headerEl.appendChild($$('a.toggle-res', {
        "href": "#",
        "sbs-click": "toggleResource("+node.id+")",
        "html": "<i class=\"icon-eye-open\"></i><i class=\"icon-eye-close\"></i>"
      }));
      this.headerEl = headerEl;
      this.el.insertBefore(headerEl, this.content);
    }
  };

  this.renderBody = function() {
  };

  this.getHeader = function() {
    return this.node.getHeader();
  };
};
ResourceView.prototype = new ResourceView.Prototype();

module.exports = ResourceView;

@@ -1060,140 +1060,25 @@
 ild(
-$$('a.name', %7B%0A          href: %22#%22,%0A          html: this.getHeader(),%0A          %22sbs-click%22: %22toggleResource(%22+node.id+%22)%22%0A        %7D
+this.renderLabel(
 ));%0A
@@ -1661,24 +1661,225 @@
     %7D%0A  %7D;%0A%0A
+  this.renderLabel = function() %7B%0A    var labelEl = $$('a.name', %7B%0A      href: %22#%22,%0A      html: this.getHeader(),%0A      %22sbs-click%22: %22toggleResource(%22+this.node.id+%22)%22%0A    %7D)%0A    return labelEl;%0A  %7D;%0A%0A
   this.rende

Add ResourceView.renderLabel() which can be overridden.