//------------------------------------------------------
function HangingBox(){
    if (document.getElementById("hangingBox")) {
        var hangBox = document.getElementById("hangingBox");
    }
    else {
        var hangBox = document.createElement("div");
        hangBox.id = "hangingBox";
        hangBox.style.position = "relative";
        hangBox.style.top = "20px";
        hangBox.style.left = "20px";
        hangBox.style.width = "450px";
        hangBox.style.border = "8px solid #F1F3F8";
    }
    hangBox.innerHTML = "<img src='carregando1.gif' />";
    var display = document.getElementById("display");
    display.appendChild(hangBox);
    return hangBox;
}

//------------------------------------------------------
function showPicture(id, event){
    var aPicture = document.createElement("img");
    var aTitle = TitleBar(id.title, event);
    var aHangBox = HangingBox();
    var aCloser = hangingCloser();
    aPicture.src = id.name;
    aPicture.onload = function(){
        aHangBox.innerHTML = "";
        aHangBox.appendChild(aTitle);
        aHangBox.appendChild(aPicture);
        aHangBox.appendChild(aCloser);
    }
}

//-------------------------------------------------------
/**
 * @return HTMLElement div
 */
function hangingCloser(){
    var hCloser = document.createElement("div");
    hCloser.style.position = "relative";
    hCloser.style.backgroundColor = "#F1F3F8"
    hCloser.style.color = "#000000"
    hCloser.style.fontSize = "14px";
    hCloser.style.verticalAlign = "baseline";
    hCloser.style.textAlign = "center";
    hCloser.onclick = hangingDestroy
    hCloser.appendChild(document.createTextNode("Fechar"));
    return hCloser;
}

//---------------------------------------------------------
function hangingDestroy(){
    if (document.getElementById("hangingBox")) {
        var aBox = HangingBox();
        var display = document.getElementById("display");
        display.removeChild(aBox);
    }
    return true;
}

//---------------------------------------------
function TitleBar(title, event){
    if (!title) {
        title = "SEM TITULO";
    }
    var bar = document.createElement("div");
    bar.style.verticalAlign = "top";
    bar.style.height = "25px";
    bar.style.width = "450px";
    bar.style.fontWeight = "bold";
    bar.style.fontSize = "12px";
    bar.style.backgroundColor = "#F1F3F8"
    bar.style.color = "#000000"
    bar.onmousedown = function(){
        Dragger(document.getElementById("hangingBox"), event)
    }
    bar.appendChild(document.createTextNode(title));
    return bar;
}