<!--
Copyright Genentech - A member of the Roche Group
@author Adrian Nowicki <adrian.nowicki@contractors.roche.com>
-->
<div id="wrap">
    <div class="container-fluid">
        <header class="row-fluid">
            <div class="span12 navbar">
                <div class="navbar-inner">
                    <a class="brand" href="#">ExpressionPlot</a>
                    <p class="navbar-text pull-left"></p> 
                    <ul class="nav pull-right">
                        <li id="ep-header-tools-menu" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <span class="caret"></span></a>
                            <ul class="dropdown-menu"></ul>
                        </li>
                        <li id="ep-header-options-menu" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Options <span class="caret"></span></a>
                            <ul class="dropdown-menu"></ul>
                        </li>
                        <li><a>Help</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <div id="ep-landing-row-copy" class="row-fluid ep-landing-row ep-page-row">
            <div class="offset1 span10">
                <p class="lead">
                    <strong>ExpressionPlot</strong> is a portal into microarray and RNA-Seq gene expression
                    data both generated at Genentech and imported from outside sources.
                </p>
            </div>
        </div>
        <div id="ep-landing-row-form-container" class="row-fluid ep-landing-row ep-page-row">
            <div class="offset1 span10">
                <div id="ep-landing-row-forms" class="row-fluid light-blue"></div>
            </div>
        </div>
        <div id="ep-landing-row-tool-overview" class="row-fluid ep-landing-row ep-page-row">
            <div id="ep-landing-tool-overview" class="offset1 span10 light-blue">
                <div class="row-fluid">
                    <div class="span12">
                        <h4>The tools to answer questions about expression data...</h4>
                        <p>There are many ways to view your expression data with these.</p>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span5">
                        <ul class="nav nav-list">
                        </ul>
                    </div>
                    <div class="span7">
                    </div>
                </div>
            </div>
        </div>
        <div id="ep-analysis-page-primary-form-row" class="row-fluid ep-page-row ep-analysis-row">
            <div class="offset1 span10"></div>
        </div>
        <div id="ep-analysis-page-copy-row" class="row-fluid ep-page-row ep-analysis-row">
            <div class="span7 text-center"></div>
            <div class="span5"></div>
        </div>
        <div id="ep-analysis-page-body-row" class="row-fluid ep-page-row ep-analysis-row">
            <div id="ep-analysis-plot" class="span7"></div>
            <div id="ep-analysis-sidebar" class="span5">
                <div class="row-fluid">
                </div>
            </div>
        </div>
        <div id="ep-analysis-page-table-row" class="row-fluid ep-page-row ep-analysis-row">
            <div class="span12"></div>
        </div>
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    <div class="container-fluid">
        <footer class="row-fluid">
            <nav class="offset1 span10">
                <ul class="pull-right nav inline">
                    <li><a>Contact</a></li>
                    <li><h6>Version 3.5</h6></li>
                </ul>
            </nav>
        </footer>
    </div>
</div>
<script id="ep-list-tmpl" type="text/mustache">
    <ul class="{{className}}">
        {{&items}}
    </ul>
</script>
<script id="ep-list-item-tmpl" type="text/mustache">
    <li class="{{#active}}active{{/active}}" {{#attrs}}{{name}}="{{value}}"{{/attrs}}>
    {{^notA}}<a {{#name}}data-name="{{name}}"{{/name}} {{#id}}data-id="{{id}}"{{/id}} href="#">{{/notA}}
        {{#strong}}<strong>{{&label}}</strong>{{/strong}}
        {{^strong}}{{&label}}{{/strong}}
    {{^notA}}</a>{{/notA}}</li>
</script>
<script id="ep-select-option-tmpl" type="text/mustache">
    <option value="{{id}}" {{#selected}}selected{{/selected}} {{#attrs}}{{name}}="{{value}}"{{/attrs}}>{{&label}}</option>
</script>
<script id="ep-landing-tool-overview-body-tmpl" type="text/mustache">
    <div data-name="{{name}}" class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="/expressionplot/thumbnails/{{name}}.thumbnail.png">
        </a>
        <div class="media-body">
            <h4 class="media-heading">{{label}}</h4>
            {{description}}
        </div>
    </div>
</script>
<script id="ep-landing-search-form-tmpl" type="text/mustache">
    <form class="form-horizontal ep-landing-search-form">
    </form>
</script>
<script id="ep-analysis-primary-form-tmpl" type="text/mustache">
    <p class="lead"></p>
    <form class="ep-analysis-primary-form clearfix light-blue">
        <div class="form-actions">
            <button type="button" class="btn" disabled>Cancel</button>
            <button type="submit" class="btn btn-primary" disabled>Submit</button>
            <div class="progress">
                <div class="bar"></div>
            </div>
        </div>
    </form>
</script>
<script id="ep-analysis-secondary-form-tmpl" type="text/mustache">
    <form class="ep-analysis-secondary-form clearfix">
        <div class="form-actions">
            <button type="button" class="btn" disabled>Cancel</button>
            <button type="submit" class="btn btn-primary" disabled>Change</button>
            <div class="progress">
                <div class="bar"></div>
            </div>
        </div>
    </form>
</script>
<script id="ep-form-landing-combobox-tmpl" type="text/mustache">
    <label class="control-label" for="{{baseId}}">{{label}}</label>
    <div class="controls">
        <div class="input-append span10 dropdown">
            <input id="{{baseId}}" type="text" name="{{name}}" class="dropdown-toggle input-block-level" placeholder="{{placeholder}}" tabindex="{{tabindex}}" autocomplete="off" />
            <ul class="dropdown-menu">
            </ul>
            <button class="btn btn-primary" disabled><span class="icon-search icon-white"></span></button>
        </div>
    </div>
</script>
<script id="ep-form-combobox-tmpl" type="text/mustache">
    <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
    {{#primary}}<div class="help-block {{descSize}}">
        <span>{{&desc}}</span>
    </div>{{/primary}}
    <div class="controls dropdown">
        <input id="{{baseId}}" type="text" name="{{name}}" class="dropdown-toggle {{size}}" placeholder="{{placeholder}}" tabindex="{{tabindex}}" value="{{readable}}" autocomplete="off" />
        <ul class="dropdown-menu">
        </ul>
    </div>
</script>
<script id="ep-form-text-tmpl" type="text/mustache">
    <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
    {{#primary}}<div class="help-block {{descSize}}">
        <span>{{&desc}}</span></div>{{/primary}}
    <div class="controls">
        <input id="{{baseId}}" type="text" name="{{name}}" value="{{value}}" class="{{size}}" placeholder="{{placeholder}}" tabindex="{{tabindex}}" autocomplete="off" />
    </div>
</script>
<script id="ep-form-select-tmpl" type="text/mustache">
    <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
    {{#primary}}<div class="help-block {{descSize}}">
        <span>{{&desc}}</span></div>{{/primary}}
    <div class="controls">
        <select id="{{baseId}}" name="{{name}}" class="{{size}}" tabindex="{{tabindex}}">
        {{#choices}}
            <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
        {{/choices}}
        </select>
    </div>
</script>
<script id="ep-form-bool-tmpl" type="text/mustache">
    <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
    {{#primary}}<div class="help-block {{descSize}}">
        <span>{{&desc}}</span></div>{{/primary}}
    <div class="controls">
        <button id="{{baseId}}" type="button" name="{{name}}" class="btn {{size}} {{#active}}active{{/active}} {{buttonClass}}" tabindex="{{tabindex}}">
            {{buttonLabel}}
        </button>
    </div>
</script>
<script id="ep-form-array-tmpl" type="text/mustache">
    <div class="control-array-label">
        <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
        {{#primary}}<div class="help-block {{descSize}}"><span>{{&desc}}</span></div>{{/primary}}
        {{#primary}}
            <button type="button" class="btn ep-array-remove-child"><i class="icon-minus"></i></button>
            <button type="button" class="btn ep-array-add-child"><i class="icon-plus"></i></button>
        {{/primary}}
    </div>
</script>
<script id="ep-form-compound-tmpl" type="text/mustache">
    <div class="control-array-label">
        <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
        {{#primary}}<div class="help-block {{descSize}}"><span>{{&desc}}</span></div>{{/primary}}
    </div>
</script>
<script id="ep-analysis-array-list-tmpl" type="text/mustache">
    {{#items}}
        <dt>{{label}}</dt>
        <dd>
            {{&html}}
        </dd>
    {{/items}}
</script>
<script id="ep-analysis-array-tabs-tmpl" type="text/mustache">
    <ul class="nav nav-tabs">
      {{#tabs}}
      <li class="{{#active}}active{{/active}}"><a href="#{{key}}" data-toggle="tab">{{label}}</a></li>
      {{/tabs}}
    </ul>
    <div class="tab-content">
    {{#content}}
    <div id="{{key}}" class="tab-pane {{#active}}active{{/active}}">
        {{&html}}
    </div>
    {{/content}}
    </div>
</script>
<script id="ep-analysis-table-tmpl" type="text/mustache">
    <table class="ep-analysis-thead table-bordered">
        <thead><tr>
            {{#meta}}
            <th id="{{baseId}}-th">
                <div class="ep-th">
                <div class="ep-th-label">
                    <span class="ep-ext-label">{{label}}</span>
                    {{label}}
                </div>
                <div class="ep-th-actions">
                    <i id="{{baseId}}-filter-icon" class="icon-white icon-filter"></i>
                    <i class="icon-white icon-arrow-up"></i>
                </div>
                {{^isLast}}<div class="ui-resizable-handle ui-resizable-e"></div>{{/isLast}}
                </div>
            </th>
            {{/meta}}
            <th class="ep-fake-th"></th>
        </tr></thead>
    </table>
    <div class="ep-analysis-tbody">
        <div></div>
    </div>
</script>
<script id="ep-analysis-table-chunk-tmpl" type="text/mustache">
    <table id="{{id}}" class="table table-bordered table-striped">
        <thead>
            {{#meta}}<th></th>{{/meta}}
        </thead>
        <tbody>
            {{#items}}
            <tr>
                {{#data}}
                <td>
                    <span class="ep-ext-label">{{&.}}</span>
                    {{&.}}
                </td>
                {{/data}}
            </tr>
            {{/items}}
        </tbody>
    </table>
</script>
<script id="ep-btn-tmpl" type="text/mustache">
    <button class="btn {{btnClass}}">{{#icon}}<i class="{{icon}}"></i> {{/icon}}{{&label}}</button>
</script>
<script id="ep-btn-group-tmpl" type="text/mustache">
    <div class="btn-group {{#vertical}}btn-group-vertical{{/vertical}} {{groupClass}}">
        {{#btns}}
            {{&.}}
        {{/btns}}
    </div>
</script>
<script id="ep-popover" type="text/mustache">
     <div class="popover {{direction}}">
        <div class="arrow"></div>
        <h3 class="popover-title">{{title}}</h3>
        <div class="popover-content">
            <p>{{content}}</p>
        </div>
    </div>
</script>
<script id="ep-accordion-group-tmpl" type="text/mustache">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a id="{{id}}-toggle" class="accordion-toggle" href="#{{id}}">
                <i class="icon-chevron-{{chevron}}"></i> {{label}} 
            </a>
        </div>
        <div id="{{id}}" class="accordion-body collapse {{bodyClass}}">
        {{#withInnerBody}}<div class="accordion-inner">{{/withInnerBody}}
            <div id="{{id}}-placeholder"></div>
        {{#withInnerBody}}</div>{{/withInnerBody}}
        </div>
    </div>
</script>
<script id="ep-numeric-filter-tmpl" type="text/mustache">
    <span class="add-on">{{#le}}&le;{{/le}}{{#ge}}&ge;{{/ge}}</span>
    <input type="text" class="input-mini" />
    <button class="btn btn-link">Clear</button>
</script>
<script id="ep-character-filter-tmpl" type="text/mustache">
    <span class="add-on">contains</span>
    <input type="text" class="input-mini" />
    <button class="btn btn-link">Clear</button>
</script>
<script id="ep-dl-tmpl" type="text/mustache">
    <dl class="{{#horizontal}}dl-horizontal{{/horizontal}}">
        {{#items}}
        <dt>{{label}}</dt>
        <dd>
        {{#placeholderId}}<div id="{{.}}"></div> {{/placeholderId}}
        {{#value}}{{&value}}{{/value}}
        </dd>
        {{/items}}
    </dl>
</script>
<script id="ep-accordion-tagging-area-tmpl" type="text/mustache">
    <div class="row-fluid">
        <div class="span5">
        <ul class="unstyled">
            <select class="span">
            <option selected>Available Data Fields</option>
            {{#meta}}
            <option value="{{i}}">
                {{label}}
            </option>
            {{/meta}}
            </select>

        </ul>
        </div>
        <div class="span7">
            <ul class="unstyled text-center">
                <li><p>Add the selected data field to the plot.</p></li>
                <li><button class="btn btn-info ep-tag-btn"><i class="icon-tag icon-white"></i> Tag All Visible</button></li>
                <li><i>or</i></li>
                <li><button class="btn ep-clear-btn" disabled><i class="icon-remove"></i> Clear All</button></li>
            </ul>
        </div>
    </div>
</script>
<script id="ep-load-indicator-tmpl" type="text/mustache">
    <div class="ep-load-indicator ep-load-indicator-bowlG">
        <div class="ep-load-indicator-bowl_ringG">
            <div class="ep-load-indicator-ball_holderG">
                <div class="ep-load-indicator-ballG">
                </div>
            </div>
        </div>
    </div>
</script>
<script id="ep-alert-tmpl" type="text/mustache">
    <div class="alert {{#title}}alert-block{{/title}} {{#type}}alert-{{type}}{{/type}}">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{#title}}<h4>{{title}}</h4>{{/title}}
      {{&text}}
    </div>
</script>
<script id="ep-modal-tmpl" type="text/mustache">
    <div class="modal-header">
        {{#withClose}}
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        {{/withClose}}
        <h3>{{title}}</h3>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
        {{#progressBar}}<div class="progress"><div class="bar"></div></div>{{/progressBar}}
        {{#cancelBtnLabel}}<a href="#" class="btn">{{cancelBtnLabel}}</a>{{/cancelBtnLabel}}
        {{#doBtnLabel}}<a href="#" class="btn btn-primary">{{doBtnLabel}}</a>{{/doBtnLabel}}
    </div>
</script>
