/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
	processAttributes : function(attr){
		// txo modif if(attr.first){ // is it an author node ?
        if(attr.title){ // is it an author node ?

			// Set the node text that will show in the tree since our raw data does not include a text attribute:
			attr.text = attr.title /*+ ' ' + attr.last */; //mofif truxillo en raison de l'absence de l'attribut 'last'

			// Author icon, using the gender flag to choose a specific icon:
			attr.iconCls = 'author-m' /* + attr.gender */; //mofif truxillo en raison de l'absence de l'attribut 'gender'

			// Override these values for our folder nodes because we are loading all data at once.  If we were
			// loading each node asynchronously (the default) we would not want to do this:
			attr.loaded = true;
			attr.expanded = false;
		}
		// txo modif else if(attr.title){ // is it a book node ?
        else if(attr.name){ // is it a book node ?

			// Set the node text that will show in the tree since our raw data does not include a text attribute:
			// txo modif attr.text = attr.title + ' (' + attr.published + ')';
            attr.text = attr.name  + ' (' + attr.comment + ')' ; //mofif truxillo en raison de l'absence de l'attribut 'published'

			// Book icon:
			attr.iconCls = 'book';

			// Tell the tree this is a leaf node.  This could also be passed as an attribute in the original XML,
			// but this example demonstrates that you can control this even when you cannot dictate the format of
			// the incoming source XML:
			attr.leaf = true;
		}
	}
});

Ext.onReady(function(){

    var detailsText = '<i>Cliquer sur un titre pour obtenir plus d\'information | select a title to see more information...</i>';

	var tpl = new Ext.Template(
        '<h2 class="title">{name}</h2>',
        '<p><b>Création</b> : {published}</p>',
        '<p><b>Présentation</b> : {innerText}</p>',
        '<p><a href="{url}" target="_blank">En voir plus.</a></p>',
        '<p><b>Tags</b> : {resume}</p>'
	);
    tpl.compile();

    new Ext.Panel({
        title: 'Arborescence',
	    renderTo: 'tree',
        layout: 'border',
        //layout: 'fit',
	    width: 700,
        height: 500,
		collapsible: true,
		collapsed: false,
        items: [{
            xtype: 'treepanel',
            id: 'tree-panel',
            region: 'center',
            margins: '2 2 0 2',
            autoScroll: true,
	        rootVisible: false,
	        root: new Ext.tree.AsyncTreeNode(),

            // Our custom TreeLoader:
	        loader: new Ext.app.BookLoader({
	            // dataUrl:'xml-tree-data.xml'
                dataUrl:'../menu/o_xml.xml'
	        }),

	        listeners: {
	            'render': function(tp){
                    tp.getSelectionModel().on('selectionchange', function(tree, node){
                        var el = Ext.getCmp('details-panel').body;
	                    if(node && node.leaf){
	                        tpl.overwrite(el, node.attributes);
	                    }else{
                            el.update(detailsText);
                        }
                    })
	            }
	        }
        },{
            region: 'south',
            title: 'Information',
            id: 'details-panel',
            autoScroll: true,
            collapsible: true,
            split: true,
            margins: '0 2 2 2',
            cmargins: '2 2 2 2',
            height: 220,
            html: /*{details}*/ detailsText //Appel de la variable detailsText déclarée au dessus
        }]
    });
    
        var window = new Ext.Window({
        //collapsible: true,
        //collapsed: true,
        closable: false,
        width: 150,
        height:80,
        minWidth: 140,
        minHeight: 40,
        autoHeight:true,
        pageX:80,
        pageY:10,
        layout: 'fit',
        plain:false,
        bodyStyle:'padding:4px;background-color:#fff',
        bodyBorder:false,
        buttonAlign:'center',
        html: montest.join('') //Appel de la variable montest
        //autoLoad: 'cloud.php',
        //contentEl:'tree'
//items: form
    });

    window.show();
});

var  montest = ['<h3><a title="Back to homepage | retour à l\'accueil" href="http://www.txo.bz/">Accueil • Homepage</a></h3>'
];