@model KombakWebsite.DataAccessLayer.Kombak

@{
    Layout = "~/Views/Shared/_DisplayKombakLayout.cshtml";
}

@if (Model.KombakStyle != null)
{
    <script type="text/javascript">
        //Initialize style
        $(function () {

            var kombakText = $("#kombak");
            var background = $("body");
            var fontColor = "@Model.KombakStyle.TextColor";
            var bgColor = "@Model.KombakStyle.BackgroundColor";
            kombakText.css('color', fontColor);
            background.css('background-color', bgColor);
        })
    </script>
}

<script type="text/javascript">


    $(function () {

        // VARIABLES
        var popOutMenu = $("#popOutMenu");
        var popOutMenuContent = $("#popOutMenuContent");
        var popOutMenuIcon = $("#popOutMenuIcon");
        var kombakText = $("#kombak");
        var background = $("body");
        var kombakTextEditor = $('#KombakTextEditor');
        var kombakCreator = $('#KombakCreator');
        var submitNewKombakButton = $('#submitNewKombak');
        var confirmCreateLink = $('#confirmCreateLink');

        //Initialisation
        scaleFont();
        var kombakString = kombakText.html();
        kombakTextEditor.val(kombakString);
        $("#chooseSize").buttonset();
        submitNewKombakButton.button();
        $("#fontMenu").menu();

        kombakCreator.hide();


        $('#closeKombakCreator').button({
            icons: {
                primary: "ui-icon-close"
            },
            text: false
        }).click(function () {
            kombakCreator.hide('slide', { direction: 'right' }, 400);
            return false; //Dont cause submit
        });

        //Open KombakEditor
        $("#openKombakCreator").click(function () {
            kombakCreator.show('slide', { direction: 'right' }, 400);
        });



        //Change kombak text when new text inserted
        kombakTextEditor.bind('input propertychange', function () {
            kombakText.html(this.value);
        });


        //Set up color pickers
        $("#fontColorPicker").spectrum({
            color: kombakText.css('color'),
            change: function (color) {
                kombakText.css('color', color.toHexString());
                $('#FontColorHidden').val(color.toHexString());
            }
        });

        $("#bgColorPicker").spectrum({
            color: background.css('background-color'),
            change: function (color) {
                background.css('background-color', color.toHexString());
                $('#BgColorHidden').val(color.toHexString());
            }
        });




        //POP OUT MENU ANIMATION
        var openState = {
            width: popOutMenuContent.width(),
            height: "110px",
            complete: function () {
                popOutMenuContent.show();
            }
        }

        var closedState = {
            width: popOutMenuIcon.width(),
            height: "30px",
            complete: function () {
                popOutMenuContent.hide();
            }
        }

        popOutMenuIcon.css("width", "100%");//After getting width of contracted state, set menu icon to scale to parent container

        popOutMenuContent.hide();

        popOutMenu.hover(
            openMenu,//On hover in
            closeMenu//On hover out
            );

        function openMenu() {
            popOutMenu.stop();
            popOutMenu.animate(openState, 200, openState.complete);
        }

        function closeMenu() {
            popOutMenu.stop();
            popOutMenu.animate(closedState, 200, closedState.complete);
        }
        // ****** END - POP OUT MENU ANIMATION

        //SCALE FONT ON WINDOW RESIZE
        $(window).resize(function () {
            scaleFont();
        });

        function scaleFont() {
            var viewPortWidth = $(window).width();
            var kombakContainer = $("#kombak");
            kombakContainer.css("font-size", viewPortWidth / 8);
        }
        //***** END - SCALE FONT ON WINDOW RESIZE

        //EDIT KOMBAK TEXT
        function KombakTextEntered() {
            alert("Kombak text entered! ");

        }

        /* AJAX GET KOMBAKS*/


        $('#submitNewKombak').click(function (e) {
            e.PreventDefault;
            alert('hej');

            $.ajax({
                url: "/Kombak/GetKombaksByJson",
                error: getFriendsError
            }).done(function (data) {

                createKombakList(data);
            });

            function createKombakList(kombakList) {

                var searchResult = $('#searchResultList');
                confirmCreateLink.show();
                confirmCreateLink.html("create");

                searchResult.append("Resultat! : ");

                $.each(kombakList, function (index) {

                    var text = kombakList[index].kombak;
                    var id = kombakList[index].id;
                    var div = "<a class='searchResult' href='/" + id + "'> " + text + "</a>";
                    searchResult.append(div);
                });
            }

            function getFriendsError(jqXHR, textStatus, errorThrown) {
                alert('Error! Response from server was:  ' + jqXHR.responseText);
            }

        });
        /* END - AJAX GET KOMBAKS*/
    });

</script>


@using (Html.BeginForm("SmurfNewDisaplay", "Kombak"))
    {

    <div id="popOutMenu">

        <div class="ui-state-default ui-corner-all " id="popOutMenuIcon">
            <span class="ui-icon ui-icon-grip-solid-horizontal">  </span>
        </div>
        <div id="popOutMenuContent">
            <div class="menuSection">
                <ul>
                    <li><a href="#" id="openKombakCreator">Create a new Kombak</a> </li>
                    <li><a href="#" id="sendAjaxRequest">Skicka Ajax-anrop :) </a> </li>
                    <li>@Html.ActionLink("Get some food", "Index", "Home")</li>
                </ul>
            </div>
        </div>
    </div>


    <div id="kombak"> @Model.Text </div>
    <div>Id @Model.Id</div>
    <div>Displays @Model.Display</div>


    <div id="KombakCreator">
        <div class=" menuPanel">
            <div class=" ui-widget ui-widget-content">
                <div class="ui-widget-header">Search Result</div>
                <div class="ui-widget-section">
                    <a id="confirmCreateLink" href="/Kombak/SmurfNewDisplay"></a>
                    <div id="searchResultList"></div>
                </div>
            </div>
        </div>
        <div class=" menuPanel">
            <div class=" ui-widget ui-widget-content">
                <div class="ui-widget-header">Kombak Text <button id="closeKombakCreator"></button> </div>
                <div id="setKombakText">
                    <div class="ui-widget-section">
                        <textarea id="KombakTextEditor" name="newKombakText" cols="25" rows="5" maxlength="80">original text</textarea>
                    </div>
                    <div class="ui-widget-section">
                        <ul id="fontMenu">
                            <li>
                                <a href="#">Choose Font</a>
                                <ul>
                                    <li><a href="#" name="Palatino">Palatino</a></li>
                                    <li><a href="#" name="''Comic Sans MS''">Comic Sans MS</a></li>
                                    <li><a href="#" name="Impact">Impact</a></li>
                                    <li><a href="#" name="Verdana">Verdana</a></li>
                                    <li><a href="#" name="'Trebuchet MS'">Trebuchet MS</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <div id="chooseSize">
                    <div class="ui-widget-header">Choose size</div>
                    <div class="ui-widget-section">
                        <input type="radio" id="size25" name="size" />
                        <label for="size25">25%</label>
                        <input type="radio" id="size50" name="size" checked="checked" />
                        <label for="size50">50%</label>
                        <input type="radio" id="size75" name="size" />
                        <label for="size75">75%</label>
                        <input type="radio" id="size100" name="size" />
                        <label for="size100">100%</label>
                    </div>
                </div>
                <div id="chooseFontColor">
                    <div class="ui-widget-header">Choose Font Color</div>
                    <div class="ui-widget-section">
                        <input type='color' id='fontColorPicker' />
                        <input type="hidden" id="FontColorHidden" name="fontColor" />

                    </div>
                </div>
                <div id="chooseBgColor">
                    <div class="ui-widget-header">Choose Background Color</div>
                    <div class="ui-widget-section">
                        <input type='color' id='bgColorPicker' />
                        <input type="hidden" id="BgColorHidden" name="bgColor" />
                    </div>
                </div>
                <button id="submitNewKombak">Create Kombak</button>
            </div>
        </div>
    </div>
}