var socket = io.connect('http://localhost:3005');

socket.on('stdout', #(data) {
  output(data, $$stdout);
});

socket.on('stderr', #(data) {
  output(data, $$stderr);
});

socket.on('exit', #(data) {
  output(data, $$exit);
});


socket.on('ssh-added', #(data) {
  var name = data.name;
  getSSH(name);
});

var $$tab = jade.compile(<<END);
  li.my-tab
    a(href="#tab#{count}")
      = name
      &nbsp;
      span.badge.count 0
END

var $$content = jade.compile(<<END);
  .output.tab-pane(id="#tab#{count}")
END

var $$stderr = jade.compile(<<END);
  .stderr= data
END

var $$stdout = jade.compile(<<END);
  .stdout= data
END

var $$exit = jade.compile(<<END);
  .exit
END


var ssh   = {};
var count = 0;

function output(data, template) {
  var ssh = getSSH(data.name);
  ssh.content.append($(template(data)));
  scrollDown(ssh.content);
  if (!ssh.tab.is('.active')) {
    ssh.count++;
    ssh.tab.find('.count').html(ssh.count);
  }
}

function scrollDown(div) {
  div.prop('scrollTop', div.prop("scrollHeight") - div.height());
}

function getSSH(name) {
  var n = ++count;
  if (ssh[name]) return ssh[name];
  var $li = $($$tab({ name: name, count: n }));

  $('#tabs').append($li);

  var $div = $($$content({ name: name, count: n }));
  $('#tab-content').append($div);
  var ele = { tab: $li, content: $div, count: 0 };

  $li.find('a').click(#{ 
    $li.addClass('active').siblings().removeClass('active'); 
    $div.addClass('active').siblings().removeClass('active'); 
    $li.find('.badge').html("0");
    ele.count = 0;
  });

  if (count == 1) {
    $li.addClass('active');
    $div.addClass('active');
  }

  return ssh[name] = ele;
}

function connect(name) {
  name = name || prompt('Enter in user@host'); 
  socket.emit('add-ssh', { name: name });
}

function exec(cmd) {
  cmd = cmd || prompt('Enter in command'); 
  socket.emit('exec',  { cmd: cmd });
}