Ext.onReady(function(){
	
	var catalog = [{
        title: 'Combination Samples',
		iconCls:'icon-apps',
		cls:'active',
        samples: [{
				  
            text: 'Three Panel Layout',
            url: 'layout/complex.html',
            icon: 'border-layout.gif',
            desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'
        },{
				  
            text: 'Feed Viewer 2.0',
            url: 'feed-viewer/view.html',
            icon: 'feeds.gif',
            desc: 'RSS 2.0 feed reader sample application that features a swappable reader panel layout.'
        },{
            text: 'Web Desktop',
            url: 'desktop/desktop.html',
            icon: 'desktop.gif',
            desc: 'Demonstrates how one could build a desktop-like application in the browser.'
        },{
            text: 'Grouped Tab Layout',
            url: 'grouptabs/grouptabs.html',
            icon: 'group-tabs.gif',
            desc: 'A custom example on how to setup tab grouping using vertical tabs.'
        }]
    },{
        title: 'Grid Samples',
        iconCls:'icon-grid',
        samples: [{

            text: 'Editable Grid',
            url: 'grid/edit-grid.html',
            icon: 'grid-edit.gif',
            desc: 'An editable grid loaded from XML that shows multiple types of grid ediors as well as defining custom data records.'
        },{
            text: 'Row Editor Grid',
            url:  'grid/row-editor.html',
            icon: 'grid-row-editor.gif',
            desc: 'An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. '
        },{
            text: 'Grouping',
            url: 'grid/grouping.html',
            icon: 'grid-grouping.gif',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Live Group Summary',
            url: 'grid/totals.html',
            icon: 'grid-summary.gif',
            desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.'
        },{
            text: 'Grouping with Remote Summary',
            url: 'grid/totals-hybrid.html',
            icon: 'grid-summary.gif',
            desc: 'Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations.'
        },{
            text: 'Grid Plugins',
            url: 'grid/grid-plugins.html',
            icon: 'grid-plugins.gif',
            desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'
        },{
            text: 'Grid Data Binding (basic)',
            url: 'grid/binding.html',
            icon: 'grid-data-binding.gif',
            desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'
        }]
    },{
    title: 'Chart Samples',
    samples: [{
        text: 'Charts',
        url: 'chart/charts.html',
        icon: 'charts.gif',
        desc: 'A sampling of several chart styles'
    },{
        text: 'Pie Chart',
        url: 'chart/pie-chart.html',
        icon: 'chart-pie.gif',
        desc: 'An example of a pie chart'
    },{
        text: 'Stacked Bar Chart',
        url: 'chart/stacked-bar-chart.html',
        icon: 'chart-stacked.gif',
        desc: 'An example of a stacked bar chart'/*,
        status: 'new'*/
    },{
        text: 'Reloaded Chart',
        url: 'chart/reload-chart.html',
        icon: 'chart-reload.gif',
        desc: 'An example demonstrating chart data reloading'
    }]
},{
        title: 'Form Samples',
        iconCls:'icon-form',
        samples: [{
            text: 'Dynamic Forms',
            url: 'form/dynamic.html',
            icon: 'form-dynamic.gif',
            desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'
        },{
            text: 'Advanced Validation',
            url: 'form/adv-vtypes.html',
            icon: 'form-adv-vtypes.gif',
            desc: 'Relational form field validation using custom vtypes.'
        }]
    }];

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

	var menu = Ext.get('sample-menu-inner'), 
		ct = Ext.get('sample-box-inner');
	
	var tpl = new Ext.XTemplate(
        '<div id="sample-ct">',
            '<tpl for=".">',
            '<div><a name="{id}" id="{id}"></a><h2><div unselectable="on">{title}</div></h2>',
            '<dl>',
                '<tpl for="samples">',
                    '<dd ext:url="{url}"><img title="{text}" src="/lab/apps/imgs/ext-demo/{icon}"/>',
                        '<div><h4>{text}</h4><p>{desc}</p></div>',
                    '</dd>',
                '</tpl>',
            '<div style="clear:left"></div></dl></div>',
            '</tpl>',
        '</div>'
    );

	tpl.overwrite(ct, catalog);
	
	
	var tpl2 = new Ext.XTemplate(
        '<tpl for="."><a href="#{id}" hidefocus="on" class="{cls}" id="a4{id}"><img src="http://gwapps.com/lab/apps/imgs/ext-demo/s.gif" class="{iconCls}">{title}</a></tpl>'
    );
    tpl2.overwrite(menu, catalog);
	
	
	function calcScrollPosition(){
		var found = false, last;
		ct.select('a[name]', true).each(function(el){
			last = el;
			if(el.getOffsetsTo(ct)[1] > -5){
				activate(el.id)
				found = true;
				return false;
			}
		});
		if(!found){
			activate(last.id);
		}
	}
	
	var bound;
	function bindScroll(){
		ct.on('scroll', calcScrollPosition, ct, {buffer:250});
		bound = true;
	}
	function unbindScroll(){
		ct.un('scroll', calcScrollPosition, ct);
		bound = false;
	}
	function activate(id){
		Ext.get('a4' + id).radioClass('active');
	}
	
	ct.on('mouseover', function(e, t){
        if(t = e.getTarget('dd')){
            Ext.fly(t).addClass('over');
        }
    });
    ct.on('mouseout', function(e, t){
        if((t = e.getTarget('dd')) && !e.within(t, true)){
            Ext.fly(t).removeClass('over');
        }
    });
	ct.on('click', function(e, t){
        if((t = e.getTarget('dd', 5)) && !e.getTarget('a', 3)){
            var url = Ext.fly(t).getAttributeNS('ext', 'url');
			if(url){
				window.open(url.indexOf('http') === 0 ? url : ('/lab/apps/lib/ext-3.0.0/examples/' + url));
			}
        }else if(t = e.getTarget('h2', 3, true)){
			t.up('div').toggleClass('collapsed');
		}		
    });
    
	menu.on('click', function(e, t){
		e.stopEvent();
		if((t = e.getTarget('a', 2)) && bound){
			var id = t.href.split('#')[1];
			var top = Ext.getDom(id).offsetTop;
			Ext.get(t).radioClass('active');
			unbindScroll();
			ct.scrollTo('top', top, {callback:bindScroll});
		}
	});
	
	Ext.get('samples-cb').on('click', function(e){
		var img = e.getTarget('img', 2);
		if(img){
			Ext.getDom('samples').className = img.className;
			calcScrollPosition.defer(10);
		}
	});
	
	bindScroll();
});