<?php
echo "<div class=\"flex-container\">";
    echo "<div class=\"sbook_left_column\">\n";
        echo "<div class=\"sbook_reading\"> &nbsp; ".$clog_activity->activity_title."</div>";
    echo "</div><!-- end sbook_left_column -->\n";

    echo "<div class=\"sbook_middle_right_column\">\n";
    echo "<pre class=\"sbook_lesson_plan\">";

        echo "<span class=\"sbook_exercise_no\">".$clog_activity->activity_id."</span> <span class=\"sbook_instructions\">".$clog_activity->instructions."</span>";
  $instructions_demo = trim($clog_activity->instructions_demo);
  if (!empty($clog_activity->instructions_demo))  {
    echo "<div class=\"sbook_instructions_demo\">".$clog_activity->instructions_demo."</div>";
  }
echo "<br />";

//echo $clog_activity->activity_title."<br />";
//echo "→ ".$clog_activity->instructions."<br />\n";
echo "<button id=\"button_toggle_visibility_edit_notes02\" onclick=\"toggle_visibility('toggle_edit_notes_".$clog_activity->activity_id."');\"><img src=\"pix/icons8-hand-with-pen-100.png\" width=\"35em\" border=\"0\" alt=\"Add notes\" /><!--Add some notes here--></button>";
echo $contents_edit_notes02_ref."<br />"; // from xml_load_file_sbook_session.inc
echo "<span class=\"show_key_sbook\">".$clog_activity->qa->qs."</span>\n";
echo "<span class=\"show_key_sbook\">".$clog_activity->qa->ans."</span>\n";
echo "<div id='toggle_edit_notes_".$clog_activity->activity_id."' style=\"display:none;\">\n";
echo "<div class=\"edit_notes02\">";
?>
<?php // echo `date +%Y%m%d-%H%M%S`."_{$sbook_ref}_notes_{$member}.txt"; ?> <!-- http://cssdeck.com/labs/7bx7mmcm -->

<textarea id="inputTextToSave02" style="color: blue; font-size: 250%; width: 90%; height: 5em;"><?php echo $sbook_ref."\n".`date +%Y%m%d`.$activity->activity_title."\n\n".$clog_activity->qa->qs; ?></textarea><br />
<br />
<!-- <div class="tooltip2"><label for="fileToLoad02" class="sbook_btn_browse"><div class="tooltiptext2">Browse</div></label><input id="fileToLoad02" type="file"/></div><div class="tooltip2"><button class="sbook_btn_load_file" onclick="loadFileAsText02()"><div class="tooltiptext2">Load selected file</div></button></div><div class="tooltip2"><label for="inputFileNameToSaveAs02" class="sbook_btn_save_as"></label> <div class="tooltiptext2">Save as:<input id="inputFileNameToSaveAs02" placeholder="<?php echo `date +%Y%m%d-%H%M%S`."_{$sbook_ref}_notes_{$member}.txt"; ?>"/></div></div> <div class="tooltip2"><button class="sbook_btn_save" onclick="saveTextAsFile02()"><div class="tooltiptext2">Save text to file</div></button></div> -->
<?php
echo "<div class=\"tooltip2\"><label for=\"fileToLoad\" class=\"sbook_btn_browse\"><div class=\"tooltiptext2\">Browse</div></label><input id=\"fileToLoad\" type=\"file\"/></div><div class=\"tooltip2\"><button class=\"sbook_btn_load_file\" onclick=\"loadFileAsText()\"><div class=\"tooltiptext2\">Load selected file</div></button></div><div class=\"tooltip2\"><div class=\"tooltiptext2\">Save as:<input id=\"inputFileNameToSaveAs\" placeholder=\"".`date +%Y%m%d`."_{$sbook_ref}_notes_{$member}.txt\"></div></div> <div class=\"tooltip2\"><button class=\"sbook_btn_save\" onclick=\"saveTextAsFile()\"><div class=\"tooltiptext2\">Save text to file</div></button></div>\n";

echo "</div><!-- /class edit_notes -->\n";
echo "</div><!-- /toggle_visibility_edit_notes -->\n";

//
    echo "</pre>";
    echo "</div><!-- end sbook_middle_right_column -->\n";
echo "</div> <!-- end flex-container -->\n";


?>

<script>
function saveTextAsFile02()
{
var textToWrite = document.getElementById("inputTextToSave02").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs02").value;

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked
// without actually adding it to the DOM.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else
{
// Firefox requires the link to be added to the DOM
// before it can be clicked.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = destroyClickedElement02;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
}

function destroyClickedElement02(event)
{
document.body.removeChild(event.target);
}


function loadFileAsText02()
{
var fileToLoad02 = document.getElementById("fileToLoad02").files[0];

var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) 
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave02").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad02, "UTF-8");
}
</script>

