[megaupload]

Мля, а круто получается, вот весь код (пока быдлокод рефакторинг дело последнее)

<script>
//noinspection JSCheckFunctionSignatures
(function(window, document, undefined) {

  var ui = {};

  ui.module = {};

  document.addEventListener('DOMContentLoaded', function() {
    initModules();
  });


  function initModules(appContainer, scope) {

    appContainer = appContainer || document.body;
    scope = scope || {};

    var children = appContainer.children;

    for (var i = 0; i < children.length; i++) {
      var child = children[i];
      var uiAttr = child.getAttribute('ui');

      // мы наткнулись на декларацию модуля
      if (uiAttr && /^\w+$/.test(uiAttr)) {
        var name = uiAttr;
        if (!ui.module[name]) continue;

        var container = child;
        var widgets = findWidgets(child, uiAttr);
        var newScope = Object.create(scope);
        var module = new ui.module[name](newScope, widgets, container);

        ui[name] = ui[name] || [];
        ui[name].push(module);
      }

      initModules(child, scope);
    }
  }


  function findWidgets(moduleElement, moduleName) {

    function widget(name, handler) {
      if (widget[name]) widget[name].forEach(handler);
    }

    findIn(moduleElement);

    function findIn(element) {
      var children = element.children;

      for (var i = 0; i < children.length; i++) {
        var child = children[i];
        var uiAttr = child.getAttribute('ui');
        var regExp = new RegExp(moduleName + ':(\\w+)');

        if (uiAttr === moduleName) continue;

        if (uiAttr && regExp.test(uiAttr)) {
          var widgetName = regExp.exec(uiAttr)[1];
          widget[widgetName] = widget[widgetName] || [];
          widget[widgetName].push(child);
        }

        findIn(child);
      }
    }

    return widget;
  }


  window['ui'] = ui;

})(window, document);


ui.module['window'] = function($scope, $widget, $moduleElement) {


  var animationId;
  var dragging = false;
  var clickX = 0, clickY = 0;
  var x = 0, y = 0;


  $widget('close', function(close) {
    close.addEventListener('click', function() {
      $moduleElement.style.display = 'none';
    });
  });


  $widget('title', function(title) {
    title.addEventListener('mousedown', function(event) {
      var rect = $moduleElement.getBoundingClientRect();
      clickX = event.clientX - rect.left;
      clickY = event.clientY - rect.top;
      dragging = true;
      event.preventDefault();
      render();
    });
  });


  window.addEventListener('mousemove', function(event) {
    x = event.clientX;
    y = event.clientY;
  });

  window.addEventListener('mouseup', function() {
    dragging = false;
    cancelRequestAnimationFrame(animationId);
  });


  function render() {
    animationId = requestAnimationFrame(render, $moduleElement);
    if (!dragging) return;
    $moduleElement.style.left = x - clickX + 'px';
    $moduleElement.style.top = y - clickY + 'px';
  }

};


ui.module['chat'] = function($scope, $widgets, $moduleElement) {

  $widgets('input', function(input) {
    input.addEventListener('input', function(event) {
      $widgets('post', function(post) {
        post.innerHTML = event.target.value;
      });
    });
  });

};
</script>



<style type="text/css">
  .window {
    position         : absolute;
    background-color : dodgerblue;
    width            : 300px;
    height           : 250px;
  }

  .window_header {
    cursor           : pointer;
    background-color : coral;
  }
</style>


<div ui="window" class="window">

  <h1 ui="window:title" class="window_header">Заголовок окна</h1>
  <button ui="window:close">Закрыть</button>
  <h2 ui="window:title" class="window_header">Тоже заголовок окна</h2>

  <div ui="chat">
    <div ui="chat:post"></div>
    <input ui="chat:input">
  </div>

</div>