jQuery(document).ready(function($) {
     
    // Some options for customization
    var leftgap = 10;       /* gap on the left */
    var rightgap = 10;      /* gap on the right */
    var defaultgap = 200;    /* the intro gap */
    var caption = true;     /* toggle caption */
    var reveal = 0.5;       /* define 0 - 1 far does it goes to reveal the second caption */
         
    // find each of the .beforeafter
    $('.beforeafter').each(function () {
         
        // set current selected item to variable
        var i = $(this);            
        // get the source of the first image and second image using eq(index)
        var img_mask = i.children('img:eq(0)').attr('src');
        var img_bg = i.children('img:eq(1)').attr('src');
             
        // get the caption for the first image as default caption
        var img_cap_one = i.children('img:eq(0)').attr('alt');
             
        // get the dimension of the first image, assuming second image has the same dimension
        var width = i.children('img:eq(0)').width();
        var height = i.children('img:eq(0)').height();
             
        // hide the images, not removing it because we will need it later
        i.find('img').hide();       
             
        // set some css attribute to current item for graceful degradation if javascript support is off
        i.css({'overflow': 'hidden', 'position': 'relative'});
             
        // append additional html element
        i.append('<div class="ba-mask"></div>');
        i.append('<div class="ba-bg"></div>');          
        i.append('<div class="ba-caption">' + img_cap_one + '</div>');                      
             
        // set the dimension of appended html element
        i.children('.ba-mask, .ba-bg').width(width);
        i.children('.ba-mask, .ba-bg').height(height);
             
        // set the images as background for ba-mask and ba-bg
        i.children('.ba-mask').css('backgroundImage','url(' + img_mask + ')');
        i.children('.ba-bg').css('backgroundImage','url(' + img_bg + ')');              
 
        // animate to reveal the background image
        i.children('.ba-mask').animate({'width':width - defaultgap}, 1000);     
 
        // if caption is true, then display it, otherwise, hide it
        if (caption) i.children('.caption').show();
        else i.children('.ba-caption').hide();
             
    }).mousemove(function (e) {
 
        // set current selected item to variable
        var i = $(this);
             
        // get the position of the image
        pos_img = i.position()['left'];
             
        // get the position of the mouse pointer
        pos_mouse = e.pageX;        
             
        // calculate the difference between the image and cursor
        // the difference will the width of the mask image
        new_width = pos_mouse - pos_img;
        img_width = i.width();
             
        // get the captions for first and second images
        img_cap_one = i.children('img:eq(0)').attr('alt');
        img_cap_two = i.children('img:eq(1)').attr('alt');
             
        /*
        // for debugging purposes
        $('#debug').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
        $('#debug2').html(i.position()['left']);
        $('#debug3').html(new_width);
        */
             
        // make sure it reveal the image and left some gaps on left and right
        // it depends on the value of leftgap and rightgap
        if (new_width > leftgap && new_width < (img_width - rightgap)) {          
            i.children('.ba-mask').width(new_width);
        }   
 
        // toggle between captions.
        // it uses the reveal variable to calculate
        // eg, display caption two once the image is 50% (0.5) revealed.
        if (new_width < (img_width * reveal)) {          
            i.children('.ba-caption').html(img_cap_two);
        } else {
            i.children('.ba-caption').html(img_cap_one);            
        }                                   
                     
    });
     
 });