@using DR.Web.UI.Helpers
@using DR.Web.UI.ViewConfig
@model DR.AcCommonUI.Models.LivePage.LivePageViewModel

@{
    
    var largeWideAspectImageUrl = Model.Article.LargeWideAspectImage != null ? Model.Article.LargeWideAspectImage.ImageUrl : string.Empty;
}
@if (Model.LivePageConfiguration.PlayerConfiguration.Any())
{
    var first = Model.LivePageConfiguration.PlayerConfiguration.First();
    var firstImageUrl = first.PlayerImage != null ? first.PlayerImage.ImageUrl : string.Empty;
    var activeClass = MvcHtmlString.Empty;
    string isBoxed = (Model.Article.isBackdrop && Model.LivePageConfiguration.PlayerEnabled) ? "boxed" : ""; 
    
    
        if (Model.LivePageConfiguration.PlayerEnabled) {
            <div class="section live-stream" id="media-alternative">
            <div class="dr-ui-paging-tabs">
                @{
            
                        foreach (var channel in Model.LivePageConfiguration.PlayerConfiguration)
                        {
                            activeClass = channel == first ? new MvcHtmlString(" class=\"active\"") : MvcHtmlString.Empty;
                            var imageUrl = channel.PlayerImage != null ? channel.PlayerImage.ImageUrl : string.Empty;
                            string playerSlug = "";
                            if (channel.PlayerSlug.Contains("video#"))
                            {
                                playerSlug = channel.PlayerSlug.Replace("video#", "");
                            }
                            if (channel.PlayerSlug.Contains("audio#"))
                            {
                                playerSlug = channel.PlayerSlug.Replace("audio#", "");
                            }
                            <a @activeClass dr-data-channel="@playerSlug" dr-data-image="@imageUrl"><span>@channel.PlayerHeadline</span></a>
                            
                
                        }
                        <script type="text/javascript">
                            var playerMetaData = {
                                "data": [
                            @{
                                int counter = 0;
                                int items = Model.LivePageConfiguration.PlayerConfiguration.Count() - 1;
                                string playerText = "";
                                foreach (var channel in Model.LivePageConfiguration.PlayerConfiguration)
                                {
                                    var imageUrl = channel.PlayerImage != null ? channel.PlayerImage.ImageUrl : string.Empty;                  
                                    string playerSlug = "";
                                    string media = "";
                                    if (channel.PlayerSlug.Contains("video#"))
                                    {
                                        playerSlug = channel.PlayerSlug.Replace("video#", "");
                                        media = "video";
                                    }
                                    if (channel.PlayerSlug.Contains("audio#"))
                                    {
                                        playerSlug = channel.PlayerSlug.Replace("audio#", "");
                                        media = "audio";
                                    }
                                   playerText = !string.IsNullOrEmpty(channel.PlayerText) ? System.Text.RegularExpressions.Regex.Replace(channel.PlayerText, @"\s+", " ") : string.Empty;
                                    @:{ "playertext": "@Html.Raw(playerText.Replace ("\"","\\\""))", "headline": "@Html.Raw(channel.PlayerHeadline)", "media": "@media", "slug": "@playerSlug", "image": "@Html.Raw(imageUrl)" }@(counter == items ? "" : ",")
                                    counter++;
                                }
                            }
                                ]
                            };
                        </script>
                }
            </div>
                </div>
            <div class="dr-site-live-media-player">
                @* Media player will be here *@
                <div class="live-video-player-description">
                    <h3>@* PlayerHeadline *@</h3>
                    <p>@* PlayerText *@</p>
                </div>
            </div>
    
            <script type="text/javascript">
                var LivePlayerTabToggle = new Class({
                    Implements: Options,
                    options: {
                    },
                    tabs: "",
                    playerContainer: "",
                    channelDescription: "",
                    playerDataJSON: "",
                    audioPreviewImage: null,

                    initialize: function (options) {
                        if (options != undefined) this.setOptions(options);
                        this.playerContainer = document.getElement(".live-stream .dr-site-live-media-player");
                        this.channelDescription = document.getElement(".live-video-player-description");
                        this.tabs = document.getElements(".theme-live-page .live-stream .dr-ui-paging-tabs a");
                        this.playerDataJSON = this.options.json.data.length > 0 ? this.options.json : null;
                        // CREATE TAB ACTION
                        this.initializeTabNavigationForPlayer();
                        // CREATE PLAYER TO BE SHOWEN FIRST
                        this.initializeMediaPlayer();
                    },

                    initializeTabNavigationForPlayer: function () {
                        if (this.tabs.length > 0 && this.playerDataJSON) {
                            var previousActiveItem = "";

                            this.tabs.each(function (item) {
                                if (item.hasClass("active"))
                                    previousActiveItem = item;

                                // CLICK TAB
                                item.addEvent("click", function (e) {
                                    if (this.playerContainer) {
                                        // PREVISOUS ACTIVE ITEM
                                        previousActiveItem.removeClass("active");
                                        item.addClass("active");
                                        previousActiveItem = item;

                                        var count = 0;
                                        while (this.playerDataJSON.data[count] != undefined) {
                                            mediaItem = this.playerDataJSON.data[count];
                                            if (item.get("dr-data-channel") == mediaItem.slug) {
                                                if (mediaItem.media == "video") { // CREATE VIDEO PLAYER
                                                    this.createVideoPlayer(mediaItem);
                                                }
                                                else if (mediaItem.media == "audio") { // CREATE AUDIO PLAYER
                                                    this.createAudioPlayer(mediaItem, true);
                                                }
                                                else {
                                                    console.log("initializeTabNavigationForPlayer: Unknown player");
                                                }
                                            }
                                            count++;
                                        }
                                    }
                                    else {
                                        console.log("initializeTabNavigationForPlayer: Player container element dosen't exists");
                                    }
                                }.bind(this));
                            }.bind(this));
                        }
                        else {
                            document.getElement(".live-stream").destroy();
                        }
                    },

                    initializeMediaPlayer: function () {
                        if (this.playerDataJSON) {
                            var mediaItem = this.playerDataJSON.data[0];
                            if (mediaItem.media == "video") {
                                this.createVideoPlayer(mediaItem);
                            }
                            else if (mediaItem.media == "audio") {
                                this.createAudioPlayer(mediaItem, false);
                            }
                            else {
                                console.log("initializeMediaPlayer: Unknown player");
                            }
                        }
                        else {
                            document.getElement(".live-stream").destroy();
                        }
                    },

                    createVideoPlayer: function (mediaItem) {
                        // REMOVE PLAYER AND META DATA
                        this.removePreviousPlayerData();
                        // SET META DATA
                        this.setCurrentPlayerData(mediaItem);
                        // CREATE PLAYER AND INJECT
                        var playerEl = new Element("div", { "class": "dr-widget-video-player", "data-channel": mediaItem.slug, "data-image": mediaItem.image });
                        playerEl.inject(this.playerContainer, "top");
                        require(["dr-media-player-factory"], function (PlayerFactory) {
                            PlayerFactory.getPlayer({
                                'element': playerEl,
                                'videoData': {
                                    'videoType': 'live',
                                    'image': mediaItem.image,
                                    'channelId': mediaItem.slug
                                },
                                'appData': {
                                    'autoPlay': false,
                                    'gemius': {
                                        'channelName': mediaItem.channel
                                    }
                                },
                                'enableHashTimeCode': false
                            });
                        }.bind(this));
                    },

                    createAudioPlayer: function (mediaItem, changeChannel) {
                        // REMOVE PLAYER AND META DATA
                        this.removePreviousPlayerData();
                        // SET META DATA
                        this.setCurrentPlayerData(mediaItem);
                        // PREVIEW IMAGE FOR AUDIO CHANNEL
                        var imageScalerPath = "//asset.dr.dk/imagescaler?file=" + mediaItem.image + "&w=620&h=349&scaleAfter=crop";
                        this.audioPreviewImage = new Element("img", { "src": imageScalerPath, "class": "audioPreview" });
                        // CREATE PLAYER AND INJECT
                        var playerEl = new Element("div", { "class": "dr-widget-audio-player", "data-channel": mediaItem.slug });
                        playerEl.inject(this.playerContainer, "top");

                        if (changeChannel) {
                            require(["dr-media-player-factory"], function (PlayerFactory) {
                                PlayerFactory.getPlayer({
                                    'element': playerEl,
                                    'videoData': {
                                        'videoType': 'live',
                                        'resource': '/radio/live/' + mediaItem.slug,
                                        'channelId': mediaItem.slug
                                    },
                                    'appData': {
                                        'autoPlay': false,
                                        'gemius': {
                                            'channelName': mediaItem.slug
                                        }
                                    },
                                    'enableHashTimeCode': false,
                                    'type': 'audio'

                                });
                            }.bind(this));
                        }

                        // INJECT PREVIEW IMAGE FOR AUDIO
                        this.audioPreviewImage.inject(this.playerContainer, "top");
                    },

                    setCurrentPlayerData: function (mediaItem) {
                        var h3 = new Element("h3", { "html": mediaItem.headline });
                        var p = new Element("p", { "html": mediaItem.playertext });
                        h3.inject(this.channelDescription, "top");
                        p.inject(this.channelDescription, "bottom");
                    },
                    removePreviousPlayerData: function () {
                        // REMOVE PLAYER
                        if (this.playerContainer.getElement("[class*='dr-widget-']")) {
                            this.playerContainer.getElement("[class*='dr-widget-']").destroy();
                            // AUDIO PLAYER HAS A PREVIEW IMAGE INJECTET
                            if (this.audioPreviewImage)
                                this.audioPreviewImage.destroy();
                        }
                        // REMOVE PLAYER META DATA (PROGRAM DESCRIPTION TEXT)
                        this.channelDescription.empty();
                    }
                });

                window.addEvent("domready", function () {
                    // playerMetaData IS GLOBAL JS VARIABLE. SEE TOP OF PAGE
                    new LivePlayerTabToggle({ json: playerMetaData });
                });
        </script>
        } // if .PlayerEnabled
        else
        {
            if (!string.IsNullOrEmpty(firstImageUrl))
            {
                <div class="section live-stream" id="media-alternative">
                <img alt="" src="//asset.dr.dk/imagescaler/imagescaler/?file=@firstImageUrl&amp;w=460&amp&amp;scaleAfter=crop&amp;server=www.dr.dk" />
                    </div>
            }
        }

    
  
}