# Менеджер окон

[importance 5]

Эта задача является продолжением задачи [](/task/draggable-windows).

Предусмотрите возможность создавать несколько окон. При этом то, которое получает фокус, становится выше всех.

Общее управление окнами должен осуществлять объект `WindowManager`.

Синтаксис:

```js
WindowManager.setTemplate(html-шаблон для окон);

WindowManager.addWindow({ // создаёт окно по шаблону с заголовком
  title: "Чат с Петей"    // и показывает его
});

WindowManager.addWindow({ // ещё одно окно
  title: "Чат с Машей"
});
```

<a href="/files/tutorial/widgets/window-manager/index.html" target="_blank">Посмотреть пример в новом окне.</a>


<ul>
<li>Окна перекрывают друг-друга по `z-index`. Максимальный `z-index` должен быть ограничен: от 1 до количества окон.</li>
<li>Информация от окна к менеджеру передаётся через события.</li>
<li>Инкапсуляция: `WindowManager` использует объект `DraggableWindow`, но не лезет в DOM окна. Обработчики -- только на объект.</li>
</ul>

В качестве исходного документа можно взять решение [предыдущей задачи](/task/draggable-windows). Скорее всего, класс `DraggableWindow` понадобиться немного изменить, добавить события.

[edit src="solution" task/]