@model DR.FV2016.Web.Models.ArticleView
@{
    string arrowIcon = "dr-icon-arrow-down";
    string header = "Vælg en storkreds/kreds";
    string page = Model.Page;
    if (page == "valgte")
    {
        arrowIcon = "";
        header = "Vælg en storkreds";
    }   
}

<div class="section boxed greater-constituencies-container mobile dr-list-icon">
    <ul><li class="greater-constituency dr-icon-arrow-down"><h2>@header</h2><span class="openclose"></span></li></ul>
    <ul class="greater-constituencies hide">
        <li dr-data-id="hele-landet" id="hele-landet" class="greater-constituency">Hele landet</li>
    @{
        foreach (var bigItem in Model.GreaterConstituencies)
        {
            <li dr-data-id="@bigItem.Id" id="@bigItem.Slug" class="greater-constituency @arrowIcon">@bigItem.Name <span class="openclose"></span></li>
        }
    }
    </ul>
</div>

<div class="section boxed greater-constituencies-container desktop dr-list-icon">
    <h2>@header</h2>
    <div>
        <ul>
            <li dr-data-id="hele-landet" id="hele-landet" class="greater-constituency"><span class="greater">Hele landet</span></li>
        @{
            foreach (var bigItem in Model.GreaterConstituencies)
            {
                <li dr-data-id="@bigItem.Id" id="@bigItem.Slug" class="greater-constituency @arrowIcon"><span class="greater">@bigItem.Name</span> <span class="openclose"></span></li>
                
                //  constituencies is not to be shown on elected page (valgte)    
                if(page != "valgte") {
                    if(bigItem.Constituencies.Count() > 0){
                        @:<ul id="constituencies-@bigItem.Slug" class="constituencies hide">
                        foreach(var constituencies in bigItem.Constituencies)
                        {
                            @:<li dr-data-id="@constituencies.Id" id="@constituencies.Slug" class="constituency">@constituencies.Name</li>    
                        }
                        @:</ul>
                    }
                }                                
            }
        }
            </ul>
    </div>
</div>


<script>
    window.addEvent("domready", function () {
        //document.getElement("html").addClass("mobile")

        if (document.getElement("html").hasClass("mobile")) {
            document.getElement(".greater-constituencies-container.desktop").destroy();
            var container = document.getElement(".greater-constituencies-container.mobile");

            container.getElement(".greater-constituency").addEvent("click", function (e) {
                var target = e.target;
                target.toggleClass("dr-icon-arrow-down").toggleClass("dr-icon-arrow-up");
                container.getElement("ul.greater-constituencies").toggleClass("hide");
            });

            document.getElement("ul.greater-constituencies").getElements("li").each(function (item, index) {
                item.removeEvents();
                item.addEvent("click", function (e) {
                    window.fireEvent("ResultSelectConstituency", { GreaterConstituency: e.target.get("dr-data-id") });
                    container.getElement(".greater-constituencies").toggleClass("hide");
                });

            });
        }

        
    if (document.getElement(".greater-constituencies-container.desktop") && !document.getElement("html").hasClass("mobile")) {
		var previousOpenSlug = "";
		var previousSelected = "";

		document.getElements(".greater-constituency").each(function (item, index) {
			item.addEvents({
			    click: function (e) {
			        var target = e.target;
			        var li = target.getParent("li");

                    // click open close arrow up or down
			        if (target.hasClass("openclose")) {
			            closePrevious(previousOpenSlug, li);			                    

			            if (li.hasClass("dr-icon-arrow-down")) {
			                li.removeClass("dr-icon-arrow-down").addClass("dr-icon-arrow-up");
			                li.getNext("ul").removeClass("hide");
			                // constituencies is not on /valgte page
			                constituencies(li.id);
                        }
			            else if (li.hasClass("dr-icon-arrow-up")) {
			                li.removeClass("dr-icon-arrow-up").addClass("dr-icon-arrow-down");
			                li.getNext("ul").addClass("hide");
			            }

			            previousOpenSlug = li.id;
			        }

                    // click storekreds
			        if (target.hasClass("greater")) {
			            if (!target.getParent("li").hasClass("selected")) {
			                //console.log("Greater constituency: ", { GreaterConstituency: target.getParent("li").get("dr-data-id") })
			                window.fireEvent("ResultSelectConstituency", { GreaterConstituency: target.getParent("li").get("dr-data-id") });
			            }
			            previousSelectedReset(target.getParent("li"));
			            closePrevious(previousOpenSlug, target.getParent("li"));
			        }
			    }// click end
			}); 
		}.bind(this));

        // close already open lists
		function closePrevious(previousOpenSlug, li) {
			if (previousOpenSlug != "" && !previousOpenSlug.contains(li.id)) {
			    document.getElement("#constituencies-" + previousOpenSlug).addClass("hide");
			    document.getElement("#" + previousOpenSlug).removeClass("dr-icon-arrow-up").addClass("dr-icon-arrow-down");
			    previousOpenSlug = "";
			}
		}

        // select and remove previous selected
		function previousSelectedReset(obj) {
			if (typeof(previousSelected) == "object") {
			    previousSelected.removeClass("selected");
			}
			obj.addClass("selected");
			previousSelected = obj;
		}

        // add events to constituencies
		function constituencies(id) {
			if (id == "" || id == undefined)
			    return false;

			var constituencies = document.getElements("#constituencies-" + id + " li");

			constituencies.removeEvents(); // agra-> just makes no sense
			constituencies.each(function (item, index) {
			    item.addEvents({
			        click: function (e) {
			            if (!e.target.hasClass("selected")) {
			                previousSelectedReset(e.target);
			                e.target.addClass("selected");
			                //console.log("constituency: ", e.target.id);
			                window.fireEvent("ResultSelectConstituency", { Constituency: e.target.get("dr-data-id") });
			            }
			        }
			    });
			});
		}
	} // end if greater-constituencies-container
});
</script>