/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

SamplePanel = Ext.extend(Ext.DataView, {
    autoHeight: true,
    frame:true,
    cls:'demos',
    itemSelector: 'dd',
    overClass: 'over',
    
    tpl : new Ext.XTemplate(
        '<div id="sample-ct">',
            '<tpl for=".">',
            '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
            '<dl>',
                '<tpl for="samples">',
                    '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',
                        '<div><h4>{text}</h4><p>{desc}</p></div>',
                    '</dd>',
                '</tpl>',
            '<div style="clear:left"></div></dl></div>',
            '</tpl>',
        '</div>'
    ),

    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(url);
            }
        }
        return SamplePanel.superclass.onClick.apply(this, arguments);
    }
});


Ext.EventManager.on(window, 'load', function(){

    var catalog = [{
        title: 'Applications',
        samples: [{
            text: 'Ext Web Links v2',
            url: 'http://www.silverwave.be/links2.0/links.html',
            icon: 'links2.0-320.jpg',
            desc: 'ExtWebLinks on Extjs 2.1\r\nBetter,faster, nicer\r\n\r\nHTML and Extjs only, but same Rails component of the previous extweblinks (different function for accepting the post parameters of the search plugin.'
        },{
            text: 'Ext Web Links v1',
            url: 'http://www.silverwave.be/extweblinks',
            icon: 'extweblinks 96x70.jpg',
            desc: 'My bookmarks application. Rails and EXTJS 1.1. OFFLINE!!'
        },{
            text: 'Waar naar toe met de kinderen?',
            url: 'http://www.silverwave.be/waarnaartoe',
            icon: 'waarnaartoe Small Web view.jpg',
            desc: 'Eens lekker gaan eten of efkes een dagje weg tijdens het weekend samen met de kinderen:\r\nHier vind je enkele interessante adressen.\r\n Extjs 1.1 with local data. Integration with Google Maps'
        },{
            text: 'Waar naar toe met de kinderen v2?',
            url: 'http://www.silverwave.be/waarnaartoe2',
            icon: 'waarnaartoe Small Web view.jpg',
            desc: 'Same as previous but Extjs 2.1 with local data and using class-binding code. Integration with Google Maps, Ext.ux.sw.SearchField.js, iFrameComponent.js and Ext.ux.sw.googleComp.js'
        }]
    },{
        title: 'Fooling Around',
        samples: [{
            text: 'Extending Sliders',
            url: 'slider/slider.html',
            icon: 'slider.gif',
            desc: 'An Ext slider that allows you to pick a alphabet letter or an image.'
        },{
            text: 'An intranet page',
            url: 'intranet/intranet.html',
            icon: 'intranet.jpg',
            desc: 'Just playing around with some ext goodies to have some kind of intranet page.'
        },{
            text: 'LoginFormPanel',
            url: 'panels/panels.html',
            icon: 'panel.gif',
            desc: 'An extension of a FormPanel internally updated with Ajax requests. '
        },{
            text: 'Extjs Feed Viewer extended',
            url: 'http://www.silverwave.be/ext-2.1/myexamples/feed-viewer/view.html',
            icon: 'feedviewer.jpg',
            desc: 'The feedViewer example- gets the data from the bookmark db'
        },{
            text: 'Extjs Portal example extended',
            url: '',
            icon: '',
            desc: 'The Portal example but with login panel and db connection. Not available yet'
        },{
            text: 'GooglePanel',
            url: 'http://www.silverwave.be/ext-2.1/myexamples/googlepanel/panels.html',
            icon: 'googlepanel.jpg',
            desc: 'Playing around with Google Maps and Ext.extend; calling it Ext.ux.googleComponent '
        },{
            text: 'LiveMapsPanel',
            url: 'http://www.silverwave.be/ext-2.1/myexamples/livemappanel/panels.html',
            icon: 'googlepanel.jpg',
            desc: 'Playing around with Live Earth Maps (cool bird s eye view) and Ext.extend; calling it Ext.ux.liveMapComponent '
        },{
            text: 'Google Spreadsheet and Extjs',
            url: 'http://www.silverwave.be/ext-2.1/myexamples/googleDocs/testExtjsGrid.html',
            icon: 'grid-grouping.gif',
            desc: 'Using a Google Spreadsheet as data source for EXTJS grid. Loaded on page load or on demand.'
        },{
            text: 'The grid - form example refactored (based on the binding-with-classes example. SOON AVAILABLE as demo',
            url: 'http://www.silverwave.be/ext-2.1/myexamples/binding/binding-with-classes-form-grid.js',
            icon: 'panel.gif',
            desc: 'A good exercise/training in extend, apply and binding with classes.'
        }
        ]
    },{
        title: 'Community Samples,extensions and Plugins',
        samples: [{
            text: 'Sakis place',
            url: 'http://extjs.eu',
            icon: 'extanim32.gif',
            desc: 'Great place, advanced coding.'
        }]
    }];

    for(var i = 0, c; c = catalog[i]; i++){
        c.id = 'sample-' + i;
    }

    var store = new Ext.data.JsonStore({
        idProperty: 'id',
        fields: ['id', 'title', 'samples'],
        data: catalog
    });

    new Ext.Panel({
        autoHeight: true,
        collapsible: true,
        frame: true,
        title: 'View Samples',
        items: new SamplePanel({
            store: store
        })
    }).render('all-demos');

    var tpl = new Ext.XTemplate(
        '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
    );
    tpl.overwrite('sample-menu', catalog);

    Ext.select('#sample-spacer').remove();

    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 250);

    if(window.console && window.console.firebug){
        //Ext.Msg.alert('Warning', 'Firebug is known to cause performance issues with Ext JS.');
    }
});