{% extends "sbir_layout.html" %}
{% from "_pagination.html" import render_pagination %}
{% from "bootstrap_wtf.html" import horizontal_field as ff %}

{% block morehead %}
    <link rel="stylesheet"
        href="{{ url_for('static', filename='css/sbir_search.css') }}">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.4/js/jquery.tablesorter.min.js"></script>

    <link rel="stylesheet"
        href="{{ url_for('static', filename='lib/jquery-steps-1.1.0/jquery.steps.css') }}">
{% endblock %}
{% block content %}

<div class="errors service-error"></div>
<div id="sbir-page">
    <ul id="search-tabs">
        <li><a href="#" name="search-tab1">Search HistoWiz Slides</a></li>
        <li><a href="#" name="search-tab2">Search My Slides</a></li>
        <li><div class="tab-help"><span class="ui-icon ui-icon-carat-1-w"></span><span class="action-link">Select search type</span></div></li>
        <li class="last">
            <div id="bookmark-link" class="action-clickable">
                <span class="ui-icon ui-icon-bookmark"></span>
                <span class="action-link">Bookmark</span>
            </div>
            <div id="print-link" class="action-clickable">
                <span class="ui-icon ui-icon-print"></span>
                <span class="action-link">Print</span>
            </div>
        </li>
    </ul>
    
    <div id="search-content"> 
        <div id="search-tab1">
            <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                <form id="search-form" action="/sbir-search" method="GET">
                    <input name="qid" value="{{qid}}" type="hidden" />
                    <input name="ss" value="{{ss}}" id="search-input" value="" type="text" style="width:90%">
                    <button id="search-button">Search</button>
                </form>
                <!--
                <div id="view-filters" class="tab-help"><span class="action-link">Advanced Filters</span><span class="ui-icon ui-icon-carat-1-s"></span></div>                
                -->
            </div>
            <!--
            <form id="filters" class="form form-horizontal">
                <div class="wizard">
                    <div class="content">
                        <div class="body">
                            {# {{ ff(form.species_id_list) }} #}
                        </div>
                    </div>
                </div>
            </form>
            -->

            <div id="result-container">
                <ul id="result-tabs">
                    <li><a href="#" name="tab1">Annotated Slides Found</a></li>
                    <li><div class="tab-help"><span class="ui-icon ui-icon-carat-1-w"></span><span class="action-link">Click on the slide to see preview</span></div></li>
                    <li class="last">
                        <div class="tab-help"><span class="action-link">download results</span><span class="ui-icon ui-icon-carat-1-e"></span></div>
                        <div id="csv-link" class="action-clickable">
                            <span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
                            <span class="action-link">CSV</span>
                        </div>
                        <div id="xls-link" class="action-clickable">
                            <span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
                            <span class="action-link">XLS</span>
                        </div>
                        <div id="pdf-link" class="action-clickable">
                            <span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
                            <span class="action-link">PDF</span>
                        </div>
                    </li>
                </ul>
                <div id="result-content">
                    <div id="result-tab1">
                        {{ render_pagination(slides, 'sbir_search', qid=qid, ss=ss) }}

                        <table cellspacing="0" cellpadding="0" id="my-results-table" class="tablesorter">
                            <thead class="result-table-head">
                                <th class="col-marker">&nbsp;</th>
                                <th class="col-slide">Slide</th>
                                <th class="col-sample">Sample</th>
                                <th class="col-order">Order</th>
                                <th class="col-species">Species</th>
                                <th class="col-stain">Stain</th>
                                <th class="col-genotype">Genotype</th>
                                <th class="col-tissue">Tissue</th>
                                <th class="col-experimental-type">Experimental Type</th>
                                <th class="col-ranking">Search Ranking</th>
                            </thead>
                            <tbody>
                                {% for s in slides.items %}
                                <tr class="result-table-row" data-slide-id="{{ s.slide_id }}">
                                    <td><span class="ui-icon ui-icon-triangle-1-e"></span></td>
                                    <td>
                                        <a href="/sbir-viewer/{{s.slide_id}}" target="slide_{{s.slide_id}}">{{'{0:10d}'.format(s.slide_id) }}</a>
                                    </td>
                                    <td>
                                        <div class="sbir-col-container">
                                            <!--Visible-->
                                            <div class="sbir-col-content" title="{{ s.sample }}">{{ s.sample }}</div>
                                            <!--Hidden spacer-->
                                            <div class="sbir-col-spacer">{{ s.sample }}</div>
                                            <!--Keeps the container from collapsing without
                                                having to specify a height-->
                                            <span>&nbsp;</span>
                                        </div>                                        
                                    </td>
                                    <td>{{'{0:10d}'.format(s.order_id) }}</td>
                                    <td>
                                        <div class="sbir-col-container">
                                            <!--Visible-->
                                            <div class="sbir-col-content" title="{{ s.species }}">{{ s.species }}</div>
                                            <!--Hidden spacer-->
                                            <div class="sbir-col-spacer">{{ s.species }}</div>
                                            <!--Keeps the container from collapsing without
                                                having to specify a height-->
                                            <span>&nbsp;</span>
                                        </div>                                         
                                    </td>
                                    <td>
                                        <div class="sbir-col-container">
                                            <!--Visible-->
                                            <div class="sbir-col-content" title="{{ s.stain }}">{{ s.stain }}</div>
                                            <!--Hidden spacer-->
                                            <div class="sbir-col-spacer">{{ s.stain }}</div>
                                            <!--Keeps the container from collapsing without
                                                having to specify a height-->
                                            <span>&nbsp;</span>
                                        </div>                                         
                                    </td>
                                    <td>
                                        <div class="sbir-col-container">
                                            <!--Visible-->
                                            <div class="sbir-col-content" title="{{ s.gemm }}">{{ s.gemm }}</div>
                                            <!--Hidden spacer-->
                                            <div class="sbir-col-spacer">{{ s.gemm }}</div>
                                            <!--Keeps the container from collapsing without
                                                having to specify a height-->
                                            <span>&nbsp;</span>
                                        </div>                                         
                                    </td>
                                    <td>
                                        <div class="sbir-col-container">
                                            <!--Visible-->
                                            <div class="sbir-col-content" title="{{s.bio_systems}}">{{ s.bio_systems }}</div>
                                            <!--Hidden spacer-->
                                            <div class="sbir-col-spacer">{{ s.bio_systems }}</div>
                                            <!--Keeps the container from collapsing without
                                                having to specify a height-->
                                            <span>&nbsp;</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="sbir-col-container">
                                            <!--Visible-->
                                            <div class="sbir-col-content" title="{{ s.experiment_types }}">{{ s.experiment_types }}</div>
                                            <!--Hidden spacer-->
                                            <div class="sbir-col-spacer">{{ s.experiment_types }}</div>
                                            <!--Keeps the container from collapsing without
                                                having to specify a height-->
                                            <span>&nbsp;</span>
                                        </div>  
                                    </td>
                                    <td>
                                        <div class="rank-container">
                                            <div class="ranking-bar">
                                                <div class="ranking-mask" style="width: {{ 100 - s.score }}%"></div>
                                            </div>
                                            <div class="slide-rank">{{ s.score }}%</div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>

                        {{ render_pagination(slides, 'sbir_search', qid=qid, ss=ss) }}
                    </div>
                </div>
            </div>
            <div id="preview-container">
                <div class="tab-help"><span class="action-link">Slide Preview</span><span class="ui-icon ui-icon-carat-1-s"></span></div>
                <div class="slide-thumbnail-container">
                    <div id="slide-preview"><img width="50%" src="" /></div>
                </div>
            </div>
        </div>
        <div id="search-tab2">
            <h2>Vivamus fringilla suscipit justo</h2>
            <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
            <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
            <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>    
        </div>
    </div>    
</div>

<script type="text/javascript">
    function setup_tabs(prefix) {
        $("#"+prefix+"-content").find("[id^='"+prefix+"-tab']").hide(); // Hide all content
        $("#"+prefix+"-tabs li:first").attr("id",prefix+"-current"); // Activate the first tab
        $("#"+prefix+"-content #"+prefix+"-tab1").fadeIn(); // Show first tab's content
            
        $('#'+prefix+'-tabs a').click(function(e) {
            e.preventDefault();
            if ($(this).closest("li").attr("id") == prefix+"-current"){ //detection for current tab
             return;       
            }
            else{             
              $("#"+prefix+"-content").find("[id^='"+prefix+"-tab']").hide(); // Hide all content
              $("#"+prefix+"-tabs li").attr("id",""); //Reset id's
              $(this).parent().attr("id",prefix+"-current"); // Activate this
              $('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
            }
        });    }
    
    $(document).ready(function(){
        setup_tabs('search');
        setup_tabs('result');
        $("#my-results-table").tablesorter();

        $("#slide-preview img").hide();
        
        $('tr.result-table-row').hover(
            function(){
                var slide_id = $(this).attr("data-slide-id");
                $.ajax({
                    url: "/slides/"+slide_id+"/thumbonly",
                    success: function(data) {
                        if (data.length > 0) {
                            $("#slide-preview img").show();
                            $("#slide-preview img").attr("src", data);
                            $(".errors").html("");
                        }
                        else {
                            $(".errors").html("Couldn't find a slide preview for slide with id "+slide_id);
                        }
                    }
                });
            },
            function(){
                $("#slide-preview img").empty()
                $("#slide-preview img").hide();
            }
            );
    
        $("#search-input").autocomplete({
            minLength: 3,
            delay: 50,
            source: function(req, resp) {
                var queryparams = "ss="+$("#search-input").val();
                $.ajax({
                    url: "/sbir-slide-auto?" + queryparams,
                    success: function(data) {
                        //var obj = JSON.parse(data);
                        resp(data.auto_list);
                    }
                });
            },
            
            focus: function(event, ui) {

            },

            select: function(event, ui) {
                event.defaultPrevented = true;
                
                document.location.href = ui.item.url;
            }
        });
        
        /*
        $("#search-input").bind("enterKey", function() {
            var searchTerm = $("#search-input").val();

            if(searchTerm.length > 0)
                document.location.href = '/sbir-search?search=[{"ss":"' + searchTerm + '"}]';
        });

        $('#search-input').keyup(function(e){
            if(e.keyCode == 13) {
                $(this).trigger("enterKey");
            }
        });

        $("#search-button").click(function() {
            var searchTerm = $("#search-input").val();

            if(searchTerm.length > 0)
                document.location.href = '/sbir-search?search=[{"ss":"' + searchTerm + '"}]';
        });

        $('#view-filters').click(function(e){
            $("#filters").toggle();
        });

        var fieldNameToId = {
            'species_id_list': 7
        };

        var getFilters = function() {
            var searchTerm = $("#search-input").val();
            var checked = $('input:checked');

            var filterOutput = [{ ss: searchTerm }];
            var filters = {};

            for(var i = 0; i < checked.length; i++) {
                var checkbox = checked[0];

                var id = $(checkbox).attr('id');

                var idParts = id.split('-');
                
                var field = idParts.pop();
                var fieldName = idParts.join('-');
                var fieldId = fieldNameToId[fieldName];

                if(fieldId in filters)
                    filers[fieldId].push(field);
                else
                    filters[fieldId] = [ field ];
            }

            for(var field in filters)
                filterOutput.push({ ids: filters[field], qid: field });

            var filterQuery = '/sbir-search?search=' + JSON.stringify(filterOutput);

            debugger;

            document.location.href = filterQuery;
        }

        $('div.control-group input').click(function(e) {
            getFilters();
        });
        */
        $("#search-button").click(function() {
            $("#search-form").submit();
        });

        $("#search-input").bind("enterKey", function() {
            $("#search-form").submit();
        });

    });
</script>
{% endblock %}