@using Petwork.Domain.Entities

@{
    ViewBag.Title = "Compose Message";
    Layout = "~/Views/Shared/_LayoutUserThreeBars.cshtml";
    var rec = (Account)ViewBag.Recipient;
}

<div id="composeMessage" class="wallSection">

    <div class="header">
        <a href="@Url.Action("Index")" class="tool">@Resources.Message.Cancel</a> <a id="sendMessage" href="#" class="tool">@Resources.Message.Send</a>
        <h1>
            @Resources.Message.ComposeMessage</h1>
    </div>
    <div class="messagesContent">
        <form id="messageForm" action="@Url.Action("Compose")" method="post">
            <ul class="ns uiEditor">
                <li><span>@Resources.Message.To</span>
                    <input id="recipientName" class="w400p" type="text" name="name" value="" />                    
                </li>
                <li>
                    <div class="selectedPeople">
                        <ul class="p">
                            @if (rec != null)
                            {
                                <li id="user-@(rec.Id)">
                                    <div class="miniPerson">
                                        <div class="miniPersonAction removePeople"><a href="#" onclick="$('#user-@rec.Id').remove(); return false;">x</a></div>
                                        <img alt="@rec.FullName" src="@Url.ImageResizerUrl(rec.Profile.ProfilePicture, "?w=30&h=30")" />
                                        <a href="@Url.Wall(rec)">@rec.FullName</a>
                                        <div class="date"> @ViewBag.RecPetCount @Resources.Message.Pets</div>
                                    </div>
                                    <input type="hidden" name="users" value="@rec.Id" data-val="true" data-val-required="Selezionare almeno un destinatario" />
                                    @Html.ValidationMessage("users")
                                </li>
                            }
                        </ul>
                        <div class="clear">
                        </div>
                    </div>
                </li>
                <li class="makeComment">
                <div class="authorPict">
                    <img src="@Url.ImageResizerUrl(((Account)ViewBag.Account).Profile.ProfilePicture, "?w=30&h=30")" />
                </div>
                <div>
                    <textarea name="messageText" rows="1" cols="1"> @Resources.Message.WriteMessage</textarea>
                </div>
            </li>
            </ul>
        </form>
    </div>
</div>
@section foot {
    @* javascript ("~/Scripts/p4p.widgets.users_select.js") *@
    <script type="text/javascript">
        ;(function ($) {
            $(function() {
               
                $("#recipientName").users_select({
                autocomplete_url: '@Url.Action("AutoCompleteSearchAccount", "PrivateData")',
                invited_user: function (e, item) {
                    $('<li id="user-' + item.id + '"></li>')
                    .append(
                         '<div class="miniPerson">' +
                            '<div class="miniPersonAction removePeople"><a href="#" onclick="$(' + "'#user-" + item.id + "'" + ').remove(); return false;">x</a></div>' +
                            '<img alt="' + item.full_name + '" src="' + item.icon + '" />' +
                            '<a href="' + item.user_wall + '">' + item.full_name + '</a>' +
                            '<div class="date">' + item.pets_count + ' pets' + '</div>' +
                        '</div>' +
                        '<input type="hidden" name="users" value="' + item.id + '" />'
                    )
				    .appendTo(".selectedPeople ul");
                }
            });
            
            $("#sendMessage").click(function(event){
                $("#messageForm").submit();
                return false;
            });

            $("textarea").one("focus", function (e) {
                $(this).val("");
            });
            });
        })(jQuery);
    </script>
}