{% block image_select_widget %}

    <div class="container">
        <div class="row">
            <input type="hidden" {{ block('widget_attributes') }} value="{{ value }}" />
            <input type="hidden" id="image_rotate_{{ attr.entity_var|id_string }}" name="{{ attr.entity_name }}[image_rotate_{{ attr.entity_var|id_string }}]" value="0" />
            <div id="selected{{ attr.entity_var|id_string }}" style="min-height: 200px;" class="well image-select text-center">{{ value|file_html(200)|raw }}</div>
        </div>

        <div class="row">
            <div class="col-sm-12 text-center">
                {{ include(
        '@IGACoreBundle/DHTML/modal.popup.html.twig',
        {
            'modalId': attr.entity_var|id_string,
            'modalAction': 'Select/ Upload Image'|phrase,
            'modalTitle': 'Choose an image'|phrase,
            'modalBody': '<div id="modalBody_' ~ attr.entity_var|id_string ~ '">' ~ 'Loading'|phrase ~ '...</div>',
            'userLanguage': userLanguage
        }
        ) }}

                <span class="text-left" style="padding-top: 4px;">
                    <a href="#" onclick="$('#selected{{ attr.entity_var|id_string }}').html(''); $('#{{ id }}').val(''); return false;" class="btn btn-primary">{{ 'Remove Image' }}</a>
                    <a href="#" onclick="rotateImg('{{ attr.entity_var|id_string }}'); return false;" class="btn btn-primary">{{ 'Rotate Image' }}</a>
                </span>
            </div>
        </div>
    </div>

    {% if attr.auto_update is not defined %}
        {% set auto_update = 1 %}
    {% else %}
        {% set auto_update = attr.auto_update %}
    {% endif %}

    {% if attr.entity_name_field is not defined %}
        {% set entity_name_field = 'content_title' %}
    {% else %}
        {% set entity_name_field = attr.entity_name_field %}
    {% endif %}

    <script language="Javascript">

        if (typeof rotation == 'undefined') {
            var rotation = new Array();
            var inputId = new Array();
            var dropzone_default = new Array();
            var fieldId = new Array('');
            var formId = new Array();
            var autoUpdate = new Array();
            var entityName = new Array();
            var entityId = new Array();
            var pleaseFileTitle = '{{ 'Please type a file title'|phrase }}';
            var browseImg = '{{ 'Browse Images'|phrase }}';
            var uploadImg = '{{ 'Upload Images'|phrase }}';
            var linkedImg = '{{ 'Linked Images'|phrase }}';
            var allImg = '{{ 'All Images'|phrase }}';
        }

        rotation['{{ attr.entity_var|id_string }}'] = 0;
        inputId['{{ attr.entity_var|id_string }}'] = '{{ id }}';
        dropzone_default['{{ attr.entity_var|id_string }}'] = null;
        fieldId = '{{ form.vars.id }}'.split('_');
        formId['{{ attr.entity_var|id_string }}'] = fieldId[0];
        entityName['{{ attr.entity_var|id_string }}'] = '{{ attr.entity_name }}';
        entityId['{{ attr.entity_var|id_string }}'] = '{{ attr.entity_id }}';
        autoUpdate['{{ attr.entity_var|id_string }}'] = {{ (auto_update + 0) }};
    </script>
{% endblock %}

{% block categories_select_widget %}

    <div class="col-sm-12 col-lg-6" id="divSelectCategory{{ attr.entity_var_name }}">
        <img src="{{ asset('/images/loader.gif') }}" border="0" />
    </div>
    <div class="col-sm-12 col-lg-6" id="divSelectSubCategory{{ attr.entity_var_name }}">
    </div>
    <span id="selectedCategory{{ attr.entity_var_name }}"></span>
    <div class="clearfix"></div>

    <script language="Javascript">

        var categoriesSelected{{ attr.entity_var_name }} = new Array();
        var categoriesSCnt{{ attr.entity_var_name }} = 0;
        function generateDisplay{{ attr.entity_var_name }}(jsonResponse, initial, parentId) {

            if (parentId != '') {
                divSelectObject = jQuery('#divSelectSubCategory{{ attr.entity_var_name }}');
                divSelectName = 'selectSubCategory{{ attr.entity_var_name }}';
                onChange = 'generateSelected{{ attr.entity_var_name }}();';
            } else {
                divSelectObject = jQuery('#divSelectCategory{{ attr.entity_var_name }}');
                divSelectName = 'selectCategory{{ attr.entity_var_name }}';
                onChange = 'getCategories{{ attr.entity_var_name }}(\'{{ attr.entity_name }}\', \'{{ attr.entity_id }}\', $(this).val(), false);';
            }

            if (jsonResponse['categories'].length <= 0) {
                generateSelected{{ attr.entity_var_name }}();
                divSelectObject.html('');
                return;
            }

            selectedString = '';
            parentName = '';
            if (jsonResponse.parent == null) {
                //parentName = '{{ 'Select a Category' }}';
                //selectedString = '{{ 'None Selected' }}';
            } else {
                //parentName = '{{ 'Select a Category in' }} ' + jsonResponse.parent.name;
                // jsonResponse.parent.full_name + ' {{ 'can be linked'|phrase }}'
                selectedString = '<input type="hidden" value="' + jsonResponse.parent.id + '" id="linkCategoryId{{ attr.entity_var_name }}">'
                        + '<input type="hidden" value="' + jsonResponse.parent.full_name + '" id="linkCategoryName{{ attr.entity_var_name }}">';
            }

            var options = new String('<select id="' + divSelectName + '" name="' + divSelectName + '"'
                    + 'onchange="' + onChange + '" class="span12" multiple><option value="">' + parentName + '</option>');
            var selected = '';
            for (cCnt = 0; cCnt < jsonResponse['categories'].length; cCnt++) {

                for (sCnt = 0; sCnt < jsonResponse['selected_categories'].length; sCnt++) {
                    if (jsonResponse['selected_categories'][sCnt].id == jsonResponse['categories'][cCnt]['id']) {
                        selected = ' selected';
                    }
                }
                options += '<option value="' + jsonResponse['categories'][cCnt]['id'] + '" ' + selected + '>' + jsonResponse['categories'][cCnt]['name'] + '</option>';
                selected = '';
            }

            options += '</select>';
            divSelectObject.html(selectedString + '<p>&nbsp;</p>' + options);
            jQuery('#' + divSelectName).attr('style', 'width: 100%;');
            jQuery('#' + divSelectName).select2({placeholder: "{{ 'Click or type here to select one or more'|phrase }}"});
            if (initial === true) {
                populateSelected{{ attr.entity_var_name }}(jsonResponse);
                if (parentId.length <= 0) {
                    selectedIds = new Array();
                    for (sCnt = 0; sCnt < jsonResponse['selected_categories'].length; sCnt++) {
                        selectedIds[selectedIds.length] = jsonResponse['selected_categories'][sCnt]['id'];
                    }
                    getCategories{{ attr.entity_var_name }}('{{ attr.entity_name }}', '{{ attr.entity_id }}', selectedIds, false);
                }
            }

            generateSelected{{ attr.entity_var_name }}();
        }

        function linkSelected{{ attr.entity_var_name }}() {

            var foundIt = false;
            if (jQuery('#linkCategoryId{{ attr.entity_var_name }}').length <= 0) {
                return false;
            }

            var linkNewId = jQuery('#linkCategoryId{{ attr.entity_var_name }}').val();
            var linkNewName = jQuery('#linkCategoryName{{ attr.entity_var_name }}').val();
            for (sCnt = 0; sCnt < categoriesSelected{{ attr.entity_var_name }}.length; sCnt++) {
                if (linkNewId == categoriesSelected{{ attr.entity_var_name }}[sCnt]['id']) {
                    foundIt = true;
                }
            }

            if (!foundIt) {

                var addOne = new Array();
                addOne['id'] = linkNewId;
                addOne['full_name'] = linkNewName;
                categoriesSelected{{ attr.entity_var_name }}[categoriesSCnt{{ attr.entity_var_name }}] = addOne;
                categoriesSCnt{{ attr.entity_var_name }}++;
            }

            generateSelected{{ attr.entity_var_name }}();
        }

        function unlinkSelected{{ attr.entity_var_name }}(categoryId) {

            var newCategories = new Array();
            for (sCnt = 0; sCnt < categoriesSelected{{ attr.entity_var_name }}.length; sCnt++) {
                if (categoryId != categoriesSelected{{ attr.entity_var_name }}[sCnt]['id']) {
                    newCategories[newCategories.length] = categoriesSelected{{ attr.entity_var_name }}[sCnt];
                }
            }

            categoriesSelected{{ attr.entity_var_name }} = newCategories;
            categoriesSCnt{{ attr.entity_var_name }} = newCategories.length;
            generateSelected{{ attr.entity_var_name }}();
        }

        function generateSelected{{ attr.entity_var_name }}() {

            var selectedCategories = new String();
            mainCats = jQuery('#selectCategory{{ attr.entity_var_name }}').val();
            if (mainCats == null) {
                return;
            }

            for (sCnt = 0; sCnt < mainCats.length; sCnt++) {
                selectedCategories += '<input type="hidden" name="{{ full_name }}" '
                        + 'value="' + mainCats[sCnt] + '" />';
            }

            if (jQuery('#selectSubCategory{{ attr.entity_var_name }}').length > 0 && jQuery('#selectSubCategory{{ attr.entity_var_name }}').val() != null) {
                subCats = jQuery('#selectSubCategory{{ attr.entity_var_name }}').val();
                for (sCnt = 0; sCnt < subCats.length; sCnt++) {
                    selectedCategories += '<input type="hidden" name="{{ full_name }}" '
                            + 'value="' + subCats[sCnt] + '" />';
                }
            }

            jQuery('#selectedCategory{{ attr.entity_var_name }}').html(selectedCategories);
            return;
            for (sCnt = 0; sCnt < categoriesSelected{{ attr.entity_var_name }}.length; sCnt++) {
                /*
                 selectedCategories += '<div class="span4 well well-sm">' + categoriesSelected{{ attr.entity_var_name }}[sCnt]['full_name']
                 + ' <input type="hidden" name="{{ full_name }}" '
                 + 'value="' + categoriesSelected{{ attr.entity_var_name }}[sCnt]['id'] + '" />'
                 + ' <button class="close" onclick="unlinkSelected{{ attr.entity_var_name }}(\'' + categoriesSelected{{ attr.entity_var_name }}[sCnt]['id'] + '\')">&times;</button></div> ';
                 */
                selectedCategories += '<input type="hidden" name="{{ full_name }}" '
                        + 'value="' + categoriesSelected{{ attr.entity_var_name }}[sCnt]['id'] + '" />';
            }

            jQuery('#selectedCategory{{ attr.entity_var_name }}').html(selectedCategories);
        }

        function populateSelected{{ attr.entity_var_name }}(jsonResponse) {

            for (sCnt = 0; sCnt < jsonResponse['selected_categories'].length; sCnt++) {

                var addOne = new Array();
                addOne['id'] = jsonResponse['selected_categories'][sCnt].id;
                addOne['full_name'] = jsonResponse['selected_categories'][sCnt]['full_name'];
                categoriesSelected{{ attr.entity_var_name }}[categoriesSCnt{{ attr.entity_var_name }}] = addOne;
                categoriesSCnt{{ attr.entity_var_name }}++;
            }

        }

        function getCategories{{ attr.entity_var_name }}(entityName, entityId, parentId, initial) {

            if (parentId == null) {
                parentId = new Array();
            }

            $.getJSON(Routing.generate('content_categories_browse_json', {'entity_id': entityId, 'entity_name': entityName, 'parent_id': parentId.join(',')}), function (response) {

                console.log(entityName);

                generateDisplay{{ attr.entity_var_name }}(response, initial, parentId);
            });
        }

        jQuery(document).ready(function () {
            getCategories{{ attr.entity_var_name }}('{{ attr.entity_name }}', '{{ attr.entity_id }}', new Array(), true);
        });
    </script>
{% endblock %}