On Layout and Panes and Regions

On initialization, the Reader adds the class cozy-container to its container element, and then adds the following element hierarchy:

<div class="cozy-container">
  <div class="cozy-module-top"></div>
  <div class="cozy-module-main">
    <div class="cozy-module-left"></div>
    <div class="cozy-module-book-cover">
       <div class="cozy-module-book"></div>
    </div>
    <div class="cozy-module-right"></div>
  </div>
  <div class="cozy-module-bottom"></div>
</div>

Controls are added to a region, e.g.

cozy.control.title({ region: 'top.header.left' }).addTo(reader);

The region string is parsed into a hierarchy of panels; top.header.left results in:

<div class="cozy-module-top">
  <div class="cozy-panel-header">
    <div class="cozy-panel-left">
      <div class="cozy-control">
        <!-- control -->
      </div>
    </div>
  </div>
</div>

So if you set up the following controls:

cozy.control.title({ region: 'top.header.left' }).addTo(reader);
cozy.control.contents({ region: 'top.toolbar.left' }).addTo(reader);
cozy.control.preferences({ region: 'top.toolbar.right' }).addTo(reader);
cozy.control.pagePrevious({ region: 'left.sidebar' }).addTo(reader);
cozy.control.pageNext({ region: 'right.sidebar' }).addTo(reader);
cozy.control.publicationMetadata({ region: 'bottom.footer' }).addTo(reader);

you'd have the structure:

<div class="cozy-container">
  <div class="cozy-module-top">
    <div class="cozy-panel-header">
      <div class="cozy-panel-left"></div>
    </div>
    <div class="cozy-panel-toolbar">
      <div class="cozy-panel-left"></div>
      <div class="cozy-panel-right"></div>
    </div>
  </div>
  <div class="cozy-module-main">
    <div class="cozy-module-left">
      <div class="cozy-panel-sidebar"></div>
    </div>
    <div class="cozy-module-book-cover">
       <div class="cozy-module-book"></div>
    </div>
    <div class="cozy-module-right">
      <div class="cozy-panel-sidebar"></div>
    </div>
  </div>
  <div class="cozy-module-bottom">
    <div class="cozy-panel-footer"></div>
  </div>
</div>