<?php
cs()->registerScriptFile(Yii::app()->baseUrl . '/js/ace/ace.js', CClientScript::POS_HEAD);
cs()->registerScriptFile(Yii::app()->baseUrl . '/js/ace/ext-language_tools.js', CClientScript::POS_HEAD);


$this->widget('ext.PlNavbar', array(
    'brand' => __('ROUTINGSCRIPTEXTENSION_HEADER_TITLE'),
    'brandUrl' => url('routingScriptExtension'),
    'htmlOptions' => array(
        'data-translation-id' => 'ROUTINGSCRIPTEXTENSION_HEADER_TITLE',
    ),
));

$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id' => 'script-extension-form',
    'action' => $model->isNewRecord ? array('create') : array()
        ));

echo $form->textFieldRow(
        $model, 'name', array(
    'class' => 'span3',
    'data-translation-id' => 'SCRIPT_EXTENSION_MODEL_NAME',
        )
);

echo $form->textFieldRow(
        $model, 'extension', array(
    'class' => 'span3',
    'data-translation-id' => 'SCRIPT_EXTENSION_MODEL_EXTENSION',
        )
);
?>

<div class="control-group">
    <label class="control-label" for="ScriptExtension_javascript">Javascript</label>
    <div class = "controls">

        <style type="text/css" media="screen">

            #editor {
                display: block;
                margin: 0px;
                width: 1000px;
                height: 300px;
                border: 1px solid #888;
            }

        </style>

        <div id="editor"><?php echo $model->javascript; ?></div>

        <?php
        echo $form->textArea($model, 'javascript', array(
            "style" => "display: none;
                        margin: 0px;
                        width: 1000px;
                        height: 300px;"
        ));
        ?>
    </div>
</div>    

<div class="control-group">
    <div class = "controls">

        <?php
        $this->widget('bootstrap.widgets.TbButton', array(
            'buttonType' => 'button',
            'type' => 'primary',
            'label' => __('GLOBAL_SAVE_BUTTON'),
            'htmlOptions' => array(
                'style' => 'margin-top:20px',
                'id' => 'routingScriptExtensionSaveBtn',
                'data-translation-id' => 'GLOBAL_SAVE_BUTTON',
            ),
        ));

        echo CHtml::submitButton('save', array('id' => 'routingScriptExtensionSaveBtnAction', 'style' => 'display:none'));
        ?>

        <script>


            var textarea = $('#ScriptExtension_javascript');
            var editor = ace.edit("editor");
            var langTools = ace.require("ace/ext/language_tools");
            editor.setOptions({
                enableBasicAutocompletion: true
            });
            var rhymeCompleter = {
                getCompletions: function(editor, session, pos, prefix, callback)
                {
                    var wordList = <?php echo $this->getCustomAutoCompleteWordList(); ?>;
                    if (prefix.length === 0) {
                        callback(null, []); return 
                    } else {
                        callback(null, wordList.map(function(ea) {
                                return {name: ea.word, value: ea.word, score: ea.score, meta: "rhyme"}
                        }));
                    }
                    
                    
                }
            }
            langTools.addCompleter(rhymeCompleter);
    
            editor.setTheme("ace/theme/textmate");
            editor.getSession().setMode("ace/mode/javascript");
            editor.setHighlightActiveLine(true);
            editor.setKeyboardHandler("ace/keyboard/ace");
            
            
            
            $('#routingScriptExtensionSaveBtn').on('click', function () {
                textarea.val(editor.getValue());
                $('#routingScriptExtensionSaveBtnAction').click();
            });
        </script>
    </div>
</div>
<?php
$this->endWidget();

