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

@if(Model.LivePageConfiguration.EnableTabs){
    <!--h2 id="live">Live</!--h2-->
}

@if (!string.IsNullOrEmpty(Model.LivePageConfiguration.ScribbleId) && !Model.LivePageConfiguration.EnableScribbleShowMore)
{
    <div id="scribblesection" class="scribblesection scribble-native">
        <div class="section scribble-top">
            <div class="header">
            </div>
        </div>

        <div class="live-scribble">
            @*
        <ul>
			<li class="selected hele-landet"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1075171&ThemeId=27109">Hele landet</a></li>
			<li class="bornholm"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1304924&ThemeId=27109">Bornholm</a></li>
			<li class="fyn"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1305049&ThemeId=27109">Fyn</a></li>
            <li class="kbh"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1304924&ThemeId=27109">København</a></li>
            <li class="midt-vest"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1305042&ThemeId=27109">Midt & Vest</a></li>
            <li class="nordjylland"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1305012&ThemeId=27109">Nordjylland</a></li>
            <li class="sjaelland"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1305052&ThemeId=27109">Sjælland</a></li>
            <li class="syd"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1304744&ThemeId=27109">Syd</a></li>
            <li class="trekanten"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1304744&ThemeId=27109">Trekanten</a></li>
            <li class="oestjylland"><a target="native-scribble-frame" href="http://embed.scribblelive.com/Embed/v7.aspx?Id=1305047&ThemeId=27109">Østjylland</a></li>
        </ul>*@
            @*25738*@
            <iframe aria-live="polite" id="native-scribble-frame" name="native-scribble-frame" src="http://embed.scribblelive.com/Embed/v7.aspx?Id=@Model.LivePageConfiguration.ScribbleId&ThemeId=27109" width="100%" height="1360" frameborder="0" scrolling="yes" style="border-bottom:1px solid #4d4d4d"></iframe>

			
			@*
    		
			<label class="dr-icon-arrow-down" for="scrbbl-@Model.LivePageConfiguration.ScribbleId">Vis mere</label> 
			<input type="checkbox" id="scrbbl-@Model.LivePageConfiguration.ScribbleId" />
			

		@if(!string.IsNullOrEmpty(Model.LivePageConfiguration.ScribbleId) ) {
			<div id="scrbbl" class="scrbbl">
				<input type="checkbox" id="scrbbl-@Model.LivePageConfiguration.ScribbleId" />
				<div class="scrbbl-embed" data-src="/event/@Model.LivePageConfiguration.ScribbleId/25738/"></div>
				<label for="scrbbl-@Model.LivePageConfiguration.ScribbleId" class="dr-icon-arrow-down">Vis mere</label>
			</div>


			<script>(function (d, s, id) { var js, ijs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//embed.scribblelive.com/widgets/embed.js"; ijs.parentNode.insertBefore(js, ijs); }(document, 'script', 'scrbbl-js'));</script>
		}

	<style type="text/css">
		.scrbbl {
			min-height:1512px;		
		}
		.scrbbl input[type="checkbox"] + .scrbbl-embed {

			max-height: 1512px;
			overflow: hidden;
		}
	</style>


            *@
		</div>
    </div>
   
}
    <script>
        (function () {
            if (navigator.userAgent.match(/Android/i)) {
                var scribble = document.id('scribblesection');
                if (scribble) {
                    scribble.addClass('android-scroll');
                    scribble.addEvent("load", function () {
                        scribble.scrollTop = 0;
                    });
                }
            }
        }());
       @* //see ul under class="live-scribble"
        window.addEvent("domready", function () {

            function scribbleNative(hash) {
                var useHashTag = true;
                if (document.getElement(".scribble-native")) {
                    // set anchor
                    if (hash && useHashTag) {
                        new Element("a", { "name": hash.replace("#", ""), "class": "native-scribble-hash" }).inject(document.body, "top");
                    }
                    var nativeEl = document.getElement(".scribble-native .live-scribble");
                    var selected = "";
                    nativeEl.getElements("ul li").each(function (item, index) {
                        if (item.hasClass("selected"))
                            selected = item;

                        item.getElement("a").addEvent("click", function (e) {
                            useHashTag | (document.location.hash = e.target.getParent("li").className.replace("selected",""));
                            selected.removeClass("selected")
                            item.addClass("selected");
                            selected = item;
                        }.bind(this));
                    }.bind(this));

                    if (hash && useHashTag) {
                        nativeEl.getElements("ul li").each(function (e, i) {
                            if (e.hasClass(hash.replace("#", ""))) {
                                document.getElement("#native-scribble-frame").set("src", e.getElement("a"));
                                selected.removeClass("selected");
                                e.addClass("selected");
                                selected = e;
                            }
                        }.bind(this));
                        //var li = document.getElement(".scribble-native " + hash.replace("#","")) || null;
                        
                    }
                }
            }
            scribbleNative(document.location.hash || null);
        });
       *@
        </script>