{% extends "intern/base_site.html" %}
{% block extrahead %}

    <link type="text/css" rel="stylesheet" href="http://s.hdimg.net/jquery/themes/default/default.css" />
    <script type="text/javascript" src="http://s.hdimg.net/jquery/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://s.hdimg.net/jquery/forms-2.18.js"></script>
    <script type="text/javascript" src="http://s.hdimg.net/jquery/jquery.rater.js"></script>
    <script type="text/javascript" src="http://s.hdimg.net/jquery/jquery.jeditable.js"></script> 
    <script type="text/javascript" src="http://s.hdimg.net/jquery/tag.suggestion.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://s.hdimg.net/jquery/rater.css" media="screen" />
<style type="text/css">
body {
    background-color: #ffffff;
    font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif; 
    color: #333333;
	font-size:12 px;
    text-align:left;
}

DIV.tagMatches {
    margin-left: 10px;
    width: 200px;
}
DIV.tagMatches SPAN {
    padding: 2px;
    margin-right: 4px;
    background-color: #0000AB;
    color: #fff;
    cursor: pointer;
}
</style>
{% endblock %}
{% block breadcrumbs %}<div class="breadcrumbs"><a href="/">Homepage</a>
&rsaquo; <a href="/i/">HUDORA Bilderarchiv</a>
&rsaquo; {{ title }}</div>{% endblock %}
<br>
  {% block content %}
    <div id="favorite"></div><br><br>
	Zum ändern des Namens bitte auf die Bezeichnung klicken.
    <h1 class="edit" id="title">{{ title }}</h1>
	<br>
	
	<div style="float:left;">
    {{ imagetag }}
    </div>
    
<div id ="rightcolumn"  style="float:left; margin-left:20px;">
        <div>
        {{ previous }}
        {{ next }}
        </div>
        <div>
            <a href="previous/">previous</a>
            <a href="../random/">random</a>
            <a href="next/">next</a>
        </div>  
        
        <div>
            Rating:
            <div id="rating"></div>
        </div>
        
        <div id="tagarea" style="">
            <ul id="tags">
                {% for tag in tags %}
                    <li><a href="/images/tag/{{ tag }}/">{{ tag }}</a></li>
                {% endfor %}
            </ul>
        
            <a id="addTags" href="#">Add Tags ...</a>
            <form id="tagForm" class="hidden" action="tag/" method="post" autocomplete="off"> 
                Add Tags:<br />
                <input type="text" id="newtag" name="newtag" class="tagSuggest" /><br />
                <input type="submit" value="Save" /> 
                <img class="indicator hidden" src="http://s.hdimg.net/www/img/loading.gif" />
            </form>
        </div>
    </div>


<script type="text/javascript"> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        $('.hidden').hide();
        var options = {
            clearForm:    true,
            dataType:     "json",
            beforeSubmit: function() { 
                $("#tagForm").attr("disabled", true);
                $("#tagForm .indicator").show();
            },
            success: function(response) {
                $('#addTags').show();
                $("#tagForm .indicator").hide();
                $("#tagForm").hide("fast"); 
                response.forEach(function(t) {$("#tags").append('<li><a href="/images/tag/'+t+'/">'+t+"</a></li>");} );
                $("#tagForm").attr("disabled", false);
            },
        }; 
        // bind 'tagForm' and provide a simple callback function 
        $('#tagForm').ajaxForm(options); 
        $('#addTags').click(function() {
            $('#addTags').hide();
            $('#tagForm').show("fast");
            $("#newtag").focus();
        });
        $('input.tagSuggest').tagSuggest({
            tagContainer: 'div',
            url: 'tag_suggestion/',
            tags: ['javascript', 'js2', 'js', 'jquery', 'java']
        });
        $('#favorite').rater('favorite/', {maxvalue: 1, style: 'basic',
                                           curvalue: {% if favorite %}1{% else %}0{% endif %} });
        $('#rating').rater('rate/', {maxvalue:10, style: 'small', curvalue: {{ rating }}});
        $(document).ready(function() {
            $('.edit').editable('update_title/', { 
                cancel    : 'Cancel',
                submit    : 'OK',
                indicator : '<img src="http://s.hdimg.net/www/img/loading.gif" />',
                tooltip   : 'Click to edit...'
            });
        });
    }); 
</script> 
{% endblock %}