<script language="javascript">
 function [#CODE_FIELD#]_editBlocklyUpdated() {
  //var blockly=window.open('<#ROOTHTML#>blockly/?code_field=[#CODE_FIELD#]','BlocklyUpdated','width=100%,height=100%');
  var blockly = window.open('<#ROOTHTML#>blockly/?code_field=[#CODE_FIELD#]','BlocklyUpdated','scrollbars=no,width='+(screen.width-100)+',height='+(screen.height-200)+',left=50,top=100');
  blockly.creator=self;
  blockly.focus(); 

  return false;
 }

 function [#CODE_FIELD#]_editBlockly() {
  var blockly=window.open('<#ROOTHTML#>blocky/demos/code/index.html','Blockly','width=100%,height=100%');
  return false;
 }


</script>

<#LANG_CODE_TYPE#>:<br>
<div>
 <input type="radio" name="[#CODE_FIELD#]_code_type" class="[#CODE_FIELD#]_code_type" value="0"[#if CODE_TYPE!="1"#] checked[#endif#]> PHP
 <input type="radio" name="[#CODE_FIELD#]_code_type" class="[#CODE_FIELD#]_code_type" value="1"[#if CODE_TYPE="1"#] checked[#endif#]> Blockly
</div>

 <script language="javascript">

  $('.[#CODE_FIELD#]_code_type').click (function ()
  {
  var thisCheck = $(this);
   if (thisCheck.val()==1) {
    $('#xml_row').show();
    $('#[#CODE_FIELD#]_area').hide();
   } else {
    $('#xml_row').hide();
    $('#[#CODE_FIELD#]_area').show();
   }
  }
  );
 </script>


[#if CODE_TYPE="1"#]
<script language="javascript" type="text/javascript">
$(function() {
 $('#[#CODE_FIELD#]_area').hide();
});
</script>
[#else#]
<script src="<#ROOTHTML#>js/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="<#ROOTHTML#>js/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="<#ROOTHTML#>js/codemirror/addon/display/fullscreen.css">
<link rel="stylesheet" href="<#ROOTHTML#>js/codemirror/addon/fold/foldgutter.css">
<script src="<#ROOTHTML#>js/codemirror/addon/edit/matchbrackets.js"></script>
<script src="<#ROOTHTML#>js/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="<#ROOTHTML#>js/codemirror/mode/xml/xml.js"></script>
<script src="<#ROOTHTML#>js/codemirror/mode/javascript/javascript.js"></script>
<script src="<#ROOTHTML#>js/codemirror/mode/css/css.js"></script>
<script src="<#ROOTHTML#>js/codemirror/mode/clike/clike.js"></script>
<script src="<#ROOTHTML#>js/codemirror/mode/php/php.js"></script>
<script src="<#ROOTHTML#>js/codemirror/addon/display/fullscreen.js"></script>
<script src="<#ROOTHTML#>js/codemirror/addon/fold/foldcode.js"></script>
<script src="<#ROOTHTML#>js/codemirror/addon/fold/foldgutter.js"></script>
<script src="<#ROOTHTML#>js/codemirror/addon/fold/brace-fold.js"></script>
<script src="<#ROOTHTML#>js/codemirror/addon/fold/comment-fold.js"></script>
<script src="php.js"></script>

<script language="javascript">
var myTextArea;
$(document).ready(function(){
/*
 myTextArea=document.getElementById('[#CODE_FIELD#]');
 var myCodeMirror = CodeMirror(function(elt) {
 myTextArea.parentNode.replaceChild(elt, myTextArea);
 }, {
 value: myTextArea.value,
 lineNumbers: true,
        matchBrackets: true,
        mode: "text/x-php",
        indentUnit: 1,
        indentWithTabs: false
 });
 */
var myTextArea=document.getElementById('[#CODE_FIELD#]');
var editor = CodeMirror.fromTextArea(myTextArea, {
 value: myTextArea.value,
 lineNumbers: true,
        matchBrackets: true,
        mode: "text/x-php",
        indentUnit: 1,
        indentWithTabs: false,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
      extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Ctrl-S": function(instance) { document.getElementById('[#CODE_FIELD#]').form.submit(); },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        },
        "Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }
      }
 });

/*
     editor.operation(function() {
       for (var l = editor.firstLine(); l <= editor.lastLine(); ++l)
         editor.foldCode({line: l, ch: 0}, null, "fold");
    }); 
*/

});


</script>
<!--#
<script language="javascript" type="text/javascript" src="<#ROOTHTML#>js/edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript">
editAreaLoader.init({
        id : "[#CODE_FIELD#]"               // textarea id
        ,syntax: "php"                  // syntax to be uses for highgliting
        ,start_highlight: true          // to display with highlight mode on start-up
});
</script>
#-->
[#endif#]


<div id="xml_row"[#if CODE_TYPE!="1"#] style="display:none"[#endif#]>
[ <a href="#" onClick="return [#CODE_FIELD#]_editBlocklyUpdated();"><#LANG_EDIT#></a>
<!--#
<a href="#" onClick="return [#CODE_FIELD#]_editBlockly();" style="color:#888888">// <#LANG_EDIT#> (old)</a> 
#-->
]
<textarea name="xml" id="xml_code" rows="5" cols="60" class="span10" style="display:none">[#XML#]</textarea>
</div>