@model IEnumerable<iLoveAds.Domain.Pin>

@using iLoveAds.Web.Helpers;

@{
    ViewBag.Title = @Resources.Shared.SiteTitle;
}

@Html.Action("PopUp")
<div id="container" style="margin-bottom: 15px;">
    
	  <!--
		<header>
		  <h1>jQuery Wookmark Plug-in Example</h1>
		  <p>Flexible: columns resize to fill the container without exceeding a maximum width.</p>
		</header>
	  -->
	<div id="main" role="main">
        <ul id="tiles">
            <!-- These are our grid blocks -->
            @foreach(iLoveAds.Domain.Pin pin in Model) {
                @Html.Partial("Pin", pin); 
            }            
            <!-- End of grid blocks -->
        </ul>
        <div class="span6 alert alert-warning offset3" style="text-align:center"><a href="@Url.Action("Index", "Home", new { page = (Int16.Parse(Request.QueryString["page"]??"0")+1) })">@Resources.Home.NoMoreAdsFound</a></div>
    </div>
</div>
    <!-- Once the images are loaded, initalize the Wookmark plug-in. -->
  <script type="text/javascript">

      // Prepare layout options.
      var options = {
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#tiles'), // Optional, used for some extra CSS styling
          offset: 10, // Optional, the distance between grid items
          itemWidth: 236 // Optional, the maximum width of a grid item
      };

      var page = 0;
      var _inCallback = false;

      function loadPins() {
          if (page > -1 && !_inCallback) {
              _inCallback = true;
              page++;
              //$('div#loading').html('<p><img src="/Content/Images/loading.gif"></p>');
              $.get('@Url.Action("Index", "Home")?page=' + page, function (data) {
                  if (data != '') {
                      data = $($.parseHTML(data));
                      data.each(function () {
                          $(this).hover(function () {
                              $(this).children(".pinMenu").css("visibility", "visible");
                          }, function () {
                              $(this).children(".pinMenu").css("visibility", "hidden");
                          });

                          $(this).find(".btn-ilike").click(function () {
                              var countElement = $(this).parent().parent().find(".likesCount");
                              $.getJSON($(this).attr('rel'), null, function (result) {
                                  countElement.html(result);
                              });
                          });
                      });

                    $("#tiles").append(data);
                }
                else {
                    page = -1;
                }

                _inCallback = false;
                //$('div#loading').empty();
                  /*$(window).load(function () {*/
                //$('#tiles').imagesLoaded(function () {
                    // Create a new layout handler.
                    handler = $('#tiles li');
                    handler.wookmark(options);

                    // Capture clicks on grid items.
                    handler.click(function (event) {
                        if (event.target.tagName != 'A')
                            window.location = $(this).attr('rel');
                    });
                //});
            });
        }
    }

      /**
      * When scrolled all the way to the bottom, add more tiles.
      */
      function onScroll(event) {

              // Check if we're within 100 pixels of the bottom edge of the broser window.
              var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
              var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 400);
              if (closeToBottom) {
                  loadPins();
              }          
      };

      /*$(window).load(function () {*/
      $('#tiles').imagesLoaded(function () {
          // Load all the images when images are ready
          handler = $('#tiles li');
          handler.wookmark(options);

          // Capture clicks on grid items.
          handler.click(function (event) {
              if (event.target.tagName != 'A')
                  window.location = $(this).attr('rel');
          });
      });

      //Gestione menu su Pin
      $('#tiles li').each(function () {

          $(this).hover(function () {
              $(this).children(".pinMenu").css("visibility", "visible");
          }, function () {
              $(this).children(".pinMenu").css("visibility", "hidden");
          });

          $(this).find(".btn-ilike").click(function () {
              var countElement = $(this).parent().parent().find(".likesCount");
              $.getJSON($(this).attr('rel'), null, function (result) {
                  countElement.html(result);
              });
          });
      });


      // Capture scroll event.
      $(document).bind('scroll', onScroll);

      var popRepinOptions = {
          trigger: 'hover',
          placement : 'bottom',
          content: '@Html.Raw(Resources.Home.ClickOnLoveToAddToFavourite)'
      };

      var popLogonOptions = {
          trigger: 'hover',
          placement: 'bottom',
          content: '@Html.Raw(Resources.Home.ClickOnILikeToLikeIt)'
      };

      $('.btn-repin').popover(popRepinOptions);
      $('.btn-logon').popover(popLogonOptions);
  </script>