text: // ==========================================================================
  // Project:   SproutCore - JavaScript Application Framework
  // Copyright: ©2008-2011 Apple Inc. All rights reserved.
  // License:   Licensed under MIT license (see license.js)
  // ==========================================================================
  /*globals Docs */
  
  // This page describes the main user interface for your application.  
  Docs.mainPage = SC.Page.design({
  
    // The main pane is made visible on screen as soon as your app is loaded.
    // Add childViews to this pane for views to display immediately on page 
    // load.
    mainPane: SC.MainPane.design({
      layerId: 'mainPane',
      childViews: 'sidebar detailView'.w(),
      
      sidebar: SC.View.design({
        layout: { top:0, left:0, bottom:0, width:190 },
        childViews: 'search classList'.w(),
  
        search: SC.View.design({
          layout: { top:0, left:0, height:35, width:190 },
          classNames: 'search'.w(),
          childViews: 'searchTextField'.w(),
  
          searchTextField: SC.TextFieldView.design({
            hint: 'Search For Symbol',
            valueBinding: 'Docs.searchController.searchQuery'
          })
        }),
  
        classList: SC.ScrollView.design({
          layout: { top:35, left:0, bottom:0, width:190 },
  
          contentView: Docs.MasterListView.design({
            contentBinding: 'Docs.classesController.arrangedObjects',
            selectionBinding: 'Docs.classesController.selection',
            showAlternatingRows: YES,
            contentValueKey: 'displayName'
          })
        })
      }),
  
      detailView: SC.View.design({
        layout: { top:0, left:190, bottom:0, right:0 },
        childViews: 'toolbar workspace'.w(),
  
        toolbar: SC.View.design({
          layout: { top:0, left:0, right:0, height:50 },
          classNames: 'class-header'.w(),
          childViews: 'className'.w(),
  
          className: SC.LabelView.design({
            layout: { centerY:0, left:10, right:0, height:27 },
            classNames: 'class-name'.w(),
            valueBinding: 'Docs.selectedClassController.name',
            controlSize: SC.LARGE_CONTROL_SIZE
          })
        }),
  
        workspace: SC.View.design({
          layout: { top:50, left:0, bottom:0, right:0 },
          classNames: 'workspace'.w(),
          childViews: 'symbolList classDetails'.w(),
  
          symbolList: SC.ScrollView.design({
            layout: { top:0, left:0, bottom:0, width:190 },
            contentView: Docs.DetailListView.design({
              classNames: 'symbol-list'.w(),
              contentBinding: 'Docs.selectedClassController.symbols',
              selectionBinding: 'Docs.selectedClassController.symbolSelection',
              contentValueKey: 'name',
              contentIconKey: 'icon',
  
              exampleView: SC.ListItemView.extend({
                hasContentIcon: YES
              })
            }) 
          }),
  
          classDetails: SC.TemplateView.design({
            classNames: 'class-detail'.w(),
            isTextSelectable: YES,
            contentBinding: 'Docs.selectedClassController.content',
            templateName: 'details'
          })
        })
      })
    })
  });
  