Ext.ns('GeoPrisma.Sample');

GeoPrisma.Sample.DataView = Ext.extend(Ext.DataView, {
    
    emptyText: 'No samples', 
    autoHeight   : true,
    frame        : true,
    cls          : 'demos',
    itemSelector : 'dd',
    overClass    : 'over',
    tpl          : new Ext.XTemplate(
        '<div class="sample-ct">',
            '<tpl for=".">',
            '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
            '<dl>',
                '<tpl for="samples">',
                    '<dd ext:url="{url}">',
                        '<div style="float:left">',  
                            '<img src="../samples{icon}"/>',
                            '<div class="sample-info">',
                                '<h4>{text}',
                                    '<tpl if="this.isNew(values.status)">',
                                        '<span class="new-sample"> (New)</span>',
                                    '</tpl>',
                                    '<tpl if="this.isUpdated(values.status)">',
                                        '<span class="updated-sample"> (Updated)</span>',
                                    '</tpl>',
                                    '<tpl if="this.isExperimental(values.status)">',
                                        '<span class="new-sample"> (Experimental)</span>',
                                    '</tpl>',
                                '</h4>',
                                '<p>{desc}</p>',
                            '</div>',                        
                        '</div>',
                        '<div class="sample-link">',
                            '<tpl if="this.isLink(values.xml)">',
                                '<a href="..{xml}" target="_blank">xml</a>&nbsp;',
                            '</tpl>',  
                            '<tpl if="this.isLink(values.xslt)">',     
                                '<a href="..{xslt}" target="_blank">xslt</a>&nbsp;',
                            '</tpl>',
                            '<tpl if="this.isLink(values.doc)">',   
                                '<a href="..{doc}" target="_blank">doc</a>&nbsp;', 
                            '</tpl>',                               
                        '</div>',   
                    '</dd>',                    
                '</tpl>',
            '<div style="clear:left"></div></dl></div>',            
            '</tpl>',             
        '</div>', {
         isExperimental: function(status){
             return status == 'experimental';
         },
         isNew: function(status){
             return status == 'new';
         },
         isUpdated: function(status){
             return status == 'updated';
         },
         isLink : function(link)
         {
            return link != null && link != '';    
         }
    }),
    
    initComponent:function() {
        this.store = new Ext.data.JsonStore({
            url: 'php/service/sample/list.json.php',
            root: 'samples',
            idProperty : 'id',
            fields : ['id', 'title', 'samples']
        });
        this.store.load();
 
        GeoPrisma.Sample.DataView.superclass.initComponent.call(this);
    },

    onClick : function(e){
        var group = e.getTarget('h2', 3, true);
        if(group){
            group.up('div').toggleClass('collapsed');
        }else {
            var t = e.getTarget('dd', 5, true);
            if(t && !e.getTarget('a', 2)){
                var url = t.getAttributeNS('ext', 'url');
                window.open('../samples'+url);
            }
        }
        return GeoPrisma.Sample.DataView.superclass.onClick.apply(this, arguments);
    }
});