Ext.onReady(function() {
    var elCont, elF, elL, item_width, left_indent;
    var executed = true;
    elCont = Ext.fly('bnrs');
    function appFirst() {
        elF = Ext.fly('bnrs').first();
        elL = Ext.fly('bnrs').last();
        elF.insertAfter(elL);
    }
    function appLast() {
        elF = Ext.fly('bnrs').first();
        elL = Ext.fly('bnrs').last();
        elL.insertBefore(elF);
    }
    Ext.get('scrollRight').on('click', function() {
        if (executed == false)
            return;
        executed = false;
        item_width = 170;
        left_indent = Ext.get('bnrs').getX() - item_width;
        Ext.get('bnrs').shift({
            x: left_indent,
            duration: 1,
            callback: function() {
                executed = true;
                appFirst()
                elCont.setStyle({
                    left: '-170px'
                });
            }
        })
    })
    Ext.get('scrollLeft').on('click', function() {
        if (executed == false)
            return;
        executed = false;
        item_width = 170;
        left_indent = Ext.get('bnrs').getX() + item_width;
        Ext.get('bnrs').shift({
            x: left_indent,
            duration: 1,
            callback: function() {
                executed = true;
                appLast()
                elCont.setStyle({
                    left: '-170px'
                });
            }
        })
    })
    appFirst();
    elCont.setStyle({
        left: '-170px'
    });
})