<ui:composition xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:p="http://primefaces.org/ui"
     xmlns:o="http://omnifaces.org/ui">
    
    <link rel="stylesheet" href="/subset/css/app.css"/>
    <script type="text/javascript" src="/subset/javascript/d3.v3.min.js"></script>
    <script type="text/javascript" src="/subset/javascript/plots.js"></script>

    <div id="leftpanel" class="sidepanel clearfix">
        <div class="panel-heading text-center" id="leftpaneltitle">
            <h3 class="panel-title"><!-- Data File Name -->&#160;</h3>
        </div>
        <div class="btn-toolbar" role="toolbar" style="padding:6px;margin:0;">
            <div class="btn-group" style="margin-left:0;">
                <button type="button" class="btn active" id="btnVariables" onclick="tabLeft('tab1');">Variables</button>
                <button type="button" class="btn btn-default" id="btnSubset" onclick="tabLeft('tab2');">Plots</button>
            </div>
            <button type="button" class="btn btn-default pull-right" id="btnDownload" onclick="tabLeft('tab3');">Download</button>
        </div>
        <div class="row-fluid">
            <div id="leftpanelcontent">
                <div id="leftContentArea" style="overflow: scroll; height:492px;">
                    <div id="tab1" style="display:block;padding:6px;text-align:center;overflow:hidden;">

                    </div>
                    <div id="tab2" style="display:none;padding:6px;">
                        <div id="txtSubset" style="display:none;">
                            <!-- <p class="help-block"><span class="glyphicon glyphicon-info-sign"></span> To select a subset, brush the plots. The subset will be the intersection of brushed values.</p> -->
                            <p class="help-block"><span class="glyphicon glyphicon-info-sign"></span> Distribution of selected variables.</p>
                        </div>
                        <div id="tab2ContentArea">
                            
                        </div>
                    </div>
                    <div id="tab3">

                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <a href="#" id="aboutTwoRavens" data-toggle="popover" data-trigger="hover" data-container="body" data-content="The Norse god Odin had two talking ravens as advisors, who would fly out into the world and report back all they observed. In the Norse, their names were &#34;Thought&#34; and &#34;Memory&#34;. In our coming release, our thought-raven automatically advises on statistical model selection, while our memory-raven accumulates previous statistical models from Dataverse, to provide cummulative guidance and meta-analysis.">
        <p:graphicImage value="/subset/images/tworavens.png" alt="TwoRavens" width="100"/>
    </a>
    <div class="hidden" id="aboutTwoRavensText">
        <p>The Norse god Odin had two talking ravens as advisors, who would fly out into the world and report back all they observed. In the Norse, their names were &#34;Thought&#34; and &#34;Memory&#34;.</p>
        <p>In our coming release, our thought-raven automatically advises on statistical model selection, while our memory-raven accumulates previous statistical models from Dataverse, to provide cummulative guidance and meta-analysis.</p>
    </div>

    <script>
        var hostname = "localhost:8080"; // default host url
        // extract the current host url (with the port!)
        // from the location bar:
        var myurl=window.location.toString();
        cindex=myurl.indexOf("/",8);
        if (cindex > 0) {
            hostname=myurl.substring(0,cindex);
        };
        var fileid = #{!empty DatasetPage.fileMetadataSelected ? DatasetPage.fileMetadataSelected.dataFile.id : 0};
    </script>

    <script src="/subset/javascript/app_subset.js">
        $('#aboutTwoRavens').popover();
    </script>
</ui:composition>