{% extends "admin/change_form.html" %}
{% load i18n %}


{% block object-tools %}
<!-- admin/pylucid/colorscheme/change_form - object-tools - START -->
{% if change %}{% if not is_popup %}
  <ul class="object-tools">
        <li>
            <a href="clone/" title="{% trans 'Clone this colorscheme and all this assiossiated colors.' %}" onclick="javascript:return confirm('{% trans 'Note:\nChanges in the form will be lost!' %}')">
            {% trans 'clone' %}
            </a>
        </li>
        <li>
            <a href="cleanup/" title="{% trans 'Remove all unused colors (check every headfiles)' %}" onclick="javascript:return confirm('{% trans 'Note:\nChanges in the form will be lost!' %}')">
            {% trans 'remove unused colors' %}
            </a>
        </li>
        <li>
            <a href="{% url Design-rename_colors object_id %}" title="{% trans 'Rename all colors based on the color value' %}" onclick="javascript:return confirm('{% trans 'Note:\nAll colors would be renamed!\nChanges in the form will be lost!' %}')">
            {% trans 'auto rename color names' %}
            </a>
        </li>
        <li><a href="history/" class="historylink">{% trans "History" %}</a></li>
  </ul>
{% endif %}{% endif %}
<!-- admin/pylucid/colorscheme/change_form - object-tools - END -->
{% endblock %}


{% block extrahead %}{{ block.super }}
<!-- admin/pylucid/colorscheme/change_form - extrahead - START -->
<link rel="stylesheet" media="screen" type="text/css" href="{{ STATIC_URL }}PyLucid/colorpicker/css/colorpicker.css" />
<script type="text/javascript" src="{{ STATIC_URL }}PyLucid/colorpicker/js/colorpicker.js"></script>
<script type="text/javascript">
var color_name_re = new RegExp(/^color\S+value$/);
$(document).ready(function(){
    //
    // Add color picker to every color field
    // 
    $(':input').each(function(i, selected){
        input_name = $(selected).attr("name");
        if (input_name.match(color_name_re)) {
            log("Add color picker to:" + $(selected));
            color_value = $(selected).attr("value");
            log(color_value);
            $(selected).parent().ColorPicker({
                color: color_value,
			    onChange: function (hsb, hex, rgb) {
                    $(selected).attr("value", hex);		         
			        $(selected).parent().css('backgroundColor', '#' + hex);
			    },
                onBeforeShow: function () {
                    color_value = $(selected).attr("value");
                    log("before show:" + color_value)
                    $(selected).parent().ColorPickerSetColor(color_value);
                }
            });
            log("remove style");
            $(selected).removeAttr("style");
            if (color_value != "") {
                log("change background color to #"+color_value);
                $(selected).parent().css('backgroundColor', '#' + color_value);
            }
            $(selected).keyup(function() {
                color_value = $(this).attr("value");
                if (color_value.length==6) {
                    log("change color to #"+color_value);
                    $(this).parent().css('backgroundColor', '#' + color_value);
                    $(this).parent().ColorPickerSetColor(color_value);
                }
            });
        }
    });
});
</script>
<!-- admin/pylucid/colorscheme/change_form - extrahead - END -->
{% endblock %}


{% block content %}
<!-- admin/pylucid/colorscheme/change_form - content - START -->
<ul>
    <li>{% include "admin/pylucid/includes/design_link.html" %}</li>
</ul>
<!-- admin/pylucid/colorscheme/change_form - content - END -->
{{ block.super }}{% endblock %}