Ext.onReady(function(){
    var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="sample-item {cls}" id="sample-{#}">&#160;&#160;&#160;&#160;<span>{title}</span></div>',
            '</tpl>'
    );

    tpl.overwrite('sample-menu', catalog);

    var samplesTpl = new Ext.XTemplate(
        '<dl>',
            '<tpl for="samples">',
            '<dt>',
                '<div>{text}</div><br />',
                '<a href="{url}">{title}</a>',
            '</dt>',
            '</tpl>',
        '</dl>'
    );


    var menu = Ext.get('sample-menu');
    var box = Ext.get('sample-box');

    var running = null, active = box.child('div.sample-slider');
    function clearRunning(){
        running = null;
    }

    menu.on('mousedown', function(e, t){
        if(t = e.getTarget('.sample-item:not(.sample-item-over)')){
            Ext.fly(t).removeClass('sample-inactive-over');
            Ext.fly(t).radioClass('sample-item-over');
            var s = catalog[t.id.split('-')[1]-1];
            if(running){
                running.stopFx();
            }
            if(active){
                active.slideOut('b', {duration:.35, remove:true});
            }else{
                box.child('img').hide();
            }
            s.el = new Ext.Element(document.createElement('div'));
            s.el.addClass('sample-slider');
            s.el.enableDisplayMode();
                samplesTpl.overwrite(s.el.dom, s);
            s.el.appendTo(box);
            s.el.slideIn('t', {callback: clearRunning, duration:.35});
            running = s.el;
            active = s.el;
        }
    });

    menu.on('mouseover', function(e, t){
        if(t = e.getTarget('.sample-item:not(.sample-item-over)')){
            Ext.fly(t).addClass('sample-inactive-over');
        }
    });
    menu.on('mouseout', function(e, t){
        if((t = e.getTarget('.sample-item:not(.sample-item-over)')) && !e.within(t, true)){
            Ext.fly(t).removeClass('sample-inactive-over');
        }
    });

    box.on('mouseover', function(e, t){
        if(t = e.getTarget('img.sample-image')){
            Ext.fly(t).up('dt').addClass('sample-over');
        }
    });
    box.on('mouseout', function(e, t){
        if(t = e.getTarget('img.sample-image')){
            Ext.fly(t).up('dt').removeClass('sample-over');
        }
    });
});