<?php
    include("config.php");
    include("header.php");

    $topic = base64_decode($_GET['topic']);
    $img = base64_decode($_GET['img']);
?>

<div id="displayBlock">
    <div id="displayImage">
        <?php
            $fileExists = array ("original","result","gt","user");
            $fileExistsRef = array(
                $fileExists[0] => "false",
                $fileExists[1] => "false",
                $fileExists[2] => "false",
                $fileExists[3] => "false",
            );
            $filePaths = array(
                $TOPIC_DIR.$topic.'/images/'.$img,
                $TOPIC_DIR.$topic.'/results/'.$img,
                $TOPIC_DIR.$topic.'/gt/'.$img,
                $TOPIC_DIR.$topic.'/user/'.$img
            );
            $centerStyleSettings =  "style='top: 50%; left: 50%; transform: translate(-50%, -50%);'";
            $divWidth = 697; /* see display.css file to get width & height of "displayImage"-div */
            $divHeight = 400;
            $imgHtmlIds = array("indicatedImageNormal", "indicatedImageResult", "indicatedImageGroundtruth", "indicatedImageUserannotation");

            for ($i = 0; $i < count($filePaths); $i++) {
                if (file_exists($filePaths[$i])) {
                    echo "<img id='".$imgHtmlIds[$i]."' src='".$filePaths[$i]."'";
                    $imageSize = getimagesize($filePaths[$i]);
                    if ($imageSize[0] < $divWidth or $imageSize[1] < $divHeight) {
                        echo $centerStyleSettings;
                    }
                    echo "/>";
                    $fileExistsRef[$fileExists[$i]] = "true";
                }
            }
        ?>
    </div>


    <div id="displaySettings">
        <div class="singleImageSettings" style="border-bottom: 1px solid black; margin-top: 20px; padding-left: 5px;">
            <p style="font-size: 18px">
                <b><?php echo $img; ?></b>
                <input type="checkbox" id="helpButton" style="visibility: hidden"/>
                <label id="helpButtonLabel" for="helpButton"><strong>?</strong></label>
            </p>
        </div>

        <div class="singleImageSettings">
            <p style="font-size: 17px">View 1</p>
            <input type="radio" name="image1" value="indicatedImageNormal" onclick="changeOpacity()" id="viewOneOriginal" checked/>
            <label for="viewOneOriginal">Original Image</label><br/>
            <input type="radio" name="image1" value="indicatedImageResult" onclick="changeOpacity()" id="viewOneResult"/>
            <label for="viewOneResult">Result</label><br/>
            <input <?php if($fileExistsRef["user"] == "false") echo "disabled title='Not avaiable!'" ?> type="radio" name="image1" value="indicatedImageUserannotation" onclick="changeOpacity()" id="viewOneUser"/>
            <label <?php if($fileExistsRef["user"] == "false") echo "disabled title='Not avaiable!'" ?> for="viewOneUser">User Annotation</label><br/>
            <input <?php if($fileExistsRef["gt"] == "false") echo "disabled title='Not avaiable!'" ?>  type="radio" name="image1" value="indicatedImageGroundtruth" onclick="changeOpacity()" id="viewOneGt"/>
            <label <?php if($fileExistsRef["gt"] == "false") echo "disabled title='Not avaiable!'" ?> for="viewOneGt">Ground Truth</label>
        </div>
        <div class="singleImageSettings">
            Opacity
            <input class="sliderbarOutput" value="50" min="0" max="100" id="sliderbarOutput1" onblur="resetValue('sliderbarOutput1',100, 0)" oninput="changeOpacity()" type="text"/><br/>
            <input class="sliderbarOpacity" id="sliderbar1" min="0" max="100" value="50" oninput="changeOpacity()" type="range"/>
        </div>
        <div class="singleImageSettings">
            <p style="font-size: 17px">View 2</p>
            <input type="radio" name="image2" value="indicatedImageNormal" onclick="changeOpacity()" id="viewTwoOriginal"/>
            <label for="viewTwoOriginal">Original Image</label><br/>
            <input type="radio" name="image2" value="indicatedImageResult" onclick="changeOpacity()" checked id="viewTwoResult"/>
            <label for="viewTwoResult">Result</label><br/>
            <input <?php if($fileExistsRef["user"] == "false") echo "disabled title='Not avaiable!'" ?> type="radio" name="image2" value="indicatedImageUserannotation" onclick="changeOpacity()" id="viewTwoUser"/>
            <label <?php if($fileExistsRef["user"] == "false") echo "disabled title='Not avaiable!'" ?> for="viewTwoUser">User Annotation</label><br/>
            <input <?php if($fileExistsRef["gt"] == "false") echo "disabled title='Not avaiable!'" ?> type="radio" name="image2" value="indicatedImageGroundtruth" onclick="changeOpacity()" id="viewTwoGt"/>
            <label <?php if($fileExistsRef["gt"] == "false") echo "disabled title='Not avaiable!'" ?> for="viewTwoGt">Ground Truth</label>
        </div>
        <div id="help" class="singleImageSettings">
            There are four components you can visualize here:
            <ul>
                <li>Original Image: the processed image</li>
                <li>Results: gray-value coded probability map, for each pixel the probability to be the foreground</li>
                <li>User annotation (if any): black — surely background, white — surely foreground, gray — not annotated areas</li>
                <li>Ground truth (if any): black — background, white — foreground</li>
            </ul>
            Choose two components to visualize and overlay them using the slider.
        </div>
        <?php /*
        <div class="singleImageSettings">
            Original Image
            <br/>
            <input class="sliderbarOpacity" id="sliderbarNormal" type="range" min="0" max="100" value="100" oninput="changeOpacity('sliderbarNormal','indicatedImageNormal','sliderbarNormalOutput')"/>
            <input class="sliderbarOutput" value="100" type="number" min="0" max="100" id="sliderbarNormalOutput" onblur="resetValue('sliderbarNormalOutput',100, 0)" oninput="changeOpacity('sliderbarNormalOutput','indicatedImageNormal','sliderbarNormal')"/>
        </div>
        <div class="singleImageSettings">
            Script Result
            <br/>
            <input class="sliderbarOpacity" id="sliderbarResult" type="range" min="0" max="100" value="100" oninput="changeOpacity('sliderbarResult','indicatedImageResult','sliderbarResultOutput')"/>
            <input class="sliderbarOutput" value="100" type="number" min="0" max="100" id="sliderbarResultOutput" onblur="resetValue('sliderbarResultOutput', 100, 0)" oninput="changeOpacity('sliderbarResultOutput','indicatedImageResult','sliderbarResult')"/>
        </div>
        <div class="singleImageSettings">
            User Annotation
            <input <?php if($fileExistsRef["user"] == "false") echo "disabled"; ?> checked onchange="settingDisabling('usersettings','indicatedImageUserannotation')" class="showImage" type="checkbox"/>
            <br/>
            <input <?php if($fileExistsRef["user"] == "false") echo "disabled"; ?> class="sliderbarOpacity usersettings" id="sliderbarUserannotation" type="range" min="0" max="100" value="100" oninput="changeOpacity('sliderbarUserannotation','indicatedImageUserannotation','sliderbarUserannotationOutput')"/>
            <input <?php if($fileExistsRef["user"] == "false") echo "disabled"; ?> class="sliderbarOutput usersettings" value="100" type="number" min="0" max="100" id="sliderbarUserannotationOutput" onblur="resetValue('sliderbarUserannotationOutput', 100, 0)" oninput="changeOpacity('sliderbarUserannotation','indicatedImageUserannotation','sliderbarUserannotation')"/>
        </div>
        <div class="singleImageSettings">
            Ground Truth
            <input <?php if($fileExistsRef["gt"] == "false") echo "disabled"; ?> checked onchange="settingDisabling('gtsettings','indicatedImageGroundtruth')" class="showImage" type="checkbox"/>
            <br/>
            <input <?php if($fileExistsRef["gt"] == "false") echo "disabled"; ?> class="sliderbarOpacity gtsettings" id="sliderbarGroundtruth" type="range" min="0" max="100" value="100" oninput="changeOpacity('sliderbarGroundtruth','indicatedImageGroundtruth','sliderbarGroundtruthOutput')">
            <input <?php if($fileExistsRef["gt"] == "false") echo "disabled"; ?> class="sliderbarOutput gtsettings" value="100" type="number" min="0" max="100" id="sliderbarGroundtruthOutput" onblur="resetValue('sliderbarGroundtruthOutput', 100, 0)" oninput="changeOpacity('sliderbarGroundtruthOutput','indicatedImageGroundtruth','sliderbarGroundtruth')">
        </div>
    </div>*/?>
</div>

<?php
    include("footer.php");
?>