{% extends 'MainBundle:Master:master_head.html.twig' %}
{% block more_head %}
    {# Carga el script donde se realizarán las funciones de ajax#}
    <script type="text/javascript" src="{{ asset('bundles/validate/js/ajax/ValidateAuxTranscription.js') }}"></script>
    <link href="{{ asset('bundles/reading/js/external/google-code-prettify/prettify.css') }}" rel="stylesheet">
    <script src="{{ asset('bundles/reading/js/external/jquery.hotkeys.js') }}"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="{{ asset('bundles/reading/js/external/google-code-prettify/prettify.js') }}"></script>
    <script src="{{ asset('bundles/reading/js/bootstrap-wysiwyg.js') }}"></script>
    <link href="{{ asset('bundles/utilities/css/editor.css') }}" rel="stylesheet">
    {% if is_granted('ROLE_READING') %}
        <script src="{{ asset('bundles/utilities/ckeditor/ckeditor.js') }}"></script>
        <script src="{{ asset('bundles/utilities/ckeditor/adapters/jquery.js') }}"></script>
    {% else %}
        <script src="{{ asset('bundles/utilities/ckeditorOffice/ckeditor.js') }}"></script>
        <script src="{{ asset('bundles/utilities/ckeditorOffice/adapters/jquery.js') }}"></script>
    {% endif %}
    <script src="{{ asset('bundles/utilities/ckeditor/skins/moono-dark') }}"></script>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript">
        var UrlValidateAuxTranscription='{{ path('validate_saveTransAuxiliary') }}';
        var urlUpdateData='{{ path('reading_UpdateAddReading') }}';
        var urlRemoveData='{{ path('reading_RemoveAddReading') }}';
        var idAT='{{ Code_AuxTranscription }}';
        var msj_confirm= '{{ 'transcriber.msjconfirm'|trans([], 'LocalizationBundle') }}';
        var msj_error= '{{ 'transcriber.msjerror'|trans([], 'LocalizationBundle') }}';
        var msj_removeconfirm= '{{ 'transcriber.msjremoveconfirm'|trans([], 'LocalizationBundle') }}';
        var msj_removeerror= '{{ 'transcriber.msjremoveerror'|trans([], 'LocalizationBundle') }}';
        {% if is_granted('ROLE_VR') %}
            var rv = true;
        {% else %}
            var rv = false;
        {% endif %}
    </script>
    <link rel="stylesheet" href="{{ asset('bundles/main/css/bootstrap.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/indicator/css/bootstrap-select.css') }}"/>
    <link href="{{ asset('bundles/utilities/css/font-awesome.css') }}" rel="stylesheet">
    <style>
        .btn-primary, .btn-danger{
            color:#fff !important;
            box-shadow:none !important;
            text-shadow:none !important;
        }
    </style>
{% endblock more_head %}
{% block content%}
<div class="container-fluid">
    <div class="row">
	<form id="Auxiliary_Transcription" name="Auxiliary_Transcription">
            {#<div id="accordion">#}
                <div class="panel panel-default">
                    <div class="panel-body">
                    {#<h3>{{ 'menu.transcrip'|trans([], 'LocalizationBundle') }}:</h3>#}
                        <div style="min-height: 550px;">
                     
                            <input type="hidden" value="{{ Code_AuxTranscription }}" id="Code_AuxTranscription" name="Code_AuxTranscription" />
                            <input type="hidden" value="{{ app.request.locale }}" id="locale" name="locale" />
                            <!--Muestra un mensaje cuando se debe mostrar al usuario algún mensaje que no sea de error-->
                            <div id="confirm" class="ui-widget">
                                <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
                                    <p>
                                        <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                                    <div id="mensajeConfirm"></div>
                                    </p>
                                </div>
                            </div>
                            <!--Muestra un mensaje cuando se presenta algún error-->
                            <div id="error" class="ui-widget">
                                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;" type="hidden">
                                    <p id="mensajeError"> {{ 'addreading.errormsg'|trans([], 'LocalizationBundle') }}
                                        <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;">
                                            </span>
                                    </p>
                                </div>
                            </div>
                            <div id="contentSpeach" class="hero-unit">
                                {# <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                                    <div class="btn-group">
                                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                                            <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                                            <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                                        </ul>
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                                        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                                        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
                                        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                                        <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                                        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                                        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                                        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                                        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                                        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
                                        <div class="dropdown-menu input-append">
                                            <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                                            <button class="btn" type="button">Add</button>
                                        </div>
                                        <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>

                                    </div>

                                    <div class="btn-group">
                                        <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
                                        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                                        <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
                                    </div>
                                    <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
                                </div> #}
                                {% if is_granted('ROLE_VR') %}
                                    {# <div id="editor" name="editor" style="width: 70%;  height: 350px;" data-nusa-enabled="true">
                                        {{ contentTranscription.0.auxiliaryTranscription|raw }}
                                    </div> #}
                                    <div class="editor" name="editor" id="editor" data-nusa-enabled="true" contenteditable="true" >
                                        {{ contentTranscription.0.auxiliaryTranscription|raw }}
                                    </div>
                                {% else %}
                                    {# <div id="editor" name="editor" style="width: 70%;  height: 350px;">
                                        {{ contentTranscription.0.auxiliaryTranscription|raw }}
                                    </div> #}
                                    <textarea class="editor" name="editor" id="editor" >
                                        {{ contentTranscription.0.auxiliaryTranscription|raw }}
                                    </textarea>
                                {% endif %}
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <a href="#" id="bt_update" class="btn btn-primary btn-sm" role="button" aria-disabled="false">
	                                <span class="ui-button-text">{{ 'buttons.save'|trans([], 'LocalizationBundle') }}</span>
	                            </a>
	                            <a href="#" id="bt_remove" class="btn btn-danger btn-sm" role="button" aria-disabled="false">
	                            	<span class="ui-button-text">{{ 'buttons.remove'|trans([], 'LocalizationBundle') }}</span>
	                            </a>
                                    <a href="#" id="bt_clean" class="btn btn-primary btn-sm" role="button" aria-disabled="false">
                                        <span class="ui-button-text">{{ 'button.close'|trans([], 'LocalizationBundle') }}</span>
                                    </a>
                                </div>
                            </div>
                    </div>
                                <!--Muestra un mensaje cuando se realiza el proceso correctamente-->
                </div>
            </div>
	</form>
    </div>
</div>
    <script>
        $(function(){
            function initToolbarBootstrapBindings() {
                var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                            'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                            'Times New Roman', 'Verdana'],
                        fontTarget = $('[title=Font]').siblings('.dropdown-menu');
                $.each(fonts, function (idx, fontName) {
                    fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
                });
                $('a[title]').tooltip({container:'body'});
                $('.dropdown-menu input').click(function() {return false;})
                        .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
                        .keydown('esc', function () {this.value='';$(this).change();});

                $('[data-role=magic-overlay]').each(function () {
                    var overlay = $(this), target = $(overlay.data('target'));
                    overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
                });
                if ("onwebkitspeechchange"  in document.createElement("input")) {
                    var editorOffset = $('#editor').offset();
                    $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
                } else {
                    $('#voiceBtn').hide();
                }
            };
            function showErrorAlert (reason, detail) {
                var msg='';
                if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
                else {
                    console.log("error uploading file", reason, detail);
                }
                $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+
                        '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
            };
            initToolbarBootstrapBindings();
            $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
            window.prettyPrint && prettyPrint();
        });
    </script>
{% endblock content %}