Ext.namespace('mipcya');




var ayuda = {
	id: 'ayuda-panel',
	layout: 'absolute',
	cls: 'main-panel'
};


var rentar = {
	id: 'rentar-panel',
	layout: 'fit',
	cls: 'main-panel',
	html: '<table class="big" id="" border="0"><tr><td colspan="2" align="center"><h2>VIDEOPROYECTORES SONY, XGA2000, 3LCD</h2></td></tr><tr><td> Tecnolog&iacute;a 3LCD/Brightera, 2000 ANSI l&uacute;menes.<br />Resoluci&oacute;n: SVGA 1024X768 pixeles.<br />Cobertura de pantalla: 40 a 300 pulgadas. <br/>Dimensiones: 314x109x269mm.<br /> Peso: 2.9kg. <br />Enciende el proyector y comienza tu presentaci&oacute;n en 5 segundos. <br />Este proyector est&aacute; dise&ntilde;ado para el sector educativo y empresarial, es muy f&aacute;cil de usar y ofrece gran variedad de interfaces, como monitor de salida, salida de audio, RS-232C para control y multimedia de alta definici&oacute;n.</td><td><img src="http://www.grupocva.com/mkt/imagenes_articulos/vp-88.jpg" /><br />Costo de renta por d&iacute;a:<br/> $600 pesos</td></tr> </table> 		'
};

 	var detailsPanel = {
		id: 'details-panel',
        title: 'Detalles',
        region: 'center',
		margins: '30 5 0 0',
		border: true,
        bodyStyle: 'padding-bottom:15px;background:#eee;',
		autoScroll: true,
		html: ''
    };
	var bottomPanel = {
		id: 'bottom-panel',
        region: 'south',
		margins: '0 5 5 5',
		border: true,
		cls: 'bottom-panel',
		autoScroll: true,
		height: 70,
		el: 'text'
    };
	var topPanel = {
		id: 'top-panel',
        region: 'north',
		margins: '10 5 0 10',
		border: false,
        bodyStyle: 'background:#fff;',
		autoScroll: false,
		height: 110,
		html: '<img src="images/mipcya_small.gif" />'
		//html: '<p class="details-info">Mi PC YA!.</p>'
    };
	var nodesMenu = new Ext.tree.AsyncTreeNode({
            expanded: true,
			id:'nodes-menu',
            children: [{
                text: 'Buscar',
				id: 'buscar',
                leaf: true,
                iconCls: 'icon-none'
            }, {
                text: 'Comprar',
				id: 'comprar',
                leaf: true,
                iconCls: 'icon-none'
            }, {
                text: 'Rentar',
				id: 'rentar',
                leaf: true,
                iconCls: 'icon-none'
            }, {
                text: 'Ayuda',
				id: 'ayuda',
                leaf: true,
                iconCls: 'icon-none'
            }]
	});

	
    var treePanel = new Ext.tree.TreePanel({
    	id: 'tree-panel',
        region:'north',
        split: false,
        height: 80,
        minSize: 150,
        autoScroll: true,
		border: false,
        
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
	    loader: new Ext.tree.TreeLoader(),
        root: nodesMenu
    });


	var contentPanel = {
		id: 'content-panel',
		region: 'center',
		layout: 'card',
		margins: '2 5 5 0',
		activeItem: 0,
		border: false,
		baseCls:'x-box',

		items: [
			buscar, comprar, rentar, ayuda
		]
	};


    treePanel.on('click', function(n){
    	var sn = this.selModel.selNode || {};
    	if(n.leaf && n.id != sn.id){
    		Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
    	}
    });

	
	
var verseRecordDef = Ext.data.Record.create([
	{name: 'guid'},	{name: 'content'},	{name: 'verse'}
]);

var verseReader = new Ext.data.XmlReader({
   totalRecords: "results", record: "row", id: "id"}, verseRecordDef);

var verseStore = new Ext.data.Store({
        url: 'verse.php',
        reader: verseReader
});