'use strict';

angular.module('integrationApp')
  .directive('faApp', ["famous", function (famous) {
    return {
      template: '<div style="display: none;"></div>',
      transclude: true,
      restrict: 'EA',
      scope: true,
      compile: function(tElement, tAttrs, transclude){
        console.log('compiling app');
        return {
          pre: function(scope, element, attrs){
            var View = famous['famous/core/view'];
            //TODO:  add custom classes from attrs (or just pass through all attrs?) to
            //       the container element.
            element.append('<div class="famous-angular-container"></div>');
            var famousContainer = $(element.find('.famous-angular-container'))[0];
            var Engine = famous['famous/core/engine'];
            scope.context = Engine.createContext(famousContainer);

            function AppView(){
              View.apply(this, arguments);
            }

            AppView.prototype = Object.create(View.prototype);
            AppView.prototype.constructor = AppView;

            scope.view = new AppView();
            scope.context.add(scope.view);

            console.log('app pre');

            scope.$on('registerChild', function(evt, data){
              // console.log('view', scope.view)
              console.log('app regchild', data);
              if(data.mod && data.view){
                scope.view._add(data.mod).add(data.view);
              }else if(data.view){
                scope.view._add(data.view);
              }
              evt.stopPropagation();
            })
          },
          post: function(scope, element, attrs){
            transclude(scope, function(clone) {
              element.find('div').append(clone);
            });
          }
        }
      }
    };
  }]);

@@ -153,16 +153,27 @@
 none;%22%3E%3C
+div%3E%3C/div%3E%3C
 /div%3E',%0A
@@ -1733,16 +1733,20 @@
 ind('div
+ div
 ').appen

fix elements that aren't supposed to show up