<?php
//require_once('../modules/Client.php');
require_once('/var/www/community/modules/Config.php');
require_once('/var/www/community/modules/Video.php');
require_once('/var/www/community/modules/Agent.php');

//use Client\Client;
use Config\Config;
use Video\Video;
use Agent\Agent;

$video_id = "";

if (isset($_GET['video_id'])) $video_id = $_GET['video_id'];

$share_url = Config::instance()->MAIN_URL . "/play_video.php?video_id=$video_id";

if ( isset($_GET['referrer']) )
{
    $share_url = $_GET['referrer'];
}

$video = new Video($video_id);

$autoplay = "true";

$agent = new Agent(null, $video->_data['agent_id']);

$resize = "true";

if (isset($_GET['resize']))
{
    if ($_GET['resize'] == "false")
    {
        $resize = "false";
    }
}

$page = "";

if (isset($_GET['page']))
{
    $page = $_GET['page'];
}

if (isset($_GET['autoplay']))
{
    $autoplay = $_GET['autoplay'];
}

?>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<!-- <link rel="stylesheet" href="css/foundation.css"/> -->
<link rel="stylesheet" href="css/master.css"/>
<!--Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<!--Font Awesome
<link href="css/font-awesome.css" rel="stylesheet">-->
<!--Javascript-->
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

<!--
        <meta property="og:title" content="VidBrander"/>
        <meta property="og:video:type" content="video/mp4">
        <meta property="og:description" content="VidBrander Video"/>
        <meta property="og:type" content="movie"/>
        <meta property="og:video:height" content="360"/>
        <meta property="og:video:width" content="640"/>
        <meta property="og:url"  content="<?php echo $share_url;?>"/>
        <meta property="og:video" content="https://www.vidbrander.com/play_video.php?video_id=<?php echo $video_id;?>">
        <meta property="og:video:url" content="https://www.vidbrander.com/play_video.php?video_id=<?php echo $video_id;?>">
        <meta property="og:video:secure_url" content="https://www.vidbrander.com/play_video.php?video_id=<?php echo $video_id;?>">
        <meta property="og:image" content="https://test.vidbrander.com/img/agent_video.jpg"/>
-->

<meta property="og:title" content="<?php echo $video->_data['geo_name'];?> Community Video"/>
<meta property="og:description" content="View my Video"/>
<meta property="og:video:type" content="text/html">
<meta property="og:type" content="website"/>
<meta property="og:url"  content="<?php echo Config::instance()->MAIN_URL; ?>/play_video.php?video_id=<?php echo $video_id;?>"/>
<meta property="og:image" content="<?php echo Config::instance()->MAIN_URL; ?>/img/th_av_play.jpg"/>

<link rel="stylesheet" href="css/video.css"/>

<!-- Overlay Style  -->
<style type="text/css">
    #video_box{
        float:left;
    }
    #video_overlays {
        position:absolute;
        float:left;
        width:560px;
        min-height:315px;
        z-index:300000;
    }
    #contact-agent-overlay{
        position: absolute;
        left:247px;
        top:198px;
    }
    .contact-agent-button {
        background-color: rgba(0, 0, 0, 0.7);
        padding:0px;
        width: 150px;
        height: 30px;
        border-radius: 4px;
        overflow: hidden;
        font-family: inherit;
        font-size: .85em;
    }
    #contact-agent-overlay-small{
        position: absolute;
        left:425px;
        top:10px;
    }
    .contact-agent-button-small {
        background-color: rgba(0, 0, 0, 0.7);
        padding:0px;
        width: 125px;
        height: 22px;
        border-radius: 4px;
        overflow: hidden;
        font-family: inherit;
        font-size: .70em;
    }
    /*If you'd like to change the branding colors for this button*/
    .branded-button {
        color:white;
        background-color: #eb2941;
    }
    .branded-button:hover{background-color: rgba(0, 0, 0, 0.7);background-color: red;}
    /*Button branding end*/
    #follow-me-overlay {
        position: absolute;
        top:180px;
        left:385px;
    }
    .follow-me-button {display: inline;margin-right: 10px;}
    #sidebar-overlay {
        background-color: rgba(0, 0, 0, 0.7);
        /*min-width: 50px;*/
        max-width: 15%;
        min-height:295px;
        float:right;
        padding:10px;
    }
    .sidebar-icon {
        width:28px;
        height:28px;
        background-repeat: no-repeat;
        padding:0;
        margin:0;
        overflow: hidden;
        border-radius: 3px;
    }
    .sidebar-label, .follow-me-label {text-align:center;color:white;font-weight: bold;font-size: 10px;margin-bottom: 10px;}
    .sidebar-button {margin-bottom: 10px;}
    .sidebar-button .facebook, .follow-me-button .facebook {background-image:url('img/icon_facebook.jpg');}
    .sidebar-button .twitter, .follow-me-button .twitter {background-image:url('img/icon_twitter.jpg');}
    .sidebar-button .instagram, .follow-me-button .instagram {background-image:url('img/icon_instagram.jpg');}

    /* video control css*/
    #video-controls {
        /*
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        */
        height: 40px;
        padding: 5px;
        opacity: .9;
        -webkit-transition: opacity .3s;
        -moz-transition: opacity .3s;
        -o-transition: opacity .3s;
        -ms-transition: opacity .3s;
        transition: opacity .3s;
        background-image: linear-gradient(bottom, rgb(0,0,0) 13%, rgb(60,60,60) 100%);
        background-image: -o-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(60,60,60) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(60,60,60) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(60,60,60) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(60,60,60) 100%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.13, rgb(0,0,0)),
            color-stop(1, rgb(60,60,60))
        );
    }

    button {
        background: rgba(0,0,0,.5);
        border: 0;
        color: #EEE;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    button:hover {
        cursor: pointer;
    }

    #seek-bar {
        width: 200px;
    }

    #volume-bar {
        width: 60px;
    }

    #bar_play_button {
        width: 16px;
        height: 16px;
        padding: 3px;
    }

    #bar_pause_button {
        width: 16px;
        height: 16px;
    }

    #bar_mute {
        width: 18px;
        height: 18px;
        padding: 3px;
    }

    #bar_unmute {
        width: 18px;
        height: 18px;
    }

    #bar_fullscreen {
        width: 18px;
        height: 18px;
        padding: 3px;
    }

</style>





</head>
<body id="body" style="margin: 0px; background-color: #ffffff;">





<div id="wrap_video"><!-- style="margin-right:auto;margin-left:auto;max-width:560px;" -->
    <div id="video_box">


        <div id="video_overlays" style="display: none">
            <div id="follow-me-overlay">
                <?php if( strlen($agent->getCta1()) || strlen($agent->getCta2()) ) {?>

                <?php }?>
                <?php if(strlen($agent->getCta1())) {?><a href="<?php echo $agent->getCta1();?>" target="_blank" onclick="$.get('<?php echo Config::instance()->MAIN_URL;?>/stats_tracking_update.php?guid='+tracking_guid+'&comp_pct='+value+'&page=<?php echo $page;?>&contact_us=1')"><div style="width: 80px; height: 80px; position: absolute; top: 0px; left: 0px;"></div></a><?php }?>
                <?php if(strlen($agent->getCta2())) {?><a href="<?php echo $agent->getCta2();?>" target="_blank" onclick="$.get('<?php echo Config::instance()->MAIN_URL;?>/stats_tracking_update.php?guid='+tracking_guid+'&comp_pct='+value+'&page=<?php echo $page;?>&fb_share=1')"><div style="width: 80px; height: 80px; position: absolute; top: 0px; left: 120px;"></div></a><?php }?>
            </div>
        </div>

        <div id="video_wrap">
            <img class='play_button' src="<?php echo Config::instance()->MAIN_URL;?>/img/play_button.png" alt="" id='play_button' onclick="document.getElementById('v').play();" />
            <video id="v"  height="360" width="640" <?php if ($autoplay != "false") echo "autoplay";?> poster="img/invite.png">
                <source id='mp4' src="https://cdn.vscreen.com/<?php echo $video->_data['client_id']."_".$video->_data['agent_id']."_".$video->_data['geo_type']."_".$video->_data['geo_code'].".mp4";?>" type='video/mp4'>
                <p>Your browser does not support the HTML5 Video element.</p>
            </video>
            <!-- Video Controls -->
            <div id="video-controls">
                <button type="button" id="play-pause" style="padding: 3px;"><img src='img/video_bar/bar_play_button.png' id="bar_play_button" /></button>
                <input type="range" id="seek-bar" value="0" style="">
                <button type="button" id="mute" style="padding: 3px;"><img src='img/video_bar/bar_unmute.png' id="bar_mute" /></button>
                <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1" >
                <button type="button" id="full-screen" style="padding: 3px;"><img src='img/video_bar/bar_fullscreen.png' id="bar_fullscreen" /></button>
            </div>
            <!-- Share button stuff -->
            <script>
                function toggleShareContainer()
                {
                    if (document.getElementById('ShareContainer') != null)
                    {
                        if(document.getElementById('ShareContainer').style.visibility == 'visible')
                        {
                            document.getElementById('ShareContainer').style.visibility = 'hidden';
                        }
                        else
                        {
                            document.getElementById('ShareContainer').style.visibility = 'visible';
                        }
                    }
                }
            </script>
            <div id="share_mini" onclick="toggleShareContainer();" style="visibility: hidden;">
                Share
            </div>
        </div>

    </div>
</div>
<script>
    $(document).ready(function(){
        $('#v').bind('contextmenu',function() { return false; });
    });
    window.onload = function(){
        setSize();

        shareThis();

        // Video
        var video = document.getElementById("v");

        // Buttons
        var playButton = document.getElementById("play-pause");
        var muteButton = document.getElementById("mute");
        var fullScreenButton = document.getElementById("full-screen");

        // Sliders
        var seekBar = document.getElementById("seek-bar");
        var volumeBar = document.getElementById("volume-bar");

        // Event listener for the play/pause button
        playButton.addEventListener("click", function() {
            if (video.paused == true) {
                // Play the video
                video.play();

                // Update the button text to 'Pause'
                playButton.innerHTML = "<img src='img/video_bar/bar_pause_button.png' id='bar_pause_button'/>";
            } else {
                // Pause the video
                video.pause();

                // Update the button text to 'Play'
                playButton.innerHTML = "<img src='img/video_bar/bar_play_button.png' id='bar_play_button'/>";
            }
        });

        // Event listener for the mute button
        muteButton.addEventListener("click", function() {
            if (video.muted == false) {
                // Mute the video
                video.muted = true;

                // Update the button text
                muteButton.innerHTML = "<img src='img/video_bar/bar_mute.png' id='bar_unmute' />";
            } else {
                // Unmute the video
                video.muted = false;

                // Update the button text
                muteButton.innerHTML = "<img src='img/video_bar/bar_unmute.png' id='bar_mute' />";
            }
        });

        // Event listener for the full-screen button
        fullScreenButton.addEventListener("click", function() {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen(); // Firefox
            } else if (video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen(); // Chrome and Safari
            }
        });

        // Event listener for the seek bar
        seekBar.addEventListener("change", function() {
            // Calculate the new time
            var time = video.duration * (seekBar.value / 100);

            // Update the video time
            video.currentTime = time;
        });

        //used to update the max percent viewed
        high_time = 0;

        // Update the seek bar as the video plays
        video.addEventListener("timeupdate", function() {
            // Calculate the slider value
            var value = (100 / video.duration) * video.currentTime;
            value = Math.ceil(value);

            // Update the slider value
            seekBar.value = value;

            //see if we need to update the comp % of the tracking table
            if ( (value % 5) === 0 )
            {
                //console.log( Math.round(value) );
                if (value > high_time) {
                    //console.log( high_time+' '+value );
                    high_time = value;
                    $.get('<?php echo Config::instance()->MAIN_URL;?>/stats_tracking_update.php?guid='+tracking_guid+'&comp_pct='+value+'&page=<?php echo $page;?>');
                }
            }
        });

        // Pause the video when the slider handle is being dragged
        seekBar.addEventListener("mousedown", function() {
            video.pause();
        });

        // Play the video when the slider handle is dropped
        seekBar.addEventListener("mouseup", function() {
            video.play();
        });

        // Event listener for the volume bar
        volumeBar.addEventListener("change", function() {
            // Update the video volume
            video.volume = volumeBar.value;
        });

    }

    function setSize()
    {
        //alert(typeof( window.innerWidth ));

        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myWidth = window.innerWidth - 30;
            myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth - 30;
            myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth - 30;
            myHeight = document.body.clientHeight;
        }

        document.getElementById("wrap_video").height = myHeight;
        document.getElementById("wrap_video").width = myWidth;

        document.getElementById("v").height = myHeight;
        document.getElementById("v").width = myWidth + 30;

        if (document.getElementById("play_button") != null) {
            document.getElementById("play_button").style.top = 170 * (myHeight / 360);
            document.getElementById("play_button").style.left = 280 * (myWidth / 640);
        }

        if (document.getElementById("fb_img") != null) {
            document.getElementById("fb_img").width = 214 * (myWidth / 640);
            document.getElementById("tw_img").width = 214 * (myWidth / 640);

            document.getElementById("share_mini").style.top = 15 * (myHeight / 360);
            document.getElementById("share_mini").style.left = 585 * (myWidth / 640);
        }

        if (document.getElementById("ShareContainer") != null) {
            document.getElementById("ShareContainer").style.top = 130 * (myHeight / 360);
            document.getElementById("ShareContainer").style.left = 230 * (myWidth / 640);
        }

        if (document.getElementById("follow-me-overlay") != null) {
            document.getElementById("follow-me-overlay").style.top = 190 * (myHeight / 360);
            document.getElementById("follow-me-overlay").style.left = 400 * (myWidth / 640);
            document.getElementById("follow-me-overlay").style.width = 315 * (myHeight / 360);
            document.getElementById("follow-me-overlay").style.height = 160 * (myWidth / 640);
        }
    }


    <?php if ($resize == "true") {?>
    window.onresize = function(){
        setSize();
    }
    <?php }?>


    //on play, remove the poster image
    $('video').bind('play', function (e) {

        setSize();

        document.getElementById("share_mini").style.visibility = "visible";

        //.style.zIndex="-1000";
        //document.getElementById("myBg").style.display="none";
        document.getElementById("play_button").style.zIndex="-1000";
        document.getElementById("play_button").style.display="none";

        document.getElementById("play-pause").innerHTML = "<img src='img/video_bar/bar_pause_button.png' id='bar_pause_button'/>";
        //$("#video-controls").delay(2000).fadeOut("slow");

        if (tracked == false)
        {
            $.get('<?php echo Config::instance()->MAIN_URL;?>/stats_tracking_new.php?video_id=<?php echo $video_id;?>&guid='+tracking_guid+'&referrer_url='+encodeURI('<?php echo $page;?>')+'&client_id=<?php echo $video->_data['client_id'];?>');
            tracked = true;
        }
    });

    $('video').bind('pause', function (e) {
        document.getElementById('video-controls').style.opacity = .9;
        document.getElementById('video-controls').style.display = 'block';

        document.getElementById("play-pause").innerHTML = "<img src='img/video_bar/bar_play_button.png' id='bar_play_button'/>";
    });

    $( '#video_box' ).hover(
        function() {
            document.getElementById('video-controls').style.opacity = .9;
            document.getElementById('video-controls').style.display = 'block';
        }, function() {
            $('#video-controls').delay(2000).fadeOut("slow");
        }
    );

</script>
<script>

    var overlay = document.getElementById('video_overlays');
    var video = document.getElementById('v');
    var small_contact = document.getElementById('contact-agent-overlay-small');


    video.addEventListener("timeupdate", function() {
        cur_time = video.currentTime;
        duration = video.duration;

        //13 sec before end
        if (duration-cur_time <= 7){
            //overlay.style.display = 'block';
            $("#video_overlays").fadeIn("slow");
        }
        else{
            overlay.style.display = 'none';

        }
    });

    tracked = false;
    tracking_guid = generateUUID();

    function generateUUID() {
        var d = new Date().getTime();
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = (d + Math.random()*16)%16 | 0;
            d = Math.floor(d/16);
            return (c=='x' ? r : (r&0x3|0x8)).toString(16);
        });
        return uuid;
    }

    function shareThis(){

        var facebookURL = "https://www.facebook.com/sharer/sharer.php?u="+document.location.href;
        var facebookImage = "https://portal.marketupdatevideo.com/assets/ShareOnFacebook.png";
        var twitterURL = "https://twitter.com/login?redirect_after_login=%2Fhome%3Fstatus%3D"+document.location.href;
        var twitterImage = "https://portal.marketupdatevideo.com/assets/ShareOnTwitter.png";

        var ShareContainer = document.createElement('DIV');
        ShareContainer.setAttribute('id','ShareContainer');
        document.getElementById('video_wrap').appendChild(ShareContainer);

        var shareOnFacebook = '<div id="ShareOnFacebook" style=""><a href="' + facebookURL + '" target="_blank" onclick="$.get(\'<?php echo Config::instance()->MAIN_URL;?>/stats_tracking_update.php?fb_share=1&video_id=<?php echo $video_id;?>&guid='+tracking_guid+'&referrer_url='+encodeURI('<?php echo $page;?>')+'&client_id=<?php echo $video->_data['client_id'];?>\')"><img src="' + facebookImage + '" id="fb_img"/></a></div>';
        var spacerdiv = '<div style="height:15px;">&nbsp;</div>';
        var ShareOnTwitter = '<div id="ShareOnTwitter" style=""><a href="' + twitterURL + '" target="_blank"><img src="' + twitterImage + '" id="tw_img"/></a></div>';

        document.getElementById("ShareContainer").innerHTML=shareOnFacebook+spacerdiv+ShareOnTwitter;
    }

</script>

<style type="text/css">
    #share_mini {
        position: absolute;
        top: 15px;
        left: 570px;
        color: #fff;
        background-color: #00b9f1;
        text-align: center;
        font-size: 11px;
        width: 45px;
        height: 20px;
        z-index: 2147483647;
        font-family: Arial, sans-serif;
        border-radius: 4px;
        vertical-align: middle;
        padding-top: 5px;
    }
    #ShareContainer {
        position: absolute;
        top: 130px;
        left: 230px;
        /* display: none; */
        visibility: hidden;
        z-index: 1000000;
    }
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
</style>
</body>
</html>
