Bug 13618: Add html filters to all the variables
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / patroncards / edit-layout.tt
index 0a5fcde..b93385b 100644 (file)
+[% SET footerjs = 1 %]
     [% INCLUDE 'doc-head-open.inc' %]
-    <title>Koha &rsaquo; Tools &rsaquo; Patron Card Creator</title>
+    <title>Koha &rsaquo; Tools &rsaquo; Patron card creator &rsaquo; Layout &rsaquo; [% IF ( layout_id ) %]Edit ([% layout_id | html %])[% ELSE %]New[% END %]</title>
     [% INCLUDE 'doc-head-close.inc' %]
-    <script type="text/JavaScript" language="JavaScript">
-        //<![CDATA[
-            $(document).ready(function() {
-                var selectedUnit = $("#units option:selected").attr("value");
-                var unitfields = $("#font_size,#field_1_llx,#field_1_lly,#field_2_llx,#field_2_lly,#field_3_llx,#field_3_lly,#barcode_Tx,#barcode_Ty,#image_1_Dx,#image_1_Tx,#image_1_Ty,#image_2_Dx,#image_2_Tx,#image_2_Ty");
-                $(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
-                $("#units").change(function(){
-                    $(".unit").html(getUnit($(this).val()));
-                });
-                Go($("#image_1_image_source").val(), 'image_1_image_name');
-                Go($("#image_1_image_source").val(), 'image_1_image_metrics');
-                $("#image_1_image_source").change(function(){
-                    $(".image_1_image_source").html(Go($(this).val(), 'image_1_image_name'));
-                    $(".image_1_image_source").html(Go($(this).val(), 'image_1_image_metrics'));
-                });
-                Go($("#image_2_image_source").val(), 'image_2_image_name');
-                Go($("#image_2_image_source").val(), 'image_2_image_metrics');
-                $("#image_2_image_source").change(function(){
-                    $(".image_2_image_source").html(Go($(this).val(), 'image_2_image_name'));
-                    $(".image_2_image_source").html(Go($(this).val(), 'image_2_image_metrics'));
-                });
-                var selectFieldNames = ["field_1","field_2","field_3"];
-                for (var i=0; i < selectFieldNames.length; i++) {
-                    Go($("#"+selectFieldNames[i]+"_enable").attr("checked"), selectFieldNames[i]+"_select");
-                }
-                $("#field_1_enable").change(function(){
-                    $(".field_1_enable").html(Go($(this).attr("checked"), 'field_1_select'));
-                });
-                $("#field_2_enable").change(function(){
-                    $(".field_2_enable").html(Go($(this).attr("checked"), 'field_2_select'));
-                });
-                $("#field_3_enable").change(function(){
-                    $(".field_3_enable").html(Go($(this).attr("checked"), 'field_3_select'));
-                });
-                $("#barcode_print").load(barcode_text('barcode_param'));
-                $("#barcode_print").change(function(){
-                    barcode_text('barcode_param');
-                });
-            function barcode_text(division) {
-                var eBarcode = document.getElementById(division);
-                if( $("input[name=barcode_print]:checked").attr("checked") ) {
-                    eBarcode.style.display = 'block';
-                } else {
-                    eBarcode.style.display = 'none';
-                    $('input[name=barcode_text_print]').attr('checked', false);
-                }
-            }
-            function getUnit(unit){
-                switch(unit){
-                    case "POINT":
-                        var unit = " pt";
-                    break;
-                    case "AGATE":
-                        var unit = " ag";
-                    break;
-                    case "INCH":
-                        var unit = " in";
-                    break;
-                    case "MM":
-                        var unit = " mm";
-                    break;
-                    case "CM":
-                        var unit = " cm";
-                    break;
-                    default:
-                        var unit = " pt";
-                    }
-                return unit;
-            }
-            function Go(oSelect, oElement){
-                var element = document.getElementById(oElement);
-                switch(true) {
-                    case /^.*_name/.test(oElement):
-                        if ((oSelect == 'patronimages') || (oSelect == 'none')) {
-                            element.style.display = 'none';
-                        }
-                        else {
-                            element.style.display = 'block';
-                        }
-                        break;
-                    case /^.*_metrics/.test(oElement):
-                        if ((oSelect == 'none') || (oSelect == '')) {
-                            element.style.display = 'none';
-                        }
-                        else {
-                            element.style.display = 'block';
-                        }
-                        break;
-                    case /^.*_select/.test(oElement):
-                        if (!oSelect) {
-                            element.style.display = 'none';
-                        }
-                        else {
-                            element.style.display = 'block';
-                        }
-                        break;
-                    default:
-                        return;
-                }
-                return;
-            }
-        });
-        //]]>
-    </script>
-    <script type="text/javascript">
-        //<![CDATA[
-        $(document).ready(function() {
-            $("#save").empty();
-            $("#cancel").empty();
-            buildButtons();
-         });
-        function submitForm() {
-            document.input.submit();
-        };
-        function buildButtons() {
-            var saveButton = new YAHOO.widget.Button({
-                type: "link",
-                onclick: {fn: submitForm},
-                label: _("Save"),
-                id: "save",
-                container: "save"
-            });
-            var cancelButton = new YAHOO.widget.Button({
-                type: "link",
-                href: "/cgi-bin/koha/patroncards/manage.pl?card_element=layout",
-                label: _("Cancel"),
-                id: "cancel",
-                container: "cancel",
-            });
-        };
-    </script>
 </head>
+
 <body id="pcard_edit-layout" class="tools pcard">
     [% INCLUDE 'header.inc' %]
     [% INCLUDE 'cat-search.inc' %]
     <div id="breadcrumbs">
         <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
         <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo;
-        <a href="/cgi-bin/koha/patroncards/home.pl">Patron Card Creator</a> &rsaquo;
-        <a href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Manage Patron Card Layouts</a> &rsaquo;
-        [% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] Patron Card Layout
+        <a href="/cgi-bin/koha/patroncards/home.pl">Patron card creator</a> &rsaquo;
+        <a href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Layouts</a> &rsaquo;
+        [% IF ( layout_id ) %]Edit ([% layout_id | html %])[% ELSE %]New[% END %]
     </div>
     <div id="doc3" class="yui-t2">
         <div id="bd">
             <div id="yui-main">
                 <div class="yui-b">
+                    <div class="yui-g">
+                    [% INCLUDE 'patroncards-toolbar.inc' %]
+                        <div class="yui-u first">
+
+                        </div>
+                    </div>
+
                 <!-- NOTE: The order of the elements on this form is crictical to correct processing. You've been warned...  -->
                 <form name="input" action="/cgi-bin/koha/patroncards/edit-layout.pl" method="get">
                 <div class="yui-g">
                 <div class="yui-g first">
                         <fieldset class="rows">
-                            <legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] Patron Card Text Layout</legend>
+                            <legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] patron card text layout</legend>
                             <ol>
                                 <li>
                                 <fieldset>
-                                <legend>General Settings</legend>
+                                <legend>General settings</legend>
+                                <ol>
                                 <li>
-                                    <label for="layout_name">Layout Name</label>
-                                    <input type="text" name="layout_name" id="layout_name" size="20" value="[% layout_name %]" />
+                                    <label for="layout_name">Layout name: </label>
+                                    <input type="text" name="layout_name" id="layout_name" size="20" value="[% layout_name | html %]" />
                                 </li>
                                 <li>
-                                    <label for="units">Units:</label>
+                                    <label for="units">Units: </label>
                                     <select id="units" name="units">
                                     [% FOREACH unit IN units %]
                                         [% IF ( unit.selected ) %]
-                                        <option value="[% unit.type %]" selected="selected">
+                                        <option value="[% unit.type | html %]" selected="selected">
                                         [% ELSE %]
-                                        <option value="[% unit.type %]">
+                                        <option value="[% unit.type | html %]">
                                         [% END %]
-                                        [% unit.desc %]
+                                        [% unit.desc | html %]
                                         </option>
                                     [% END %]
                                     </select>
                                 </li>
                                 <li>
-                                    <label for="page_side">Page Side:</label>
+                                    <label for="page_side">Page side: </label>
                                     [% IF ( page_side ) %]
                                     <input type="radio" name="page_side" id="page_side" value="F" />Front
                                     <input type="radio" name="page_side" id="page_side" value="B" checked="checked" />Back
                                     [% END %]
                                 </li>
                                 <li>
-                                    <label for="guide_box">Guide Box:</label>
+                                    <label for="guide_box">Guide box:</label>
                                     [% IF ( guide_box ) %]
                                     <input type="radio" name="guide_box" id="guide_box" value="1" checked="checked" />On
                                     <input type="radio" name="guide_box" id="guide_box" value="0" />Off
                                     <input type="radio" name="guide_box" id="guide_box" value="0" checked="checked" />Off
                                     [% END %]
                                 </li>
+                                <li>
+                                    <label for="guide_grid">Guide grid:</label>
+                                    [% IF ( guide_grid ) %]
+                                    <input type="radio" name="guide_grid" id="guide_grid" value="1" checked="checked" />On
+                                    <input type="radio" name="guide_grid" id="guide_grid" value="0" />Off
+                                    [% ELSE %]
+                                    <input type="radio" name="guide_grid" id="guide_grid" value="1" />On
+                                    <input type="radio" name="guide_grid" id="guide_grid" value="0" checked="checked" />Off
+                                    [% END %]
+                                </li>
+                                </ol>
                                 </fieldset>
                                 </li>
                                 <li>
                                     <fieldset>
-                                    <legend>Text Fields</legend>
+                                    <legend>Text fields</legend>
+                                    <ol>
                                         <li>
                                             <fieldset>
                                             [% IF ( field_1 ) %]
                                             <legend><input type="checkbox" name="field_1_enable" id="field_1_enable" value="1" /> Field 1</legend>
                                             [% END %]
                                             <div id="field_1_select" style="display: none;">
+                                            <ol>
                                             <li>
-                                                <label for="field_1_text">Text</label>
-                                                <input type="text" name="field_1_text" id="field_1_text" size="60" value="[% field_1_text |html %]" />
+                                                <label for="field_1_text">Text</label>
+                                                <input type="text" name="field_1_text" id="field_1_text" size="60" value="[% field_1_text | html %]" />
                                             </li>
                                             <li>
-                                                <label for="field_1_font">Font</label>
+                                                <label for="field_1_font">Font</label>
                                                 <select name="field_1_font" id="field_1_font">
                                                     [% FOREACH field_1_fon IN field_1_font %]
                                                     [% IF ( field_1_fon.selected ) %]
-                                                    <option value="[% field_1_fon.type %]" selected="selected">[% field_1_fon.name %]</option>
+                                                    <option value="[% field_1_fon.type | html %]" selected="selected">[% field_1_fon.name | html %]</option>
                                                     [% ELSE %]
-                                                    <option value="[% field_1_fon.type %]">[% field_1_fon.name %]</option>
+                                                    <option value="[% field_1_fon.type | html %]">[% field_1_fon.name | html %]</option>
                                                     [% END %]
                                                     [% END %]
                                                 </select>
                                             </li>
                                             <li>
-                                                <label for="field_1_font_size">Font Size</label>
-                                                <input type="text" name="field_1_font_size" id="field_1_font_size" size="2" value="[% field_1_font_size |html %]" />
+                                                <label for="field_1_font_size">Font size: </label>
+                                                <input type="text" name="field_1_font_size" id="field_1_font_size" size="2" value="[% field_1_font_size | html %]" />
                                                 <span class="font_unit"> pt</span>
                                             </li>
                                             <li>
-                                                <label for="field_1_text_alignment">Text Alignment</label>
+                                                <label for="field_1_text_alignment">Text alignment: </label>
                                                 <select name="field_1_text_alignment" id="field_1_text_alignment">
                                                     [% FOREACH field_1_text_alignmen IN field_1_text_alignment %]
                                                     [% IF ( field_1_text_alignmen.selected ) %]
-                                                    <option value="[% field_1_text_alignmen.type %]" selected="selected">[% field_1_text_alignmen.name %]</option>
+                                                    <option value="[% field_1_text_alignmen.type | html %]" selected="selected">[% field_1_text_alignmen.name | html %]</option>
                                                     [% ELSE %]
-                                                    <option value="[% field_1_text_alignmen.type %]">[% field_1_text_alignmen.name %]</option>
+                                                    <option value="[% field_1_text_alignmen.type | html %]">[% field_1_text_alignmen.name | html %]</option>
                                                     [% END %]
                                                     [% END %]
                                                 </select>
                                             </li>
                                             <li>
-                                                <label for="field_1_llx">Lower Left X Coordinate</label>
-                                                <input type="text" name="field_1_llx" id="field_1_llx" size="2" value="[% field_1_llx |html %]" />
+                                                <label for="field_1_llx">Lower left X coordinate: </label>
+                                                <input type="text" name="field_1_llx" id="field_1_llx" size="2" value="[% field_1_llx | html %]" />
                                             </li>
                                             <li>
-                                                <label for="field_1_lly">Lower Left Y Coordinate</label>
-                                                <input type="text" name="field_1_lly" id="field_1_lly" size="2" value="[% field_1_lly |html %]" />
+                                                <label for="field_1_lly">Lower left Y coordinate: </label>
+                                                <input type="text" name="field_1_lly" id="field_1_lly" size="2" value="[% field_1_lly | html %]" />
                                             </li>
+                                            </ol>
                                             </div>
                                             </fieldset>
                                         </li>
                                             <legend><input type="checkbox" name="field_2_enable" id="field_2_enable" value="1" /> Field 2</legend>
                                             [% END %]
                                             <div id="field_2_select" style="display: none;">
+                                            <ol>
                                             <li>
-                                                <label for="field_2_text">Text</label>
-                                                <input type="text" name="field_2_text" id="field_2_text" size="60" value="[% field_2_text |html %]" />
+                                                <label for="field_2_text">Text</label>
+                                                <input type="text" name="field_2_text" id="field_2_text" size="60" value="[% field_2_text | html %]" />
                                             </li>
                                             <li>
-                                                <label for="field_2_font">Font</label>
+                                                <label for="field_2_font">Font</label>
                                                 <select name="field_2_font" id="field_2_font">
                                                     [% FOREACH field_2_fon IN field_2_font %]
                                                     [% IF ( field_2_fon.selected ) %]
-                                                    <option value="[% field_2_fon.type %]" selected="selected">[% field_2_fon.name %]</option>
+                                                    <option value="[% field_2_fon.type | html %]" selected="selected">[% field_2_fon.name | html %]</option>
                                                     [% ELSE %]
-                                                    <option value="[% field_2_fon.type %]">[% field_2_fon.name %]</option>
+                                                    <option value="[% field_2_fon.type | html %]">[% field_2_fon.name | html %]</option>
                                                     [% END %]
                                                     [% END %]
                                                 </select>
                                             </li>
                                             <li>
-                                                <label for="field_2_font_size">Font Size</label>
-                                                <input type="text" name="field_2_font_size" id="field_2_font_size" size="2" value="[% field_2_font_size |html %]" />
+                                                <label for="field_2_font_size">Font size: </label>
+                                                <input type="text" name="field_2_font_size" id="field_2_font_size" size="2" value="[% field_2_font_size | html %]" />
                                                 <span class="font_unit"> pt</span>
                                             </li>
                                             <li>
-                                                <label for="field_2_text_alignment">Text Alignment</label>
+                                                <label for="field_2_text_alignment">Text alignment: </label>
                                                 <select name="field_2_text_alignment" id="field_2_text_alignment">
                                                     [% FOREACH field_2_text_alignmen IN field_2_text_alignment %]
                                                     [% IF ( field_2_text_alignmen.selected ) %]
-                                                    <option value="[% field_2_text_alignmen.type %]" selected="selected">[% field_2_text_alignmen.name %]</option>
+                                                    <option value="[% field_2_text_alignmen.type | html %]" selected="selected">[% field_2_text_alignmen.name | html %]</option>
                                                     [% ELSE %]
-                                                    <option value="[% field_2_text_alignmen.type %]">[% field_2_text_alignmen.name %]</option>
+                                                    <option value="[% field_2_text_alignmen.type | html %]">[% field_2_text_alignmen.name | html %]</option>
                                                     [% END %]
                                                     [% END %]
                                                 </select>
                                             </li>
                                             <li>
-                                                <label for="field_2_llx">Lower Left X Coordinate</label>
-                                                <input type="text" name="field_2_llx" id="field_2_llx" size="2" value="[% field_2_llx |html %]" />
+                                                <label for="field_2_llx">Lower left X coordinate: </label>
+                                                <input type="text" name="field_2_llx" id="field_2_llx" size="2" value="[% field_2_llx | html %]" />
                                             </li>
                                             <li>
-                                                <label for="field_2_lly">Lower Left Y Coordinate</label>
-                                                <input type="text" name="field_2_lly" id="field_2_lly" size="2" value="[% field_2_lly |html %]" />
+                                                <label for="field_2_lly">Lower left Y coordinate: </label>
+                                                <input type="text" name="field_2_lly" id="field_2_lly" size="2" value="[% field_2_lly | html %]" />
                                             </li>
+                                            </ol>
                                             </div>
                                             </fieldset>
                                         </li>
                                             <legend><input type="checkbox" name="field_3_enable" id="field_3_enable" value="0" /> Field 3</legend>
                                             [% END %]
                                             <div id="field_3_select" style="display: none;">
+                                            <ol>
                                             <li>
-                                                <label for="field_3_text">Text</label>
-                                                <input type="text" name="field_3_text" id="field_3_text" size="60" value="[% field_3_text |html %]" />
+                                                <label for="field_3_text">Text</label>
+                                                <input type="text" name="field_3_text" id="field_3_text" size="60" value="[% field_3_text | html %]" />
                                             </li>
                                             <li>
-                                                <label for="field_3_font">Font</label>
+                                                <label for="field_3_font">Font</label>
                                                 <select name="field_3_font" id="field_3_font">
                                                     [% FOREACH field_3_fon IN field_3_font %]
                                                     [% IF ( field_3_fon.selected ) %]
-                                                    <option value="[% field_3_fon.type %]" selected="selected">[% field_3_fon.name %]</option>
+                                                    <option value="[% field_3_fon.type | html %]" selected="selected">[% field_3_fon.name | html %]</option>
                                                     [% ELSE %]
-                                                    <option value="[% field_3_fon.type %]">[% field_3_fon.name %]</option>
+                                                    <option value="[% field_3_fon.type | html %]">[% field_3_fon.name | html %]</option>
                                                     [% END %]
                                                     [% END %]
                                                 </select>
                                             </li>
                                             <li>
-                                                <label for="field_3_font_size">Font Size</label>
-                                                <input type="text" name="field_3_font_size" id="field_3_font_size" size="2" value="[% field_3_font_size |html %]" />
+                                                <label for="field_3_font_size">Font size: </label>
+                                                <input type="text" name="field_3_font_size" id="field_3_font_size" size="2" value="[% field_3_font_size | html %]" />
                                                 <span class="font_unit"> pt</span>
                                             </li>
                                             <li>
-                                                <label for="field_3_text_alignment">Text Alignment</label>
+                                                <label for="field_3_text_alignment">Text alignment: </label>
                                                 <select name="field_3_text_alignment" id="field_3_text_alignment">
                                                     [% FOREACH field_3_text_alignmen IN field_3_text_alignment %]
                                                     [% IF ( field_3_text_alignmen.selected ) %]
-                                                    <option value="[% field_3_text_alignmen.type %]" selected="selected">[% field_3_text_alignmen.name %]</option>
+                                                    <option value="[% field_3_text_alignmen.type | html %]" selected="selected">[% field_3_text_alignmen.name | html %]</option>
                                                     [% ELSE %]
-                                                    <option value="[% field_3_text_alignmen.type %]">[% field_3_text_alignmen.name %]</option>
+                                                    <option value="[% field_3_text_alignmen.type | html %]">[% field_3_text_alignmen.name | html %]</option>
                                                     [% END %]
                                                     [% END %]
                                                 </select>
                                             </li>
                                             <li>
-                                                <label for="field_3_llx">Lower Left X Coordinate</label>
-                                                <input type="text" name="field_3_llx" id="field_3_llx" size="2" value="[% field_3_llx |html %]" />
+                                                <label for="field_3_llx">Lower left X coordinate: </label>
+                                                <input type="text" name="field_3_llx" id="field_3_llx" size="2" value="[% field_3_llx | html %]" />
                                             </li>
                                             <li>
-                                                <label for="field_3_lly">Lower Left Y Coordinate</label>
-                                                <input type="text" name="field_3_lly" id="field_3_lly" size="2" value="[% field_3_lly |html %]" />
+                                                <label for="field_3_lly">Lower left Y coordinate: </label>
+                                                <input type="text" name="field_3_lly" id="field_3_lly" size="2" value="[% field_3_lly | html %]" />
                                             </li>
+                                            </ol>
                                             </div>
                                             </fieldset>
                                         </li>
-                                    </fieldset>
-                                </li>
-                                    </fieldset>
-                                </li>
+                                    </ol>
                                     </fieldset>
                                 </li>
                             </ol>
                 </div>
                 <div class="yui-g">
                     <fieldset class="rows">
-                    <legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] Patron Card Graphic Layout</legend>
+                    <legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] patron card graphic layout</legend>
                     <ol>
 <!--
                             <li>
                                 <fieldset>
-                                <label for="guidebox">Draw Guide Boxes</label>
+                                <label for="guidebox">Draw guide boxes: </label>
                                 [% IF ( guidebox ) %]
                                 <input type="checkbox" name="guidebox" id="guidebox" value="1"  checked="checked" />
                                 [% ELSE %]
                         <li>
                             <fieldset>
                                 <legend>Barcode</legend>
+                                <ol>
                                 <li>
-                                    <label for="barcode_print">Print Card Number as Barcode</label>
+                                    <label for="barcode_print">Print card number as barcode: </label>
                                     [% IF ( barcode_print ) %]
                                     <input type="checkbox" name="barcode_print" id="barcode_print" value="1" checked="checked" />
                                     [% ELSE %]
                                     <input type="checkbox" name="barcode_print" id="barcode_print" value="1" />
                                     [% END %]
                                 </li>
+                                </ol>
                                 <div id="barcode_param" style="display: none;">
+                                <ol>
+                                <li>
+                                    <label for="barcode_llx">Lower left X coordinate: </label>
+                                    <input type="text" name="barcode_llx" id="barcode_llx" size="2" value="[% barcode_llx | html %]" />
+                                </li>
+                                <li>
+                                    <label for="barcode_lly">Lower left Y coordinate: </label>
+                                    <input type="text" name="barcode_lly" id="barcode_lly" size="2" value="[% barcode_lly | html %]" />
+                                </li>
                                 <li>
-                                    <label for="barcode_llx">Lower Left X Coordinate</label>
-                                    <input type="text" name="barcode_llx" id="barcode_llx" size="2" value="[% barcode_llx |html %]" />
+                                    <label for="barcode_height_scale">Scale height (relative to card): </label>
+                                    <input type="text" name="barcode_height_scale" id="barcode_height_scale" size="2" value="[% barcode_height_scale | html %]" />
                                 </li>
                                 <li>
-                                    <label for="barcode_lly">Lower Left Y Coordinate</label>
-                                    <input type="text" name="barcode_lly" id="barcode_lly" size="2" value="[% barcode_lly |html %]" />
+                                    <label for="barcode_width_scale">Scale width (relative to card): </label>
+                                    <input type="text" name="barcode_width_scale" id="barcode_width_scale" size="2" value="[% barcode_width_scale | html %]" />
                                 </li>
                                 <li>
-                                    <label for="barcode_type">Barcode Type</label>
+                                    <label for="barcode_type">Barcode type: </label>
                                     <select name="barcode_type" id="barcode_type">
                                         [% FOREACH barcode_typ IN barcode_type %]
                                         [% IF ( barcode_typ.selected ) %]
-                                        <option value="[% barcode_typ.type %]" selected="selected">[% barcode_typ.name %]</option>
+                                        <option value="[% barcode_typ.type | html %]" selected="selected">[% barcode_typ.name | html %]</option>
                                         [% ELSE %]
-                                        <option value="[% barcode_typ.type %]">[% barcode_typ.name %]</option>
+                                        <option value="[% barcode_typ.type | html %]">[% barcode_typ.name | html %]</option>
                                         [% END %]
                                         [% END %]
                                     </select>
                                 </li>
                                 <li>
-                                    <label for="barcode_text_print">Print Card Number as Text Under Barcode</label>
+                                    <label for="barcode_text_print">Print card number as text under barcode: </label>
                                     [% IF ( barcode_text_print ) %]
                                     <input type="checkbox" name="barcode_text_print" id="barcode_text_print" value="1" checked="checked" />
                                     [% ELSE %]
                                     <input type="checkbox" name="barcode_text_print" id="barcode_text_print" value="1" />
                                     [% END %]
                                 </li>
+                                </ol>
                                 </div>
                             </fieldset>
                         </li>
                         <li>
                             <fieldset>
                             <legend>Images</legend>
+                                <ol>
                                 <li>
                                     <fieldset>
                                     <legend>Image 1</legend>
+                                    <ol>
                                     <li>
-                                        <label for="image_1_image_source">Image Source</label>
+                                        <label for="image_1_image_source">Image source: </label>
                                         <select name="image_1_image_source" id="image_1_image_source">
                                             [% FOREACH image_1_image_sourc IN image_1_image_source %]
                                             [% IF ( image_1_image_sourc.selected ) %]
-                                            <option value="[% image_1_image_sourc.type %]" selected="selected">[% image_1_image_sourc.name %]</option>
+                                            <option value="[% image_1_image_sourc.type | html %]" selected="selected">[% image_1_image_sourc.name | html %]</option>
                                             [% ELSE %]
-                                            <option value="[% image_1_image_sourc.type %]">[% image_1_image_sourc.name %]</option>
+                                            <option value="[% image_1_image_sourc.type | html %]">[% image_1_image_sourc.name | html %]</option>
                                             [% END %]
                                             [% END %]
                                         </select>
                                     </li>
+                                    </ol>
                                     <div id="image_1_image_name" style="display: none;">
+                                    <ol>
                                     <li>
-                                        <label for="image_1_image_name">Image</label>
+                                        <label for="image_1_image_name">Image</label>
                                         <select name="image_1_image_name" id="image_1_image_name">
                                             [% FOREACH image_1_image_nam IN image_1_image_name %]
                                             [% IF ( image_1_image_nam.selected ) %]
-                                            <option value="[% image_1_image_nam.type %]" selected="selected">[% image_1_image_nam.name %]</option>
+                                            <option value="[% image_1_image_nam.type | html %]" selected="selected">[% image_1_image_nam.name | html %]</option>
                                             [% ELSE %]
-                                            <option value="[% image_1_image_nam.type %]">[% image_1_image_nam.name %]</option>
+                                            <option value="[% image_1_image_nam.type | html %]">[% image_1_image_nam.name | html %]</option>
                                             [% END %]
                                             [% END %]
                                         </select>
                                     </li>
+                                    </ol>
                                     </div>
                                     <div id="image_1_image_metrics" style="display: none;">
+                                    <ol>
                                     <li>
-                                        <label for="image_1_Dx">Display Height</label>
-                                        <input type="text" name="image_1_Dx" id="image_1_Dx" size="2" value="[% image_1_Dx |html %]" />
+                                        <label for="image_1_Dx">Display height: </label>
+                                        <input type="text" name="image_1_Dx" id="image_1_Dx" size="2" value="[% image_1_Dx | html %]" />
                                     </li>
                                     <li>
-                                        <label for="image_1_Tx">Lower Left X Coordinate</label>
-                                        <input type="text" name="image_1_Tx" id="image_1_Tx" size="2" value="[% image_1_Tx |html %]" />
+                                        <label for="image_1_Tx">Lower left X coordinate: </label>
+                                        <input type="text" name="image_1_Tx" id="image_1_Tx" size="2" value="[% image_1_Tx | html %]" />
                                     </li>
                                     <li>
-                                        <label for="image_1_Ty">Lower Left Y Coordinate</label>
-                                        <input type="text" name="image_1_Ty" id="image_1_Ty" size="2" value="[% image_1_Ty |html %]" />
+                                        <label for="image_1_Ty">Lower left Y coordinate: </label>
+                                        <input type="text" name="image_1_Ty" id="image_1_Ty" size="2" value="[% image_1_Ty | html %]" />
                                     </li>
+                                    </ol>
                                     </div>
-                                    <!-- These pdf image parameters are currently unused, but implimented and need to default to zero  -->
+                                    <!-- These pdf image parameters are currently unused, but implemented and need to default to zero  -->
                                     <input type="hidden" name="image_1_Ox" value="0" /><!-- Ox,Oy should be set to 0 unless you want special effects  see http://www.adobe.com/devnet/pdf/pdf_reference.html ISO 32000-1 -->
                                     <input type="hidden" name="image_1_Oy" value="0" />
                                     <input type="hidden" name="image_1_Sx" value="0" /><!-- Sx,Sy allow scaling of the image  -->
                                 <li>
                                     <fieldset>
                                     <legend>Image 2</legend>
+                                    <ol>
                                     <li>
-                                        <label for="image_2_image_source">Image Source</label>
+                                        <label for="image_2_image_source">Image source: </label>
                                         <select name="image_2_image_source" id="image_2_image_source">
                                             [% FOREACH image_2_image_sourc IN image_2_image_source %]
                                             [% IF ( image_2_image_sourc.selected ) %]
-                                            <option value="[% image_2_image_sourc.type %]" selected="selected">[% image_2_image_sourc.name %]</option>
+                                            <option value="[% image_2_image_sourc.type | html %]" selected="selected">[% image_2_image_sourc.name | html %]</option>
                                             [% ELSE %]
-                                            <option value="[% image_2_image_sourc.type %]">[% image_2_image_sourc.name %]</option>
+                                            <option value="[% image_2_image_sourc.type | html %]">[% image_2_image_sourc.name | html %]</option>
                                             [% END %]
                                             [% END %]
                                         </select>
                                     </li>
+                                    </ol>
                                     <div id="image_2_image_name" style="display: none;">
+                                    <ol>
                                     <li>
-                                        <label for="image_2_image_name">Image</label>
+                                        <label for="image_2_image_name">Image</label>
                                         <select name="image_2_image_name" id="image_2_image_name">
                                             [% FOREACH image_2_image_nam IN image_2_image_name %]
                                             [% IF ( image_2_image_nam.selected ) %]
-                                            <option value="[% image_2_image_nam.type %]" selected="selected">[% image_2_image_nam.name %]</option>
+                                            <option value="[% image_2_image_nam.type | html %]" selected="selected">[% image_2_image_nam.name | html %]</option>
                                             [% ELSE %]
-                                            <option value="[% image_2_image_nam.type %]">[% image_2_image_nam.name %]</option>
+                                            <option value="[% image_2_image_nam.type | html %]">[% image_2_image_nam.name | html %]</option>
                                             [% END %]
                                             [% END %]
                                         </select>
                                     </li>
+                                    </ol>
                                     </div>
                                     <div id="image_2_image_metrics" style="display: none;">
+                                    <ol>
                                     <li>
-                                        <label for="image_2_Dx">Display Height</label>
-                                        <input type="text" name="image_2_Dx" id="image_2_Dx" size="2" value="[% image_2_Dx |html %]" />
+                                        <label for="image_2_Dx">Display height: </label>
+                                        <input type="text" name="image_2_Dx" id="image_2_Dx" size="2" value="[% image_2_Dx | html %]" />
                                     </li>
                                     <li>
-                                        <label for="image_2_Tx">Lower Left X Coordinate</label>
-                                        <input type="text" name="image_2_Tx" id="image_2_Tx" size="2" value="[% image_2_Tx |html %]" />
+                                        <label for="image_2_Tx">Lower left X coordinate: </label>
+                                        <input type="text" name="image_2_Tx" id="image_2_Tx" size="2" value="[% image_2_Tx | html %]" />
                                     </li>
                                     <li>
-                                        <label for="image_2_Ty">Lower Left Y Coordinate</label>
-                                        <input type="text" name="image_2_Ty" id="image_2_Ty" size="2" value="[% image_2_Ty |html %]" />
+                                        <label for="image_2_Ty">Lower left Y coordinate: </label>
+                                        <input type="text" name="image_2_Ty" id="image_2_Ty" size="2" value="[% image_2_Ty | html %]" />
                                     </li>
+                                    </ol>
                                     </div>
-                                    <!-- These pdf image parameters are currently unused, but implimented and need to default to zero  -->
+                                    <!-- These pdf image parameters are currently unused, but implemented and need to default to zero  -->
                                     <input type="hidden" name="image_2_Ox" value="0" /><!-- Ox,Oy should be set to 0 unless you want special effects  see http://www.adobe.com/devnet/pdf/pdf_reference.html ISO 32000-1 -->
                                     <input type="hidden" name="image_2_Oy" value="0" /><!-- Sx,Sy allow scaling of the image  -->
                                     <input type="hidden" name="image_2_Sx" value="0" />
                                     <input type="hidden" name="image_2_Sy" value="0" />
                                     </fieldset>
                                 </li>
+                                </ol>
                             </fieldset>
                         </li>
                     </ol>
                 </div>
                 </div>
                     <fieldset class="action">
-                        <span id="save"><input type="submit" value="Save" /></span>
-                        <span id="cancel"><a class="cancel" href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Cancel</a></span>
+                        <input class="btn btn-default btn-default" type="submit" value="Save" />
+                        <a class="cancel" href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Cancel</a>
                         <input type="hidden" name="op" value="save" />
-                        <input type="hidden" name="layout_id" value="[% layout_id %]" />
+                        <input type="hidden" name="layout_id" value="[% layout_id | html %]" />
                     </fieldset>
                 </form>
                 </div>
             </div>
             <div class="yui-b">
-                [% INCLUDE 'patroncards-menu.inc' %]
+              [% INCLUDE 'tools-menu.inc' %]
             </div>
         </div>
-        [% INCLUDE 'intranet-bottom.inc' %]
+
+[% MACRO jsinclude BLOCK %]
+    <script>
+        $(document).ready(function() {
+            var selectedUnit = $("#units option:selected").attr("value");
+            var unitfields = $("#font_size,#field_1_llx,#field_1_lly,#field_2_llx,#field_2_lly,#field_3_llx,#field_3_lly,#barcode_Tx,#barcode_Ty,#image_1_Dx,#image_1_Tx,#image_1_Ty,#image_2_Dx,#image_2_Tx,#image_2_Ty");
+            $(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
+            $("#units").change(function(){
+                $(".unit").html(getUnit($(this).val()));
+            });
+            Go($("#image_1_image_source").val(), 'image_1_image_name');
+            Go($("#image_1_image_source").val(), 'image_1_image_metrics');
+            $("#image_1_image_source").change(function(){
+                $(".image_1_image_source").html(Go($(this).val(), 'image_1_image_name'));
+                $(".image_1_image_source").html(Go($(this).val(), 'image_1_image_metrics'));
+            });
+            Go($("#image_2_image_source").val(), 'image_2_image_name');
+            Go($("#image_2_image_source").val(), 'image_2_image_metrics');
+            $("#image_2_image_source").change(function(){
+                $(".image_2_image_source").html(Go($(this).val(), 'image_2_image_name'));
+                $(".image_2_image_source").html(Go($(this).val(), 'image_2_image_metrics'));
+            });
+            var selectFieldNames = ["field_1","field_2","field_3"];
+            for (var i=0; i < selectFieldNames.length; i++) {
+                Go($("#"+selectFieldNames[i]+"_enable").prop("checked"), selectFieldNames[i]+"_select");
+            }
+            $("#field_1_enable").change(function(){
+                $(".field_1_enable").html(Go($(this).prop("checked"), 'field_1_select'));
+            });
+            $("#field_2_enable").change(function(){
+                $(".field_2_enable").html(Go($(this).prop("checked"), 'field_2_select'));
+            });
+            $("#field_3_enable").change(function(){
+                $(".field_3_enable").html(Go($(this).prop("checked"), 'field_3_select'));
+            });
+            $("#barcode_print").load(barcode_text('barcode_param'));
+            $("#barcode_print").change(function(){
+                barcode_text('barcode_param');
+            });
+            function barcode_text(division) {
+                var eBarcode = document.getElementById(division);
+                if( $("input[name=barcode_print]:checked").prop("checked") ) {
+                    eBarcode.style.display = 'block';
+                } else {
+                    eBarcode.style.display = 'none';
+                    $('input[name=barcode_text_print]').prop('checked', false);
+                }
+            }
+            function getUnit(unit){
+                switch(unit){
+                    case "POINT":
+                        var unit = " pt";
+                    break;
+                    case "AGATE":
+                        var unit = " ag";
+                    break;
+                    case "INCH":
+                        var unit = " in";
+                    break;
+                    case "MM":
+                        var unit = " mm";
+                    break;
+                    case "CM":
+                        var unit = " cm";
+                    break;
+                    default:
+                        var unit = " pt";
+                    }
+                return unit;
+            }
+            function Go(oSelect, oElement){
+                var element = document.getElementById(oElement);
+                switch(true) {
+                    case /^.*_name/.test(oElement):
+                        if ((oSelect == 'patronimages') || (oSelect == 'none')) {
+                            element.style.display = 'none';
+                        } else {
+                            element.style.display = 'block';
+                        }
+                        break;
+                    case /^.*_metrics/.test(oElement):
+                        if ((oSelect == 'none') || (oSelect == '')) {
+                            element.style.display = 'none';
+                        } else {
+                            element.style.display = 'block';
+                        }
+                        break;
+                    case /^.*_select/.test(oElement):
+                        if (!oSelect) {
+                            element.style.display = 'none';
+                        } else {
+                            element.style.display = 'block';
+                        }
+                        break;
+                    default:
+                        return;
+                }
+                return;
+            }
+        });
+    </script>
+[% END %]
+
+[% INCLUDE 'intranet-bottom.inc' %]