@model IList<Backend.Domain.NewsDTO>

@{
    ViewBag.Title = "More For Less - Blog";
}

<script src="/Content/themes/m4l/js/jquery.masonry.min.js"></script>
<link href="/Content/themes/m4l/css/masonry.css" rel="stylesheet" />
<link href="/Content/themes/m4l/css/fancybox.css" rel="stylesheet" />
<script src="/Content/themes/m4l/js/jquery.fancybox.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        /* --- ScrollBar --- */
        var nice = $("html").niceScroll();
        var obj = window;

        /* --- NavBar Search --- */
        $('.navbar form input[type=text]').click(function () {
            $(".navbar form").addClass("form-hover");
            return false;
        });
        $('.navbar form input[type=text]').blur(function () {
            $(".navbar form").removeClass("form-hover");
            return false;
        });

        /* --- Opacity effect --- */
        $('.single').mouseover(function () {
            $(this).siblings().css({
                opacity: 0.35
            });
        }).mouseout(function () {
            $(this).siblings().css({
                opacity: 1
            });
        });

        /* --- Fancybox --- */
        $('.fancybox').fancybox();

        /* --- FullScreen --- */
        $(".fullscreen-supported").toggle($(document).fullScreen() != null);
        $(".fullscreen-not-supported").toggle($(document).fullScreen() == null);
        $(document).bind("fullscreenchange", function (e) {
            $("#status").text($(document).fullScreen() ?
              "Full screen enabled" : "Full screen disabled");
        });
        $(document).bind("fullscreenerror", function (e) {
            $("#status").text("Browser won't enter full screen mode for some reason.");
        });

        /* --- Swap color --- */
        $('.swap').click(function () {
            $('#swap-bg').attr('href','css/'+$(this).data('bg')+'.css');
            $('#swap-color').attr('href','css/color/'+$(this).data('color')+'.css');
            return false;
        });

        /* --- toTop --- */
        $(window).scroll(function () {
            if ($(this).scrollTop() != 0) {
                $('#toTop').fadeIn();
            } else {
                $('#toTop').fadeOut();
            }
        });
        $('#toTop').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 1000);
        });

    });

    /* --- Masonry --- */
    window.onload = function () {
        var wall = new Masonry(document.getElementById('masonry'), {
            columnWidth: 240
        });
        $(".wrapper").css("top", "15%").css("overflow", "visible");
    };
</script>

<div style="padding-top: 60px; background-color: White"">
    <div class="wrapper-blog">
        <div id="masonry"> 
            @foreach(Backend.Domain.NewsDTO blog in Model) {
            <!-- Masonry single box -->
            <div class="single @((blog.Id%5)==1?"big":"")">
                <h4><a href="@Url.Action("Details", "Blog", new { id = blog.Id })">@blog.Title</a></h4>
                <em class="data-time">di <a href="#">@blog.UserUpdate</a> - <span>@blog.LastUpdate.ToLongDateString()</span></em><div><a href="@Url.Action("Details", "Blog", new { id = blog.Id })" title="@blog.Title" rel="tag" class="fancybox-disabled"><img src="/Content/Files/@blog.ImageUrl" alt="@blog.Title" /> <span class="sosa glyphicon glyphicon-zoom-in"></span></a></div> <small class="blog-comments"><i class="glyphicon glyphicon-envelope"></i> Commenti non attivi</small>
                <p>@Html.Raw(blog.Introduction)</p>
            </div>
            }
        </div>
    </div>
</div>