function createHVI(id) {

    var skeleton = null;

    createSkeleton = function() {
        skeleton = createTable(400)
        skeleton.id = id;
        var row1 = document.createElement("tr");
        var row2 = document.createElement("tr");
        var cell1 = document.createElement("td");
        var cell2 = document.createElement("td");

        row1.appendChild(cell1);
        row2.appendChild(cell2);
        row1.cell1 = cell1;
        row2.cell1 = cell2;

        cell1.className = "DropDownList_MainTable";
        cell1.style.cursor = "default";
        cell1.style.width = "400px";
        cell1.style.height = "100px";

        skeleton.addRows([row1, row2]);
        skeleton.row1 = row1;
        skeleton.row2 = row2;

        var img = document.createElement("img");
        img.style.visibility = "hidden";

        img.onload = function() {
            img.style.visibility = "";
        }

        img.onerror = function() {
            img.style.visibility = "hidden";
        }

        skeleton.image = img;

        img.style.width = "400px";
        img.style.height = "100px";

        img.width = "400";
        img.height = "400";


        cell1.appendChild(img);


        var subTable = createTable("100%");
        var subRow = document.createElement("tr");
        var subCell1 = document.createElement("td");
        var subCell2 = document.createElement("td");
        var subCell3 = document.createElement("td");
        subTable.style.marginTop = "4px";
        subCell1.style.width = "340px";

        subRow.appendChild(subCell1);
        subRow.appendChild(subCell2);
        subRow.appendChild(subCell3);
        subTable.addRow(subRow);

        var input = document.createElement("input");
        input.id = id + "_input";
        input.className = "TextFields175px";
        input.style.color = "#CD853F";
        input.style.width = "340px";
        input.value = "Enter the text as it appears";

        input.onfocus = function() {            
            defaultText_onfocus(this);
        }
        skeleton.input = input;

        subCell1.appendChild(input);
        subCell2.style.paddingLeft = "8px";
        cell2.appendChild(subTable);

        var refresh = document.createElement("img");
        refresh.id = id + "_refresh";
        refresh.src = top.document.getElementById("websiteURL").value + "/Images/icosmall_refresh.png";
        refresh.onmouseover = function() { image_onmouseover(this); }
        refresh.alt = "Get another Image.";

        refresh.onclick = function() {
            skeleton.getChallenge();
        }
        subCell2.appendChild(refresh);
        skeleton.refresh = refresh;


        var about = document.createElement("img");
        about.id = id + "_about";
        about.src = top.document.getElementById("websiteURL").value + "/Images/icosmall_infoSymbol.png";
        about.onmouseover = function() { image_onmouseover(this); }
        about.style.marginLeft = "2px";
        about.alt = "Information about the Human Verification Image.";

        about.onclick = function() {
            skeleton.getChallenge();
        }
        subCell3.appendChild(about);

        skeleton.about = about;
    }
    createSkeleton();

    skeleton.data = null;
    skeleton.getChallenge = function() {

        var sendData = "commandName=getChallenge";

        if (top.document.getElementById("at"))
            sendData += "&at=" + top.document.getElementById("at").value;

        this.readyFunction = function(responseText) {
            var src = top.document.getElementById("websiteURL").value + "/data/hvi.aspx?challenge=" + encodeURIComponent(responseText) + "&commandName=getImage";

            if (top.MainColor)
                src += "&color=" + top.MainColor;

            if (top.document.getElementById("at"))
                src += "&at=" + top.document.getElementById("at").value;

            skeleton.image.src = src
            skeleton.challenge = encodeURIComponent(responseText);
            skeleton.input.value = "Enter the text as it appears";
        }
        AJAXPost(top.document.getElementById("websiteURL").value + "/data/hvi.aspx", "AddParams[1].readyFunction", sendData, this);
    }
    skeleton.getChallenge();

    skeleton.getSubmitData = function() {
        return "hviresponse=" + skeleton.input.value + "&hvichallenge=" + skeleton.challenge;
    }


    skeleton.changeWidth = function(newWidth) {
        newWidth = parseInt(newWidth);

        skeleton.style.width = newWidth + "px";
        skeleton.row1.cell1.style.width = newWidth + "px";
        skeleton.row1.cell1.width = newWidth;
        skeleton.image.style.width = newWidth + "px";
        skeleton.input.style.width = (newWidth - 60).toString() + "px";
        skeleton.input.parentNode.style.width = (newWidth - 60).toString() + "px";
    }

    skeleton.changeHeight = function(newHeight) {
        newHeight = parseInt(newHeight);
        skeleton.image.style.height = newHeight + "px";
        skeleton.image.parentNode.style.height = newHeight + "px";
    }


    return skeleton;
}