Toggle/Select 3 Div's location within another div, maybe using position absolute or insertAfter

Toggle/Select 3 Div's location within another div, maybe using position absolute or insertAfter

I have a album Page, with 4 images per page, images are displayed in a container div. This container has 3 DIV's, top one is NAME of image DIV, next ones is IMAGE DIV and the 3rd one is DESC DIV

I wanna be able to Toggle/Select the Location of the NAME or DESC to be either be above or below images for all 4 images

I like example one better, but have not been able to get it to work with multiple containers

EXAMPLE ONE
this example does not use absolute position but i can only get it to work if I remove one of the Containers
http://jsfiddle.net/rudyten/ffGZk/3/

  1. $('.btn1').click(function () {
        var loc = "AB";
        setLoc(loc);
    });
    $('.btn2').click(function () {
        var loc = "BA";
        setLoc(loc);
    });
    $('.btn3').click(function () {
        var loc = "AA";
        setLoc(loc);
    });
    $('.btn4').click(function () {
        var loc = "BB";
        setLoc(loc);
    });

    function setLoc(loc) {
        if (loc == "AB") {
            $(".image").insertAfter(".name");
            $(".desc").insertAfter(".image");
        }

        if (loc == "BA") {
            $(".image").insertAfter(".desc");
            $(".name").insertAfter(".image");
        }

        if (loc == "AA") {
            $(".desc").insertAfter(".name");
            $(".image").insertAfter(".desc");
        }

        if (loc == "BB") {
            $(".name").insertAfter(".image");
            $(".desc").insertAfter(".name");
        }
    }





































EXAMPLE TWO
on this example I use absolute position, But the image size can change thus breaking this
http://jsfiddle.net/rudyten/usYrG/
  1. $('.btn1').click(function () {
        var loc = "AB";
        setLoc(loc);
    });
    $('.btn2').click(function () {
        var loc = "BA";
        setLoc(loc);
    });
    $('.btn3').click(function () {
        var loc = "AA";
        setLoc(loc);
    });
    $('.btn4').click(function () {
        var loc = "BB";
        setLoc(loc);
    });

    function setLoc(loc) {
        if (loc == "AB") {
            $('.name').addClass('top').removeClass('bot mid botimg topimg');
            $('.image').addClass('mid').removeClass('top bot botimg topimg');
            $('.desc').addClass('bot').removeClass('top mid botimg topimg');
        };

        if (loc == "BA") {
            $('.desc').addClass('top').removeClass('bot mid botimg topimg');
            $('.image').addClass('mid').removeClass('top bot botimg topimg');
            $('.name').addClass('bot').removeClass('top mid botimg topimg');
        };


        if (loc == "AA") {
            $('.name').addClass('top').removeClass('bot mid botimg topimg');
            $('.desc').addClass('mid').removeClass('top bot botimg topimg');
            $('.image').addClass('botimg').removeClass('top mid topimg');
        };

        if (loc == "BB") {
            $('.image').addClass('top').removeClass('bot mid botimg');
            $('.name').addClass('topimg').removeClass('top bot botimg');
            $('.desc').addClass('bot').removeClass('top mid botimg');
        };
    }

    $('.btn1btn1').click(function () {
        $('.desc').addClass('bot').removeClass('top');
        $('.name').addClass('top').removeClass('bot');
    });