{literal}
<style type="text/css">
#mutual_friends_count {
  font-weight: bold;
  text-decoration: none;
}

#mutual_friends_count:hover {
  text-decoration: underline;
}
</style>
<script type="text/javascript" language="javascript">
function mutual_friends_count_onclick() {
  var list = document.getElementById('mutual_friends_list');
  if (list.style.display == 'none')
    list.style.display = '';
  else
    list.style.display = 'none';
}
</script>
{/literal}

{if $node.node_id != $user_id}
  {get_mutual_friends assign=mutual_friends}
{/if}
{if $node.node_id != $user_id && $mutual_friends_count > 0}
  you have <a id="mutual_friends_count" onclick="mutual_friends_count_onclick()">{$mutual_friends_count} mutual {if $mutual_friends_count == 1}friend{else}friends{/if}</a><br />
  
  <div id="mutual_friends_list" style="display: none; width: 500px;">
    <div>
      {foreach from=$mutual_friends item=friend name=mutual_friends}
        <a href='/id/{$friend.user_id}/' style="float: left;" title="{$friend.login}">
          <img src='{get_image_link id=$friend.user_id}' name='{$friend.login}' alt='{$friend.login}' title='{$friend.login}' style="width: 50px; height: 50px;" />
        </a>
        {if $smarty.foreach.mutual_friends.iteration % 10}
          </div><div>
        {/if}
      {/foreach}
    </div>
  </div>
  <br style="clear: both;" />
{/if}