@using Petwork.Domain.Entities


@model MessageThread

@{
    ViewBag.Title = @Resources.Message.ReadMessage;
    Layout = "~/Views/Shared/_LayoutUserThreeBars.cshtml";

    var toSkip = Model.Messages.Count - ViewBag.preloadSize;
    toSkip = Math.Max(0, toSkip);
    
    var messages = System.Linq.Enumerable.Skip(Model.Messages.OrderBy(m => m.Date), toSkip);
}

<div id="messages" class="messages wallSection">
    <div class="header">
        <a href="@Url.Action("Compose")">@Resources.Message.Compose</a> <a href="@Url.Action("Index")">@Resources.Message.BackMessages</a>
        <h1>
            @Resources.Message.Messages</h1>
    </div>
</div>
<div class="messagesContent">
    <ul class="ns">
        @if (toSkip > 0) {
            <li>
                <div id="load-more" class="loadMore">
                    <a href="#">@Resources.Message.Load @toSkip @Resources.Message.OlderMessages</a>
                </div>
            </li>
        }
    </ul>
    <ul class="ns messageThread">
        @foreach(var m in messages){
            @Html.Partial("_Message", (Message)m);
        }

        <li class="makeComment">
            <div class="authorPict">
                <img src="@Url.ImageResizerUrl(((Account)ViewBag.Account).Profile.ProfilePicture, "?w=450&w=45")" />
            </div>
            <div>
                <textarea id="replyField" rows="1">@Resources.Message.WriteReply</textarea>
            </div>
        </li>
    </ul>
</div>

@section foot {

@* javascript ("~/Scripts/jquery.tmpl.min.js") *@
@* javascript ("~/Scripts/p4p.widgets.load_more.js") *@

<script id="messageTemplate" type="text/x-jquery-tmpl">
<li class="message">
    <div class="">
        <div class="authorPict">
            <img alt="${full_name}" src="${icon_url}" />
        </div>
        <div class="messageBody">
            <div class="messageMetadata">
                <span class="date">${time}</span>
            </div>
            <a href="${wall_url}">${full_name}</a>
            <p>
                ${text}
            </p>
            <div class="clear">
            </div>
        </div>
    </div>
</li>
</script>


<script type="text/javascript">
    (function ($) {
        
        function sendReply() {
            if(!$("#replyField").hasClass("replaying")) {
                $("#replyField").addClass("replaying");
                $.post("@Url.Action("Reply")", {threadId : '@Model.Id', text : $("#replyField").val()},function(response){
                            $(response).insertBefore("li.makeComment");
                            $("textarea").val("write a reply");
                            $("#load-more").load_more("increment_loaded_elements");
                            $("textarea").blur();
                            $("textarea").one("focus", function(e){
                                $(this).val("");
                            });
                            $("#replyField").removeClass("replaying");
                        },"html");
                    }
        }

        $(function(){
            $("#replyField").live('keypress', function (e) {
                if (e.which == 13) {
                    setTimeout(sendReply, 100);
                }
            });
        });

        $("textarea").one("focus", function(e){
            $(this).val("");
        });
        
        $("#load-more").load_more({
            items_url: '@Url.Action("MessagesList", new {threadId = Model.Id})',
            how_many: @toSkip,
            items_container: "ul.messageThread",
            item_template: "#messageTemplate",
            already_loaded: @Math.Min(ViewBag.preloadSize, Model.Messages.Count),
            prepend: true
        });
        
    })(jQuery);
</script>
}