On click next active element with specific class, trigger function

Question

I've got a slider with some panels that slide in and out using arrows. The function for the next arrow is this:

var element = $('.projects .popup.active'),    
    next = $('.slider.projects #next'),
    prev = $('.slider.projects #prev'),
    oleft = element.offset().left,
    oright = ($(window).width() - (element.offset().left + element.outerWidth()));

next.unbind("click").on('click', function(e){   
        e.preventDefault();
        $(document).scrollTop(0);
        $('.projects .popup').not(element).removeClass('active');
        element.next('.popup').addClass('active');
        element.prevAll('.popup').css({zIndex: -1});
        element.prevAll('.popup').css({left:'-100%', margin: 0});
        element.nextAll('.popup').css({left:'100%', margin: 0});

        element.removeClass('active');
        element = $('.projects .popup.active');

        element.animate({
            left: '50%',
            marginLeft: -352.5
        },500);
        element.next('.popup').animate({
            left: $(window).width() - (oright / 2),
            marginLeft: 0
        },500);
        element.prev('.popup').animate({
            left: - elemWidth + (oleft / 2),
            marginLeft:0
        }, 500);
        checkarrow();
    });

I would like that also when clicking on the next or previous visible panel, the next and prev function is triggered. So, for the next panel, I have done this:

element.next('.popup').on('click', function(e){
    next.trigger('click');
});

This works fine the first time, but the second time, the click only works on the first

element.next('popup')

that has been clicked the first time. The class active updates fine, but the click doesn't work on the next panel. I can't figure out a solution.

Here is a fiddle http://jsfiddle.net/3sSz2/

Any help would be really appreciated. Thanks in advance

Update

Thanks to f00bar I've managed to make the next boxes slide in fine. The previous ones although are not working as expected. The issue should be from line 100, probably line 103 in this fiddle http://jsfiddle.net/3sSz2/11/.

When clicking on next box(the one on the right) or the next arrow, the next slide slides in, and again the next one after that does the same thing. When clicking on the central active slide nothing should happen. When clicking on the previous arrow or previous box (the one on the left) the box on the left should slide to the center and the central box should move to the right.

Please help, I know I'm almost there. Thanks

Answer 1

Finally, this is what I ended up with and I hope it will help considering the time I spent writing THIS fiddle Oo

I attached the click handler on the .slider element to avoid multiple listener.. Here it the handler.

$('.slider').click(function (e) {
    var $slider = $(this),
        data = $slider.data('slider'),
        $slides = $slider.find('.popup'),
        $first = $slides.eq(0),
        $last = $slides.last(),
        $activeItem = $slides.filter('.active'),
        $next = $('.popup-nav.next', this),
        $prev = $('.popup-nav.prev', this),
        $t = $(e.target).closest('.popup, .popup-nav'),
        $nextItem = $activeItem.next('.popup'),
        $prevItem = $activeItem.prev('.popup'),
        way = (
            // Is the target be the next item in the DOM or the 'next arrow'
            ($t.is('.popup-nav.next') || $t.is($nextItem)) ? -1 :
            // Is the target be the next item in the DOM or the 'prev arrow'
            ($t.is('.popup-nav.prev') || $t.is($nextItem)) ? 1 : 0
        );

    switch (way) {
    // previous
    case 1:
        // if the active slide is the last project
        if ($activeItem.is($first)) {
            $first.before($last.css({
                left: +($first.css('left').replace('px', '')) - data.width
            }));
        }
        $activeItem.removeClass('active').prev().addClass('active');
        play.call($slides, {
            way: way,
            width: data.width
        });
        break;
    // next
    case -1:
        // if the active slide is the last project
        if ($activeItem.is($last)) {
            $last.after($first.css({
                left: +($last.css('left').replace('px', '')) + data.width
            }));
        }
        $activeItem.removeClass('active').next().addClass('active');
        play.call($slides, {
            way: way,
            width: data.width
        });
        break;
    }
});