const instructionsVersion = '1.0.0';

const allVideoDataArr = [

  // B2B

    {
    id: 'b1',
    tocName: 'Set Up a User Profile',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EbLp4CAzc9tAjqnOiXqa9UMBvRbVJ_hv6RYigsiEIJPidQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=lScAnv',
    tocID: 'b2b-instructions-toc',
    videoListID: 'b2b-instructions-videos-container',
  },
	  {
    id: 'b2',
    tocName: 'Add Additional Account to User Profile',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EVT28-KEAEtBlLO6om6pLKUBOozDYapymReCEB7kitm0JQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=groM2A',
    tocID: 'b2b-instructions-toc',
    videoListID: 'b2b-instructions-videos-container',
  },
	{
    id: 'b3',
    tocName: 'Handle "ID Is Duplicate" Error',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EaKKO3_DW3BHsFFpHohvrr8B1rnqAXa0ebISjw0T1S8ttg?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=08c58W',
    tocID: 'b2b-instructions-toc',
    videoListID: 'b2b-instructions-videos-container',
  },


  // Pods
  {
    id: 'p1',
    tocName: 'Accessories Order in SAP',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/ETvuVkNIzmJEuT6n0pF1XWsB5w4ePoCg8QxTkI3SxOQNTg?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=2ldYwh',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },
  {
    id: 'p2',
    tocName: 'Matrix 3D - How to Use',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EWaR6SKmXG9DjfrTL3GST4UB7vqojh3Dac81UZ1CxBbyag?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=ibhebF',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },
  {
    id: 'p3',
    tocName: 'Matrix 3D Installation',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EW-AOXcVNJxHjvhH4q2ohTMBjXHGjs8v7gEuNQ9Tesf9yg?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=MwlaRl',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },


  {
    id: 'p4',
    tocName: 'Matrix 3D Update or Reinstall',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EYeyjtc26u1Oie0RtACwAGYBZhQZSu6SFQpx56JNhlnNsw?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=H2biIQ',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },

  {
    id: 'p5',
    tocName: '403 Budget in SAP',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EeB06o1ye0NIns-N6JLiiQ4BgZrL_uqslrRrcDQ_gY5ScQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=bcTkec',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  }, {
    id: 'p6',
    tocName: 'Change Budget Reason Code',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/Ee2oywLocsVHg9CVGgucJx0BXczCgmQGMtTEaI5iGq7HFQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=F0QIVS',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },

  {
    id: 'p7',
    tocName: 'Restart an Order That Was Sent to "Admin"',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EeiuZEMyNPNOqVOwfRG5wTUBKV-yeaP5Cv1y7aet-wSzzg?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=5azLJR',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },
  {
    id: 'p8',
    tocName: 'Standard Order Entry in SAP',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EaLdVR_cQHVEledpMM-hRy0Bisr3LojecniMpPkaR4KE2w?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=nFpx4u',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  }, {
    id: 'p9',
    tocName: 'Standard Order Entry in Pod Wizard',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/Een4G4b_vqBMt_KLeKIlzhsBwy6Hq5hi2tLFdU7UrqQoLg?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=LiD8nS',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },
  {
    id: 'p10',
    tocName: 'Keeping Track of Contacts - T-Code ZCIO',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EYPNaIXhUVhGuHjUxDre2X8BbCxPpQVz0CmcthP_RWqFGg?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=6dgtKr',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  },
  {
    id: 'p11',
    tocName: 'CFG Pod Order',
    src: 'https://fbinportal-my.sharepoint.com/:v:/g/personal/mike_glass_moen_com/EdLuMgAj56JHknmfDZCnx8oB8k9ILf5LDl1922V3ma8N9Q?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=ElUON9',
    tocID: 'pods-instructions-toc',
    videoListID: 'pods-instructions-videos-container',

  }, {
    id: 'p12',
    tocName: 'MORE VIDEOS ->',
    src: 'https://fbinportal-my.sharepoint.com/:f:/g/personal/mike_glass_moen_com/EiNZuX9Cfw9Pr-ufSgIkkM0BCR7osX2MnF_eVs4u67JF0w?e=Y4yrwS',
    tocID: 'pods-instructions-toc',

  },

]


const buildTOCElms = (videoData) => {

  const nameElm = document.createElement('a')
  nameElm.href = videoData.src
  nameElm.innerText = videoData.tocName
  nameElm.setAttribute('target', '_blank')

  return nameElm
}

const buildVideoElms = (videoData) => {
  const videoElmWrapper = document.createElement('div')
  videoElmWrapper.id = videoData.id
  videoElmWrapper.setAttribute('target', '_blank');
  videoElmWrapper.classList.add("video-wrapper")

  const videoElm = document.createElement('video')
  videoElm.id = 'video-' + videoData.id
  videoElm.src = videoData.src
  videoElm.controls = 'video/mp4'
  videoElm.width = '640'
  videoElm.classList.add("video-js")
  videoElm.classList.add("vjs-default-skin")


  const anchorElm = document.createElement('a')
  anchorElm.id = 'anchor-' + videoData.id
  anchorElm.classList.add("video-anchor")

  const nameElm = document.createElement('h3')
  nameElm.id = 'title-' + videoData.id
  nameElm.innerText = videoData.tocName

  videoElmWrapper.append(anchorElm)
  videoElmWrapper.append(nameElm)
  videoElmWrapper.append(videoElm)

  return videoElmWrapper
}


const assembleVideoPage = (allVideoDataArr, buildVideoElms, buildTOCElms) => {

  allVideoDataArr.forEach(videoData => {
    const tocElm = buildTOCElms(videoData)
    /*  const videoElm = buildVideoElms(videoData)*/

    document.getElementById(videoData.tocID).append(tocElm)
    /* document.getElementById(videoData.videoListID).append(videoElm)*/
  })

}

/*
{
  < a href = '#video-container-1' > tocName + '&rarr;' < /a>


    < div id = "video-container-1"
  class = "video-wrap"
    >
    < h3 > tocName < /h3>
    < video id = "video-1"
  class = "video-js vjs-default-skin"
  width = "640"
  height = "auto"
  src = src
  controls type = 'video/mp4'
    /
    >
    < /video>
    < /div> 
}*/


///////////////////////////////////////
// Onload Setup
window.onload = () => {
  assembleVideoPage(allVideoDataArr, buildVideoElms, buildTOCElms)
}
