#!/usr/bin/perl

#this script compiles the results of the annotations into an imagemap display

use JSON::XS;

$ARGV[0]=~s/\/$//; #remove trailing slash if present
$SHOW = $ARGV[0]; $SHOW=~s/^.*\///; $SHOW=~s/\/.*?//; #remove preceeding and trailing slashes

#get the show's thumbnail dimensions...
$thumbHeight = `curl -s https://storage.googleapis.com/data.gdeltproject.org/gdeltv3/iatv/visualexplorer/$SHOW.frameinfo.json | jq -r '.thumbHeight'` + 0;
$thumbWidth = `curl -s https://storage.googleapis.com/data.gdeltproject.org/gdeltv3/iatv/visualexplorer/$SHOW.frameinfo.json | jq -r '.thumbWidth'` + 0;
if ($thumbHeight < 50 || $thumbWidth < 50) { print "FATAL: Unable to read FrameInfo details for broadcast... Exiting...\n"; exit; };

opendir(DIR, $ARGV[0]);
while(readdir(DIR)) {
    $buf = ''; open(FILE, "$ARGV[0]/$_"); read(FILE, $buf, (-s FILE)); close(FILE);
    undef($ref); eval { $ref = decode_json($buf); }; if (!defined($ref)) { next; };
    
    $frame = 0; ($frame) = $_=~/\-(\d\d\d\d\d\d)\.jpg/; $frame+=0;
    $RESULTS{$frame-1} = "<b>Frame $frame</b><ul><li>" . $ref->{'predictions'}[0] . '<li>'. $ref->{'predictions'}[1] . '<li>'. $ref->{'predictions'}[2] . '</ul>';
    if ($buf=~/violate our policies.*? (Error Codes:.*?)"/) { $RESULTS{$frame-1} = "<b>Frame $frame</b><BR> The response is blocked, as it may violate our policies. $1"; print "VIOLATION: Frame $frame ($1)\n"; };
    
    if ($frame > $MAXFRAME) { $MAXFRAME = $frame; };
}
closedir(DIR);

open(OUT, ">./$SHOW.captioned.html"); binmode(OUT, ":utf8");
print OUT "<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <title>$SHOW Annotations</title> <style> body { background-color: black; } </style><style> .popup { display: none; position: absolute; width: 200px; height: 100px; background-color: #f1f1f1; border: 1px solid #ccc; padding: 10px; z-index: 1; }\nul { padding-left: 0; margin-left: 5; } </style></head><body><img src=\"https://storage.googleapis.com/data.gdeltproject.org/gdeltv3/iatv/visualexplorer/${SHOW}.jpg\" usemap=\"#imagemap\"><map name=\"imagemap\">\n";

$rowtop = 0, $rowbottom = 0, $colleft = 0, $colright = 0, $thisrowcols = 0;
for($i=0;$i<=$MAXFRAME;$i++) {
    $rowbottom = $rowtop + $thumbHeight;
    $colright = $colleft + $thumbWidth;
    $annot = $RESULTS{$i}; $annot=~s/"/'/g;
    print OUT "<area shape=\"rect\" coords=\"$colleft,$rowtop,$colright,$rowbottom\" alt=\"$annot\" href=\"#\">\n";
    $colleft+=$thumbWidth;
    $thisrowcols++;
    if ($thisrowcols >= 6) { $rowtop+=$thumbHeight; $colleft = 0; $thisrowcols = 0; };
}
print OUT "</map>";

#interactive popup code...
print OUT "<div class=\"popup\" id=\"popupDiv\" style=\"background-color:#ffffff; padding: -15px;\"></div>\n";
print OUT "<script>
  const popupDiv = document.getElementById(\"popupDiv\");
  function showPopup(event) {
	const areaElement = event.target;
	popupDiv.innerHTML = areaElement.alt;
	const mouseX = event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
	const mouseY = event.clientY + window.scrollY;
	console.log(window.scrollY);
	popupDiv.style.top = `\${mouseY + 10}px`;
	popupDiv.style.left = `\${mouseX + 10}px`;
	popupDiv.style.width = `500px`;
	popupDiv.style.height = `200px`;
	popupDiv.style.display = \"block\";
  }
  function hidePopup() {
	popupDiv.style.display = \"none\";
  }
    const areaElements = document.querySelectorAll(\"area\");
    areaElements.forEach((areaElement) => {
	areaElement.addEventListener(\"mouseover\", showPopup);
	areaElement.addEventListener(\"mouseout\", hidePopup);
    });
</script>
";



print OUT "</body></html>";
close(OUT);
