Getting masked panel to slide on clicks from inside

Getting masked panel to slide on clicks from inside

Hey there, 

So I have a jQuery script below that slides a containers on and off the screen with a 100% mask. What I have been having the hardest time figuring out is how to make the containers slide based on links within the containing div and not the div itself.  

<style>
body {margin:0; overflow: hidden;}
.container {overflow:hidden; }
.f1_container {overflow:hidden; width:100%; float:right; margin-right:-70px; background-color:#999;}
.f1_bar {width:70px; float:left; background-color:#333;}
.external_container {width:450px;float:right; background-color: #ff9900; }

#mask{
    width:100%;
    overflow:hidden;
    position:relative;
    min-width:100%;
}
#wrapper{
    width:100%;
    height:100%; 
     /* optional! */
}
.full{
    float:left;
    height:100%;  /* optional! */
    width:100%;
}
#div1{
    background:green;
    width:100%;

}
#div2{
    background:white;
    width:100%;
}


</style>


<div id="mask">
    <div id="wrapper">
        <div class="full" id="div1"><a href="#" class="">move container</a></div>
        <div class="full" id="div2">
          <div class="container">
            <div class="f1_bar">
              bar
            </div>
            <div class="1_container">
              <a href="#" class="">move container back</a>
            </div>
          </div>
    </div>
</div>



<script type="text/javascript">



var utils = {
    maskWidth : $('#mask').width(),
    currIndex : 0,
    setWidths : function(){
        //setting maskWidth
        utils.maskWidth = $('#mask').width();

        //setting wrapper width 
        $('#wrapper').css('width',$('.full').length * utils.maskWidth);

        //setting 'full div' width
        $('.full').each(function(index){
            $(this).css('width',utils.maskWidth);
        });

        //setting curr wrapper margin (for window resize)
        $('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth));

    }
}

$('.full').click(function(){
    utils.currIndex = $(this).index()+1; //current elem index (for margin calc)
    if($(this).next().size() == 0){//if is the last, reset
        utils.currIndex = 0;
        $('#wrapper').animate({'margin-left':0});
    }else{ //animation, negative margin of the wrapper
        $('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)});
    }
});

$(window).resize(function() { //on resize, reset widths and margins
    utils.setWidths();
});

utils.setWidths(); //first time, set everything
</script>