/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
   var win = new Ext.Window({
                applyTo     : 'hello-win',
                layout      : 'fit',
                width       : 800,
                height      : 550,
                closeAction :'hide',
                plain       : true,
                x: 200,
                y:0,
                   id: 'wwin',
                items       : new Ext.TabPanel({
                    applyTo        : 'hello-tabs',
                    autoTabs       : true,
                    activeTab      : 0,
                    deferredRender : false,
                    border         : false

                }),

                buttons: [{
                    text     : 'Fermer',
                    handler  : function(){
                        win.hide();
                    }
                }]
            });



           var win2 = new Ext.Window({
                applyTo     : 'hello-win2',
                layout      : 'fit',
                width       : 800,
                height      : 550,
                closeAction :'hide',
                plain       : true,
                x: 200,
                y:10,
                   id: 'wwin2',
                items       : new Ext.TabPanel({
                    applyTo        : 'hello-tabs2',
                    autoTabs       : true,
                    activeTab      : 0,
                    deferredRender : false,
                    border         : false

                }),

                buttons: [{
                    text     : 'Fermer',
                    handler  : function(){
                        win2.hide();
                    }
                }]
            });

     var  win3 = new Ext.Window({
                applyTo     : 'hello-win3',
                layout      : 'fit',
                width       : 800,
                height      : 300,
                closeAction :'hide',
                plain       : true,
                x: 200,
                y:20,
                id: 'wwin3',
                items       : new Ext.TabPanel({
                    applyTo        : 'hello-tabs3',
                    autoTabs       : true,
                    activeTab      : 0,
                    deferredRender : false,
                    border         : false

                }),

                buttons: [{
                    text     : 'Fermer',
                    handler  : function(){
                        win3.hide();
                    }
                }]
            });

     var  win4 = new Ext.Window({
                applyTo     : 'win4',
                layout      : 'fit',
                width       : '80%',
                height      : '100%',

                closeAction :'hide',
                plain       : true,
                maximizable : true,
  	        minimizable : true,
                x: 200,
                y:0,
                id: 'wwin4',
                items       : new Ext.TabPanel({
                    applyTo        : 'tabs4',
                    autoScroll     :true,
                    autoTabs       : true,
                    activeTab      : 0,
                    deferredRender : false,
                    border         : false

                }),

                buttons: [{
                    text     : 'Fermer',
                    handler  : function(){
                        win4.hide();
                    }
                }]
            });

    SampleTreePanel = Ext.extend(Ext.tree.TreePanel, {
        title: 'Gestion du récif:',
        width: 200,
        height: 400,
        loader: new Ext.tree.TreeLoader(),
        rootVisible: false,
        border: false,

        initComponent: function(){
            Ext.apply(this, {

                root: new Ext.tree.AsyncTreeNode({
                    children: [{
                        text: 'Paramètres',
                        expanded: true,

                        children: [{
                            text: 'Mes paramètres',
                            id: 'mparam',
                            leaf: true
                                  }, {
                            text: 'Paramètres des copains',
                            id: 'cparam',
                            leaf: true
                                      }]
                    }, {
                        text: 'Entretien',
                        expanded: true,
                         id: 'mentret',
                            leaf: true

                    },{
                            text: 'DataNet Vivant (en TEST)',
                            id: 'pdatanet',
                            leaf: true
                        },{
                            text: 'DataNet Matériel (en DEV)',
                            id: 'mdatanet',
                            leaf: true
                        },{
                        text: 'Mon bac(en dev)',
                        expanded: false,
                        children: [
                         {
                            text: 'Mes poissons',
                            id: 'mpoisson',
                            leaf: true
                        },
                         {
                            text: 'Poissons des copains',
                            id: 'cpoisson',
                            leaf: true
                        },
                         {
                            text: 'Densité population',
                            id: 'densite',
                            leaf: true
                        }


                        ]
                    },{
                        text: 'Mon Projet(en dev)',
                        expanded: false,
                        children: [
                         {
                            text: 'Mes poissons',
                            id: 'mpoisson',
                            leaf: true
                        },
                         {
                            text: 'Densité population',
                            id: 'densite',
                            leaf: true
                        }


                        ]
                    },
                    {
                        text: 'Outils(en dev)',
                        expanded: false,
                        children: [
                         {
                            text: 'O1',
                            id: 'mpoisson',
                            leaf: true
                        },
                         {
                            text: 'O2',
                            id: 'densite',
                            leaf: true
                        }]
                }
                          ]
                })
            })

            SampleTreePanel.superclass.initComponent.apply(this, arguments);
        }




    });



    Ext.reg('tree_panel', SampleTreePanel);


    // Instantiate the tree panel, then attach an event listener..

    var treep = new SampleTreePanel();
    treep.on('click', function(n){
   	var sn = this.selModel.selNode || {}; // selNode is null on initial selection
 if(n.id=='mparam'){ Ext.getCmp('wwin').show(); }
 if(n.id=='cparam'){ Ext.getCmp('wwin3').show(); }
if(n.id=='mentret'){ Ext.getCmp('wwin2').show(); }
if(n.id=='pdatanet'){ Ext.getCmp('wwin4').show(); }


//    	if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node
//    		Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
//    		if(!detailEl){
//    			var bd = Ext.getCmp('details-panel').body;
//    			bd.update('').setStyle('background','#fff');
//    			detailEl = bd.createChild(); //create default empty div
//    		}
//    		detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
    	});

 var windd = new Ext.Window({
        plain: true,
        bodyStyle: 'padding:5px;',
        layout: 'fit',
         closable : false,
          x: 5,
          y:25,
        items: [treep]
    });

    windd.show();





});