/**
 * popup.js
 *
 */

// labels
var $pinned_label = $('<span class="label label-default">pinned</span>');
var $active_label = $('<span class="label label-success">active</span>');
var $audible_label = $('<span class="label label-primary">audible</span>');

function go_to_tab(tab_id){
  chrome.tabs.update(tab_id, {
    active: true
  }, function(tab_updated){
    console.log('tab updated: ' + tab_id);
  });
}

function close_tab(tab_id){
 chrome.tabs.remove(tab_id);
}

function apply_label_to_tab(li, tab){
  if(tab.pinned == true)
    $li.append($pinned_label);
  
  if(tab.active == true)
    $li.append($active_label);
  
  if(tab.audible == true)
    $li.append($audible_label);
}

function add_close_button_to_li(li, tab_id){
  $button = $('<button></button>');
  $button.attr({class: 'btn btn-danger btn-xs', id: tab_id, style: 'float: right', title: 'Close tab'});
  $span = $('<span></span>');
  $span.attr({class: 'glyphicon glyphicon-remove'});
  $button.append($span);
  
  $button.click(function(){
    close_tab(tab_id);
    li.fadeOut();
  });

  li.append($button);
}

function create_tab_link(tab){
  $ul = $('ul#tabs');
  
  $li = $('<li></li>');
  $li.attr({class: 'list-group-item'});

  $link = $('<a></a>');
  $link.attr({href: '#', id: tab.id});
  $favicon = $('<img />');
  $favicon.attr({src: tab.favIconUrl, id: 'favicon'});
  
  $link.append($favicon);
  $link.append(tab.title);

  $li.append($link);
  
  apply_label_to_tab($li, tab);
  add_close_button_to_li($li, tab.id);

  $ul.append($li);
}

$(document).ready(function(){
  chrome.tabs.query({
    currentWindow: true
  }, function(tabs) {
    var i;

    for(i = 0; i < tabs.length; i++){
      tab = tabs[i];
      create_tab_link(tab);
    }

    $('ul#tabs li a').each(function(index){
      $(this).click(function(){
        tab_id = parseInt($(this).attr('id'));
        go_to_tab(tab_id);
      });
    });

  });
});

@@ -17,16 +17,46 @@
  *%0A */%0A%0A
+var TITLE_LENGTH_LIMIT = 50;%0A%0A
 // label
@@ -1408,16 +1408,142 @@
 vicon);%0A
+  if(tab.title.length %3E TITLE_LENGTH_LIMIT)%7B%0A    $link.append(tab.title.substring(0, TITLE_LENGTH_LIMIT) + '...');%0A  %7Delse%7B%0A  
   $link.
@@ -1560,16 +1560,20 @@
 .title);
+%0A  %7D
 %0A%0A  $li.

Add limit to title length thus preventing from breaking the layout