Ext.onReady(function() {	
	Ext.each(Ext.DomQuery.select('div.catalog-text'), function(item, index, allItems) {
		Ext.get(item).setVisibilityMode(Ext.Element.DISPLAY).hide(false);
	});
	
    var catalog = [{
		index: 0,
        id:'hoa-websites-why',
        title: 'Why HOAInTouch.com',
        text: $('hoa-websites-why').innerHTML,
        cls:'tour-item-over'
    },{
		index: 1,
		id:'hoa-websites-dashboard',
        title: 'Community Dashboard',
        text: $('hoa-websites-dashboard').innerHTML
    },{
		index: 2,
		id:'hoa-websites-news',
        title: 'Community News',
        text: $('hoa-websites-news').innerHTML
    },{
		index: 3,
		id:'hoa-websites-calendar',
        title: 'Community Calendar',
        text: $('hoa-websites-calendar').innerHTML
    },{
		index: 4,
		id:'hoa-websites-directory',
        title: 'Community Directory',
        text: $('hoa-websites-directory').innerHTML
    },{
		index: 5,
		id:'hoa-websites-groups',
        title: 'Groups & Committees',
        text: $('hoa-websites-groups').innerHTML
    },{
		index: 6,
		id:'hoa-websites-documents',
        title: 'Document Library',
        text: $('hoa-websites-documents').innerHTML
    },{
		index: 7,
		id:'hoa-websites-call-to-action',
        title: 'Create Your HOA Website',
        text: $('hoa-websites-call-to-action').innerHTML
    }];

    var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="tour-item {cls}" id="tour-{index}">&#160;&#160;&#160;&#160;<span>{title}</span></div>',
            '</tpl>'
    );
    tpl.overwrite('tour-menu', catalog);

    var tourTpl = new Ext.XTemplate(
            '<tpl for=".">',
				'<div>{text}</div>',
			'</tpl>'
    );

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

    var running = null;
    active = box.child('div.tour-slider');
	tourTpl.overwrite(active.dom, catalog[0]);
    
    function clearRunning()
    {
        running = null;
    }

    menu.on('mousedown', function(e, t)
    {
        if (t = e.getTarget('.tour-item:not(.tour-item-over)'))
        {
            Ext.fly(t).removeClass('tour-inactive-over');
            Ext.fly(t).radioClass('tour-item-over');
            var s = catalog[t.id.split('-')[1]];
            
            if (running)
            {
                running.stopFx();
            }
            
            if (active)
            {
                active.slideOut('b', {duration:.35, remove:true});
            }
            
            s.el = new Ext.Element(document.createElement('div'));
            s.el.addClass('tour-slider');

            s.el.enableDisplayMode();
			tourTpl.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('.tour-item:not(.tour-item-over)')){
            Ext.fly(t).addClass('tour-inactive-over');
        }
    });
    
    menu.on('mouseout', function(e, t){
        if((t = e.getTarget('.tour-item:not(.tour-item-over)')) && !e.within(t, true)){
            Ext.fly(t).removeClass('tour-inactive-over');
        }
    });

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