{% extends 'template.html' %}
{% block content %}
<div id="wrapper" class="toggled bg-dark">
    <!-- Sidebar -->
    <div id="sidebar-wrapper" class="bg-dark bg-">
        <ul class="sidebar-nav">
            <li>
                <span class="badge badge-danger">Element</span>
                <code style="display:block" id="element-selector"></code>
            </li>
            <li>
                <span class="badge badge-danger">Title</span>
                <code style="display:block" id="title-selector"></code>
            </li>
            <li>
                <span class="badge badge-danger">Content</span>
                <code style="display:block" id="content-selector"></code>
            </li>
            <li>
                <span class="badge badge-danger">Date</span>
                <code style="display:block" id="date-selector"></code>
            </li>
            <li>
                <span class="badge badge-danger">Author</span>
                <code style="display:block" id="author-selector"></code>
            </li>
            <li>
                <span class="badge badge-danger">Link</span>
                <code style="display:block" id="link-selector"></code>
            </li>
            <li>
                <form action="/newfeed" method="post">
                    {% csrf_token %}
                    <input type="hidden" id="url" name="url" value="{{ url }}">
                    <input type="hidden" id="element" name="element" value="">
                    <input type="hidden" id="title" name="title" value="">
                    <input type="hidden" id="content" name="content" value="">
                    <input type="hidden" id="date" name="date" value="">
                    <input type="hidden" id="author" name="author" value="">
                    <input type="hidden" id="link" name="link" value="">
                    <input type="submit" class="btn btn-primary" value="Generate">
                </form>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->
    <iframe id="preview" style="width:100%" src="/iframe/{{ url }}"></iframe>
    <script>
        $(function() {
            function handleResize() {
                $("#preview").height($(window).height());
            }
            $(window).resize(function() {
                handleResize();
            });
            handleResize();
        });


        var lastCSS = false;
        function hoverSelector() {
            lastCSS = $(lastElement).css("border");
            $(lastElement).css("border", "2px dashed orange")
        }
        function resetHoverSelector() {
            $(lastElement).css("border", lastCSS);
        }


        var lastElement = false;
        var selectedElement = false;
        $("iframe").on("load", function() {
            var iframeWnd = $($("iframe")[0].contentWindow);

            // disable a links
            $("iframe").contents().find("a").attr("href", "#");

            iframeWnd.on('click', function(event) {
                selectedElement = $(event.target).getPath();
                if (currentProperty) {
                    $("#"+$(currentProperty).text().toLowerCase()).val(selectedElement);
                    var t = selectedElement.split(">");
                    $("#"+$(currentProperty).text().toLowerCase()+"-selector").text(t[t.length-1]);

                    // reset
                    $(".sidebar-nav > li > span.badge-warning").removeClass("badge-warning").addClass("badge-success");
                    currentProperty = false;
                    resetHoverSelector();
                }
            });
            iframeWnd.on('mousemove', function(event) {
                if (currentProperty && lastElement != event.target) {
                    resetHoverSelector();
                    lastElement = event.target;
                    hoverSelector();
                }
            });
        });

        var currentProperty = false;
        $(".sidebar-nav > li > span.badge").click(function(evt) {
           var selectedProperty = $(this).text().toLowerCase();

           // reset every elements
            $(".sidebar-nav > li > span.badge.badge-warning").removeClass("badge-warning").addClass("badge-danger");
            //$(".sidebar-nav > li > span.badge");

            // set element
            $(this).removeClass("badge-danger");
            $(this).addClass("badge-warning");
            currentProperty = this;
        });


    </script>
</div>
{% endblock %}