{% extends "omeroweb/base.html" %}
{% load i18n %}
{% load markup %}
{% load custom_tags %}

{% block link %}
    <link rel="stylesheet" href="{% url webstatic "css/datepicker.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/thickbox.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/slider.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/googiespell.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/tooltip.css" %}" type="text/css" media="screen"/>
{% endblock %}

{% block jscript %}
    <script type="text/javascript" src="{% url webstatic "javascript/jquery_1.2.6.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.core.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.datepicker.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.draggable.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.droppable.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.resizable.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.slider.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/effects.core.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/effects.highlight.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.quicksearch.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.tooltip.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.dimensions.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.bgiframe.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.delegate.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/AJS.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/googiespell.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/cookiesupport.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/thickbox/thickbox.js" %}"></script>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% url webstatic "javascript/menu.js" %}"></script> 
    <script type="text/javascript" src="{% url webstatic "javascript/slider.js" %}"></script>    
    <script type="text/javascript" src="{% url webstatic "javascript/basket.js" %}"></script>
    <script>
      $(document).ready(function(){
          $('#dateperiodinput').datepicker({rangeSelect: true, firstDay: 1, dateFormat: 'yy-mm-dd', rangeSeparator: '_'});
          
          $('ul#products li.product').quicksearch({
              attached: "div.slider",
              position: "before",
              stripeRowClass: null,
              labelText: '{% trans "Filter" %}:',
              inputText: 'search',
              loaderImg: '{% url webstatic "images/tree/spinner.gif" %}'
          });
        });
    </script>
    <script type="text/javascript">
        $(function() {
            $("#searching, #daterange").tooltip({ 
                track: true, 
                delay: 0, 
                showURL: false, 
                opacity: 1, 
                fixPNG: true, 
                showBody: " - ", 
                top: -15, 
                left: 5 
            });
        });
    </script>
    <script>
    var popup = function (url) {
          window.open(url,'_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=800');
          return false;
    }
    </script>
    
{% endblock %}

{% block center %}
    <div class="project">
        <h1>{% trans "Searching" %}</h1>
        <p>{% trans "Searching feature enables you to search within the images, datasets and projects stored on the server. It supports single and multiple character wildcard searches." %}</p>
    </div>
    <div class="clear"></div>
    
    <p>
    <form action="{% url search %}" method="GET">
        <table>
            <tr><th>{% trans "Search for" %} *:</th><td><input class="search" type="text" name="query" value="{{ controller.criteria.query }}" size="52"/>  <span id="searching" title="Searching - <small>To perform a single character wildcard search use the <b>'?'</b> symbol. The single character wildcard search looks for terms that match that with the single character replaced. To perform a multiple character wildcard search use the <b>'*'</b> symbol.<br/><br/>
            For example, to search for <i>'text'</i> or <i>'test'</i> you can use the search: <b>'te?t'
    </b>. Multiple character wildcard searches looks for 0 or more characters. For example, to search for <i>'test'</i>, <i>'tests'</i> or <i>'tester'</i>, you can use the search: <b>'test*'</b>. You can also use the wildcard searches in the middle or the beginning of a term.</small>"><img src="{% url webstatic "images/help16.png" %}" /></span></td></tr>
            <!--<tr><th>by date:</th><td><input type="text" id="dateinput" name="date" value="" size="15"/></td></tr>-->
            <tr><th>{% trans "Date range" %}:</th><td><input type="text" id="dateperiodinput" name="dateperiodinput" value="{{ controller.criteria.period }}" size="25"/> <span id="daterange" title="Date range - <small><p>Date range feature enables you to specify the start and end time of the created data. To select the range, clink on the field and pick start date and end date on the same calendar. If you want to change the date click on the field again the pick the range.</p></small>"><img src="{% url webstatic "images/help16.png" %}" /></span></td></tr>
            <tr><th>{% trans "In" %} *:</th><td>
                <input  type="checkbox" name="image" {{ controller.criteria.image }} />{% trans "Images" %} <input type="checkbox" name="dataset" {{ controller.criteria.dataset }} />{% trans "Datasets" %}  <input type="checkbox" name="project" {{ controller.criteria.project }} />{% trans "Projects" %}
            </td></tr>
        </table>
        <input type="hidden" name="view" value="{{ nav.view }}" />
        <input type="submit" value="Search" /> <input type="button" value="Back" onClick="history.back()" />
    </form>
    </p>
    <div class="separate70"></div>
    
    {% if controller.resultsSize %}
    <div><h1>Results ({{ controller.resultsSize }} items):</h1></div>
    
    <div id="view"> | {% trans "View" %} <a href="{% url search %}?view=table{{ controller.url }}"><img src="{% url webstatic "images/view_detailed16.png" %}" alt="details" title="details"/></a> <a href="{% url search %}?view=icon{{ controller.url }}"><img src="{% url webstatic "images/view_icon16.png" %}" alt="icon" title="icon"/></a> | </div>

    
    <div class="slider">
        <div class="slider_products"> 
            <div class="slider_text">{% trans "Zoom" %}:</div>
            <div class='small_label'></div> 
            <div class='slider_bar'> 
                <div id="slider_callout"></div> 
                <div id='slider1_handle' class='slider_handle'></div> 
            </div> 
            <div class='large_label'></div> 
        </div>
    </div>
    <div class="clear"> </div>

    <ul id="products">
        {% for c in controller.projects %}
        <li class="product"><em>{{ c.name }}</em>
            {% if c.isOwned %}<a href="{% url manage_data "mydata" "project" c.id %}?view=icon"><img id="{{ c.id }}" class="catzoom" src="{% url webstatic "images/folder64.png" %}" title="{{ c.name }}" alt="project"/></a>{% else %}<a href="{% url manage_data "userdata" "project" c.id %}?filter=experimenter&experimenter={{ c.details.owner.id.val }}"><img id="{{ c.id }}" class="catzoom" src="{% url webstatic "images/folder64.png" %}" title="{{ c.name }}" alt="project"/></a>{% endif %}
            <div class="center"><img src="{% url webstatic "images/folder_image12.png" %}" title="image" alt="image"/>[{{ c.countChild }}]{% if c.countAnnotations %} <img src="{% url webstatic "images/knotes12.png" %}" alt="a" title="annotation"/>[{{ c.countAnnotations }}]{% endif %}{% if not c.isOwned %} <img src="{% url webstatic "images/kgpg12.png" %}" alt="l" title="locked"/>{% endif %}</div>
            <div class="center">{{ c.tinyName }}</div>
        </li>
        {% endfor %}
        {% for c in controller.datasets %}
        <li class="product"><em>{{ c.name }}</em>
            {% if c.isOwned %}<a href="{% if manager.project %}{% url manage_data "mydata" "project" manager.project.id "dataset" c.id %}{% else %}{% url manage_data "mydata" "dataset" c.id %}{% endif %}"><img id="{{ c.id }}" class="catzoom" src="{% url webstatic "images/folder_image64.png" %}" title="{{ c.name }}" alt="project"/></a>{% else %}<a href="{% if manager.project %}{% url manage_data "userdata" "project" manager.project.id "dataset" c.id %}{% else %}{% url manage_data "userdata" "dataset" c.id %}{% endif %}?filter=experimenter&experimenter={{ c.details.owner.id.val }}"><img id="{{ c.id }}" class="catzoom" src="{% url webstatic "images/folder_image64.png" %}" title="{{ c.name }}" alt="project"/></a>{% endif %}
            <div class="center">{{ c.tinyName }}</div>
            <div class="center"><a href="#" onclick="copyToClipboard('dataset', '{{ c.id }}'); return false;"><img src="{% url webstatic "images/eclipse_copy_edit12.png" %}" alt="c" title="copy"/></a></div>
        </li>
        {% endfor %}
        {% for c in controller.images %}
        <li class="product"><em>{{ c.name }}</em>
            {% if c.isOwned %}<a href="{% if manager.project %}{% url manage_data "mydata" "project" manager.project.id "dataset" manager.dataset.id "image" c.id %}{% else %}{% if manager.dataset %}{% url manage_data "mydata" "dataset" manager.dataset.id "image" c.id %}{% else %}{% url manage_data "mydata" "image" c.id %}{% endif %}{% endif %}"><img id="{{ c.id }}" class="imgzoom" src="{% url render_thumbnail c.id %}" alt="image" title="{{ c.name }}"/></a>{% else %}<a href="{% if manager.project %}{% url manage_data "userdata" "project" manager.project.id "dataset" manager.dataset.id "image" c.id %}{% else %}{% if manager.dataset %}{% url manage_data "userdata" "dataset" manager.dataset.id "image" c.id %}{% else %}{% url manage_data "userdata" "image" c.id %}{% endif %}{% endif %}"><img id="{{ c.id }}" class="imgzoom" src="{% url render_thumbnail c.id %}" alt="image" title="{{ c.name }}"/></a>{% endif %}
            <div class="center">{% if c.countAnnotations %} <img src="{% url webstatic "images/knotes12.png" %}" alt="a" title="annotation"/>[{{ c.countAnnotations }}]{% endif %}{% if not c.isOwned %} <img src="{% url webstatic "images/kgpg12.png" %}" alt="l" title="locked"/>{% endif %}</div>
            <div class="center">{{ c.tinyName }}</div>
            <div class="center"><a href="#" onclick="return popup('{% url image_viewer c.id %}')"><img src="{% url webstatic "images/kview12.png" %}" alt="v" title="view"/></a> <a href="{% url manage_image_zoom c.id %}?keepThis=true&TB_iframe=true&height=500&width=860" alt="{{ c.shortName }}" class="thickbox" rel="gallery-omero" title="{{ c.shortName }} by {{ c.getOwnerFullName }} ({{ c.details.group.name.val }} {{ c.details.permissions }})"><img src="{% url webstatic "images/kpresenter12.png" %}" alt="p" title="presentation"/></a>{% if c.isOwned %} <a href="#" onclick="toBasket('image', '{{ c.id }}'); return false;"> <img src="{% url webstatic "images/basket12.png" %}" alt="b" title="add to basket"/></a>{% endif %} <a href="#" onclick="copyToClipboard('image', '{{ c.id }}'); return false;"><img src="{% url webstatic "images/eclipse_copy_edit12.png" %}" alt="c" title="copy"/></a></div>
        </li>
        {% endfor %}
    </ul>
    {% else %}
        <h1>{% trans "No results. Fill the form." %}</h1>
    {% endif %}

{% endblock %}