{% extends "imadj/base.html" %}
{% load getattribute %}

{% block extrahead %}
<script src="{{ STATIC_URL }}imadj/js/jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="{{ STATIC_URL }}imadj/js/thickbox.js"></script>

<link type="text/css" href="{{ STATIC_URL }}imadj/css/thickbox.css" media="all" rel="stylesheet" />
<link type="text/css" href="{{ STATIC_URL }}imadj/css/imagepicker.css" media="all" rel="stylesheet" />


<script type="text/javascript" charset="utf-8">

    var tb_pathToImage = "{{ STATIC_URL }}imadj/img/_thickbox/loadingAnimation.gif";

$(document).ready(function() {

    $(".editable_textarea").editable("/imagegallery/api/jeditable_save/", { 
      indicator : "<img src='{{ STATIC_URL }}imadj/img/spindicator.gif'>",
      type   : 'textarea',
      onblur : 'submit',
      select : true,
      submit : 'OK',
      cancel : 'cancel',
      cssclass : "editable"
    });

});



/*If we want events to fire in a thickbox, need to bind them
after it opens.*/

function addTheTag() {

    $.ajax({
        type: "POST",
        url: "/imagegallery/api/tag",
        data: "id=" + $('.new_tag_name').val() + "&description=" + $('.new_tag_description').val(), 
        success: function(msg) {
            $('#status').html("added new tag '" + $('.new_tag_name').val() + "'");  
	    tb_remove();
        },
	error: function(msg) {
            $('#tb_errors').html(msg);   //have an error div in red in the thickbox
            $('#status').html(msg);   //have an error div in the main page
        }

    });
};


$(document).ajaxSend(function(event, xhr, settings) {
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});




</script>
{% endblock %}

{% block topwidgets %}
<div id="add">
    <p><a href="/imagegallery/addimage/">add image +</a></p>
</div>

<div id="add">
    <p><a class="thickbox" href="#TB_inline?height=400&width=620&inlineId=dialog_add_tag">add tag +</a></p>
</div>

<div id="search">
    <div id="outer_search_box">
        <div id="inner_search_box">
            <form method="get" action="">
                <input type="text" name="search" value="{{search}}" style="width:185px;border:none;"/>
            </form>
        </div>
    </div>
</div>


<!--hidden dialog to add a new tag-->
<div id="dialog_add_tag" style="display:none;">

    <div class="addtag_content">
        <div class="fancy_heading" style="width:100%;">
            <h1>Instructions</h1>
        </div>
        <div class="page_info_content" style="width:100%;margin-left:0px;padding-bottom:20px;">
            <p>These are some really awesome and useful instructions on how to use the tagging system in the imageGallery. Wow these instructions are good!</p>
        </div>
        <div class="fancy_heading" style="width:100%;">
            <h1>Add your tag here</h1>
        </div>  
        <div class="page_info_content" style="width:100%;margin-left:0px;">
	        <h2>Name</h2>
            <p><input class="new_tag_name" type="text"></input></p>
            <h2>Description</h2>
            <p><input class="new_tag_description" type="text"></input></p>
            <p><button type="button" id="new_tag_button" onclick="addTheTag();">Add the tag</button></p>
        </div>
    </div>
</div>

{% endblock %}



{% block content %}
<!-- the below can be passed from django, or set by js -->
<p id="status">{{ status }}</p>

<div id="status_success"></div>
<div id="errors"></div>

            {% if images%}
<!--            <div class="details_preview">
                        <h2>Description</h2>
                        <p class="editable_textarea" id="image:{{images.0.id}}:description">{{images.0.description}}</p>
                        <h2>Tags</h2>
                        <p class="editable_textarea" id="image:{{images.0.id}}:tag_text">{{images.0.tag_text}}</p>
            </div>-->

            <h2>Displaying images {{from_image}}&#8211;{{to_image}}</h2>
            {% ifnotequal max_pages 1 %}
            <h3 class="page_selection">
                pages:
                {% for p in pages %}
                    {% ifequal page p %}<span class="current_page">
                    {% else %}<span>
                    {% endifequal %}
                    <a href="?page={{p}}{%if selected_size%}&amp;size={{selected_size}}{%endif%}{%if selected_tag%}&amp;tag={{selected_tag}}{%endif%}">{{p}}</a>
                    </span>
                {% endfor %}
            </h3>
            {% endifnotequal %}
            <div id="images">
                {% for image in images%}
                <a class="thickbox" href="#TB_inline?height=400&width=620&inlineId=test{{forloop.counter}}">
                    <div class="image_picker_item" style="height:190px; font-size: 9px">
                    <img src="{{ image.get_thumbnail_url }}"/><br />
                    {% if image.description %}<strong>{{image.description}}</strong><br />{% endif %}
                    size: {{image.size}}<br />
                    {% if image.tags.all %}
                        tags: 
                        {% for tag in image.tags.all %}
                            {{tag.id}}, 
                        {% endfor %}
                    {% endif %}
                    </div>
                </a>
                
                <!--this is hidden but shown by the thickbox.  -->
                <div id="test{{forloop.counter}}" style="display:none;">
                    <div class="fancy_heading">
                        <h1>Image ID: {{image.id}}</h1>
                    </div>
                    <div class="image_preview">
                        <img src="{{ image.get_absolute_url }}" alt="{{ image.description }}" />
                    </div>
                    <div class="details_preview">
                        <h2>Standard size</h2>
                        <p>{{image.size.id}} ({{ image.size.width }}x{{ image.size.height }}px, {{image.size.format}})</p>
                        <h2>Date created in system</h2>
                        <p>{{ image.date_created }}</p>
                        <h2>Last edited by</h2>
                        <p>{{ image.last_edited_by }}</p>
                    </div>
                    <div class="details_preview" style="width:500px;margin-left:15px;">
                        <h2>Description</h2>
                        <p class="editable_textarea" id="image:{{image.id}}:description">{{image.description}}</p>
                        <h2>Caption</h2>
                        <p class="editable_textarea" id="image:{{image.id}}:caption">{{image.caption}}</p>
                        <h2>Tags</h2>
                        <p class="editable_textarea" id="image:{{image.id}}:tag_text">{{image.tag_text}}</p>
                        <h2>Ordering (priority integer, 1 displays first)</h2>
                        <p class="editable_textarea" id="image:{{image.id}}:ordering">{{image.ordering}}</p>
                        {% if settings.IMADJ_CUSTOM_ATTIBUTES %}
                            <hr />
                            {% for key, value in settings.IMADJ_CUSTOM_ATTIBUTES %}
                                <h2>{{ value }}</h2>
                                <p class="editable_textarea" id="image:{{image.id}}:{{ key }}">{{ image|getattribute:key }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
                <div id="images">
                <p>There are no images that match your selection. Please re-select using the filters on the right.</p>
                </div>
            {% endif %}
            <div id="filter">
                <div id="filter_list_heading">
                    <h1>image size</h1>
                </div>
                
                <!-- AR: these aren't right yet.  We should not lose present
                size selection when checking a tag and vice versa.  See how admin
                does it - but later -->
                
                <div id="filter_list_content">
                    <!--special entry to handle 'all sizes'-->
                    {% if selected_size %}
                    <a href="?{%if selected_tag%}tag={{selected_tag}}{%endif%}">(all)</a>
                    {% else %}
                    <p>(all)</p>
                    {% endif %}
                    
                    
                    
                    {% for size in sizes %}
                    {% ifnotequal selected_size size %}
                    <a href="?size={{size.id}}{%if selected_tag%}&amp;tag={{selected_tag}}{%endif%}">{{size.id}} ({{size.width}}x{{size.height}})</a>
                    {% else %}
                    <p>{{size.id}} ({{size.width}}x{{size.height}})</p>
                    {% endifnotequal %}
                    {% endfor%}
                    
                </div>
                
                <!-- Tags needs to be a lot more dynamic.
                List will grow and grow, and may need an autocomplete
                to add them, or a cloud...
                -->
                <div id="filter_list_heading">
                    <h1>image tag (tag usage count)</h1>
                </div>
                <div id="filter_list_content">
                    <!--special entry to handle 'all tags'-->
                    {% if selected_tag %}
                    <a href="?{%if selected_size%}size={{selected_size}}{%endif%}">(all)</a>
                    {% else %}
                    <p>(all)</p>
                    {% endif %}

                    {% ifnotequal selected_tag 'untagged' %}
                    <a href="?tag=untagged{%if selected_size%}&amp;size={{selected_size}}{%endif%}">(untagged)</a>
                    {% else %}
                    <p>(untagged)</p>
                    {% endifnotequal %}
                    
                    {% for tag, count in tags %}
                    {% ifnotequal selected_tag tag %}
                    <a href="?tag={{tag}}{%if selected_size%}&amp;size={{selected_size}}{%endif%}">{{tag}} ({{count}})</a>
                    {% else %}
                    <p>{{tag}} ({{count}})</p>
                    {% endifnotequal %}
                    {% endfor%}
                </div>
                <div id="filter_list_heading">
                    <h1>unused tags</h1>
                </div>
                <div id="filter_list_content">
                    {% for u in unused_tags %}
                    <a>{{u}}</a>
                    {% endfor %}
                </div>
            </div>
{% endblock %}