<!--

Script of the home page when using a computer or tablet

-->

<style>
    body {
        background: url("") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        -webkit-transition: background 1s ease-in-out;
        -moz-transition: background 1s ease-in-out;
        -o-transition: background 1s ease-in-out;
        -ms-transition: background 1s ease-in-out;
        transition: background 1s ease-in-out;
        -webkit-backface-visibility: hidden;
    }

    .background-video {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        display: none;
    }

    .background-video video {
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
    }
</style>

<!-- background video -->
<div class="background-video" id="background-video"><video src="" controls="false" muted="muted"></video></div>

<!-- Dropzone overlay -->
<div class="drop-overlay" id="drop-overlay"><p><?php echo $text['drop_files_here']; ?></p></div>
<?php
/*
 * Make background clickable when set.
 */
if(!empty($back_url)) {
    echo '<a id = "bglink" href = "'. $back_url .'" target = "_blank" style = "cursor: pointer;" > clickable</a >';
}
else
{
    echo '<a id="bglink" href="#" style="cursor: pointer;">clickable</a>';
}
?>
<div class="OuterDiv">
    <div class="MainOuter">
        <div class="MainMiddle">
            <div id="errorDiv">
                <?php
                if(isset($_GET['e']) == 'wrong') {
                    echo '<div class="alert alert-danger" role="alert">' . $text['invalid_pass'] . '</div>';
                }
                ?>
            </div>
            <div class="MainContent">
                <?php
                // Load the requested page.

                $check_id = $get_info->num_rows;
                if(isset($_GET['download']))
                {
                    // Load the download page
                    require_once dirname(__FILE__) . '/pages/download.php';
                }
                elseif($_COOKIE['droppy_terms'] != '1' && $accept_terms_enabled == 'yes')
                {
                    // Load the accept terms page
                    require_once dirname(__FILE__) . '/pages/terms.php';
                }
                else
                {
                    // Load the upload page
                    require_once dirname(__FILE__) . '/pages/upload.php';
                }
                ?>
            </div>
            <?php
            // Show ad when enabled
            if($ad_2_enabled == 'true'):
                ?>
                <div id="ad_2_div" style="margin-top: 410px; margin-left: auto; margin-right: 38px; width: 234px; height: 60px;">
                    <?php echo $ad_2_code; ?>
                </div>
                <?php
            endif;
            ?>
            <!-- End progress and succes div -->
        </div>
    </div>
</div>

<?php

// Load all the modals
require_once dirname(__FILE__) . '/pages/modal.php';
?>

<div id="preview-template" style="display: none;"></div>

<!-- Loading Bootstrap -->
<script src="<?php echo $theme_path; ?>js/bootstrap.min.js"></script>

<!-- Loading tools -->
<script src="<?php echo $theme_path; ?>js/jquery.knob.min.js"></script>
<script src="<?php echo $theme_path; ?>js/dropzone.js"></script>

<!-- Copy function -->
<script type="text/javascript">
    function activateCopy() {
        var clipboard = new Clipboard('#copy-button');

        clipboard.on('success', function(e) {
            $('#copy-button').hide();
            $('#okButton').show();

            e.clearSelection();
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    }
</script>
<!-- End of the copy function -->

<!-- Loading the droppy javascript -->
<script src="<?php echo $theme_path; ?>js/droppy.js"></script>

<!-- Translating some variables from php to javascript -->
<script type="text/javascript">
    var mobileVersion = 'no';
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });

    var maxSize = <?php echo $max_size; ?>;
    var maxFiles = <?php echo $max_upload_files; ?>;
    var maxSizeBytes = maxSize * 1024 * 1024;
    var total_size_left = maxSizeBytes;
    var disallowedFiles = "<?php echo $disallowed_types; ?>";
    var process_activate = false;
    var siteUrl = "<?php echo $site_url; ?>";
    var msg_download_started = "<?php echo $text['download_started']; ?>";
    var msg_fill_fields = "<?php echo $text['fill_fields']; ?>";
    var msg_upload_error = "<?php echo $text['upload_error']; ?>";
    var msg_file_to_large = "<?php echo $text['file_to_large']; ?>";
    var msg_wrong_pass = "<?php echo $text['wrong_pass']; ?>";
    var msg_file_blocked = "<?php echo $text['file_blocked']; ?>";
    var msg_max_files = "<?php echo $text['max_files']; ?>";
    var msg_copy_url = "<?php echo $text['copy_url']; ?>";
    var msg_seconds = "<?php echo $text['msg_seconds']; ?>";
    var msg_minutes = "<?php echo $text['msg_minutes']; ?>";
    var msg_hours = "<?php echo $text['msg_hours']; ?>";
    var msg_remaining = "<?php echo $text['msg_remaining']; ?>";
    var msg_uploaded_of = "<?php echo $text['uploaded_of']; ?>";

    <?php
    $num=1;

    //Get backgrounds from table
    $sth = $mysqli->query("SELECT * FROM $table_backgrounds ORDER BY RAND()");
    $backgrounds = array();
    $url = array();
    while($r = $sth->fetch_assoc()) {
        $backgrounds[] = $r['src'];
        $url[] = $r['url'];
    }
    ?>
    var timer = <?php echo $bg_timer; ?>;
    var sources = <?php echo json_encode($backgrounds); ?>;
    var urls = <?php echo json_encode($url); ?>;

    // then to call it, you would use this
    var imagess = [];
    var total_src = sources.length;

    if(total_src == 1) {
        var i = 0;
    }
    else
    {
        var i = 1;
    }

    firstSlide = true;

    //Preloads the images
    //preloadImages(images, imagess);

    //Background slide show
    function slideShow() {
        if($('.background-video video')[0].play()) {
            $('.background-video video')[0].pause();
        }

        $('.background-video').fadeOut();

        if(urls[i] == '') {
            if($("#bglink").attr("target")) {
                $("#bglink").removeAttr("target");
            }
            $("#bglink").attr("href", "#");
        }
        else
        {
            if(!$("#bglink").attr("target")) {
                $('#bglink').attr('target', '_blank');
            }
            $("#bglink").attr("href", urls[1]);
        }

        // Check if the source is a video or image
        if(sources[i].split('.').pop() == 'mp4') {
            //Source is video
            document.body.style.backgroundImage="";

            $('.background-video video').attr('src',sources[i]);
            $('.background-video video')[0].play();
            $('.background-video').fadeIn();
        }
        else
        {
            // Source is image
            document.body.style.backgroundImage="url('"+sources[i]+"')";
        }

        var bgvalue = urls.shift();
        urls.push(bgvalue);
        var firstValue = sources.shift();
        sources.push(firstValue);
    }

    slideShow();
    <?php
    if($bg_timer > 0) :
    ?>
    // Run every X times.
    if(timer != '' && timer != 0) {
        setInterval(function () {
            slideShow();
        }, (timer * 1000));
    }
    <?php
    endif;
    ?>
</script>