@model NewsletterBoxModel
@using Nop.Web.Framework
@using Nop.Web.Models.Newsletter
<div class="block block-newsletter">
    <div class="title">
        @T("Newsletter.Title")
    </div>
    <div class="clear">
    </div>
    <div class="listbox">
        @using (Html.BeginForm())
        {
            <div id="pnl-newsletter-subscribe">
                @T("Newsletter.Email"):
                @Html.TextBoxFor(x => x.Email)
                @Html.ValidationMessageFor(x => x.Email)
                <div class="options">
                    <input id="newsletter-subscribe" type="radio" name="newsletter-subscribe" value="newsletter-subscribe"
                        checked="checked" />
                    <label for="newsletter-subscribe">@T("Newsletter.Subscribe")</label>
                    <input id="newsletter-unsubscribe" type="radio" name="newsletter-subscribe" value="newsletter-unsubscribe" />
                    <label for="newsletter-nusubscribe">@T("Newsletter.Unsubscribe")</label>
                </div>
                <div class="clear">
                </div>
                <div class="buttons">
                    <input type="submit" name="newsletter-subscribe-button" value="@T("Newsletter.Button")" id="newsletter-subscribe-button" class="newsletterbox-subscribebutton" />
                    <span id="subscribe-loading-progress" style="display: none;">@T("Common.Wait...")
                            <img src='@Href("~/Content/Images/ajax_loader_small.gif")' alt="@T("Common.Wait...")" />
                        </span>
                        @*TODO add a new 'ajax_loader_small.gif' with transparent background*@
                </div>
            </div>
            <div class="clear">
            </div>
            <div id="pnl-newsletter-result">
            </div>
        }
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#newsletter-subscribe-button').click(function () {
                
                var subscribe = 'true';
                if($('#newsletter-unsubscribe').is(':checked')) { 
                    subscribe = 'false';
                }
                var email = $("#@Html.FieldIdFor(model => model.Email)").val();
                var subscribeProgress = $("#subscribe-loading-progress");
                subscribeProgress.show();
                $.ajax({
                    cache:false,
                    type: "POST",
                    url: "@(Url.Action("SubscribeNewsletter", "Newsletter"))",
                    data: "subscribe=" + subscribe + "&email=" +email ,
                    success: function (data) {
                        subscribeProgress.hide();
                        $("#pnl-newsletter-result").html(data.Result);
                         if (data.Success) {
                            $('#pnl-newsletter-subscribe').hide();                            
                         }
                         else {
                            $('#pnl-newsletter-result').fadeIn("slow").delay(2000).fadeOut("slow");
                         }
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert('Failed to subscribe.');
                        subscribeProgress.hide();
                    }  
                });                
                return false;
            });
        });
    </script>
</div>
