/* to simplify this for techwriters, if they tag an image source with {: lightbox }
   this js will create the appropriate/required div to perform lightbox functions */

/* REQUIRES: fancybox (fancybox.net) */

jQuery(document).ready(function ($) {
    //Which target to put the lightboxes in
    // Body
    var main = $('body');

    //or after main
    // put all light box divs after main
    //var main = document.getElementsByTagName('main');
    //console.log(main);

    // Find all images to process and run insertLightbox
    var arr_p_wrappers = $(main).find("p.lightbox");
    //console.log(arr_p_wrappers);

    // Process and run insertLightbox
    $.each(arr_p_wrappers, function (i, rowValue) {
        /* console.log(i + ": " + rowValue); */
        insertLightbox(rowValue, main);

    });

    /* insertLightbox
       This function does two important things.
       1. it wraps the img tag within a p tag (markdown inserted it) so that we have something to click
       2. it inserts a div after main with the target lightbox image
    */
    function insertLightbox(p_wrapper, target) {
        console.log('insertLightbox');
        console.log(p_wrapper);

        var target_id = $(p_wrapper).attr('id');
        console.log("p_id: " + target_id);
        var target_img = $(p_wrapper).find("img");
        console.log("p_id img: " + target_img);

        var target_img_src=$(target_img).attr('src');
        console.log("img_src: " + target_img_src);

        /* 
        <a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
        */
        var lightbox_a_wrapper = '<a id="single_image" href="' + target_img_src + '"></a>';
        console.log("a_wrapper: "+lightbox_a_wrapper);
        $(p_wrapper).find("img").wrap(lightbox_a_wrapper);

        // We need to make sure the paragraph id that we used to track is removed
        /* $(p_wrapper).removeAttr('id'); */
    }
});