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

{% block link %}
    <link rel="stylesheet" href="{% url webstatic "css/images.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/annotation.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/tree.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.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>
    
{% 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>
      $(document).ready(function(){
          $('ul#products li.product').quicksearch({
                attached: "div.slider",
                position: "before",
                stripeRowClass: null,
                labelText: '{% trans "Filter" %}:',
                inputText: '...',
                loaderImg: '{% url webstatic "images/tree/spinner.gif" %}'
            });
        });
    </script>
    <script type="text/javascript">
        $(function() {
            $("#discussion, #sharing").tooltip({ 
                track: true, 
                delay: 0, 
                showURL: false, 
                opacity: 1, 
                fixPNG: true, 
                showBody: " - ", 
                top: -15, 
                left: 5 
            });
        });
    </script>
{% endblock %}

{% block center %}

<div class="project">
    <h1>{% trans "Shares and Discussions." %}</h1>

    <p>{% trans "Here you can create a" %} <b>{% trans "Share" %}</b> {% trans "to share and discuss your images with others, or" %} <b>{% trans "Discussion" %}</b> {% trans "to discuss with no images. Existing Shares and Discussions are shown below." %}</p>
</div>
<div class="clear"></div>
<div class="separate70"></div>

<h1>
    {% if share.oshSize %}
        {% trans "Owned by me" %} ({{ share.oshSize }} {% trans "items" %})
    {% else %}
        {% trans "Owned by me" %} ({% trans "no items" %})
    {% endif %} 
    {% trans "and" %} 
    {% if share.mshSize %}
        {% trans "shared with me" %} ({{ share.mshSize }} {% trans "items" %})
    {% else %}
        {% trans "shared with me" %} ({% trans "no items" %})
    {% endif %}:
</h1>
<div id="view"> | {% trans "View" %} <a href="{% url manage_shares %}?view=table"><img src="{% url webstatic "images/view_detailed16.png" %}" alt="table" title="table"/></a> <a href="{% url manage_shares %}?view=icon"><img src="{% url webstatic "images/view_icon16.png" %}" alt="icon" title="icon"/></a> | {% trans "New" %} <a href="{% url basket_action "toshare" %}"><span id="sharing" title="Create share - <small>Creates share for images stored currently in the basket.</small>"><img src="{% url webstatic "images/folder_html16.png" %}" alt="share" /></span></a> 
<a href="{% url basket_action "todiscuss" %}"><span id="discussion" title="Create discussion - <small>Starts the thread of the new discussion with no images currently stored in the basket.</small>"><img src="{% url webstatic "images/wp_protocol16.png" %}" alt="discussion" /></span></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>

{% if share.oshSize or share.mshSize %}
<ul id="products">
    {% if share.oshSize %}
        {% for c in share.ownShares %}
        <li class="product"><em>{{ c.shortMessage }}</em>
            <a href="{% url manage_share "view" c.id %}">
                {% ifequal c.getShareType "Discuss" %}
                    {% if c.active %}
                        <img src="{% url webstatic "images/wp_protocol64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/>
                    {% else %}
                        <img src="{% url webstatic "images/wp_protocol_locked64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/>
                    {% endif %}
                {% else %}
                    {% if c.active %}
                        <img src="{% url webstatic "images/folder_html64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/>
                    {% else %}
                        <img src="{% url webstatic "images/folder_locked64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/>
                    {% endif %}
                {% endifequal %}
            </a>
            <div class="center">{% if c.annotation_counter %} <img src="{% url webstatic "images/knotes12.png" %}" alt="a" title="annotation"/>[{{ c.annotation_counter }}]{% endif %} {% if c.members_counter %}<img src="{% url webstatic "images/kuser12.png" %}" alt="ms" title="members"/>[{{ c.members_counter }}]{% endif %}<br/>{{ c.tinyMessage }}</div>
        </li>
        {% endfor %}
    {% else %}
        <li>{% trans "No data." %}</li>
    {% endif %}
    <li class="clear"></li>
    {% if share.mshSize %}
        {% for c in share.memberShares %}
        <li class="product"><em>{{ c.shortMessage }}</em>
            {% ifequal c.getShareType "Discuss" %}
                {% if c.active %}
                    <a href="#" onclick="openSharedWindow('{% url manage_share "view" c.id %}'); return false;"><img src="{% url webstatic "images/wp_protocol64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/></a>
                {% else %}
                    <img src="{% url webstatic "images/wp_protocol_locked64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/>
                {% endif %}
            {% else %}
                {% if c.active %}
                    <a href="#" onclick="openSharedWindow('{% url manage_share "view" c.id %}'); return false;"><img src="{% url webstatic "images/folder_html64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/></a>
                {% else %}
                    <img src="{% url webstatic "images/folder_locked64.png" %}" alt="{{ c.id }}" title="{{ c.id }}" class="catzoom"/>
                {% endif %}
            {% endifequal %}
            <div class="center">{% if c.annotation_counter %} <img src="{% url webstatic "images/knotes12.png" %}" alt="a" title="annotation"/>[{{ c.annotation_counter }}]{% endif %} {% if c.members_counter %}<img src="{% url webstatic "images/kuser12.png" %}" alt="ms" title="members"/>[{{ c.members_counter }}]{% endif %}<br/>{{ c.tinyMessage }}</div>
        </li>
        {% endfor %}
    {% endif %}
</ul>
{% else %}
    {% trans "No data." %}
{% endif %}
<div class="clear"> </div>


{% endblock %}