[{if $js_init}]
<script type="text/javascript">
    // Add some translations.
    idoit.Translate.set('C__CMDB__GET__OBJECT', '[{$smarty.const.C__CMDB__GET__OBJECT}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT__ADD', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT__ADD"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT__NO_PRESELECTION', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT__NO_PRESELECTION"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT__REMOVE', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT__REMOVE"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__OBJECT_HAS_BEEN_ADDED', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__OBJECT_HAS_BEEN_ADDED"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT__0_FROM_TYPE_1_HAS_BEEN_REMOVED', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT__0_FROM_TYPE_1_HAS_BEEN_REMOVED"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__OBJECT_SELECTED', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__OBJECT_SELECTED"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT__0_IS_SELECTED', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT__0_IS_SELECTED"}]');
    idoit.Translate.set('LC__UNIVERSAL__ALL', ('[{isys type="lang" ident="LC__UNIVERSAL__ALL"}]'));
    idoit.Translate.set('LC__UNIVERSAL__PAGE', ('[{isys type="lang" ident="LC__UNIVERSAL__PAGE"}]'));
    idoit.Translate.set('LC__UNIVERSAL__OBJECT_TITLE', '[{isys type="lang" ident="LC__UNIVERSAL__OBJECT_TITLE"}]');
    idoit.Translate.set('LC__UNIVERSAL__OBJECT_TYPE', '[{isys type="lang" ident="LC__UNIVERSAL__OBJECT_TYPE"}]');
    idoit.Translate.set('LC__CMDB__CATG__RELATION', ('[{isys type="lang" ident="LC__CMDB__CATG__RELATION"}]').slice(0, 3) + '.');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__ADD_ALL_ON_PAGE', ('[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__ADD_ALL_ON_PAGE"}]'));
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__ADD_ALL_BY_FILTER', ('[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__ADD_ALL_BY_FILTER"}]'));
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__EMPTY_RESULTS', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__EMPTY_RESULTS"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__ERROR_DATA', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__ERROR_DATA"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__ERROR_URL', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__ERROR_URL"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__FILTER_LABEL', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__FILTER_LABEL"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__LOADING', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__LOADING"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__SEARCH_LABEL', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__SEARCH_LABEL"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__PAGINATEN_OF', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__PAGINATEN_OF"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__PAGINATEN_PAGES', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__PAGINATEN_PAGES"}]');
    idoit.Translate.set('LC__CMDB__OBJECT_BROWSER__SCRIPT__PRESELECTED_OBJECTS', '[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT__PRESELECTED_OBJECTS"}]');

    var returnElement = '[{$return_element}]',
        multiselection = !! parseInt('[{$multiselection}]'),
        firstColWidth = (multiselection ? '105px' : '40px');

    var browserFilter = {
        "specificCategory":  '[{$specificCategoryFilter}]',
        "globalCategory":    '[{$globalCategoryFilter}]',
        "objectType":        '[{$typeFilter}]',
        "objectTypeExclude": '[{$typeBlacklist}]',
        "cmdbStatus":        '[{$cmdb_filter}]'
    };

    // Initialize list compnents.
    window.browserList = new Browser.objectList('objectList', {
        jsonClient:    idoitJSON,
        listOptions:   {
            colgroup:                '<colgroup><col style="width:' + firstColWidth + ';" /></colgroup>',
            multiselection:          multiselection,
            firstSelection:          true,
            secondSelection:         false,
            secondSelectionExists:   [{$secondSelection|default:"false"}],
            objectSelectionCallback: '[{if $secondSelection}]browserPreselection.secondSelectionCall[{else}]browserPreselection.select[{/if}]',
            instanceName: 'browserList',
            useAuth:!!parseInt('[{$useAuth}]'),
            quickinfo: {
                active: [{isys_usersettings::get('gui.quickinfo.active', 1)}],
                delay:  [{isys_usersettings::get('gui.quickinfo.delay', 0.5)}]
            }
        },
        cmdb_filter:   '[{$cmdb_filter}]',
        browserFilter: browserFilter,
        urlBase:       '[{$config.www_dir}]',
        returnElement: returnElement,
        objectBrowserName: '[{$objectBrowserName}]'
    });

    window['acceptCallback[{$return_element}]'] = function() {
        var callback = function() {
            moveToParent('[{$return_element}]', '[{$return_view}]');
            [{if $formsubmit}]
            document.getElementsByName(C__GET__NAVMODE)[0].value = C__NAVMODE__JS_ACTION;
            $('isys_form').submit();
            if ($('preselectionLoader')) {
                $('preselectionLoader').removeClassName('hide');
            }

            if ($('browser-content')) {
                $('browser-content').hide();
            }

            if ($('bottombar')) {
                $('bottombar').hide();
            }
            [{else}]
            popup_close();
            [{/if}]
            // clear the scope
            delete window['acceptCallback[{$return_element}]'];
        };
        // register to callback
        idoit.callbackManager.registerCallback('idoit.popup.[{$return_element}].accept', callback);
        // unregister callback
        idoit.callbackManager.registerCallback('idoit.popup.[{$return_element}].accept', null);
        callback();
    };

    [{include file=$js_init}]

    Ajax.Responders.register({
        onCreate: function (oXHR, oJson) {
            $('ajaxLoader').show();
        },
        onComplete: function (oXHR, oJson) {
            $('ajaxLoader').hide();
        }
    });

    /**
      * Show and close the object creation wizard
      */
    window.showWindow = function (p_window, p_focus) {
        p_window = $(p_window);

        var right_div = $('rightsError');
        p_window.style.left = (($('browser-content').getWidth() / 2) - ($(p_window).getWidth() / 2)) + 'px';

        if (right_div) {
            if (right_div.visible) {
                right_div.hide();
            }
        }

        var afterFinishHandler = function () {
            // BlindDown sometimes has serious timing issues, so make sure the window is definitely visible:
            p_window.show();

            if (p_focus && $(p_focus) && $(p_focus).focus)
            {
                $(p_focus).focus();
            }
        };

        if (window.hasOwnProperty("popupNoAnimation") && window.popupNoAnimation === 1)
        {
            // We only need the afterFinishHandler here since it already has a .show directive (see above)
            afterFinishHandler();
        }
        else
        {
            new Effect.BlindDown(p_window, {
                duration:    0.2,
                afterFinish: afterFinishHandler
            });
        }

        $('browser-content').setOpacity(0.6);
    };

    window.closeWindow = function (p_window) {
        p_window = $(p_window);

        var right_div = $('rightsError');
        if (right_div) {
            if (right_div.visible) {
                right_div.hide();
            }
        }
        $('browser-content').setOpacity(1);

        if (window.hasOwnProperty("popupNoAnimation") && window.popupNoAnimation === 1)
        {
            p_window.hide();
        }
        else
        {
            new Effect.BlindUp(p_window, {duration:0.2});
        }
    };

    /**
      * Place the call and really create the object group
      */
    window.createObjectGroup = function(objectGroupTitle, forceOverwrite) {
        $('ajaxLoader').show();

        // Check if object type group should be created by a report
        if($('reportFilter').visible())
        {
            // browserList.cache

            if(browserPreselection.options.preselection.length > 0)
            {
                var objects_selected = browserPreselection.getData();
            }
            else
            {
                var objects_selected = [];
                window.browserList.cache.each(function(ele){
                    objects_selected.push(parseInt(ele['__checkbox__']));
                });
                objects_selected = Object.toJSON(objects_selected);
            }
        }
        else
        {
            var objects_selected = browserPreselection.getData();
        }

        /* lets call the object group creation*/
        idoitJSON.createObjectGroup(objectGroupTitle, objects_selected, forceOverwrite, function(xhr) {
            if (xhr.responseJSON) {
                if (!xhr.responseJSON.exists) {

                    closeWindow('new-objectgroup');

                    $('ajaxLoader').hide();

                    if (xhr.responseJSON > 0) {
                        $('object_group').insert(new Element('option', {value: xhr.responseJSON}).update(objectGroupTitle + ' (#)'));

                        $('object_group').setValue(xhr.responseJSON);

                        var $groupFilter = $('leftPane').down('li[data-filter="groupGroups"]');

                        if ($groupFilter) {
                            $groupFilter.simulate('click');
                        }
                    }

                } else {

                    if (confirm('Objectgruppe {0} existiert bereits.\nSoll die Gruppe trotzdem erzeugt werden?'.replace('{0}', objectGroupTitle))) {
                        idoitJSON.createObjectGroup(objectGroupTitle, browserPreselection.getData(), true, function(xhr) {

                            closeWindow('new-objectgroup');
                            $('ajaxLoader').hide();

                        });
                    }
                }
            }
        });
    };

    /**
      * Place the call and really create the object
      */
    window.createObject = function(objectTitle, objectType) {
        $('ajaxLoader').show();

        // Lets call the object creation.
        idoitJSON.createObject(objectTitle, objectType, function (xhr) {
            if (xhr.responseJSON > 0) {
                // Close dialog and hide ajax loader.
                closeWindow('new-object');

                $('ajaxLoader').hide();

                var $groupFilter = $('leftPane').down('li[data-filter="groupLatest"]');

                if ($groupFilter) {
                    // Show latest objects, where the new one should be on first place.
                    $('groupLatest').down('select').setValue('latest-created');

                    $groupFilter.simulate('click');
                }
            } else {
                idoit.Notify.info('Error while creating the object. Please try again. Error: ' + transport.responseText + ', HTTP-Status: ' + transport.statusText, {life:5});
            }
        });
    };

    /**
     * Checks right of the selected objecttype
     * @param p_objtype
     */
    window.checkEditRightByObjType = function (p_objtype) {
        var rightToCheck = '[{$checkRight}]';

        idoitJSON.getRightsByObjectTypeId(p_objtype, rightToCheck, function (transport) {
            var json = transport.responseJSON,
                $right_div = $('rightsError');

            if ($right_div.visible()) {
                $right_div.hide();
            }

            if (json.success) {
                $('btn_createObject')
                    .enable()
                    .writeAttribute('onclick', "createObject($('createObjectTitle').value, $('createObjectType').value);");
            } else {
                $('btn_createObject')
                    .disable()
                    .writeAttribute('onclick', "checkEditRightByObjType($('createObjectType').value)");

                $right_div.down('p').update(json.message);

                new Effect.Appear($right_div, {duration: 0.5});
            }
        });
    };


    /**
     * Checks right of the selected objecttype, for the "create object group" button.
     */
    window.checkEditRightByObjTypeForObjGroup = function () {
        var rightToCheck = '[{$checkRight}]';

        idoitJSON.getRightsByObjectTypeId('[{$smarty.const.C__OBJECT_TYPE__GROUP}]', rightToCheck, function (transport) {
            var json = transport.responseJSON,
                right_div = $('rightsError');

            if (right_div.visible) {
                right_div.hide();
            }

            if (json.success) {
                $('btn_createObjectGroup')
                    .enable()
                    .writeAttribute('onclick', "createObjectGroup($F('createObjectGroupTitle'));");
            } else {
                $('btn_createObjectGroup')
                    .disable()
                    .writeAttribute('onclick', "checkEditRightByObjTypeForObjGroup();showWindow('new-objectgroup');$('selectedObjectsForGroup').update(browserPreselection.options.preselection.length);");

                right_div.down('p').update(json.message);

                new Effect.Appear(right_div, {
                    duration: 0.5
                });
            }
        });
    };

    // Check whether report dropdown exists or not
    if ($('report_dropdown')) {
        $('report_dropdown').on('change', function() {
            browserList.performRequest('cmdb/browse/report/' + this.value);
        });
    }

    /**
     * Register closing on keydown when popup is unused
     */
    document.on('keydown', function(ev) {
        if (ev.keyCode == Event.KEY_ESC || ev.keyCode == Event.KEY_RETURN) {
            popup_close();
        }
    });

    /**
     * Register escape key for closing the popup
     */
    $('popup-object-ng-[{$return_element}]').observe('keydown', function(ev) {
        ev = ev || window.event;
        if (ev.keyCode == Event.KEY_ESC) {
            [{if $callback_abort}][{$callback_abort}][{/if}]
            popup_close();
        }
        else if (ev.keyCode == Event.KEY_RETURN) {
            window['acceptCallback[{$return_element}]']();
        }
    });
</script>
[{else}]

    [{assign var=error value='js_init not set.'}]

[{/if}]

<div id="popup-object-ng-[{$return_element}]">
    <h3 class="popup-header">
        <img class="fr mouse-pointer popup-closer" alt="x" src="[{$dir_images}]prototip/styles/default/close.png">
        <img class="fr mr10" id="ajaxLoader" style="display:none; margin-top:-1px;" alt="" src="[{$dir_images}]ajax-loading.gif">
        <span>[{$browser_title|default:"Browser"}]</span>
    </h3>

    [{if !$error}]
    <div class="m10" id="preselectionLoader"><img src="[{$dir_images}]ajax-loading-big.gif" class="vam" /> [{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SCRIPT_JS__LOADING"}]</div>

    <div id="new-object" style="display:none;">
        <h3 class="popup-header">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__CREATE_NEW_OBJECT"}]</h3>

        <table class="m10 padding spacing vat">
            <colgroup>
                <col width="30%"/>
            </colgroup>
            <tr>
                <td>[{isys type="f_label" name="createObjectTitle" ident="LC__UNIVERSAL__OBJECT_TITLE"}]</td>
                <td><input type="text" class="input" id="createObjectTitle" name="createObjectTitle" onkeypress="if(event.keyCode == Event.KEY_RETURN) { event.preventDefault(); return false; }"/></td>
            </tr>
            <tr>
                <td>[{isys type="f_label" ident="LC__UNIVERSAL__OBJECT_TYPE" name="createObjectType"}]</td>
                <td>[{isys type="f_dialog" p_bInfoIconSpacer="0" p_bDbFieldNN=1 status=0 exclude="C__OBJTYPE__CONTAINER;C__OBJTYPE__LOCATION_GENERIC" p_bEditMode=1 p_bEnableMetaMap=0 p_arData=$allObjectTypes p_onChange="checkEditRightByObjType(this.value);" id="createObjectType" sort=true name="createObjectType" disableInputGroup=true}]</td>
            </tr>
        </table>

        <div class="popup-footer" style="position: relative">
            <button type="button" id="btn_createObject" class="btn" onclick="createObject($F('createObjectTitle'), $F('createObjectType'));">
                <img src="[{$dir_images}]icons/silk/tick.png" class="mr5"/><span>[{isys type="lang" ident="LC__UNIVERSAL__CREATE_OBJECT"}]</span>
            </button>
            <button type="button" class="btn" onclick="closeWindow('new-object');">
                <img src="[{$dir_images}]icons/silk/cross.png" class="mr5"/><span>[{isys type="lang" ident="LC__UNIVERSAL__BUTTON_CANCEL"}]</span>
            </button>
        </div>
    </div>

    <div id="new-objectgroup" style="display:none;">
        <h3 class="popup-header">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__CREATE_NEW_OBJECT_GROUP_FROM_SELECTION"}]</h3>

        <table class="m10 padding spacing vat">
            <colgroup>
                <col width="50%"/>
            </colgroup>
            <tr>
                <td>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SELECTED_ELEMENTS"}]</td>
                <td id="selectedObjectsForGroup"></td>
            </tr>
            <tr>
                <td>[{isys type="f_label" ident="LC__CMDB__OBJECT_BROWSER__NAME_OF_THE_GROUP" name="createObjectGroupTitle"}]</td>
                <td><input type="text" class="input input-block" id="createObjectGroupTitle" name="createObjectGroupTitle"/></td>
            </tr>
        </table>

        <div class="popup-footer" style="position: relative">
            <button type="button" id="btn_createObjectGroup" class="btn" onclick="createObjectGroup($F('createObjectGroupTitle'));">
                <img src="[{$dir_images}]icons/silk/tick.png" class="mr5"/><span>[{isys type="lang" ident="LC__UNIVERSAL__CREATE_OBJECT"}]</span>
            </button>
            <button type="button" class="btn" onclick="closeWindow('new-objectgroup');">
                <img src="[{$dir_images}]icons/silk/cross.png" class="mr5"/><span>[{isys type="lang" ident="LC__UNIVERSAL__BUTTON_CANCEL"}]</span>
            </button>
        </div>
    </div>

    <div id="rightsError" class="box-red" style="display:none;">
        <h3 class="p5 gradient">[{isys type="lang" ident="LC__AUTH__EXCEPTION"}] <a href="javascript:" onclick="$('rightsError').fade({duration:0.5});" style="color:#a61616;" class="bold fr">&times;</a></h3>
        <p class="p5"></p>
    </div>

    <div class="browser-content" id="browser-content" style="display:none;">
        <div id="objectview" class="object-browser-content-area">
            <div id="leftPane" class="fl browserContent">
                <div>
                    <h3 class="p10">[{isys type="lang" ident="LC__UNIVERSAL__VIEW"}]</h3>

                    <ul>
                        [{if !$categoryFilter}]
                            [{if is_array($objectTypeFilter) && count($objectTypeFilter)}]<li data-filter="groupObjectType">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BY_OBJECT_TYPE"}]</li>[{/if}]
                            [{if is_array($objectGroupFilter) && count($objectGroupFilter)}]<li data-filter="groupGroups">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BY_GROUPS"}]</li>[{/if}]
                            [{if is_array($personGroupFilter) && count($personGroupFilter)}]<li data-filter="groupPersons">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BY_PERSON_GROUPS"}]</li>[{/if}]
                        [{else}]
                            [{if is_array($arCategoryFilter)}]<li data-filter="groupCategoryData">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BY_SPECIFIC"}]</li>[{/if}]
                        [{/if}]

                        [{if !$categoryFilter && !$tabs.report.disabled}]<li data-filter="reportFilter">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BY_REPORT"}]</li>[{/if}]
                    </ul>

                    [{if !$tabs.search.disabled || !$tabs.location.disabled || is_array($arRelationTypes) || is_array($dateFilter)}]
                        <hr class="m10 mr0" style="border-style: dotted;" />
                        <ul>
                            [{if !$categoryFilter && is_array($arRelationTypes) && count($arRelationTypes)}]<li data-filter="groupRelationTypes">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BY_RELATIONS"}]</li>[{/if}]
                            [{if !$tabs.location.disabled}]<li data-filter="locationView">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__LOCATION_VIEW"}]</li>[{/if}]
                            [{if !$categoryFilter && is_array($dateFilter) && count($dateFilter)}]<li data-filter="groupLatest">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BY_DATE"}]</li>[{/if}]
                            [{if !$tabs.search.disabled}]<li data-filter="searchFilter">[{isys type="lang" ident="LC__UNIVERSAL__SEARCH"}]</li>[{/if}]
                        </ul>
                    [{/if}]
                </div>

                <ul>
                    <li class="selected-objects" data-filter="selectedObjects">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__SELECTED_OBJECTS"}] (<span id="numObjects">0</span>)</li>
                </ul>
            </div>

            <script type="text/javascript">
                var $leftPane  = $('leftPane'),
                    $searchBar = $('obj-filter');

                $leftPane.on('click', 'li', function (ev) {
                    var $li         = ev.findElement('li'),
                        $objectList = $('objectList'),
                        $secondList = $('portList'),
                        $newObject  = $('new-object-button'),
                        groupName   = $li.readAttribute('data-filter'),
                        $group      = $(groupName),
                        $parameter;

                    $leftPane.select('li.selected').invoke('removeClassName', 'selected');

                    $$('.browserContent .groups').invoke('hide');

                    $li.addClassName('selected');

                    if ($group) {
                        $parameter = $group.show().down('select,input');

                        $objectList.show();
                        if ($newObject) {
                            $newObject.show();
                        }

                        if ($secondList) {
                            $secondList.show();
                        }

                        if (groupName === 'searchFilter') {
                            // Resetting the "internal" search string is necessary to trigger a new search by simulating a change event.
                            window.browserList.searchString = '';
                            window.browserList.showError('[{isys type='lang' ident='LC__CMDB__OBJECT_BROWSER__ENTER_SEARCH_PHRASE'}]');
                        } else if (groupName === 'locationView') {
                            // Special treatment for location view
                            $parameter = false;
                            $objectList.hide();

                            if ($newObject) {
                                $newObject.hide();
                            }

                            if ($secondList) {
                                $secondList.hide();
                            }
                        } else if (groupName === 'selectedObjects') {
                            // Special treatment for selected objects.
                            $parameter = false;
                            $objectList.hide();

                            if ($newObject) {
                                $newObject.hide();
                            }

                            if ($secondList) {
                                $secondList.hide();
                            }
                        }

                        $group.show();

                        if ($parameter) {
                            $parameter.focus();
                            $parameter.simulate('change');
                        }
                    }
                });

                // Select the first object filter.
                $leftPane.down('li').simulate('click');

                // Check whether search bar exists or not
                if ($searchBar) {
                    $searchBar.on('keydown', function (ev) {
                        if (ev.keyCode === Event.KEY_RETURN) {
                            ev.preventDefault();
                            ev.stopPropagation();
                            return false;
                        }
                    });

                    $searchBar.on('keyup', function () {
                        delay(function () {
                            window.browserList.search($searchBar);
                        }, 500);
                    });

                    $searchBar.on('change', function () {
                        window.browserList.search($searchBar);
                    });
                }
            </script>

            <div id="rightPane" class="browserContent">
                <div>
                    [{if !$categoryFilter}]
                    <div id="new-object-button" class="fr m5">
                        <button type="button" class="btn" onclick="showWindow('new-object', 'createObjectTitle');checkEditRightByObjType($F('createObjectType'));">
                            <img src="[{$dir_images}]icons/silk/add.png" class="mr5" /><span>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__CREATE_NEW_OBJECT"}]</span>
                        </button>
                    </div>

                    [{if is_array($objectTypeFilter) && count($objectTypeFilter)}]
                    <div id="groupObjectType" class="groups">
                        [{isys name="object_type" id="object_type" type="f_dialog" p_strClass="input-small" p_onChange="if (this.selectedIndex > 0) {browserList.searchByType(Object.prototype.hasOwnProperty.call(this.options, this.selectedIndex) ? this.options[this.selectedIndex].value : 0);}" p_strSelectedID=$defaultObjectTypeFilter p_bInfoIconSpacer=0 p_bDbFieldNN=0 status=0 exclude="C__OBJTYPE__CONTAINER;C__OBJTYPE__LOCATION_GENERIC" p_bEditMode=1 p_arData=$objectTypeFilter p_bEnableMetaMap=0 sort=true disableInputGroup=true}]
                    </div>
                    [{/if}]

                    [{if is_array($objectGroupFilter) && count($objectGroupFilter)}]
                    <div id="groupGroups" style="display:none;" class="groups">
                        [{isys type="f_dialog" p_onChange="browserList.searchByGroup(\$F(this));" p_bInfoIconSpacer="0" p_bDbFieldNN=0 status=0 p_bEditMode=1 p_arData=$objectGroupFilter p_bEnableMetaMap=0 id="object_group" sort=true name="object_group" p_strClass="input-small" disableInputGroup=true}]
                    </div>
                    [{/if}]

                    [{if is_array($personGroupFilter) && count($personGroupFilter)}]
                    <div id="groupPersons" style="display:none;" class="groups">
                        [{isys type="f_dialog" p_onChange="browserList.searchByPersonGroup(\$F(this));" p_bInfoIconSpacer="0" p_bDbFieldNN=0 status=0 p_bEditMode=1 p_arData=$personGroupFilter p_bEnableMetaMap=0 id="person_group" sort=true name="person_group" p_strClass="input-small" disableInputGroup=true}]
                    </div>
                    [{/if}]

                    [{if is_array($arRelationTypes)}]
                    <div id="groupRelationTypes" style="display:none;" class="groups">
                        <select class="input input-small" onchange="browserList.searchByRelationType($F(this));">
                            <option value="-1">-</option>
                            [{foreach $arRelationTypes as $key => $value}]
                            <option value="[{$key}]">[{isys type="lang" ident=$value}]</option>
                            [{/foreach}]
                        </select>
                    </div>
                    [{/if}]

                    [{if is_array($dateFilter) && count($dateFilter)}]
                    <div id="groupLatest" style="display:none;" class="groups">
                        <select class="input input-small" onchange="browserList.searchByTimeCondition($F(this));">
                            <option value="-1">-</option>
                            [{foreach $dateFilter as $key => $value}]
                            <option value="[{$key}]">[{isys type="lang" ident=$value}]</option>
                            [{/foreach}]
                        </select>
                    </div>
                    [{/if}]

                    [{else}]
                    <div id="groupCategoryData">
                        <select name="object_catfilter" class="input input-small m10" id="object_catfilter" onchange="if (this.selectedIndex != 0) browserList.searchByCategoryFilter({request: $F(this), objID: glob(C__CMDB__GET__OBJECT)}, '[{$categoryFilter}]');">
                            <option value="-1">-</option>
                            [{foreach $arCategoryFilter as $request => $filter}]
                            <option value="[{$request}]">[{isys type="lang" ident=$filter}]</option>
                            [{/foreach}]
                        </select>
                    </div>
                    [{/if}]

                    [{if !$tabs.search.disabled}]
                    <div id="searchFilter" style="display:none;" class="groups">
                        <label for="obj-filter">[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__ENTER_SEARCH_PHRASE"}]</label>

                        <input type="search" placeholder="[{isys type='lang' ident='LC__CMDB__OBJECT_BROWSER__ENTER_SEARCH_PHRASE'}]" class="input input-small ml20" id="obj-filter" name="obj-filter" />
                    </div>
                    [{/if}]

                    [{if !$tabs.report.disabled}]
                    <div id="reportFilter" style="display:none;" class="groups">
                        <div class="fr" id="filterReports_btn" style="display:none; margin-top:-2px;">
                            <button type="button" class="btn" onclick="checkEditRightByObjTypeForObjGroup($F('createObjectType'));showWindow('new-objectgroup');$('selectedObjectsForGroup').update(window.browserList.cache.length);" title="[{isys type='lang' ident='LC__CMDB__OBJECT_BROWSER__CREATE_NEW_OBJECT_GROUP_FROM_REPORT_NOTICE'}]">
                                <img src="[{$dir_images}]icons/silk/add.png" class="mr5" /><span>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__CREATE_NEW_OBJECT_GROUP_FROM_REPORT"}]</span>
                            </button>
                        </div>

                        <div id="filterReports">
                            <label for="report_dropdown">[{isys type="lang" ident="LC__REPORT__BROWSE_REPORTS"}]</label>

                            <select id="report_dropdown" name="report_dropdown" onchange="if($F(this) == '-')$('filterReports_btn').hide(); else $('filterReports_btn').show();" class="input input-small ml20">
                                <option value="-">-</option>
                                [{foreach $reports as $report_category => $reports_arr}]
                                    <optgroup label="[{$report_category}]">
                                        [{foreach $reports_arr as $report_id => $report_title}]
                                            <option value="[{$report_id}]">[{$report_title}]</option>
                                        [{/foreach}]
                                    </optgroup>
                                [{/foreach}]
                            </select>
                        </div>
                    </div>
                    [{/if}]

                    <div id="locationView" style="display:none;" class="groups">
                        <div class="browserContent">
                            <div class="p10" id="locationBrowser"></div>
                        </div>
                        <script type="text/javascript">[{$locationBrowser}]</script>
                    </div>

                    <div id="selectedObjects" style="display:none;" class="groups">
                        <div class="browserContent">

                            [{if !$secondSelection}]
                                <div class="mr5 mb5">
                                    <button type="button" class="btn fr" onclick="checkEditRightByObjTypeForObjGroup($F('createObjectType'));showWindow('new-objectgroup');$('selectedObjectsForGroup').update(browserPreselection.options.preselection.length);">
                                        <img src="[{$dir_images}]icons/silk/add.png" class="mr5" /><span>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__CREATE_NEW_OBJECT_GROUP_FROM_SELECTION"}]</span>
                                    </button>

                                    <br class="cb" />
                                </div>
                            [{/if}]

                            <div id="objectPreselection"></div>
                        </div>
                    </div>
                </div>

                <div id="objectList"[{if $secondSelection}] class="left fl"[{/if}]>
                    <p class="p5 m10 box-green"><strong>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__PLEASE_MAKE_A_SELECTION"}]</strong></p>
                </div>

                [{if $secondSelection}]
                <div id="portList" class="right fl">
                    <p class="p5 m10 box-green"><strong>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__PLEASE_MAKE_A_SELECTION"}]</strong></p>
                </div>
                [{/if}]
            </div>
        </div>
    </div>

    <div class="popup-footer">
        <p id="latestLog" class="fr"></p>

        <button type="button" class="btn mr5" onclick="window['acceptCallback[{$return_element}]']();">
            <img src="[{$dir_images}]icons/silk/tick.png" class="mr5" /><span>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BUTTON_SAVE"}]</span>
        </button>
        <button type="button" class="btn popup-closer" onclick="[{if $callback_abort}][{$callback_abort}][{/if}]">
            <img src="[{$dir_images}]icons/silk/cross.png" class="mr5" /><span>[{isys type="lang" ident="LC__CMDB__OBJECT_BROWSER__BUTTON_CANCEL"}]</span>
        </button>
    </div>

    [{else}]

    <div>
        <p class="emptyPageMessage text-lightgrey"><img src="[{$dir_images}]outlet.png" class="" /> [{$error}]</p>

        [{if $errorDetail}]
        <pre class="p10" style="margin-top:100px;height:300px;overflow:auto;border:1px solid #ccc;background-color:#eee;">[{$errorDetail}]</pre>
        [{/if}]
    </div>
    [{/if}]
</div>

<script>
    (function () {
        'use strict';

        var $popup = $('popup-object-ng-[{$return_element}]');

        $popup.select('.popup-closer').invoke('on', 'click', function () {
            popup_close();
        });
    })();
</script>