var ch12345 = { container: null, launchButton: null, puzzleTitle:"", body: document.getElementsByTagName('body')[0], failed: true, construct:function(){ if(this.failed) { document.write('There was an error loading this puzzle.'); return false; } if(!this.checkStyleSheet()) { // only load the stylesheet in once if there are multiple puzzles on the page document.write(''); } document.write('
'); setTimeout(function(){ ch12345.container = document.getElementById('ch-12345'); ch12345.createEmbed(); }, 1000); }, checkStyleSheet: function(){ var stylesheet = document.getElementById('ch-stylesheet'); if(stylesheet) { return true; } else { return false; } }, createEmbed: function() { var title = document.createElement('div'); title.className = 'ch-title'; title.textContent = this.puzzleTitle; this.container.appendChild(title); this.launchButton = document.createElement('a'); this.launchButton.addEventListener('click', function(){ ch12345.launchPuzzle(); setTimeout(function(){ ch12345.launchButton.textContent = "Resume Puzzle"; }, 2000); //give the iFrame time to load }); this.launchButton.textContent = 'Start Puzzling!'; this.launchButton.className = 'ch-launch-button'; this.container.appendChild(this.launchButton); var linkBackContainer = document.createElement('div'); linkBackContainer.className = 'ch-link-back-container'; linkBackContainer.textContent = 'Powered by '; var linkBack = document.createElement('a'); linkBack.setAttribute('href', 'https://crosswords.brightsprout.com'); linkBack.setAttribute('target', '_blank'); linkBack.textContent = 'crosswords.brightsprout.com'; linkBack.className = 'ch-url'; linkBackContainer.appendChild(linkBack); this.container.appendChild(linkBackContainer); this.iframe = document.createElement('iframe'); this.iframe.setAttribute('id', 'ch-iframe-12345'); this.iframe.setAttribute('src', 'https://crosswords.brightsprout.com/mobile-puzzle/12345?iframe=1&puzzle_id=12345'); this.iframe.className = 'ch-iframe'; var modal = document.createElement('div'); modal.setAttribute('id', 'ch-modal-12345'); modal.addEventListener('click', function(){ document.getElementById('ch-iframe-12345').focus(); }); modal.className = 'ch-modal'; var frameContainer = document.createElement('div'); frameContainer.setAttribute('id', 'ch-modal-frame-container-12345'); frameContainer.className = 'ch-frame-container'; modal.appendChild(frameContainer); //append to the modal var closeButton = document.createElement('span'); closeButton.className = 'ch-modal-close'; closeButton.addEventListener('click', function(){ ch12345.closePuzzle(); }) frameContainer.appendChild(closeButton);//append to the frameContainer document.body.insertBefore(modal, document.body.childNodes[0]); }, launchPuzzle: function(){ this.body.classList.toggle('ch-modal-open'); this.modal = document.getElementById('ch-modal-12345'); this.modal.classList.toggle('open'); this.frameContainer = document.getElementById('ch-modal-frame-container-12345'); var iFrameCheck = document.getElementById('ch-iframe-12345'); if(!iFrameCheck) { this.frameContainer.appendChild(this.iframe); } document.getElementById('ch-iframe-12345').focus(); }, closePuzzle: function(){ this.body.classList.toggle('ch-modal-open'); this.modal.classList.toggle('open'); } } ch12345.construct();