a.alink
{
color: #666;
text-decoration: underline;
margin: 0px;
padding: 0px;
border-bottom: none;
}
a:hover
{
color: #4C5DC5;
}
p
{
margin: 1em 4em;
padding: 0;
}
/* Some view */
ul.menu
{
width: 300px;
padding: 0;
margin: 0;
padding-left: 3em;
padding-top: 3em;
list-style: none;
}
ul.menu li
{
padding: 0.6em 1em;
}
ul.menu li.hovered
{
background: #D8FCD8;
}
ul.menu li input
{
color: #aaa;
}
ul.menu li.hovered input
{
color: #333;
}
input
{
border: solid 1px #bbb;
width: 200px;
}
#mysites
{
margin-left: 4em;
}
function $(elementid)
{
return document.getElementById(elementid);
}
function ElementCollection(expression, handler)
{
for (var i = 0, ilength = expression.length; i < ilength; i++)
{
handler(expression[i]);
}
}
function RemoveSelf(elmt)
{
RemovePic(elmt.parentNode.getElementsByTagName("input")[0].value);
elmt.parentNode.parentNode.removeChild(elmt.parentNode, true);
}
function RemovePic(uri)
{
ElementCollection
( $("mysites").getElementsByTagName("a"),
function(elmt)
{
if (elmt.href == uri || elmt.href.length < 6)
{
elmt.parentNode.removeChild(elmt);
}
}
);
}
function AddPic(uri)
{
var exists = false;
ElementCollection
( $("mysites").getElementsByTagName("a"),
function(elmt)
{
if (elmt.href == uri)
{
exists = true;
}
}
);
if (exists)
return;
//////////
var mlink = document.createElement("a");
mlink.style.borderBottom = "none";
mlink.href = uri;
mlink.innerHTML = "<img style=\"margin: 0.2em; border: none;\" alt=\"\" src=\"" + uri + "/favicon.ico\" />";
$("mysites").appendChild(mlink);
}
function AddElement()
{
var list_el = document.createElement("li"), new_con = "";
new_con = "<a onclick=\"RemoveSelf(this)\" href=\"#\" style=\"margin: 0; padding: 0; border-bottom: none; color: #000; display: none; text-decoration: none; font-size: 1.6em; float:right;\">";
new_con += "×</a>";
new_con += "<input type=\"text\" />";
new_con += "<img src=\"\" style=\"display: none; vertical-align: top; width: 16px; margin-left: 1em;\" />";
list_el.innerHTML = new_con;
$("menu").appendChild(list_el);
UpdateElements();
}
function UpdateElements()
{
ElementCollection
( $("menu").getElementsByTagName("li"),
function(elmt)
{
var vinput = elmt.getElementsByTagName("input").item(0);
elmt.onmouseover = function()
{
vinput.focus();
this.className = "hovered";
ElementCollection( elmt.getElementsByTagName("a"), function(ef) { ef.style.display = "block" } );
}
elmt.onmouseout = function()
{
this.className = "";
ElementCollection( elmt.getElementsByTagName("a"), function(ef) { ef.style.display = "none" } );
}
vinput.onblur = function()
{
elmt.getElementsByTagName("img").item(0).src = this.value + "/favicon.ico";
elmt.getElementsByTagName("img").item(0).style.display = "inline";
if (this.value[this.value.length-1] != "/" && this.value.length > 4)
this.value += "/";
AddPic(this.value);
}
}
);
}
function Initialize()
{
$("addsite").onclick = function()
{
AddElement();
}
AddElement();
}
Initialize();