const moreLessClickUtils = {

    handleMoreClick_NoTabs: function handleMoreClick_Tabs(lensId) {
        // handle a click in a "more" link in a card without tabs

        log('handleMoreClick_NoTabs: enter');
        log('handleMoreClick_NoTabs: viewWide=' + viewWide);
        log('handleMoreClick_NoTabs: lensId=' + lensId);

        displayCurrentLensesCache.clear();

        noTabsCardExpStorageUtils.addToLensIds(lensId);
        // add the lens to the list of lenses whose cards are expanded

        const collElemId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_COLLAPSED_CONTENT_PREFIX, undefined);
        // get the id of the collapsed content of the card

        $('#' + collElemId).hide();
        // hide the collapsed content

        const expElemId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_EXPANDED_CONTENT_PREFIX, undefined);
        // get the id of the expanded content of the card

        $('#' + expElemId).show();
        // show the expanded content

        //const foundCount = lensesToFindStorageUtils.count();
        //// how many lenses did the user find?

        //log('handleMoreClick: foundCount=' + foundCount);

        //const cardElemId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_PREFIX, undefined);
        //// get the id of the card div

        //const cardJQ = $('#' + cardElemId);
        //// get a jQuery object for the card

        //if (foundCount === 1) {
        //    // if precisely one

        //    cardJQ.css('width', '90%');
        //    // expand the width of the card

        //    cardWidthUtils.setCardWidth(lensId, '90%');
        //    // store the card width
        //}
        //else {
        //    cardJQ.css('width', cardWidthExpanded);
        //    // expand the width of the card

        //    cardWidthUtils.setCardWidth(lensId, cardWidthExpanded);
        //    // store the card width
        //}

        log('handleMoreClick_NoTabs: leave');
    },

    handleLessClick_NoTabs: function handleLessClick_NoTabs(lensId, scrollIntoView) {
        // handle a click in a "less" link in a card without tabs

        log('handleLessClick_NoTabs: enter');
        log('handleLessClick_NoTabs: lensId=' + lensId);
        log('handleLessClick_NoTabs: scrollIntoView=' + scrollIntoView);

        displayCurrentLensesCache.clear();

        noTabsCardExpStorageUtils.removeFromLensIds(lensId);
        // remove the lens from the list of lenses whose cards are expanded

        const collElemId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_COLLAPSED_CONTENT_PREFIX, undefined);
        // get the id of the collapsed content of the card

        $('#' + collElemId).show();
        // show the collapsed content

        const expElemId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_EXPANDED_CONTENT_PREFIX, undefined);
        // get the id of the expanded content of the card

        $('#' + expElemId).hide();
        // hide the expanded content

        if (scrollIntoView) {
            // if the caller wants to scroll the top of the lens card into view

            log('handleLessClick_NoTabs: scrolling the lens card into view, at the request of the caller');

            const cardId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_PREFIX, undefined);
            // get the id of the parent card element

            var y = $('#' + cardId).offset().top;
            // get the y coordinate of the element

            y -= 75;
            // a little more, to make sure the target content is visible

            $([document.documentElement, document.body]).animate({
                scrollTop: y
            }, 500);
            // scroll the lens card into view
        }

        log('handleMoreClick_NoTabs: leave');
    },

    handleMoreClick_Tabs: function handleMoreClick_Tabs(lensId) {
        // handle a click in a "more" link in a card with tabs

        const logHdr = 'handleMoreClick_Tabs: ';
        log(logHdr + 'enter');
        log(logHdr + 'viewWide=' + viewWide);
        log(logHdr + 'lensId=' + lensId);

        displayCurrentLensesCache.clear();

        tabsCardExpStorageUtils.addToLensIds(lensId);
        // add the lens to the list of lenses whose cards are expanded

        const moreElemId = elemIdUtils.getElemId(lensId, elemIdUtils.SPAN_MORE_PREFIX, undefined);
        // get the id of the "more" element

        $('#' + moreElemId).hide();
        // hide the more link

        const lessElemId = elemIdUtils.getElemId(lensId, elemIdUtils.SPAN_LESS_PREFIX, undefined);
        // get the id of the "less" element

        $('#' + lessElemId).show();
        // show the less link

        const foundCount = lensesToFindStorageUtils.count();
        // how many lenses did the user find?

        log(logHdr + 'foundCount=' + foundCount);

        const cardElemId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_PREFIX, undefined);
        // get the id of the card div

        const cardJQ = $('#' + cardElemId);
        // get a jQuery object for the card

        if (foundCount === 1) {
            // if precisely one

            cardJQ.css('width', '90%');
            // expand the width of the card

            cardWidthUtils.setCardWidth(lensId, '90%');
            // store the card width
        }
        else {
            cardJQ.css('width', cardWidthExpanded);
            // expand the width of the card

            cardWidthUtils.setCardWidth(lensId, cardWidthExpanded);
            // store the card width
        }

        const tabsId = elemIdUtils.getElemId(lensId, elemIdUtils.COLLAPSE_TABS_PREFIX, undefined);
        // get the id of the tabs element
        // while the tabs do show/hide, there is a max of one set of tabs per card
        // so the expanded flag is undefined

        const elemSelector = '#' + tabsId;
        // get a selector for the tab content we are going to show

        $(elemSelector).show("fast");
        // show the tabs

        // NOTE: the commented out code below started failing when I revised _addVideoElemToTabIfNec
        // to be the async function _addVideoElemToTabIfNecAsync.
        // we're probably switching to all Vimeo videos and it looks like the current code
        // adds blob videos to the tabs before this point, so maybe we don't need the code below.

        // $(elemSelector).show("fast", lensUIUtils._addVideoElemToTabIfNecAsync(lensId));
        // the Video tab contains a <video> element
        // most browsers show a thumbnail of the video until the user clicks the play button
        // but Safari downloads the entire video, whether or not the <video> element is visible
        // so on the iPhone, if we leave 25 lenses on a page with video elements hidden
        // the browser will still download 25 videos, which takes much too much time
        // and wastes the user's bandwidth
        // so for all browsers we append the video element at runtime, right before showing the tabs

        expandCollapseBtnUtils.showHideExpandCollapseBtnsAndCol();
        // show or hide the expand and collapse all buttons and their parent column as necessary

        log(logHdr + 'leave');
    },

    handleLessClick_Tabs: function handleLessClick_Tabs(lensId) {
        log('handleLessClick_Tabs: enter');
        log('handleLessClick_Tabs: viewWide=' + viewWide);
        log('handleLessClick_Tabs: lensId=' + lensId);

        displayCurrentLensesCache.clear();
        // clear the cache that contains markup for the lenses
        // so we don't display the old markup if we need to redraw

        tabsCardExpStorageUtils.removeFromLensIds(lensId);
        // remove the lens from the list of lenses whose cards are expanded

        cardWidthUtils.clearCardWidth(lensId);
        // clear the stored width value for the lens card

        const moreElemId = elemIdUtils.getElemId(lensId, elemIdUtils.SPAN_MORE_PREFIX, undefined);
        // get the id of the "more" element

        $('#' + moreElemId).show();
        // show the more link

        const lessElemId = elemIdUtils.getElemId(lensId, elemIdUtils.SPAN_LESS_PREFIX, undefined);
        // get the id of the "less" element

        $('#' + lessElemId).hide();
        // hide the less link

        const cardElemId = elemIdUtils.getElemId(lensId, elemIdUtils.CARD_PREFIX, undefined);
        // get the id of the card div

        const cardJQ = $('#' + cardElemId);
        // get a jQuery object for the card

        cardJQ.css("width", '');
        // remove the width value from the style attribute

        const tabsId = elemIdUtils.getElemId(lensId, elemIdUtils.COLLAPSE_TABS_PREFIX, undefined);
        // get the id of the tabs element
        // while the tabs do show/hide, there is a max of one set of tabs per card
        // so the expanded flag is undefined

        const elemSelector = '#' + tabsId;
        // get a selector for the tab content we are going to hide

        $(elemSelector).hide("fast");

        expandCollapseBtnUtils.showHideExpandCollapseBtnsAndCol();
        // show or hide the expand and collapse all buttons and their parent column as necessary

        log('handleLessClick_Tabs: leave');
    }
};