@model DR.FV2016.Web.Models.BannerViewModel
@using DR.FV2016.Web.Helpers
@using DR.FV2016.Service.Models
@using DR.FV2016.Web.Models.Results;
@using DR.FV2016.Web.Models.Candidate;
@using System.Globalization

@{ 
    var initialCandidates1 = Model.InitialCandidates.Take(5).ToList();
    var initialCandidates2 = Model.InitialCandidates.Skip(5).Take(5).ToList(); 
        
    var timestampUTC = (Int64)Model.Servertime.ToUniversalTime().Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
    
    var jsURL = new Uri(Request.Url, Url.Content("~/Content/build/external/fvban2.js"));
    
    /* Note To prevent imagescaler caching issues the image querystring should match the one used in js. */
    var screenGrabUrl = Model.StreamingImageUrl;
    var fallbackScreenGrabURL = "http://asset.dr.dk/imagescaler01/www.dr.dk" + Url.Content("~/Content/images/external/fallback.jpg") + "&w=192&h=110&scaleAfter=crop";
    
    /* Set these to the correct electiontime once known. Else set far into the future!*/
    var electionEndUTC = (Int64)(new DateTime(2015, 6, 18, 20, 0, 0).ToUniversalTime()).Subtract(new DateTime(1970, 1, 1)).TotalSeconds;
    var electionTimerStart = new DateTime(2015, 6, 18, 8, 58, 0);

    Model.ElectionState = ElectionState.ElectionDay;
    Model.ElectionState = ElectionState.ResultsIn;
    Model.ElectionState = ElectionState.ElectedCandidatesIn;
}

@*Only uncomment for testing! Styles are included in base.css/base-static.css i global assets*@
@*<link rel="stylesheet" href="http://localhost:8888/assets/css/005/base-static.css" media="all">*@
@*<link type="text/css" rel="stylesheet" href="@Url.CrossServerContent("~/Content/build/external/fvban-static.css")">*@

<style>
    #fv2015-drdk-top-banner-wrapper .fvban-wrapper {
        background-image: url('//www.dr.dk/nyheder/politik/valg2016/content/images/external/banner-bg-mobil.jpg');
    }
    .fvban-wrapper.election {
        overflow: hidden;
    }
    .fvban-wrapper.election .block-container {
        display: block;
        height: 100%;
        width: 90%;
        position: relative;
        margin-left: 5%;
        margin-right: 5%;
    }
    .fvban-wrapper.election .block-container .block-aligner {
        position: absolute;
        width: 100%;
        bottom: 0;
        white-space: nowrap;
    }
    .fvban-wrapper.election .block-container .blocks {
        display: inline-block;
        width: 40%;
        position: relative;
    }
    .fvban-wrapper.election .block-container .party-leader {
        display: inline-block;
        width: 30%;
        position: relative;
    }
    .fvban-wrapper.election .block-container .party-leader img {
        width: 100%;
        margin-bottom: -3px;
    }
    .fvban-wrapper.election .block-container .party-leader.left {
    }
    .fvban-wrapper.election .block-container .party-leader.right {
    }
    .fvban-wrapper.election .block-container .block {
        display: inline-block;
        width: 45%;
        height: 35px;
        position: absolute;
        margin-bottom: 36px;
        bottom: 0;
    }
    .fvban-wrapper.election .block-container .block.right {
        right: 0;
    }
    .fvban-wrapper.election .block-container .block .bar {
        position: absolute;
        width: 100%;
        bottom: 0;
    }
    .fvban-wrapper.election .block-container .block .bar .count {
        position: absolute;
        margin-top: -18px;
        font: 16px/1 "gibsonLight", "Arial", sans-serif;
        text-align: center;
        width: 100%;
    }
    .fvban-wrapper.election .block-container .block.left .bar {
        background-color: #b32722;
    }
    .fvban-wrapper.election .block-container .block.right .bar {
        background-color: #234263;
    }
    .fvban-wrapper.election .block-container .divider {
        display: block;
        height: 60px;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.5);
        margin-bottom: 36px;
        position: absolute;
        bottom: 0;
        left: 50%;
    }
    .fvban-wrapper.election h3,
    .fvban-wrapper.election h4 {
        position: absolute;
        padding: 5px;
        text-transform: uppercase;
        font: normal 16px/1 "gibsonSemiBold", "Arial Black", sans-serif;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        z-index: 1;
    }
    .fvban-wrapper.election h4 {
        font-family: "gibsonRegular", "Arial", sans-serif;
        font-size: 12px;
        margin-top: 16px;
    }
    .fvban-wrapper.election h3 span {
        font-family: "gibsonRegular", "Arial", sans-serif;
    }
    .fvban-wrapper.election a {
        display: inline-block;
        background-color: #000;
        border-radius: 2px;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        line-height: 28px;
        padding: 0 20px;
        font-size: 11px;
        height: 28px;
    }
    .fvban-wrapper.election a.all-results {
        display: block;
        position: absolute;
        bottom: 3px;
        left: 50%;
        padding: 0;
        width: 100%;
        margin-left: -50%;
    }

    .fvban-wrapper.election .block-container.prognose .blocks {
        position: absolute;
        right: 0;
        bottom: 10px;
    }

    .fvban-wrapper.election .block-container.prognose .votes {
        font: 48px/1 "gibsonLight", "Arial", sans-serif;
        margin-top: 50px;
        width: 95px;
        float: left;
        color: #fff;
    }

    .fvban-wrapper.election .block-container.prognose .count-pie {
            width: 50px;
            height: 50px;
            float: left;
            margin-top: 50px;
        }
    }



</style>

<!--googleoff: index-->
<!-- FV BANNER STARTS HERE -->
<div id="fv2015-drdk-top-banner-wrapper" class="fvban" aria-hidden="true">
            
            @if (Model.ElectionState == ElectionState.PreElection || Model.ElectionState == ElectionState.ElectionDay) {
                <div class="fvban-wrapper preelection">
                    <div class="fvban-content">

                <div class="block-candidates">
                    <div class="candidates" id="fvban-candidates">
                        <div class="first group">
                            @foreach (var candidate in initialCandidates1)
                            { 
                                <a href="//www.dr.dk@(candidate.u)" title="@candidate.n">
                                    <span class="letter-color party-@candidate.l.ToLower().Replace("ø", "oe").Replace("æ", "ae").Replace("å", "aa") small"></span>
                                    <img src="@candidate.img&w=72&h=72&scaleAfter=crop&quality=80" alt="@candidate.n" onerror="this.src=''">
                                </a>
                            }
                        </div>
                        <div class="second group">
                            @foreach (var candidate in initialCandidates2)
                            { 
                                <a href="//www.dr.dk@(candidate.u)" title="@candidate.n">
                                    <span class="letter-color party-@candidate.l.ToLower().Replace("ø", "oe").Replace("æ", "ae").Replace("å", "aa") small"></span>
                                    <img src="@candidate.img&w=72&h=72&scaleAfter=crop&quality=80" alt="@candidate.n" onerror="this.src=''">
                                </a>
                            }
                        </div>
                    </div>
                    <div class="cf"></div>
                    <div class="tagline first">Hvem stemmer du på?</div>
                    <div class="tagline second">Find din kandidat til valget.</div>
                    <a href="//dr.dk/nyheder/politik/valg2016/kandidat-testen" class="fvban-button" alt="Tag kandidat-testen nu">TAG KANDIDAT-TESTEN</a>
                </div>
                        <div class="cf"></div>
                    </div>
                </div>

            } else if (Model.ElectionState == ElectionState.ResultsIn || Model.ElectionState == ElectionState.ElectedCandidatesIn) {
                Model.Result.CountedPercent = 72.3m;

                var barHeightLeft = ((Model.Result.ShareRed*2).ToString(CultureInfo.InvariantCulture));
                var barHeightRight = ((Model.Result.ShareBlue*2).ToString(CultureInfo.InvariantCulture));
                var piePercent = Model.Result.CountedPercent.ToString(CultureInfo.InvariantCulture);

                if (Model.ElectionState == ElectionState.ResultsIn) {
                    <div class="fvban-wrapper election">
                        <div class="fvban-content">

                    <h3>Prognose <span>hele landet</span></h3>
                    <h4>Stemmer optalt</h4>
                    <div class="block-container prognose">
                        <p class="votes">@Decimal.Round(Model.Result.CountedPercent)%</p>
                        <canvas class="count-pie" width=100 height=100 data-percent="@piePercent"></canvas>
                        <script>
                            (function() {
                                var pieElements = document.querySelectorAll(".fvban-wrapper .count-pie");
                                for (var i=0;i<pieElements.length;i++) {

                                    var canvas = pieElements[i];
                                    var percent = +canvas.getAttribute("data-percent") / 100;
                                    if (percent < 1 && canvas && canvas.getContext) {
                                        var ctx = canvas.getContext("2d");
                                        ctx.scale(canvas.width,canvas.width);
                                        ctx.lineWidth = 0.2;
                                        ctx.beginPath();
                                        ctx.arc(0.5,0.5,0.35,0,Math.PI*2,true);
                                        ctx.strokeStyle = "#0d3945";
                                        ctx.stroke();
                                        ctx.beginPath();
                                        ctx.arc(0.5,0.5,0.35, -Math.PI/2, -Math.PI/2 + Math.PI*2 * percent,false);
                                        ctx.strokeStyle = "#ffffff";
                                        ctx.stroke();
                                    }
                                }
                            })();
                        </script>

                        <div class="block-aligner">
                            <div class="blocks">
                                <div class="block left">
                                    <div class="bar" style="height:@barHeightLeft%">
                                        <div class="count">@Model.Result.ShareRed%</div>
                                    </div>
                                </div>
                                <div class="divider"></div>
                                <div class="block right">
                                    <div class="bar" style="height:@barHeightLeft%">
                                        <div class="count">@Model.Result.ShareBlue%</div>
                                    </div>
                                </div>
                                <a href="" class="live-link">Følg valget live</a>
                            </div>
                        </div>
                    </div>
                            <div class="cf"></div>
                        </div>
                    </div>

                } else {
                    <div class="fvban-wrapper election">
                        <div class="fvban-content">

                    <h3>Resultat <span>hele landet</span></h3>
                    <div class="block-container results">
                        <div class="block-aligner">
                            <div class="party-leader left">
                                <img src="//www.dr.dk/nyheder/politik/valg2016/content/images/external/helle.png">
                            </div>
                            <div class="blocks">
                                <div class="block left">
                                    <div class="bar" style="height:@barHeightLeft%">
                                        <div class="count">@Model.Result.ShareRed%</div>
                                    </div>
                                </div>
                                <div class="divider"></div>
                                <div class="block right">
                                    <div class="bar" style="height:@barHeightLeft%">
                                        <div class="count">@Model.Result.ShareBlue%</div>
                                    </div>
                                </div>
                                <a href="" class="all-results">Se alle resultater</a>
                            </div>
                            <div class="party-leader right">
                                <img src="//www.dr.dk/nyheder/politik/valg2016/content/images/external/lars.png">
                            </div>
                        </div>
                    </div>
                            <div class="cf"></div>
                        </div>
                    </div>

                }

            }

</div>

<!--googleon: index-->
    <script>
        window.fvbarElectionEndTime = @electionEndUTC;
        window.fvbarServerTime = @timestampUTC;
        window.fvbarScreenGrabUrl = "@Model.StreamingImageUrl";
        window.fvbarScreenGrabFallbackUrl = "@fallbackScreenGrabURL";
        window.fvbarCandidates = @Html.Raw(Model.CandidatesJson);
    </script>
    <script type="text/javascript" src="@jsURL?v=3"></script>
    <!-- FV BANNER ENDS HERE -->

<!-- FV BANNER ENDS HERE -->