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

{% block link %}
    <link rel="stylesheet" href="{% url webstatic "css/slider.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/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/basket.js" %}"></script>
    
    <script type="text/javascript">
        $(function() {
            $("#sharing, #empty").tooltip({ 
                track: true, 
                delay: 0, 
                showURL: false, 
                opacity: 1, 
                fixPNG: true, 
                showBody: " - ", 
                top: -15, 
                left: 5 
            });
        });
    </script>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#products li.product").css('width', 160);
            $("#products li.product").css('height', 150);
            $('#products img.imgzoom').attr('width', 120);
            $('#products img.catzoom').attr('width', 120);
        });
    </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 %}

{% ifequal basket.sizeOfBasket 0 %}

    <h1>{% trans "Your basket is empty." %}</h1>
    <div class="error"><p>{% trans "Your basket is empty. Please add some of your bio-data from" %} <a href="{% url manage_data "mydata" %}">{% trans "My data" %}</a> {% trans "or initiate a discussion." %}</p></div>
    
{% else %}

    <h1>{% trans "Your basket:" %} </h1>
    
    <div id="cart">
    <div class="clear"></div>
        <div><ul id="products">
        {% if basket.imgSize %}
        <div class="clear"></div>
        <li class="dataset"><h1>{% trans "Images:" %}</h1>
        <div class="clear"></div>
            {% for e in basket.imageInBasket %}
                <li id="image-{{ e.id }}" class="product">
                    <a href="#" onclick="return popup('{% url image_viewer e.id %}')"><img id="{{ e.id }}" class="imgzoom" src="{% url render_thumbnail e.id %}" alt="image" title="{{ e.name }}"/></a>
                    <div class="center"><a href="#" onclick="fromBasket('image', '{{ e.id }}'); return false;"><img src ="{% url webstatic "images/cancel16.png" %}" alt="r" title="remove"/></a></div>
                </li>
            {% endfor %}
        {% endif %}
        <div class="clear"></div>
        </ul></div>
    </div>

    <div class="clear"></div>
    <br/>
    <div>
        <h1>{% trans "Available actions" %}:</h1>
        <input type="submit" name="action" value="Share" onClick="location.href='{% url basket_action "toshare" %}'"/> 
        <span id="sharing" title="{% trans 'Create share' %} - <small>{% trans 'Creates share for images stored currently in the basket.' %}</small>"><img src="{% url webstatic "images/help16.png" %}" /></span> 
        <!--<input type="submit" name="action" value="Blog" onClick="location.href='{% url basket_action "toblog" %}'"/>
        <input type="submit" name="action" value="Annotate" onClick="location.href='{% url basket_action "toannotate" %}'"/> 
        <input type="submit" name="action" value="Tag" onClick="location.href='{% url basket_action "totag" %}'"/>-->
        <input type="submit" name="action" value="Empty" onClick="location.href='{% url empty_basket %}'"/>
        <span id="empty" title="{% trans 'Empty basket' %} - <small>{% trans 'Empty the basket.' %}</small>"><img src="{% url webstatic "images/help16.png" %}" /></span>
    </div>
    
{% endifequal %}

{% endblock %}