var Docs = function() {
  var layout, center;
  
  var classClicked = function(e, target) {
    Docs.loadDoc(target.href);
  };
    
  return {
    init : function() {
      Ext.BLANK_IMAGE_URL = '../System/Components/ext-1.1.1/resources/images/default/s.gif';

      
      // initialize state manager, we will use cookies
      Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

      // turn on quick tips
      Ext.QuickTips.init();
      
      // create the main layout
      layout = new Ext.BorderLayout(document.body, {
        west: {
            split:true,
            initialSize: 250,
            minSize: 175,
            maxSize: 400,
            titlebar: true,
            collapsible: true,
            animate: true,
            useShim:true,
            cmargins: {top:2,bottom:2,right:2,left:2}
        },
        center: {
            titlebar: true,
            title: 'Content',
            autoScroll:false,
            tabPosition: 'top',
            closeOnTab: true,
            resizeTabs: true
        }
      });
      // tell the layout not to perform layouts until we're done adding everything
      layout.beginUpdate();
      layout.add('west', new Ext.ContentPanel('classes', {title: 'Menu', fitToFrame:true}));
      center = layout.getRegion('center');
      center.add(new Ext.ContentPanel('main', {fitToFrame:true}));
      
      layout.restoreState();
      layout.endUpdate();

      // set and load the tree
      var Tree = Ext.tree;
      
			var loader = new Tree.TreeLoader({ 
              dataUrl:'/tutorials.inc.txt',
		          requestMethod: 'GET'
	        });
      
      
      var tree = new Tree.TreePanel('tree', {
        animate:true, 
        loader: loader,
        rootVisible: false,
        enableDD: true,
        containerScroll: true
      });

      var root = new Tree.AsyncTreeNode({
	        text: 'Tutorials',
	        link: 'blank.htm',
          draggable:false,
          id:'-1'   
      });
      
      // render the tree
      tree.setRootNode(root);		
      tree.render();
	    root.expand();  
      
      var classes = Ext.get('classes');
      classes.on('click', classClicked, null, {delegate: 'a', stopEvent:true});

      var page = window.location.href.split('#')[1];
      if(!page){
          page = 'blank.htm';
      }
      this.loadDoc(page);
      
      // safari and opera have iframe sizing issue, relayout fixes it
	    if(Ext.isSafari || Ext.isOpera){
		    layout.layout();
	    }
	
	    var loading = Ext.get('loading');
	    var mask = Ext.get('loading-mask');
	    mask.setOpacity(.8);
	    mask.shift({
		    xy:loading.getXY(),
		    width:loading.getWidth(),
		    height:loading.getHeight(), 
		    remove:true,
		    duration:1,
		    opacity:.3,
		    easing:'bounceOut',
		    callback : function(){
			    loading.fadeOut({duration:.2,remove:true});
		    }
	    });
    },

    loadDoc : function(url){
        Ext.get('main').dom.src = url;
    }
       
  };
}();
Ext.onReady(Docs.init, Docs, true);