$(document).ready(function () {
    $(".step-container img:first-child").each(function () {
	$(this)
	    .clone()
	    .removeClass("thumb")
	    .addClass("large-image")
	    .insertBefore($(this));
	$(this).addClass("active");
    })

    let imageGroups = []
    $(".lightbox").each(function () {
	let imageSource = $(this).attr('src')
	let imageAlt = $(this).attr('alt').replace(/ /g,"")
	let imageTitle = $(this).attr('alt')
	if (imageTitle) {
	    imageTitle = 'title="' + imageTitle + '" '
	}
	else {
	    imageTitle = ''
	}
	$(this).
            wrap('<a class="boxedThumb ' + imageAlt + '" ' +
		 imageTitle + 'href="' + imageSource + '"></a>')
	imageGroups.push('.' + imageAlt)
    })
    jQuery.unique(imageGroups)
    imageGroups.forEach(imageGroupsSet)

    function imageGroupsSet (value) {
	$(value).simpleLightbox()
    }
})

// Attach a delegate function on mouse over thumbnail
$(".thumb").on("mouseover", function() {

    // Set large image source to the thumbnail image source
    $(this).siblings("img:first")
	.attr("src", $(this).attr("src"));

    // Activate the corresponding step-thumbnail and deactivate all others
    $(this).addClass("active")
	.siblings().removeClass("active");
});