//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
var expnd = false; // control only one node expanded by default.
Ext.app.PortfolioLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
    processAttributes : function(attr){
    	if(attr.cat){ // is this a category ?
    		attr.text = attr.cat;
    		
    		// Author icon, using the gender flag to choose a specific icon:
            //attr.iconCls = 'author-' + attr.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;
            if(expnd == false) {
            	attr.expanded = true;
            	expnd = true;
			} else {
				attr.expanded = false;
			}
		}
        else if(attr.title){ // 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:
			attr.text = attr.title;
            
            // 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(){
    $.extend({
        getUrlVars: function(){
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        },
        getUrlVar: function(name){
            return $.getUrlVars()[name];
        }
    });
    var loadPort = $.getUrlVar('id');
    if(loadPort)
    {
		var detailsText = '<br />';
	} else {
		var detailsText = '<div class="boxMediumTopWhite">' +
	    			'<p class="boxWhiteHeading">Unique Solutions</p><br />' +
			        '<div class="SpanMediumWhiteBox">' +
						'<p><img src="/media/images/portfolio/snapshots/unique_solutions.jpg" border="0" width="604" height="331" /></p>' +
						'<p><b>Description</b>: Unique Solutions is an experienced and innovative systems and technology company offering strategic integration and business services. Our prices and level of service are very competitive because we know the value of giving our customers a positive and profitable experience.</p>' +
					'</div>' +
			    '</div>' +
			    '<div class="boxMediumBottomBlue">' +
		            '<a class="boxMedLearnMore" href="http://www.uniquesolutions.com" target="_blank">View Site</a>' +
		        '</div>';
	}
	var tpl = new Ext.Template(
	'<div class="boxMediumTopWhite">' +
	    		'<p class="boxWhiteHeading">{title}</p><br />',
			    '<div class="SpanMediumWhiteBox">',
					'<p><img src="/media/images/portfolio/snapshots/{snapShot}" border="0" width="604" height="331" /></p>',
					'<p><b>Description</b>: {innerText}</p>',
				'</div>',
			'</div>',
			'<div class="boxMediumBottomBlue">',
		        '<a class="boxMedLearnMore" href="{url}" target="_blank">View Site</a>',
		    '</div>'
	);
    tpl.compile();

    var mytree = new Ext.Panel({
	    renderTo: 'tree',
        layout: 'border',
	    width: 'auto',
        height: 'auto',
        items: [{
            xtype: 'treepanel',
            id: 'tree-panel',
            region: 'center',
            animCollapse:true,
            animate: true,
            //collapseMode:'mini',
            autoScroll: false,
	        rootVisible: false,
	        root: new Ext.tree.AsyncTreeNode(),

            // Our custom TreeLoader:
	        loader: new Ext.app.PortfolioLoader({
	            dataUrl:'/media/xml/portfolio.xml'
	        }),

	        listeners: {
	            'render': function(tp){
                    tp.getSelectionModel().on('selectionchange', function(tree, node){
	                    if(node && node.leaf) {
                            var el = Ext.getCmp('details-panel').body.fadeIn({
                                duration: .730,
                                useDisplay: true
                            });
	                        tpl.overwrite(el, node.attributes);
                        }
                    })
	            },
                click:function(node, e){
                    if( ! node.isExpanded() )
                        node.expand();
                    else
                        node.collapse();
                }
	        }
        },{
            region: 'south',
            renderTo: 'myPortfolio',
            id: 'details-panel',
            //autoScroll: true,
            //collapsible: true,
            //split: true,
            //margins: '0 2 2 2',
            //cmargins: '2 2 2 2',
            //height: 220,
            height: 'auto',
            width:'auto',
            html: detailsText
        }]
    });

    function loadExample() {
        var id = $.getUrlVar('id');
        var treepanel = Ext.getCmp('tree-panel');
        var mynode = treepanel.getNodeById(id); // This should be passed in!
        var el = Ext.getCmp('details-panel').body;
        tpl.overwrite(el, mynode.attributes);
    }

    if(loadPort)
    {
        setTimeout(loadExample,777);
    }
});