$(function() {

    var slidbox = [];
    $('.mdrow').each(function(index) {
        var obj = $(this);
        slidbox[index] = new $.daliSlideDouble(obj, {
            speed: 5000,
            duration: 1000,
            dotname: 'mddot',
            aroname: '',
            direction: 'left'
        });
    })

    $('.mdrow:eq(0)').css({ 'left': 0 });
    $('.mdb b:eq(0)').addClass('on');

    $(document).on('click','.mdb b:not(.on)',function(){
        var index1 = $('.mdb b.on').index();
        var index2 = $(this).index();
        var left = '100';
        var moveto = '-=100';
        if (index2 < index1) {
            left = '-100';
            moveto = '+=100';
        }
        $('.mdrow').eq(index1).animate({'left': moveto +'%'},1000,function(){
            slidbox[index1].stop();
        })
        $('.mdrow').eq(index2).css({ 'left': left + '%' }).animate({'left': moveto + '%'},1000,function(){
            slidbox[index2].begin();
        })
        $('.mdb b').removeClass('on');
        $(this).addClass('on');
    })


})