<?php
require_once APPLICATION_PATH . '/modules/alw/views/helpers/Loadingimage.php';

$loadCdnImage = new Alw_View_Helper_Loadingimage();
$videoRhinoCdnPath = (APPLICATION_ENV != 'development') ? $loadCdnImage->getCdnAlwImagePath('Video_Rhino.svg') : '/images/icons/Video_Rhino.svg';
$iconPlayCdnPath = $loadCdnImage->getCdnImagePath('icon_play_icon.png');
?>
<div id="content" class="content-div video-tab">
    <div id="bread">
        <a href="/artist"><?=$this->translate('All Artists')?></a>
    </div>
    <h1>
        <span><?=$this->artistImages($this->artist->artist_id, $this->artist->name);?></span> <?=$this->artist->name?>
    </h1>
    <!-- Start Artist Builder Wrap-->
    <div id="artistBuilderWrap">
        <!-- Start Left Content-->
        <div id="contentLeftsm">
            <?=$this->artistBuilderNavigation('videos', 'navigateAway', $this->performanceArtistIndexEnabled);?>
        </div>
        <!-- End Left Content-->
        <!-- Start Right Content-->
        <div id="contentRightlg">
            <div id="artistFormWrap">
                <?php if (($this->artistVideos->count() <= 0)) { ?>
                    <!-- Start No Videos-->
                    <h2 class="input-btn-left-space bottom-space"><?=$this->translate('Videos')?></h2>
                    <div class="noNewReleases marginTop no-data-frame">
                        <img src="<?= $videoRhinoCdnPath ?>" />
                        <p class="textLarge no-data-title">
                        <?=$this->translate('You currently have no videos.')?>
                        </p><br/>
                        <form id="add_video_form" class="text-left no-videos">
                            <div class="form-group bottom-space">
                                <label><?=$this->translate('Enter a YouTube or Vimeo Link')?>:</label>
                                <div class="input-group">
                                    <input name="add_video" id="add_video" tabindex="1" type="text" class="watermarkBox form-control" />
                                    <div class="input-group-btn space-left">
                                        <div class="addButton pull-right no-width">
                                            <a class="btn btn-primary pageFormBtn" id="add_video_button"><?=$this->translate('Add Video')?></a>
                                        </div>
                                        <div class="pull-right notDisplay no-width" id="please_wait_video_button">
                                            <a class="btn btn-primary pageFormBtn"><?=$this->translate('Please Wait')?>...</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span id="add_video_message" class="text-left"></span>
                        </form>
                    </div>
                    <!-- End No Videos-->
                <?php } else { ?>
                    <!-- Start Videos-->
                    <h2 class="input-btn-left-space bottom-space"><?=$this->translate('Videos')?></h2>
                    <form id="add_video_form" class="text-left">
                        <div class="form-group bottom-space">
                            <label><?=$this->translate('Enter a YouTube or Vimeo Link')?>:</label>
                            <div class="input-group">
                                <input name="add_video" id="add_video" tabindex="1" type="text" class="watermarkBox form-control" />
                                <div class="input-group-btn space-left">
                                    <div class="addButton pull-right no-width">
                                        <a class="btn btn-primary pageFormBtn" id="add_video_button"><?=$this->translate('Add Video')?></a>
                                    </div>
                                    <div class="notDisplay pull-right no-width" id="please_wait_video_button">
                                        <a class="btn btn-primary pageFormBtn"><?=$this->translate('Please Wait')?>...</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span id="add_video_message"></span>
                    </form>
                    <!-- Video loop-->
                    <?php foreach ($this->artistVideos as $artistVideo) {
                        $this->artistVideosManager->videoInformation = array();
                        try {
                            $videoInfo = $this->artistVideosManager->getVideoInfoByURL($artistVideo->getFullUrl());
                        } catch (Exception $e) {
                            $videoInfo = $this->artistVideosManager->videoInformation;
                        } ?>
                    <div class="content-block pull-left artistVideo">
                        <div class="content-block-inner">
                            <div class="artistVideoImage videoPreviewContainer">
                                <span class="videoImageContainer">
                                    <img class="play_hover" src="<?= $iconPlayCdnPath ?>" />
                                    <img src="<?=isset($videoInfo['img']) ? $videoInfo['img'] : ''?>" height="140" width="251"/>
                                </span>
                                <span class="videoPreviewContainer" style="display: none;">
                                    <?php
                                    /** display UI based on determined video site type*/
                                    switch ($videoInfo['type']) {
                                        case 'youtube':
                                            $youtubeVideoUrl = isset($videoInfo['video_stream']) ? $videoInfo['video_stream'] : Service_ManageVideoAssets::YOUTUBE_EMBED_PLAYER_URL . $videoInfo['id'];?>
                                                <code>
                                                    <iframe src="<?=$youtubeVideoUrl?>?feature=oembed&autoplay=1" frameborder="0" allow="autoplay;" allowfullscreen height="140" width="100%"></iframe>
                                                </code>
                                                <?php $controlImgSrc = 'Youtube';
                                            break;
                                        case 'vimeo':
                                            $vimeoVideoUrl = isset($videoInfo['video_stream']) ? $videoInfo['video_stream'] : Service_ManageVideoAssets::VIMEO_EMBED_PLAYER_URL . $videoInfo['id'];?>
                                                <code>
                                                    <iframe src="<?=$vimeoVideoUrl?>?autoplay=1&title=1&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen;" allowfullscreen height="140" width="100%"></iframe>
                                                </code>
                                                <?php $controlImgSrc = 'Vimeo';
                                            break;
                                    } ?>
                                </span>
                                <div id="videoLink">
                                    <a href="<?=$videoInfo['link']?>" class="videoLink textMedium text-center" target="_blank"><?php if (strlen($artistVideo->title) < 35) { echo $artistVideo->title; } else { echo substr($artistVideo->title, 0, 35) . '...'; } ?></a>
                                </div>
                            </div>
                            <div class="artist-video-controls">
                                <a onclick="deleteVideo(<?=$artistVideo->artist_video_id?>)" class="videoTrash trash-icon pull-right"></a>
                                <span class="pull-left video-source textMedium"><?=$controlImgSrc?></span>
                            </div>
                        </div>
                    </div>
                    <?php
                    } ?>
                    <!-- End Video loop-->
                    <!-- End Videos-->
                <?php } ?>
                <div class="clear"></div>
            </div>
        </div>
        <!-- End Right Content-->
    </div>
    <!-- End Artist Builder Wrap-->
</div>
<?php //@todo: need to move js code to separate file?>
<script type="text/javascript">
    /** url encode function for AJAX */
    function urlencode (str) {
        str = (str+'').toString();
        return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
    }

    $(document).ready(function() {
        /** Define what happens when the textbox comes under focus, remove the watermark class and clear the box */
        $('#add_video').focus(function() {
            $(this).filter(function() {
                /** We only want this to apply if there's not, something actually entered */
                return $(this).val() == '' || $(this).val() == 'e.g. http://www.youtube.com/12332';
            }).removeClass('watermarkOn').addClass('regularBox').val('');
        });

        /** Define what happens when the textbox loses focus, add the watermark class and default text */
        $('#add_video').blur(function() {
            $(this).filter(function() {
                /** We only want this to apply if there's not, something actually entered */
                return $(this).val() == ''
            }).removeClass('regularBox').addClass('watermarkOn').val('e.g. http://www.youtube.com/12332');
        });

        $('#add_video').addClass('watermarkOn').val('e.g. http://www.youtube.com/12332');

        /** processing for the add video button */
        $('#add_video_button').click(function() {

            /** don't submit if button click with watermark value*/
            if ($('#add_video').val() == 'e.g. http://www.youtube.com/12332') {
                return false;
            }

            $('#add_video_error_message').fadeOut();
            if ($('#add_video').val() == '') {
                $('#add_video_message').html("<span class='required'>* <?=$this->escapejs($this->translate('Please enter valid URL'))?></span>");
                $('#add_video_message').fadeIn();
            } else {
                $('#add_video_button').hide();
                $('#please_wait_video_button').show();
                var video_url = encodeURI($('#add_video').val());
                $.ajax({
                    type: 'POST',
                    url: '/artistvideos/addvideo/artist_id/<?=$this->artist->artist_id?>?video_url='+urlencode(video_url),
                    data: {format: 'json'},
                    dataType: 'json',
                    success: function(data, textStatus, XMLHttpRequest){
                        window.location.href = '/artistvideos/index/artist_id/<?=$this->artist->artist_id?>';
                    },
                    error: function(xhr, textStatus, errorThrown){
                        $('#add_video_button').show();
                        $('#please_wait_video_button').hide();
                        function artistVideoError() {
                            $('#add_video_message').html('<span class="error"><?=$this->escapejs($this->translate('Your link doesn\'t seem to be working.Please make sure it is a valid YouTube or Vimeo link and try again'))?>.</span>');
                            $('#add_video_form').addClass('invalid-input');
                            $('#add_video_button').addClass('disabled');
                        }
                        artistVideoError();
                        $('#add_video').focus(function(){
                            if ($('#add_video_form').hasClass('invalid-input')) {
                                jQuery('#add_video_form').removeClass('invalid-input');
                                $('#add_video_button').removeClass('disabled');
                                $('#add_video_message').html('');
                            }
                        });
                    }
              });
            }
        });

        /** prevent any unwanted video plays from a simple video link click */
        $('.videoLink').click(
            function (event) {
                event.stopPropagation();
            }
        );
    });

    /** delete video modal window action */
    function deleteVideo(artist_video_id){
        modalWindow0({
            'artist_video_id':artist_video_id,
            'artist_id':'<?=$this->artist->artist_id?>',
            'querystring':''
        });
    }

    /** store current player in memory to turn off if another one is clicked */
    var currentPlayer;

    /** video hovers for previewing media */
    $('.videoImageContainer').hover(
        function () {
            $(this).children('.play_hover').fadeIn('fast');
        },
        function () {
            $(this).children('.play_hover').fadeOut('fast');
        }
    );

    /** anytime a click occurs in a video preview container, turn off the currently playing video player if it's in memory, and show the new current video player */
    $('.videoPreviewContainer').click(
        function () {
            if (typeof(currentPlayer) != 'undefined') {
                currentPlayer.children('.videoImageContainer').show();
                currentPlayer.children('.videoPreviewContainer').hide();
                currentPlayer.children('.videoImageContainer').children('.play_hover').hide();
            }
            $(this).children('.videoImageContainer').hide();
            $(this).children('.videoPreviewContainer').show();
            currentPlayer = $(this);
        }
    );

    /** turn off the currently playing video player to the idle state due to modal window popup or other UI event */
    function turnOffVideoPlayer() {
        if (typeof(currentPlayer) != 'undefined') {
            currentPlayer.children('.videoImageContainer').show();
            currentPlayer.children('.videoPreviewContainer').hide();
            currentPlayer.children('.videoImageContainer').children('.play_hover').hide();
        }
    }
</script>
<?php
$options = array(
    array(
        'url' => '/artistvideos/deletevideomodal/',
        'closeOnEsc' => false,
        'closeOnClick' => false,
        'loadSpeed' => 100,
        'top' => 10,
        'bindEvent' => false,
        'loadingbar' => false
    )
);
echo $this->modalwindow($options, $this->featureVendorContext);
?>
