Ext.onReady(function(){
	
	var catalog = [{
        title: 'Combination Samples',
		iconCls:'icon-apps',
		cls:'active',
        samples: [{
            text: '',
            url: 'www.cvclaw.com/photocontent.aspx?Image=1Legacy.jpg',
            icon: '1.gif',
            desc: '<strong>Legacy</strong><br />Beyond a professional partnership, the Firm has become an enduring legal institution. For over a quarter of a century, our work has impacted not only the legal profession but the broader society, as we help ensure the success of our clients and shape the history of a nation.',
			height: '615',
			width:'610'
        },{
            text: '',
            url: 'www.cvclaw.com/photocontent.aspx?Image=2OneFirm.jpg',
            icon: '2.gif',
            desc: '<strong>One Firm</strong><br />We are a full-service law firm working as a team in various fields of law. Together, we provide the highest standard of professional service and render comprehensive solutions that deliver results.',
			height: '615',
			width:'610'
        },{
            text: '',
            url: 'www.cvclaw.com/photocontent.aspx?Image=3LifeBlood.jpg',
            icon: '3.gif',
            desc: '<strong>Life Blood</strong><br />Our people are our best asset, our competitive edge. We recruit only the best and brightest from the top law schools in the country - each one committed to the highest personal standards, representing the best of their generation. The Firm provides a fertile training ground for future leaders of the legal profession and our nation.',
			height: '615',
			width:'610'
        },{
            text: '',
            url: 'www.cvclaw.com/photocontent.aspx?Image=4SilentPartners.jpg',
            icon: '4.gif',
            desc: '<strong>Silent Partners</strong><br />A legal powerhouse with over one hundred highly-trained non-legal staff providing support to over sixty lawyers. They are our silent partners in delivering prompt and quality service to our clients.',
			height: '615',
			width:'610'
        },{
            text: '',
            url: 'www.cvclaw.com/photocontent.aspx?Image=5Family.jpg',
            icon: '5.gif',
            desc: '<strong>Family</strong><br />Beyond the professional ties that bind us, the Firm has become our extended family. Working and having fun together, we share fond memories that span generations. The Firm is truly our second home.',
			height: '360',
			width:'740'
        },{
            text: '',
            url: 'www.cvclaw.com/photocontent.aspx?Image=6Future.jpg',
            icon: '6.gif',
            desc: '<strong>Future</strong><br />In every facet of law and in every line of business, in the pursuit of the bottom line and for the common good, we bring our collective competence, creativity and commitment to excellence to help our clients attain success, our lawyers to serve the law for a higher purpose, and to ensure a better tomorrow.',
			height: '360',
			width:'740'
        }]
    }];

    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=".">',
            '<dl>',
                '<tpl for="samples">',
                    '<a style="text-decoration:none" href="javascript:void(0)" onClick="window.open(\'http:\/\/{url}\', \'Document\', \'width={width},height={height},menubar=no,status=no,location=no,toolbar=no,scrollbars=yes\')"><dd><img src="/SampleJS_files/{icon}"/>',
                        '<div><h4>{text}</h4><p align=justify><font face="CG Omega" size="2">{desc}</font></p></div>',
                    '</dd></a>',
                '</tpl>',
            '<div style="clear:left"></div></dl></div>',
            '</tpl>',
        '</div>'
    );
	tpl.overwrite(ct, catalog);
	
	
	var tpl2 = new Ext.XTemplate(
        
    );
    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 : ('/deploy/dev/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();
});