template(name="template")
  style.
    img{width: 100px;}
  style.
    @import url("/assets/-/fontello/css/fontello.css");
    @import url("/assets/css/main.css");
    @import url("/assets/css/windows.css");
  div.clearfix(body)
    div.item(repeat="${items}", data-url="${url}")  
      img(source="${image}")
      div ${title}
    .windows
  script.
    $(window)
    .on('keydown', function(event){
      if(event.which == 27){
        $('.window',body).removeClass('active')
      }
    })

    $(body)
    .on('click',".item", function(event){
      var index = $(this).attr('repeat-index')
      var url   = doc.items[index].url;
      var id    = doc.items[index].id;
      var win   = $('.windows .window[id="'+id+'"]', body);
      
      if(win.length){
        win.addClass('active');
        return false;
      }
      
      $.get(url)
      .done(function(response){
        $(host).trigger('app.open', [response])
        //- return false;
        win = $('<div />').addClass('window').html(response);
        $('.windows', body).append(win);
        win.attr('id', id);
        
        setTimeout(function(){
          win.addClass('active')
        }, 5)
      })
    })