(function() {

    window.jsonToHTML = getHTML

    function getHTML(slideData) {
        let video = audio = ''
        if (!slideData.title) slideData.title = '' 
        title = `
            <div class="title">
                ${slideData.title}
            </div>
        `
        if (slideData.video) {
            video = getVideoHtml(slideData.video)
        }

        if (slideData.audio) {
            audio = getAudioHtml(slideData.audio)
        }

        const duration = `data-duration="${slideData.duration ? slideData.duration : 5}"`
        return `
            <div class="slide" ${duration}>
                ${title}
                ${video}
                ${audio}
            </div>
        `
    }

    function getVideoHtml(videoData) {
        let urls = []
        let volume = ''
        if (typeof(videoData) === 'string') {
            urls.push(videoData)
        } else { // video is an object
            if (videoData.hasOwnProperty('url')) {
                urls.push(videoData.url)
            } else if (videoData.hasOwnProperty('zoom')) {
                urls = videoData.zoom
            }
            if (videoData.volume) {
                volume = `data-volume="${videoData.volume}"`
            }
        }
        const urlsHtml = urls.map((url, index) => {
            return `data-url_${index}="${makeEmbed(url)}"`
        }).join('\n')
        return `
            <div class="video" ${urlsHtml} ${volume}> </div>
        `
    }

    function getAudioHtml(audioData) {
        let url = continueStr = volume = ''

        // short circuit to return an empty div if audioData is null or not an object
        // this is useful for user to specify empty audio track to cause existing
        // audio to pause
        if (!audioData || !(typeof(audioData === 'object'))) {
            return `<div class="audio></div>`
        }

        if (audioData.url) {
            url = `data-url="${makeEmbed(audioData.url)}"`
        }

        if (audioData.volume) {
            volume = `data-volume="${audioData.volume}"`
        }

        if (audioData['continue']) {
            continueStr = `data-continue="true"`
        }

        return `
            <div class="audio" ${url} ${volume} ${continueStr}></div>
        `
    }

    function makeEmbed(url) {
        if (!url.endsWith('#embed')) {
            return `${url}#embed`
        } else {
            return url
        }
    }

})();