CUR = window.CUR || {};

Ext.ux.LocationReport = function(config){
    var panel;

    var updateData = function(featuresLists){
        //panel.header.mask('sdfd');
        if(!panel.rendered){
            //panel.render(panel.ownerCt.getEl().id);
            //ORIGINALLY JUST CALLED RENDER, BUT BUG AT 3.2.1 FORCED ME TO DO THIS NONSENSE
            //BUG WAS TAB NOT BEING ADDED CORRECTLY BEFORE SHOWN AND WAS ON TOP OF THE TAB PANEL WHEN RESIZING
            //THE TABS.
            var act = panel.ownerCt.getActiveTab();
            panel.ownerCt.setActiveTab(1);
            panel.ownerCt.setActiveTab(act);
            //panel.ownerCt.layout.setActiveItem(panel);
        }
        var featureCount = 0;
        if(featuresLists != null){
            if(featuresLists.length > 0){
                for(var j=0; j < featuresLists.length; j++){
                    featureCount += featuresLists[j].length;
                }
                panel.setTitle('Location Report <b>(' + featureCount  + ')</b>');
                //Ext.get(panel.ownerCt.getTabEl(1)).mask('dfsd', 'x-mask-loading');
            } 
            var panels = panel.findByType('featuregroup');
            for(var i=0, len=panels.length; i < len; i++){
                
                panels[i].updateData(featuresLists);
            }

            if(typeof pageTracker != 'undefined'){
	            //pageTracker._trackEvent('Location Report', 'Update', 'Update All');
            }
            
        }
        this.toggleLoadMask(false);
        
    };

    panel = new Ext.Panel({
        title: 'Location Report',
        id: 'locationReport',
        style:'font-family:Verdana;',
        //forceLayout:true,
        //width: 325,
        //height: 250,
        //x: config.x,
        //y: config.y,
        //maximizable: true,
        //bodyStyle:'position:relative',
        //constrainHeader:true,
        //closeAction: 'hide',
        autoScroll:true,
        //iconCls: 'tab-head-loading',
        //buttonAlign:'center',
//        buttons:[new Ext.BoxComponent({
//            autoEl: {tag: 'img', src: 'images/form-collapse-icon.gif'},
//            width: 227,
//            height: 18,
//            style:'cursor:pointer;',
//            listeners: {
//            render: function(c) {
//                    c.getEl().on('click', function(e) {
//                        win.setHeight(win.container.getViewSize().height - win.getPosition()[1] - 10, true);
////                        win.syncSize();
////                        win.doLayout();
//                        win.updateHandles();
//                    }, c);
//                }
//            }
//        })],
        listeners:{
//            hide:{fn: function(win){
//                    config.toggleButton.toggle(false);
//                }
//            },
            render:{fn: function(pnl){
                    //this.loadMask = new Ext.LoadMask(Ext.get(win.id), {msg:"Loading..."});
                    
                    this.doLayout();
                    pnl.tabHeader = Ext.get(panel.ownerCt.getTabEl(1));
                    //Set to none selected
                    pnl.items.get(0).items.get(0).updateData([]);
                }
            },
            resize:{fn: function( pnl,adjWidth,adjHeight,rawWidth,rawHeight){
                    //alert('resized');   
                }
            }
            
//            

    

        },
        items:[
            {xtype:'featuregroup', title:'OASIS Featured Layers',
                items : [
                    new Ext.ux.NullFeatureType({label:null, dataTemplate:CUR.IdentifyNullTemplate(), featureType:null}),
                    new Ext.ux.FeatureType({label:'Property Information', dataTemplate:CUR.IdentifyLotTemplate(), featureType:'TaxLot'}),
                    new Ext.ux.FeatureType({label:'Mannahatta', dataTemplate:CUR.IdentifyMannahattaTemplate(), featureType:'MannahattaBlock'}),
                    new Ext.ux.FeatureType({label:'Stewards', dataTemplate:CUR.IdentifyStewardshipOrgTemplate(), featureType:'StewardshipOrganization', buttons : [new Ext.Component({autoEl:{tag:'span', html:'<a href="stewardship/stewardshipsearch.aspx?searchby=regional">Stewards with large turfs (not mapped)</a>'}})] }),
                    new Ext.ux.FeatureType({label:'Waterfront Access', dataTemplate:CUR.IdentifyWaterfrontAccessTemplate(), featureType:'WaterfrontAccess'}),
                    new Ext.ux.FeatureType({label:'Comprehensive Restoration Plan', dataTemplate:CUR.IdentifyCrpSiteTemplate(), featureType:'CrpSite'}),
                    new Ext.ux.FeatureType({label:'Community Garden', dataTemplate:CUR.IdentifyGardenTemplate(), featureType:'Garden'}),
                    new Ext.ux.FeatureType({label:'School', dataTemplate:CUR.IdentifySchoolTemplate(), featureType:'School'}),
                    new Ext.ux.FeatureType({label:'Library', dataTemplate:CUR.IdentifyLibraryTemplate(), featureType:'Library'}),
                    new Ext.ux.FeatureType({label:'Living Memorials', dataTemplate:CUR.IdentifyLivingMemorialTemplate(), featureType:'LivingMemorial'}),
                    new Ext.ux.FeatureType({label:'All Parks', dataTemplate:CUR.IdentifyParkTemplate(), featureType:'Park'}),
                    new Ext.ux.FeatureType({label:'Outside NYC', dataTemplate:CUR.IdentifyOutsideNycTemplate(), featureType:'OutsideNycLink'}),
                    new Ext.ux.FeatureType({label:'Community District', dataTemplate:CUR.IdentifyCommDistTemplate(), featureType:'CommunityDistrict'}),
                    new Ext.ux.FeatureType({label:'Political Districts', dataTemplate:CUR.IdentifyPoliticalDistrictTemplate(), featureType:'PoliticalDistrict'})
                ]
            }
//            ,
//            new Ext.ux.FeatureGroup({title:'Property/Lot Layers and District Numbers',
//                items : [
//                   
//                   
//                ]
//            })
//            new Ext.ux.FeatureGroup({title:'Links to Other Resources'})
        ],
        //Overriding Ext behavior of maximizing to much. Should probably override complete maximize.
        //fitContainer: fitContainer,
        updateData: updateData,
        tabHeader: null, 
        toggleLoadMask: function(showMask){
            if(panel.tabHeader === null){
                panel.tabHeader = Ext.get(panel.ownerCt.getTabEl(1));
            }
            if(showMask){
                if(panel.body){
                    //panel.body.scrollTo('top', 0);
                    panel.el.mask('Loading...');  
                }

                panel.setTitle('Location Report');
                panel.tabHeader.addClass('show-loading-tab');
                
            } else {
                if(panel.body){
                    panel.el.unmask();
                }
                panel.tabHeader.removeClass('show-loading-tab'); 
            }
 
            
        }
        

    
    });
    

    return panel;


};




// Constructor
Ext.ux.FeatureGroup = function(config) {
    this.dataTemplate = config.dataTemplate;

    //Reusable config options here
    Ext.apply(this,{
        header:false,
        collapsible:false,
        titleCollapse:true,
        hideCollapseTool:true,
        cls:'feature-group'
    });
    // And Call the superclass to preserve baseclass functionality
    Ext.ux.FeatureGroup.superclass.constructor.apply(this, arguments);
    // Here you can add functionality that requires the object to exist, 
    // like event handling. 
    //this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
// MyPanel Extends Ext.Panel
Ext.extend(Ext.ux.FeatureGroup, Ext.Panel, {
    // Here you can add static variables for the class. variables that will have 
    // the same value for all object instances of this class.
    // If you are not sure put it in the constructor above. Dont put any abject
    // created with 'new' or 'xtype' here. You are safer putting it in the config
    // option in the constructor.

    updateData: function(featuresLists){
        //this.doLayout();
        var panels = this.findByType('featuretype');
        for(var i=0, len=panels.length; i < len; i++){
            panels[i].updateData(featuresLists);
        }
        
    }
//    // New function added
//    myNewFunction: function() {
//    },
//    // Override an existing function
//    onRender: function() {
//        MyPanel.superclass.onRender.apply(this, arguments);
//        this.myNewFunction();
//    }
});
Ext.reg('featuregroup', Ext.ux.FeatureGroup);


// Constructor
Ext.ux.FeatureType = function(config) {
    this.dataTemplate = config.dataTemplate;
    this.featureType = null;
    //Reusable config options here
    Ext.apply(this,{
        title:config.label,
        collapsible:true,
        cls:'feature-type',
        collapsedCls: 'feature-type-collapsed',
        titleCollapse:true,
        hideCollapseTool:true,
        hidden:true
    });
    // And Call the superclass to preserve baseclass functionality
    Ext.ux.FeatureType.superclass.constructor.apply(this, arguments);
    // Here you can add functionality that requires the object to exist, 
    // like event handling. 
    //this.on('click', function() {alert("You Clicked " + this.title);}, this);
};
// MyPanel Extends Ext.Panel
Ext.extend(Ext.ux.FeatureType, Ext.Panel, {
    // Here you can add static variables for the class. variables that will have 
    // the same value for all object instances of this class.
    // If you are not sure put it in the constructor above. Dont put any abject
    // created with 'new' or 'xtype' here. You are safer putting it in the config
    // option in the constructor.

    updateData: function(featuresLists){
        if(this.dataTemplate != null){

            var features = this.extractMyFeaturesByType(featuresLists);
            if(features !== null){
                this.setTitle(this.label + ' (' + features.length + ')');
                this.dataTemplate.updateData(features, this);
                this.show();
            } else {
                this.hide();
            }
            
        } 
    },

    extractMyFeaturesByType: function(featuresLists){
        for(var i=0, len=featuresLists.length; i<len; i++){
            if(featuresLists[i][0].__type.indexOf(this.featureType) > -1){
                return featuresLists[i];
            }
        }
        return null;
    }

});
Ext.reg('featuretype', Ext.ux.FeatureType);

Ext.ux.NullFeatureType = Ext.extend(Ext.ux.FeatureType, {
   updateData: function(featuresLists){
        if(this.dataTemplate != null){
            if(featuresLists.length === 0){
                this.dataTemplate.updateData(null, this);
                this.show();
            } else {
                this.hide();
            }
            
        } 
    }

});
Ext.reg('featuretype', Ext.ux.NullFeatureType);

CUR.Templates = {
	map: {},
	getTemplate: function(url, callback) {
		if (this.map[url] === undefined) {
			Ext.Ajax.request({
				url: url,
				success: function(xhr){
                    var text = xhr.responseText;
					var template = new Ext.XTemplate( text.slice(text.indexOf('>', text.indexOf('<body')) + 1, text.indexOf('</body>') ) );
					template.compile();
					this.map[url] = template;
					callback(template);
				},
                scope:this
			});
		} else {
			callback(this.map[url]);
		}
	}
};

CUR.IdentifyLotTemplate = function(){
    CUR.IdentifyLotTemplate.isHistVis = false;
    CUR.IdentifyLotTemplate.toggleHistLu = function(el){
        this.isHistVis = !el.isVisible(); 
        el.setDisplayed(this.isHistVis);
    };
    CUR.IdentifyLotTemplate.goToNycFF = function(address, borough, radius){
        window.open('http://gis.nyc.gov/dcp/pa/Map?hseNumber=&address=' + address + '&borough=' + borough + '&event=PROCESS_TRACT&sltdMBuffer=' + radius + '&entry=1&smind=MULTI', 'nycff');
    };

    var template;

    var url = location.href.split('?')[0];
    url = url.split('#')[0] + '?zoomto=lot:';

    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/taxlot.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
//                var cmp1 = Ext.get('hist'+features[i].Lot);
//                var eCmp1 = Ext.getCmp('ext-comp-1212');
//                if(typeof eCmp1 !== 'undefined'){
//                    eCmp1.destroy();
//                }
                tpl.append(
                    panel.body,
                    {
                        //BBL: features[i].BBL,
                        Borough: features[i].Borough,
                        BoroughName: features[i].BoroughName,
                        Block: features[i].Block,
                        Lot: features[i].Lot,
                        //PolicePrecinct: features[i].PolicePrecinct,
                        Address: features[i].Address,
                        AddressPluto: features[i].AddressPluto,
                        DisplayAlternate: (function(addressEntered){return addressEntered === null ? 'none' : 'block';})(features[i].AddressEntered),
                        ZipCode: features[i].ZipCode,
                        Area: features[i].Area.addCommas(),
                        LotFront: features[i].LotFront,
                        LotDepth: features[i].LotDepth,
                        NumBuildings: features[i].NumBuildings,
                        YearBuilt: features[i].YearBuilt,
                        BuiltCode: (function(){if(features[i].BuiltCode === 'E'){return '(Year built is an estimate)';}else{ return '';}})(),
                        NumFloors: features[i].NumFloors,
                        BuildingArea: features[i].BuildingArea.addCommas(),
                        UnitsResidential: features[i].UnitsResidential,
                        UnitsTotal: features[i].UnitsTotal,
                        LandUse: features[i].LandUse,
                        LandUseColor: features[i].LandUseColor,
                        Zoning: features[i].Zoning,
                        CommercialOverlay: features[i].CommercialOverlay,
                        ZoningMap: features[i].ZoningMap,
                        ZoningMapLink: features[i].ZoningMapLink,
                        FloorAreaRatio: features[i].FloorAreaRatio,
                        MaxFloorAreaRatio: features[i].MaxFloorAreaRatio,
                        OwnerName: features[i].OwnerName,
                        BisLink: features[i].BisLink,
                        AcrisLink: features[i].AcrisLink,
                        DofLink: features[i].DofLink,
                        DigitalTaxMapLink: features[i].DigitalTaxMapLink,
                        OasisShortcut: url + features[i].BBL,
                        YahooLocal: (function(yahooLocal){
                                var str = '';
                                if(yahooLocal !== null){
                                    for(var j=0, lenJ=yahooLocal.length; j<lenJ; j++){
                                        str += '<div><a href="' + yahooLocal[j].Url + '" target="newWin">' + yahooLocal[j].Title + '</a></div>';
                                    }
                                }
                                return str;
                            })(features[i].YahooLocal)
                        
                    }
                );
//                var cmp = Ext.get('hist'+features[i].Lot);
//                var pan = new Ext.Panel({renderTo:'hist'+features[i].Lot, contentEl: 'hist'+features[i].Lot+'-content', title:'Historical Land Use', collapsible:true, cls:'no-class'});
//                var eCmp = Ext.getCmp('ext-comp-1212');
//                var testtt = 'adf';
//                //pan.render();
            }
        });     
    };



//    template.updateData = function(features, panel){
//        panel.body.update();
//        for(var i=0, len=features.length; i<len; i++){
//            this.append(
//                panel.body,
//                {
//                    //Borough: features[i].Borough,
//                    Block: features[i].Block,
//                    Lot: features[i].Lot,
//                    //PolicePrecinct: features[i].PolicePrecinct,
//                    Address: features[i].Address,
//                    ZipCode: features[i].ZipCode,
//                    Area: features[i].Area.addCommas(),
//                    LotFront: features[i].LotFront,
//                    LotDepth: features[i].LotDepth,
//                    NumBuildings: features[i].NumBuildings,
//                    YearBuilt: features[i].YearBuilt,
//                    BuiltCode: (function(){if(features[i].BuiltCode === 'E'){return '(Year built is an estimate)';}else{ return '';}})(),
//                    NumFloors: features[i].NumFloors,
//                    BuildingArea: features[i].BuildingArea.addCommas(),
//                    UnitsResidential: features[i].UnitsResidential,
//                    UnitsTotal: features[i].UnitsTotal,
//                    LandUse: features[i].LandUse,
//                    Zoning: features[i].Zoning,
//                    CommercialOverlay: features[i].CommercialOverlay,
//                    ZoningMap: features[i].ZoningMap,
//                    ZoningMapLink: features[i].ZoningMapLink,
//                    FloorAreaRatio: features[i].FloorAreaRatio,
//                    MaxFloorAreaRatio: features[i].MaxFloorAreaRatio,
//                    OwnerName: features[i].OwnerName,
//                    BisLink: features[i].BisLink,
//                    AcrisLink: features[i].AcrisLink,
//                    DofLink: features[i].DofLink,
//                    DigitalTaxMapLink: features[i].DigitalTaxMapLink,
//                    YahooLocal: (function(yahooLocal){
//                            var str = '';
//                            for(var j=0, lenJ=yahooLocal.length; j<lenJ; j++){
//                                str += '<div><a href="' + yahooLocal[j].Url + '" target="newWin">' + yahooLocal[j].Title + '</a></div>';
//                            }
//                            return str;
//                        })(features[i].YahooLocal)
//                }
//            );
//        }
//    };
    return template;
};

CUR.IdentifyCommDistTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/communitydistrict.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        BoardFull: features[i].BoardFull,
                        Chairperson: features[i].Chairperson,
                        DistrictManager: features[i].DistrictManager,
                        Address: features[i].Address,
                        City: features[i].City,
                        State: features[i].State,
                        ZipCode: features[i].ZipCode,
                        Phone: features[i].Phone,
                        Email: features[i].Email,
                        Website: features[i].Website,
                        MeetingLocation: features[i].MeetingLocation,
                        DcpProfile: features[i].DcpProfile
                    }
                );
            }
        });    
    };
    return template;
};

CUR.IdentifyGardenTemplate = function(){
    var url = location.href.split('?')[0];
    url = url.split('#')[0] + '?zoomto=garden:';
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/garden.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {   
                        Id: features[i].Id,
                        Name: features[i].Name,
                        Address: features[i].Address,
                        CrossStreets: features[i].CrossStreets,
                        NeighborhoodArea: features[i].NeighborhoodArea,
                        Type: features[i].Type,
                        YearFounded: features[i].YearFounded,
                        OasisShortcut: url + features[i].Id,
                        SettlementDecision: features[i].SettlementDecision
                    }
                );
            }
        });      
    };
    return template;
};

CUR.IdentifyWaterfrontAccessTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/waterfrontaccess.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Name: features[i].Name,
                        Waterbody: features[i].Waterbody,
                        MainUse: features[i].MainUse,
                        OtherUses: features[i].OtherUses,
                        Website: features[i].Website
                    }
                );
            }
        });      
    };
    return template;
};

CUR.IdentifyStewardshipOrgTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/stewardshiporganization.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        OrgName: features[i].OrgName,
                        Id: features[i].Id
                    }
                );
            }
        });
        
            
    };
    return template;
};

CUR.IdentifyCrpSiteTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/crpsite.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Name: features[i].Name,
                        CrpId: features[i].CrpId,
                        Watershed: features[i].Watershed,
                        LandOwnership: features[i].LandOwnership,
                        Municipality: features[i].Municipality,
                        Acreage: features[i].Acreage
                    }
                );
            }
        });  
    };
    return template;
};

//CUR.IdentifyCityCouncilTemplate = function(){
//    var template;
//    template = new Ext.Template(
//        '<div class="feature">' +
//            '<div class="item"><span class="label">District: {Code}</span></div>' +
//            '<div class="item"><span class="label"><a href="{Link}">{Link}</a></span></div>' +
//        '</div>'
//    );
//    template.updateData = function(features, panel){
//        panel.body.update();
//        for(var i=0, len=features.length; i<len; i++){
//            this.append(
//                panel.body,
//                {
//                    Code: features[i].Code,
//                    Link: features[i].Link
//                }
//            );
//        }
//            
//    };
//    return template;
//};

CUR.IdentifySchoolTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/school.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Name: features[i].Name,
                        Address: features[i].Address,
                        Type: features[i].Type,
                        EnrollTotal: features[i].EnrollTotal
                    }
                );
            }
        });  
    };
    return template;
};

CUR.IdentifyLivingMemorialTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/livingmemorial.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Name: features[i].Name,
                        //Organization: features[i].Organization,
                        Address: features[i].Address,
                        //City: features[i].City,
                        //State: features[i].State,
                        //Zip: features[i].Zip,
                        Link: features[i].Link
                    }
                );
            }
        });  
    };
    return template;
};

CUR.IdentifyParkTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/park.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Name: features[i].Name,
                        Url: features[i].Url
                    }
                );
            }
        });    
    };
    return template;
};

CUR.IdentifyPoliticalDistrictTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/politicaldistrict.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Type: features[i].Type,
                        Name: features[i].Name,
                        Url: features[i].Url
                    }
                );
            }
        });    
    };
    return template;
};

CUR.IdentifyLibraryTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/library.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Name: features[i].Name,
                        Address: features[i].Address
                    }
                );
            }
        });    
    };
    return template;
};

CUR.IdentifyMannahattaTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/mannahattablock.htm', function(tpl) {
            var center = CUR.MapPage.getMapCenter();
            var ll = CUR.convertSPToLL(center.lon, center.lat);
            for(var i=0, len=features.length; i<len; i++){
                url = 
                tpl.append(
                    panel.body,
                    {
                        Name: features[i].Name,
                        Url: '?sll=' + ll.lat + ',' + ll.lon + '&z=' + features[i].Zoom + '&bid=' + features[i].Bid
                    }
                );
            }
        });    
    };
    return template;
};

CUR.IdentifyOutsideNycTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/outsidenyclink.htm', function(tpl) {
            for(var i=0, len=features.length; i<len; i++){
                tpl.append(
                    panel.body,
                    {
                        Region: features[i].Region,
                        Url: features[i].Url
                    }
                );
            }
        });    
    };
    return template;
};

CUR.IdentifyNullTemplate = function(){
    var template;
    template = {};
    template.updateData = function(features, panel){
        panel.body.update();
        CUR.Templates.getTemplate('identifytemplates/norecordsfound.htm', function(tpl) {
            tpl.append(
                panel.body,
                {
                    
                }
            );

        });    
    };
    return template;
};