/home/dfiloni/Scrivania/mockup_psm.html

<html>
<head>
<style>
#psm {
    position: relative;
    color: #000;
    padding: 10px;
    font-family: Verdana;
    display: block;
}

#tooltip-bubble {
    position: relative;
    width: 300px;
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
    padding: 10px;
    font-family: Verdana;
    margin-bottom: 10px;
    margin-left: 50px;
}
</style>
<script>
var timer_id;
var psm = "Test";
var psm2 = "Test 2";
var showed_psm = 2;
var timer_psm;

function marquee_psm ()
{
    div = document.getElementById ("psm");

    if (showed_psm == 1)
    {
        div.innerHTML = "<img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' />" + psm2;
        showed_psm = 2;
    }
    else if (showed_psm == 2)
    {
        div.innerHTML = "<img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' />" + psm;
        showed_psm = 1;
    }

    if (timer_psm)
        clearTimeout (timer_psm);

    timer_psm = setTimeout ("marquee_psm ()", 5000);
}

function update_div ()
{
    div = document.getElementById ("tooltip");

    div.innerHTML = "<div id='tooltip-bubble'><img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' /> <b>email@live.com</b><br /><a href='#' onclick='change_psm(1)'><i>" + psm +"</i></a><br />-----</ br></ br><img src='http://www.tecnologiadiaria.com/imagenes/2009/04/msn-icon.png' width='16' height='16' /> <b>email_2@live.com</b><br /><a href='#' onclick='change_psm(2)'><i>" + psm2 +"</i></a><br /></div>";
}

function change_psm (account)
{
    if (account == 1)
        psm = prompt ("New personal message:", psm);
    else if (account == 2)
        psm2 = prompt ("New personal message:", psm2);

    if (psm == "")
        psm = "Set a personal message for this account";
    if (psm2 == "")
        psm2 = "Set a personal message for this account";

    update_div ();
    marquee_psm ();
}

function clear_tooltip ()
{
    document.getElementById ("tooltip").innerHTML = "";
}

function tooltip ()
{
    update_div ();

    timer_id = setTimeout ("clear_tooltip ()", 5000);
}
</script>
</head>
<body onload="marquee_psm()">
<div>FRIENDLY NAME</div>
<div id="psm" onmouseover="tooltip()"></div>
<div id="tooltip""></div>
</body>