Ext.onReady(function() {
    var carousel = new Ext.ux.Carousel('person-carousel', {
        useCssTransitions: Modernizr.csstransitions,
        transitionType: (Modernizr.csstransitions ? 'css-fade' : 'fade'),
        transitionDuration: 1,
        interval: 3,
        autoPlay: true,
        pauseOnNavigate: true,
        hideNavigation: true,
        wrap: false
    });

    var carouselNav = new S100.CarouselNav(carousel, 'image-nav', 'image-paging');
    
    // Handle left/right
    Ext.fly('panel-controls').select('.placement li:not(.label)').on('click', function(evt, t) {
        var target = Ext.get(t);
        var infoPane = Ext.get('person-info');
        if (target.hasClass('left'))  { infoPane.setStyle('float', 'left'); }
        if (target.hasClass('right')) { infoPane.setStyle('float', 'right'); }
        target.radioClass('active');
    });
    // Handle hide/show
    Ext.fly('panel-controls').select('.content li:not(.label)').on('click', function(evt, t) {
        var target = Ext.get(t);
        var infoPane = Ext.get('person-info');
        if (target.hasClass('show')) {
            infoPane.removeClass('short');
            Ext.fly('person-details').show();
        }
        if (target.hasClass('hide')) {
            infoPane.addClass('short');
            Ext.fly('person-details').hide();
        }
        target.radioClass('active');
    });
});