// ==========================================================================
// Project:   SproutCore - JavaScript Application Framework
// Copyright: ©2006-2009 Apple Inc. and contributors.
// License:   Licensed under MIT license (see license.js)
// ==========================================================================

/*global module test equals context ok same htmlbody */

module("Create a pane with some custom views and adding it to the window");

htmlbody('<style>.sc-view { border: 1px red solid; z-index: -1; position: absolute; }</style>');

test("layer creation and management", function() {
  
  // create custom view w/ render method
  var MyView = SC.View.extend({
    cv: 0,
    
    displayProperties: 'cv'.w(),
    
    render: function(context, firstTime) {
      this.renderChildViews(context, YES); // always re-render...
      context.begin()
        .push('View %@'.fmt(this.get('cv')))
      .end();
    }
  });
  
  // create design
  var pane = SC.Pane.design()
    .layout({ bottom: 10, right: 20, top: 20, left: 20 })
    .childView(MyView.design({ cv: 1 })
      .classNames('view-1')
      .layout({ top: 50 })
      .childView(MyView.design({ cv: 2 })
        .classNames('view-2')
        .layout({ bottom: 10, right: 20, width: 100, height: 23 })));
    
  
  // instantiate pane...
  pane = pane.create();
  var cv1 = pane.childViews[0], cv2 = cv1.childViews[0];
  
  // pane should have nested child views.
  equals(cv1.cv, 1, 'has childView 1');
  equals(cv2.cv, 2, 'has childView 2');
  
  // it should not have a layer yet (nor should children)
  ok(!pane.get('layer'), 'pane has no layer');
  ok(!cv1.get('layer'), 'cv1 has no layer');
  ok(!cv2.get('layer'), 'cv2 has no layer');
  
  // if we mark cv2 as needed an update, it should not do anything, even at
  // end of the runloop.
  // -- temporarily replace updateLayer()
  var runCount = 0; 
  cv2.updateLayer = function() { runCount++; };
  SC.RunLoop.begin();
  cv2.set('displayNeedsUpdate', YES) ;
  SC.RunLoop.end();
  
  // updateLayer should NOT have run...
  equals(runCount, 0, 'cv2.updateLayer did not run');
  
  // restore original updateLayer
  delete cv2.updateLayer ;
  
  // all the views should have their isVisibleInWindow set to NO now
  ok(!pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be NO');
  ok(!cv1.get('isVisibleInWindow'), 'cv1.isVisibleInWindow should be NO');
  ok(!cv2.get('isVisibleInWindow'), 'cv2.isVisibleInWindow should be NO');
  // -----
  // OK, let's add this baby to the window
  SC.RunLoop.begin();
  pane.append();
  SC.RunLoop.end();
  
  // all the views should have their isVisibleInWindow set to YES now
  ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
  ok(cv1.get('isVisibleInWindow'), 'cv1.isVisibleInWindow should be YES');
  ok(cv2.get('isVisibleInWindow'), 'cv2.isVisibleInWindow should be YES');

  // pane should have layer...cv's should not have had to find their layers
  // yet.
  ok(pane.get('layer'), 'pane has layer');
  ok(!cv1._view_pane, 'cv1 has not found its layer yet') ;
  ok(!cv2._view_pane, 'cv2 has not found its layer yet') ;
  
  // now let's make sure the pane layer has some of the things we expect...
  var layer = pane.get('layer');
  equals(layer.firstChild.id, cv1.get('layerId'), 'has cv1 elem');
  equals(layer.firstChild.firstChild.id, cv2.get('layerId'), 'has cv2 elem');
  layer = null;
  
  // but if we get the layer for cv1 & cv2 they should find them...
  ok(cv1.get('layer'), 'cv1 can find its layer');
  ok(cv2.get('layer'), 'cv2 can find its layer');
  
  // also, the pane should now belong to the main document body.  it should 
  // have a parent.
  equals(pane.get('layer').parentNode, document.body, 'panes layer is in document body');
  
  // ok, now we're going to change the view number for cv2 and see if that
  // updates the UI.
  SC.RunLoop.begin();
  cv2.set('cv', 'foo');
  SC.RunLoop.end();
  
  // the innerHTML for cv2 should now contain 'View foo'
  layer = cv2.get('layer');
  ok(layer.innerHTML.toString().match(/View foo/), 'does not have new label!');
  
});