<?php
$audio_file = trim($activity->activity_contents);


  echo "<div id=\"empty_div2mov_cards".$uniq_div_from_activity_title."\">\n"; // mov div
  //echo "<div style=\"background-color: #cdcdcd;\" id=\"div2mov_cards".$uniq_div_from_activity_title."\">\n"; // mov div
  echo "<div id=\"div2mov_cards".$uniq_div_from_activity_title."\">"; // mov div
       //echo "<div style=\"height: 100%;\" class=\"moved_match_2_columns_aa\"><!-- use aa for 40% -->\n"; // 20210427-1901 use 100% to get rid of grey margin at the bottom
       echo "<div style=\"height: 100%;\"><!-- use aa for 40% -->"; // 20210427-1901 use 100% to get rid of grey margin at the bottom
?>

<audio id="audio" controls>
<?php //echo "<source src=\"tmp_files/.$audio_file.\" type=\"audio/ogg\">\n";?><!-- audio/mpeg --> 
<?php echo "<source src=\"$audio_file\" type=\"audio/ogg\">\n"; ?><!-- audio/mpeg --> 
</audio>

<!-- <script>
window.addEventListener("keypress", function(e) {
if(e.key==="d") document.getElementsByTagName("audio")[0].playbackRate =+ .1; else
if(e.key==="s") document.getElementsByTagName("audio")[0].playbackRate -= .1; 
}, false);
</script> -->

<?php
//echo "</div>\n";
echo "</div><!-- end match 2 columns -->\n";
echo "</div><!-- end div2mov -->\n"; // end mov div
echo "</div><!-- end empty div2mov-->\n"; // end empty mov div

echo "<style>\n";
echo "#empty_div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "position: relative;\n";
//echo "width: 20%;";
//echo "max-height: 20%;"; 
echo "}\n";

echo "#div2mov_cards".$uniq_div_from_activity_title." {\n";
echo "z-index: 9;\n";
echo "position: absolute;\n";
//echo "top: -14em;";
echo "bottom: -20em;";
//echo "left: -62%; /* -65% -16em; */";
//echo "width: 100%;";
//echo "display: inline-block;\n";
echo "background-color: #cdcdcd;\n";
echo "box-shadow: 0px 0px 4px 2px #052a3a;\n";
//echo "resize: both;";
echo "padding: 0.5em;\n";
echo "padding-bottom: 3.7em;\n";
echo "height: 2em;"; 
//echo "overflow-y: scroll;"; 
echo "}\n";

// Can't hide scrollbars in Firefox...
// Hide scrollbar for Chrome, Safari and Opera 
echo "#div2mov_cards".$uniq_div_from_activity_title."::-webkit-scrollbar {";
//echo "display: none;"; // 20220321
echo "}\n";
// Hide scrollbar for IE and Edge
echo "#div2mov_cards".$uniq_div_from_activity_title." {";
//echo "ms-overflow-style: none;"; // 20220321
echo "}\n";

echo "</style>\n";

echo "<script>\n";
echo"dragElement(document.getElementById(('div2mov_cards".$uniq_div_from_activity_title."')));";
include ('js/div2mov_cards.js');
echo "</script>\n";
?>
