@model DR.FV2016.Web.Models.PosterViewModel
@{
    var baseUrl = Url.CrossServerContent("~");
    //Layout = "~/Views/CustomArticles/_PosterPageLayout.cshtml";
    var domain = "http://www.dr.dk/nyheder/politik/valg2016/plakat";
    var disabled = false;

    Model.IsResponsive = true;
}

<script>
    var basePath = "@baseUrl";
    var PosterUploadUrl = "@Model.PosterUploadUrl";
</script>

@section documenthead{
    @Html.Partial("localdocumenthead")

    @if (Model.Poster != null)
    {
        <meta property="og:title" content="@Model.Poster.PartyLetter: @Model.Poster.Slogan" />
        <meta property="og:description" content="Min valgplakat er hængt op! Klik her for at se den - og lav selv din egen valgplakat." />
        <meta property="og:image" content="@Model.Poster.ImageScalerUrl" />
        <meta property="og:url" content="@Model.CanonicalLink" />
    }
    else
    {
        <meta property="og:title" content="Lav din egen valgplakat" />
        <meta property="og:description" content="Lav en valgplakat med dit eget billede og slogan, og del plakaten med dine venner på Facebook eller Twitter! Prøv DRs plakatgenerator hvor du selv designer en valgplakat med dit eget billede, slogan og ophængningssted." />
        <meta property="og:image" content="http://www.dr.dk/imagescaler/?file=/nyheder/politik/plakat/805fb148-213a-4756-a52b-6e80b4c8412f.jpg&server=www.dr.dk&w=1200&quality=70" />
        <meta property="og:url" content="@domain" />
    }

    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="674" />
}

@section localstylesheet {
    @Html.Partial("localstylesheets")
    <link rel="stylesheet" href="@Url.CrossServerContent("~/Content/build/postergenerator.v3.css")">
}

@section documentbottom {
    @Html.Partial("localdocumentbottom")
    <script src="@Url.CrossServerContent("~/Content/scripts/postergenerator.js")"></script>
}

<div id="fb-root"></div>
@{
    if (Model.Poster != null && disabled != true)
    {
        <div class="poster-generator" itemtype="http://schema.org/Article" itemscope="">
            <div class="section poster-view">
                <h2>@Model.Poster.Slogan</h2>
                <div id="posterView">
                    <img src="@Model.Poster.Url" />
                    <p class="disclaimer hidden">Denne plakat er lavet af en bruger på dr.dk</p>
                </div>
                <div class="posterViewButtons">
                    <button type="button" class="newPoster" onclick="window.location.href = '@domain'">Lav din egen valgplakat</button>
                </div>
            </div>
            <div class="social-bottom-container">
                <p>Del valgplakaten med dine venner</p>
                <ul>
                    <li>
                        <button type="button" class="share-btn facebook" data-site="facebook" onclick="shareToFacebook('@Model.CanonicalLink')">
                            <span class="dr-icon-facebook-medium"></span>
                            <span class="button-text">Del via facebook</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="share-btn twitter" data-site="twitter" onclick="shareToTwitter('@Model.Poster.PartyLetter: @Model.Poster.Slogan', '@Model.CanonicalLink')">
                            <span class="dr-icon-twitter-medium"></span>
                            <span class="button-text">Del via Twitter</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="share-btn mail hidden">
                            <span class="dr-icon-mail-medium"></span>
                            <span class="button-text">Send via mail</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    }
    else if (disabled != true)
    {
        <div class="rotate-phone-plx" itemtype="http://schema.org/Article" itemscope="">
            <div class="rotate-icon">
                <span class="dr-icon-mobile"></span>
                <span class="dr-icon-timeshift-forward"></span>
            </div>
            <div class="rotate-text">
                Vend din mobil horisontalt for den bedste oplevelse
            </div>
        </div>
        <div class="poster-generator">
            <h2>Lav din egen valgplakat</h2>
            <p class="old-browser">Det ligner, at du bruger en ældre browser. For at bruge plakatgeneratoren, skal du have Chrome, Firefox eller IE9+.</p>
            <div>
                <div class="modal-overlay" id="start">
                    <div class="message">
                        <button type="button" class="close-btn">
                            <div class="dr-icon-close"></div>
                            <span class="sr-only">Luk dette vindue</span>
                        </button>
                        <h3 itemprop="headline">Lav din personlige valgplakat</h3>
                        <p itemprop="description">Har du nogensinde tænkt på, hvordan du ville overbevise vælgere om at stemme på dit parti? Nu kan du lave din personlige valgplakat og dele den med dine venner.</p>
                        <p>Klik på plusserne på billedet for at lave din personlige valgplakat. Når du er færdig, kan du dele den via Facebook eller Twitter.</p>
                        <img src="@Url.Content("~/Content/images/poster/intro-large.png")" class="intro-large" />
                        <img src="@Url.Content("~/Content/images/poster/intro-small.png")" class="intro-small" />
                        <button type="button" class="btn large">Start</button>
                    </div>
                </div>
                <div class="modal-overlay hidden" id="help">
                    <div class="message">
                        <button type="button" class="close-btn">
                            <div class="dr-icon-close"></div>
                            <span class="sr-only">Luk dette vindue</span>
                        </button>
                        <h3>Sådan laver du din valgplakat</h3>
                        <p>For at lave din egen valgplakat skal du klikke på plusserne i billedet.</p>
                        <p>Ved at klikke på plusserne kan vi vælge et baggrundsbillede til din plakat, som er der, hvor din valgplakat skal hænge.</p>
                        <p>På selve valgplakaten kan du klikke på billedet og uploade dit eget billede til valgplakaten. Har du en Facebook-konto, kan du blot overføre dit billede fra Facebook ved at klikke på Facebook-knappen. Du kan også vælge et slogan og det parti, du ønsker at repræsentere på din valgplakat.</p>
                        <p>Når du er færdig med at lave din valgplakat, kan du dele din plakat på Facebook eller Twitter.</p>
                        <p>Rigtig god fornøjelse!</p>
                        <button type="button" class="btn large">Luk</button>
                    </div>
                </div>
                <div id="posterOverlay">
                    <div id="contentSection">
                        <div id="menuSection">
                            <button type="button" class="sectionShortcut helper" data-sectionindex="0">
                                <span class="dr-icon-add"></span>
                                <span class="button-text">Vælg billede</span>
                            </button>
                            <button type="button" class="sectionShortcut helper" data-sectionindex="1">
                                <span class="dr-icon-add"></span>
                                <span class="button-text">Vælg baggrund</span>
                            </button>
                            <button type="button" class="sectionShortcut helper" data-sectionindex="3">
                                <span class="dr-icon-add"></span>
                                <span class="button-text">Vælg slogan</span>
                            </button>
                            <button type="button" class="sectionShortcut helper" data-sectionindex="2">
                                <span class="dr-icon-add"></span>
                                <span class="button-text">Vælg parti</span>
                            </button>
                        </div>
                        <div id="contentMain" data-selectedindex="0">
                            <div id="photoPicker" class="step-container-left">
                                <button type="button" class="close-btn">
                                    <div class="dr-icon-close"></div>
                                    <span class="sr-only">Luk dette vindue</span>
                                </button>
                                <div class="header">
                                    <h3>Hvilket billede vil du bruge?</h3>
                                    <p>Upload et billede af dig selv, eller hent dit profilbillede fra Facebook</p>
                                </div>
                                <div class="body">
                                    <div id="imageUpload" class="image-container"></div>
                                    <div class="tools">
                                        <button type="button" id="zoomIn">
                                            <span class="dr-icon-add"></span>
                                            <span class="button-text">Zoom ind</span>
                                        </button>
                                        <button type="button" id="zoomOut">
                                            <span class="dr-icon-remove"></span>
                                            <span class="button-text">Zoom ud</span>
                                        </button>
                                        <button type="button" id="rotate">
                                            <span class="dr-icon-timeshift-forward"></span>
                                            <span class="button-text">Rotér</span>
                                        </button>
                                        <div class="actions">
                                            <label class="fileUploadLabel">
                                                <input type="file" id="fileUpload" />
                                            </label>
                                            <button type="button" class="change-pic-button">
                                                <span class="dr-icon-image"></span>
                                                <span class="button-text">Upload billede</span>
                                            </button>
                                            <button type="button" class="fb-profile-pic-button">
                                                <span class="dr-icon-facebook"></span>
                                                <span class="button-text">Hent profilbillede</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" class="btn save close hidden">
                                    <span class="button-text">Gem</span>
                                </button>
                            </div>
                            <div id="backgroundPicker" class="step-container-right">
                                <button type="button" class="close-btn">
                                    <div class="dr-icon-close"></div>
                                    <span class="sr-only">Luk dette vindue</span>
                                </button>
                                <div class="header">
                                    <h3>Hvor skal din valgplakat hænge?</h3>
                                    <p>Vælg et baggrundsbillede til din valgplakat</p>
                                </div>
                                <div class="body">
                                    <ul>
                                        <li>
                                            <button type="button" class="background-preview">
                                                <img src="@Url.Content("~/Content/images/poster/paavillavejen.png")" />
                                                <span class="button-text">På villavejen</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="background-preview">
                                                <img src="@Url.Content("~/Content/images/poster/paamotorvejen.png")" />
                                                <span class="button-text">På motorvejen</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="background-preview">
                                                <img src="@Url.Content("~/Content/images/poster/paagaagaden.png")" />
                                                <span class="button-text">På gågaden</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="background-preview">
                                                <img src="@Url.Content("~/Content/images/poster/paaferie.png")" />
                                                <span class="button-text">På ferie</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="background-preview">
                                                <img src="@Url.Content("~/Content/images/poster/paaborgen.png")" />
                                                <span class="button-text">På borgen</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="background-preview">
                                                <img src="@Url.Content("~/Content/images/poster/paaarbejde.png")" />
                                                <span class="button-text">På arbejde</span>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div id="partyPicker" class="step-container-left">
                                <button type="button" class="close-btn">
                                    <div class="dr-icon-close"></div>
                                    <span class="sr-only">Luk dette vindue</span>
                                </button>
                                <div class="header">
                                    <h3>Hvilket parti vil du repræsentere?</h3>
                                    <p>Vælg et parti fra listen.</p>
                                </div>
                                <div class="body">
                                    <ul></ul>
                                </div>
                            </div>
                            <div id="sloganPicker" class="step-container-left">
                                <button type="button" class="close-btn">
                                    <div class="dr-icon-close"></div>
                                    <span class="sr-only">Luk dette vindue</span>
                                </button>
                                <div class="header">
                                    <h3>Hvad skal dit slogan være?</h3>
                                    <p>Skriv dit eget slogan, eller vælg et fra listen.</p>
                                </div>
                                <div class="body">
                                    <div class="sloganContainer">
                                        <input type="text" placeholder="Skriv dit eget slogan her..." />
                                    </div>
                                    <ul></ul>
                                </div>
                            </div>
                            <div id="containerFinished" class="hidden">
                                <h3>Spred budskabet</h3>
                                <p>Din plakat er færdig, hængt op og klar til at gøre sin indflydelse gældende. Del den straks med dine venner for maksimal effekt.</p>
                                <!--p class="illustrationPlaceholder">Her kunne være en fin illustration eller måske den færdige plakat?</p-->
                                <p class="sharePreviewContainter"><img id="shareImgPreview2" width="480" src="#" /></p>
                            </div>
                        </div>
                    </div>
                    <div id="contentBottom">
                        <div id="wizNav">
                            <button type="button" id="wizBack" class="dr-icon-arrow-left" disabled>Forrige</button>
                            <button type="button" id="wizNext" class="dr-icon-arrow-right">Næste</button>
                            <div class="shareBtns">
                                <p>Del din valgplakat på:</p>
                                <button type="button" class="dr-icon-facebook-boxed shareBtn" data-site="facebook">Facebook</button>
                                <button type="button" class="dr-icon-twitter-boxed shareBtn" data-site="twitter">Twitter</button>
                            </div>
                        </div>
                    </div>
                </div>
                <canvas id="posterCanvas" width="940" height="528" class="hidden"></canvas>
                <div class="mobile-canvas-preview">
                    <img id="shareImgPreview" src="#" />
                </div>
                <div class="social-bottom-container">
                    <p>Del valgplakaten med dine venner</p>
                    <ul>
                        <li>
                            <button type="button" class="share-btn facebook" data-site="facebook">
                                <span class="dr-icon-facebook-medium"></span>
                                <span class="button-text">Del via facebook</span>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="share-btn twitter" data-site="twitter">
                                <span class="dr-icon-twitter-medium"></span>
                                <span class="button-text">Del via Twitter</span>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="share-btn mail hidden">
                                <span class="dr-icon-mail-medium"></span>
                                <span class="button-text">Send via mail</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    } }