Ext.onReady(function(){

    var catalog = [{
        id:'title',
        title: '<b>THFlat-ERP系统</b>',
        cls:'sample-item-over'
    },{
        id:'costManage',
        title: '◆成本管理',
        samples: [{
            text: '住宿成本管理',
            url: 'http://www.techholder.com/',
            icon: 'carcost.png'
        },{
            text: '交通成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '膳食成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '导游成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '签证成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '邀请成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '公务成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '自费节目成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '景点成本管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '其它(保险、翻译、水...)',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        }]
    }
    ,{
        id:'routeManage',
        title: '◆线路管理',
        samples: [{
            text: '日程库管理',
            url: 'http://www.techholder.com/',
            icon: 'route.png'
        },{
            text: '线路审核管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '经典线路管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '线路使用分析',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        }]
    },{
    	  id:'sellManage',
        title: '◆销售管理',
        samples: [{
            text: '散拼系列组团管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '订单管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '销售机会跟踪',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '销售报价',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '任务委派',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        }]
    },{
        id:'opeManage',
        title: '◆操作管理',
        samples: [{
            text: '订房操作',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '订车操作',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '导游安排',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '出团安排',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        }]
    },{
        id:'visaManage',
        title: '◆签证管理',
        samples: [{
            text: '签证资料管理',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '签证类型维护',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '签证进度状态',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '制作流程维护',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '签证资料审核',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        }]
    }
    ,{
        id:'staticManage',
        title: '◆统计管理',
        samples: [{
            text: '询单统计',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '订房统计',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '订车统计',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '客户统计',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        },{
            text: '供应商统计',
            url: 'http://www.techholder.com/',
            icon: 'userMana.png'
        }]
    }];

    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><a href=#  onclick=document.getElementById(\'content_desc\').src=\'{url}\'>',
                '<img class="sample-image" src="http://www.techholder.com/product/images/{icon}"/></a><br/>',
                '<div>{text}</div>',
            '</dt>',
            '</tpl>',
        '</dl>'
    );


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

    var running = null, active = box.child('div.sample-slider');
    function clearRunning(){
        running = null;
    }
    document.getElementById('content_desc').src="prd-title.html";
    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();
            if(s.id == 'title'){
                s.el.update('<a href=# onclick=document.getElementById(\'content_desc\').src=\'prd-'+s.id+'.html\'><img class="extjs-here" src="http://www.techholder.com/product/images/product-new.jpg" /></a>');
            }else{
                samplesTpl.overwrite(s.el.dom, s);
                
            }
            s.el.appendTo(box);
            s.el.slideIn('t', {callback: clearRunning, duration:.35});
            running = s.el;
            active = s.el;
            
            if(s.id!=undefined){
               document.getElementById('content_desc').src="prd-"+s.id+".html";
            }else{
               document.getElementById('content_desc').src="";
            }
        }
    });

    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');
        }
    });
});