var selectedItem = "";
var colourID = "";
var currentBorderStyle = "none";
var currentBorderSize = "0px";
var buttonText = "Submit";
var buttonFontFamily = "Arial";
var buttonFontColour = "#000000";
var buttonFontSize = "16px";
var buttonLineHeight = "20px";
var buttonImage1 = "http://image.locallinkup.com/console/form_submit_off.png";
var buttonImage2 = "http://image.locallinkup.com/console/form_submit_on.png";
var elementCount = 1;
var ignoreCheckChange = false;
var compulsoryCount = 0;
var compKey = false;
var inputPanel;
var submitButton;
var imageLoc;
var mainCount;
var maxWidth;
var applyingImage = false;
var tagLoc = "left";

$(document).ready(function() {
    document.getElementById('addFieldItem').style.backgroundImage = "url(Images/add_field_item_disabled.png)";
    if (document.getElementById('hfCount').value != "") {
        maxWidth = parseInt(document.getElementById('hfMaxWidth').value);
        mainCount = document.getElementById('hfCount').value;
        inputPanel = document.getElementById('dragMeInput' + mainCount);
        inputPanel.style.backgroundColor = "#f2f2f2";
        submitButton = document.getElementById('submitButton' + mainCount);
        var elms = document.getElementById('hfElements').value.split(",");
        for (var i = 0; i < elms.length; i++) {
            if (elms[i].indexOf("inputText") > -1) {
                setResizableInput(elms[i]);
            }
            else if (elms[i].indexOf("inputLabel") > -1) {
                setResizableinputLabelLeft(elms[i]);
            }
            else {
                setDraggable(elms[i]);
                setResizable(elms[i]);
            }
        }
    }
});

function setResizable(id) {
    $(id).resizable({ grid: [5, 5], containment: '#' + inputPanel.id,
        handles: "all",
        autoHide: true,
        start: function() {
        },
        resize: function() {
            document.getElementById('xPos').innerHTML = this.style.left.replace("px", "");
            document.getElementById('yPos').innerHTML = this.style.top.replace("px", "");
            document.getElementById('width').innerHTML = this.offsetWidth;
            document.getElementById('height').innerHTML = this.offsetHeight;
        },
        stop: function() {
            if (this.id.indexOf("submitButton") > -1) {
                if (document.getElementById('cdBtnStandard').style.backgroundImage.indexOf("checked") > -1) {
                    this.style.lineHeight = this.style.height;
                    buttonLineHeight = this.style.height;
                }
                if (document.getElementById('cdBtnStandard').style.backgroundImage.indexOf("checked") < 0) {
                    parent.showImagegallery("", "", submitButton.style.height.replace("px", ""), submitButton.style.width.replace("px", ""), id, "");
                }
            }
            else if (this.id.indexOf("inputCombo") > -1) {
                for (var i = 0; i < this.childNodes.length; i++) {
                    if (this.childNodes[i].tagName != null) {
                        if (this.childNodes[i].tagName.toLowerCase() == "img") {
                            this.childNodes[i].style.top = ((this.offsetHeight - 12) / 2) + "px";
                        }
                    }
                }
            }
            else {
                this.style.lineHeight = this.style.height;
            }
        }
    });
}

function setResizableInput(id) {
    $(id).resizable({ grid: [5, 5], containment: '#' + inputPanel.id,
        handles: ",e,se,s",
        autoHide: true,
        start: function() {
        },
        resize: function() {
            document.getElementById('xPos').innerHTML = this.style.left.replace("px", "");
            document.getElementById('yPos').innerHTML = this.style.top.replace("px", "");
            document.getElementById('width').innerHTML = this.offsetWidth;
            document.getElementById('height').innerHTML = this.offsetHeight;
        },
        stop: function() {
            this.style.lineHeight = this.style.height;
            var currLineHeight = parseInt(this.style.fontSize.replace("px", "")) + 4;
            if (this.id.indexOf('inputText') > -1) {
                if (this.offsetHeight >= (currLineHeight * 2)) {
                    this.setAttribute("multi", "yes");
                    this.style.lineHeight = (currLineHeight).toString() + "px";
                }
                else {
                    this.setAttribute("multi", "no");
                }
            }
        }
    });
}

function setResizableinputLabelLeft(id) {
    $(id).resizable({ grid: [5, 5], containment: '#' + inputPanel.id,
        handles: ",w,sw,s",
        autoHide: true,
        start: function() {
        },
        resize: function() {
            document.getElementById('xPos').innerHTML = this.style.left.replace("px", "");
            document.getElementById('yPos').innerHTML = this.style.top.replace("px", "");
            document.getElementById('width').innerHTML = this.offsetWidth;
            document.getElementById('height').innerHTML = this.offsetHeight;
        },
        stop: function() {
            this.style.lineHeight = this.style.height;
        }
    });
}

function setResizableinputLabelTop(id) {
    $(id).resizable({ grid: [5, 5], containment: '#' + inputPanel.id,
        handles: ",n,ne,e",
        autoHide: true,
        start: function() {
        },
        resize: function() {
            document.getElementById('xPos').innerHTML = this.style.left.replace("px", "");
            document.getElementById('yPos').innerHTML = this.style.top.replace("px", "");
            document.getElementById('width').innerHTML = this.offsetWidth;
            document.getElementById('height').innerHTML = this.offsetHeight;
        },
        stop: function() {
            this.style.lineHeight = this.style.height;
        }
    });
}

function setDraggable(id) {
    $(id).draggable({ grid: [5, 5], containment: '#' + inputPanel.id,
        start: function() {
        },
        drag: function() {
            document.getElementById('xPos').innerHTML = this.style.left.replace("px", "");
            document.getElementById('yPos').innerHTML = this.style.top.replace("px", "");
            document.getElementById('width').innerHTML = this.offsetWidth;
            document.getElementById('height').innerHTML = this.offsetHeight;
            if (this.id.indexOf("inputText") > -1) {
                var inputLabelElement = document.getElementById(this.id.replace("inputText", "inputLabel"));
                setinputLabelPosition(this, inputLabelElement);
            }
            if (this.id.indexOf("inputCombo") > -1) {
                var inputLabelElement = document.getElementById(this.id.replace("inputCombo", "inputLabel"));
                setinputLabelPosition(this, inputLabelElement);
            }
        },
        stop: function() {
            if (this.id.indexOf("inputText") > -1) {
                var inputLabelElement = document.getElementById(this.id.replace("inputText", "inputLabel"));
                setFinalPositions(this, inputLabelElement);
            }
            if (this.id.indexOf("inputCombo") > -1) {
                var inputLabelElement = document.getElementById(this.id.replace("inputCombo", "inputLabel"));
                setFinalPositions(this, inputLabelElement);
            }

            if (this.id.indexOf("inputLabel") > -1) {
                var inputElement = document.getElementById(this.id.replace("inputLabel", "inputText"));
                if (inputElement == null) {
                    inputElement = document.getElementById(this.id.replace("inputLabel", "inputCombo"));
                }
                setTagPosition(this, inputElement);
                setFinalPositions(inputElement, this);
            }
        }
    });
}

function setFinalPositions(inputTextElement, inputLabelElement) {
    var inputLeft = parseInt(inputTextElement.style.left.replace("px", ""));
    var inputTop = parseInt(inputTextElement.style.top.replace("px", ""));
    var inputHeight = parseInt(inputTextElement.style.height.replace("px", ""));
    var inputTextWidth = parseInt(inputLabelElement.style.width.replace("px", ""));
    var inputTextHeight = parseInt(inputLabelElement.style.height.replace("px", ""));
    var inputTextLeft = parseInt(inputLabelElement.style.left.replace("px", ""));
    var inputTextTop = parseInt(inputLabelElement.style.top.replace("px", ""));
    var newLeft;
    var newTop;
    if (tagLoc == "left") {
        inputLabelElement.style.top = inputTextElement.style.top;
        inputLabelElement.style.left = (inputLeft - inputTextWidth) + "px";
        if ((inputLeft - inputTextWidth) < 0) {
            inputTextElement.style.left = inputLabelElement.style.width;
            inputLabelElement.style.left = "0px";
        }
    }
    else {
        inputLabelElement.style.left = inputTextElement.style.left;
        inputLabelElement.style.top = (inputTop - inputTextHeight) + "px";
        if ((inputTop - inputTextHeight) < 0) {
            inputTextElement.style.top = inputLabelElement.style.height;
            inputLabelElement.style.top = "0px";
        }
    }
}

function setinputLabelPosition(inputTextElement, inputLabelElement) {
    var inputPanelHeight = parseInt(inputPanel.style.height.replace("px", ""));
    var inputLeft = parseInt(inputTextElement.style.left.replace("px", ""));
    var inputTop = parseInt(inputTextElement.style.top.replace("px", ""));
    var inputTextWidth = parseInt(inputLabelElement.style.width.replace("px", ""));
    var inputTextHeight = parseInt(inputLabelElement.style.height.replace("px", ""));
    var inputTextLeft = parseInt(inputLabelElement.style.left.replace("px", ""));
    var inputTextTop = parseInt(inputLabelElement.style.top.replace("px", ""));
    var newLeft;
    var newTop;
    if (tagLoc == "left") {
        if ((inputLeft - inputTextWidth) < 0) {
            newLeft = "0px";
        }
        else {
            newLeft = (inputLeft - inputTextWidth) + "px";
        }
        if ((inputTop + inputTextHeight) > inputPanelHeight) {
            newTop = (inputPanelHeight - inputTextHeight) + "px";
        }
        else {
            newTop = inputTop.toString() + "px";
        }
    }
    else {
        newLeft = inputLeft.toString() + "px";
        newTop = (inputTop - inputTextHeight) + "px";
    }
    inputLabelElement.style.left = newLeft;
    inputLabelElement.style.top = newTop;
}

function setTagPosition(inputLabelElement, inputTextElement) {
    var inputTextHeight = parseInt(inputLabelElement.style.height.replace("px", ""));
    var inputTop = parseInt(inputTextElement.style.top.replace("px", ""));
    var inputTextWidth = parseInt(inputLabelElement.style.width.replace("px", ""));
    var inputLeft = parseInt(inputTextElement.style.left.replace("px", ""));
    var inputTextLeft = parseInt(inputLabelElement.style.left.replace("px", ""));
    if (inputTextLeft > inputLeft) {
        tagLoc = "top";
        inputTextElement.setAttribute("tagLoc", "top");
        inputLabelElement.style.left = inputTextElement.style.left;
        inputLabelElement.style.top = (inputTop - inputTextHeight) + "px";
        $("#" + inputLabelElement.id).resizable('destroy');
        setResizableinputLabelTop("#" + inputLabelElement.id);
    }
    else {
        tagLoc = "left";
        inputTextElement.setAttribute("tagLoc", "left");
        inputLabelElement.style.left = (inputLeft - inputTextWidth) + "px";
        inputLabelElement.style.top = inputTextElement.style.top;
        $("#" + inputLabelElement.id).resizable('destroy');
        setResizableinputLabelLeft("#" + inputLabelElement.id);
    }
}

function showColourPicker(element, id) {
    if (element.style.borderTopColor == "#000000" || element.style.borderTopColor == "rgb(0, 0, 0)") {
        colourID = id;
        if (id == "back") {
            if (document.getElementById('backColour').style.borderTopColor == "#000000" || document.getElementById('backColour').style.borderTopColor == "rgb(0, 0, 0)") {
                parent.showColourPicker("form");
            }
        }
        if (id == "border") {
            if (document.getElementById('borderColourOut').style.borderTopColor == "#000000" || document.getElementById('borderColourOut').style.borderTopColor == "rgb(0, 0, 0)") {
                parent.showColourPicker("form");
            }
        }
        if (id == "font") {
            if (document.getElementById('fontColour').style.borderTopColor == "#000000" || document.getElementById('fontColour').style.borderTopColor == "rgb(0, 0, 0)") {
                parent.showColourPicker("form");
            }
        }
    }
}

function setFontColour(hash) {
    var element;
    element = document.getElementById(selectedItem);
    if (colourID == "font") {
        element.style.color = hash;
        document.getElementById('fontColour').style.backgroundColor = hash;
        if (selectedItem.indexOf("submitButton") > -1) {
            buttonFontColour = hash;
        }
    }
    else if (colourID == "border") {
        element.style.borderColor = hash;
        document.getElementById('borderColourOut').style.backgroundColor = hash;
    }
    else {
        element.style.backgroundColor = hash;
        document.getElementById('backColour').style.backgroundColor = hash;
    }
}

function addTextLabel() {
    var textDiv = document.createElement("div");
    textDiv.id = "inputLabel" + mainCount + "_" + elementCount;
    textDiv.setAttribute("onclick", "select(this)");
    textDiv.style.position = "absolute";
    textDiv.style.height = "20px";
    textDiv.style.width = "80px";
    textDiv.style.top = "10px";
    textDiv.style.left = "25px";
    textDiv.style.lineHeight = "20px";
    textDiv.style.fontSize = "14px";
    textDiv.style.fontFamily = "Arial";
    textDiv.innerHTML = "Your Label";
    textDiv.style.cursor = "move";
    textDiv.style.textAlign = "left";

    addOtherDivs(textDiv, elementCount, false);
    addBorders(textDiv);
    setBorders(textDiv, "#25a9ff");
    inputPanel.appendChild(textDiv);
    setDraggable("#inputLabel" + mainCount + "_" + elementCount);
    if (tagLoc == "left") {
        setResizableinputLabelLeft("#inputLabel" + mainCount + "_" + elementCount);
    }
    else {
        setResizableinputLabelTop("#inputLabel" + mainCount + "_" + elementCount);
    }
}

function addInputField(type) {
    if (type == "text") {
        addTextLabel();
        var inputDiv = document.createElement("div");
        inputDiv.id = "inputText" + mainCount + "_" + elementCount;
        inputDiv.setAttribute("onclick", "select(this)");
        inputDiv.setAttribute("multi", "no");
        inputDiv.setAttribute("valid", "Any Text");
        inputDiv.setAttribute("limit", "no");
        if (tagLoc == "left") {
            inputDiv.setAttribute("tagLoc", "left");
        }
        else {
            inputDiv.setAttribute("tagLoc", "top");
        }
        inputDiv.style.position = "absolute";
        inputDiv.style.width = "156px";
        inputDiv.style.height = "16px";
        inputDiv.style.top = "10px";
        inputDiv.style.left = "105px";
        inputDiv.style.backgroundColor = "#ffffff";
        inputDiv.style.lineHeight = "16px";
        inputDiv.style.fontSize = "14px";
        inputDiv.style.fontFamily = "Arial";
        inputDiv.style.color = "#000000";
        inputDiv.style.borderWidth = "2px";
        inputDiv.style.borderStyle = "inset";
        inputDiv.style.borderColor = "#f4f4f5";
        inputDiv.innerHTML = "Accepts any text";
        inputDiv.style.cursor = "move";
        inputDiv.style.textAlign = "left";

        addOtherDivs(inputDiv, elementCount, false);
        addBorders(inputDiv);
        setBorders(inputDiv, "#25a9ff");
        inputPanel.appendChild(inputDiv);
        setDraggable("#inputText" + mainCount + "_" + elementCount);
        setResizableInput("#inputText" + mainCount + "_" + elementCount);
    }
    if (type == "combo") {
        addTextLabel();
        var comboDiv = document.createElement("div");
        comboDiv.id = "inputCombo" + mainCount + "_" + elementCount;
        comboDiv.setAttribute("onclick", "select(this)");
        comboDiv.setAttribute("options", "Option 1");
        comboDiv.style.position = "absolute";
        comboDiv.style.height = "20px";
        comboDiv.style.width = "100px";
        comboDiv.style.top = "10px";
        comboDiv.style.left = "105px";
        comboDiv.style.backgroundColor = "#ffffff";
        comboDiv.style.color = "#000000";
        comboDiv.style.lineHeight = "20px";
        comboDiv.style.fontSize = "14px";
        comboDiv.style.fontFamily = "Arial";
        comboDiv.style.textAlign = "left";
        comboDiv.innerHTML = "Drop Down";
        comboDiv.style.cursor = "move";
        if (tagLoc == "left") {
            comboDiv.setAttribute("tagLoc", "left");
        }
        else {
            comboDiv.setAttribute("tagLoc", "top");
        }

        addOtherDivs(comboDiv, elementCount, false);
        addBorders(comboDiv);
        setBorders(comboDiv, "#25a9ff");
        inputPanel.appendChild(comboDiv);
        setDraggable("#inputCombo" + mainCount + "_" + elementCount);
        setResizableInput("#inputCombo" + mainCount + "_" + elementCount);
    }
    if (type == "check") {
        var checkPanel = document.createElement("div");
        checkPanel.id = "inputCheck" + mainCount + "_" + elementCount;
        checkPanel.setAttribute("checked", "false");
        checkPanel.setAttribute("text", "CheckBox");
        checkPanel.style.position = "absolute";
        checkPanel.style.height = "20px";
        checkPanel.style.width = "100px";
        checkPanel.style.top = "10px";
        checkPanel.style.left = "105px";
        checkPanel.style.cursor = "move";
        checkPanel.style.color = "#000000";
        checkPanel.style.lineHeight = "20px";
        checkPanel.style.fontSize = "14px";
        checkPanel.style.fontFamily = "Arial";
        checkPanel.style.textAlign = "left";
        checkPanel.style.borderWidth = "0px";
        checkPanel.style.borderStyle = "none";
        checkPanel.style.borderColor = "#f4f4f5";
        checkPanel.setAttribute("onclick", "select(this)");

        var checkElem = document.createElement("input");
        checkElem.setAttribute("id", "checkBox");
        checkElem.setAttribute("type", "checkbox");
        checkElem.style.position = "relative";
        checkElem.className = "floatLeft";

        var checkText = document.createElement("div");
        checkText.setAttribute("id", "checkText");
        checkText.style.position = "relative";
        checkText.className = "floatLeft";
        checkText.style.height = "20px";
        checkText.style.minWidth = "20px";
        checkText.innerHTML = "CheckBox";

        checkPanel.appendChild(checkElem);
        checkPanel.appendChild(checkText);
        addBorders(checkPanel);
        setBorders(checkPanel, "#25a9ff");
        inputPanel.appendChild(checkPanel);
        setDraggable("#inputCheck" + mainCount + "_" + elementCount);
        setResizable("#inputCheck" + mainCount + "_" + elementCount);
    }

    showInputSelector();
    elementCount++;
}

function addBorders(element) {
    element.innerHTML += "<div class='topBorder'></div>" +
                                 "<div class='bottomBorder'></div>" +
                                 "<div class='leftBorder'></div>" +
                                 "<div class='rightBorder'></div>";
}

function addOtherDivs(divTo, count, visible) {
    if (divTo.id.indexOf("inputLabel") > -1) {
        var compStarDiv = document.createElement("div");
        compStarDiv.style.position = "absolute";
        compStarDiv.id = "compStar" + mainCount + "_" + count;
        compStarDiv.style.width = "10px";
        compStarDiv.style.height = "10px";
        compStarDiv.style.top = "0px";
        compStarDiv.style.left = "-12px";
        compStarDiv.style.fontFamily = "Arial";
        compStarDiv.style.fontSize = "24px";
        compStarDiv.style.color = "#ff0000";
        if (visible) {
            compStarDiv.style.display = "inline";
        }
        else {
            compStarDiv.style.display = "none";
        }
        compStarDiv.innerHTML = "*";
        divTo.appendChild(compStarDiv);

    }
    if (divTo.id.indexOf("inputCombo") > -1) {
        var topPos = ((parseInt(divTo.style.height.replace("px", "")) - 12) / 2);
        divTo.innerHTML += "<img style='position:absolute; right:4px; top:" + topPos + "px;' width='17px' height='11px' src='Images/form_drop_down_arrow.png'/>";
    }
    if (divTo.id.indexOf("inputText") > -1) {
        var limitDiv = document.createElement("div");
        limitDiv.className = "limitDiv";
        limitDiv.style.display = "none";
        limitDiv.innerHTML = "20";
        divTo.appendChild(limitDiv);
    }
}

function setValidateText(text) {
    var element = document.getElementById(selectedItem);
    if (selectedItem.indexOf("inputText") > -1) {
        var limitDiv = document.createElement("div");
        limitDiv.className = "limitDiv";
        if (element.innerHTML.indexOf("limitDiv") > -1) {
            var limit = element.getAttribute("limit");
            if (limit != "no") {
                limitDiv.innerHTML = limit;
                limitDiv.style.display = "inline";
            }
        }
        else {
            limitDiv.style.display = "none";
            limitDiv.innerHTML = "20";
        }
        $("#" + selectedItem).resizable('destroy');
        element.innerHTML = text;
        element.appendChild(limitDiv);
        addBorders(element);
        setDraggable("#" + selectedItem);
        setResizableInput("#" + selectedItem);
        disableBorders(element);
    }
}

function setText() {
    var element = document.getElementById(selectedItem);
    if (element.id.indexOf("inputCheck") > -1) {
        var textElement;
        for (var i = 0; i < element.childNodes.length; i++) {
            if (element.childNodes[i].id != null) {
                if (element.childNodes[i].id.indexOf("checkText") > -1) {
                    textElement = element.childNodes[i];
                }
            }
        }
        textElement.innerHTML = document.getElementById('textValue').value;
        element.setAttribute("text", document.getElementById('textValue').value);
    }
    else if (element.id.indexOf("comboOption") > -1) {
        var comboItem = document.getElementById(element.className);
        var parentItem = element.parentNode;
        element.innerHTML = document.getElementById('textValue').value;
        for (var i = 0; i < parentItem.childNodes.length; i++) {
            if (i == 0) {
                comboItem.setAttribute("options", parentItem.childNodes[i].innerHTML);
            }
            else {
                comboItem.setAttribute("options", comboItem.getAttribute("options") + "^^" + parentItem.childNodes[i].innerHTML);
            }
        }
    }
    else {
        var visible = false;
        if (element.innerHTML.indexOf('compStar') > -1 && element.innerHTML.indexOf('inline') > -1) {
            visible = true;
        }
        $("#" + selectedItem).resizable('destroy');
        if (element.id.indexOf("compKey") > -1) {
            element.innerHTML = "<span style='color:#ff0000; font-size:24px;'>*</span>" + document.getElementById('textValue').value;
        }
        else {
            element.innerHTML = document.getElementById('textValue').value;
        }
        addBorders(element);
        if (element.id.indexOf("inputLabel") > -1) {
            addOtherDivs(element, element.id.replace("inputLabel" + mainCount + "_", ""), visible);
            setDraggable("#" + selectedItem);
            if (tagLoc == "left") {
                setResizableinputLabelLeft("#" + selectedItem);
            }
            else {
                setResizableinputLabelTop("#" + selectedItem);
            }
        }
        else {
            setDraggable("#" + selectedItem);
            setResizable("#" + selectedItem);
        }
    }
}

function sendData() {
}

function closeEditor() {
    parent.hideModalWindow('formBuilderModal');
}

function setRequired() {
    if (document.getElementById('cbRequired').style.backgroundImage.indexOf("form_cb_unavail") < 0 && document.getElementById('cbRequired').style.backgroundImage != "") {
        var selectedElement = document.getElementById(selectedItem);
        if (selectedItem.indexOf("inputText") > -1) {
            selectedElement = document.getElementById(selectedItem.replace("inputText", "inputLabel"));
        }
        if (selectedItem.indexOf("inputCombo") > -1) {
            selectedElement = document.getElementById(selectedItem.replace("inputCombo", "inputLabel"));
        }
        for (var i = 0; i < selectedElement.childNodes.length; i++) {
            if (selectedElement.childNodes[i].id != null) {
                if (selectedElement.childNodes[i].id.indexOf("compStar") > -1) {
                    if (document.getElementById('cbRequired').style.backgroundImage.indexOf("form_cb_avail") > -1) {
                        selectedElement.childNodes[i].style.display = "inline";
                        document.getElementById('cbRequired').style.backgroundImage = "url(Images/form_cb_checked.png)";
                        compulsoryCount++;
                    }
                    else {
                        selectedElement.childNodes[i].style.display = "none";
                        document.getElementById('cbRequired').style.backgroundImage = "url(Images/form_cb_avail.png)";
                        compulsoryCount--;
                    }
                }
            }
        }
        if (compulsoryCount > 0 && !compKey) {
            var textDiv = document.createElement("div");
            textDiv.id = "compKey" + mainCount;
            textDiv.setAttribute("onclick", "select(this)");
            textDiv.style.position = "absolute";
            textDiv.style.width = "190px";
            textDiv.style.height = "20px";
            textDiv.style.top = inputPanel.offsetHeight - 30 + "px";
            textDiv.style.left = "10px";
            textDiv.style.cursor = "move";
            textDiv.style.lineHeight = "20px";
            textDiv.style.fontSize = "12px";
            textDiv.style.fontFamily = "Arial";
            textDiv.innerHTML = "<span style='color:#ff0000; font-size:20px; line-height:20px;'>*</span>denotes a compulsory field.";
            addBorders(textDiv);
            inputPanel.appendChild(textDiv);
            setDraggable("#compKey" + mainCount);
            setResizable("#compKey" + mainCount);
            compKey = true;
        }
        if (compulsoryCount == 0 && compKey) {
            inputPanel.removeChild(document.getElementById('compKey' + mainCount)); ;
            compKey = false;
        }
    }
}

function addOption() {
    if (document.getElementById('addFieldItem').style.backgroundImage.indexOf("disabled") < 0) {
        if (selectedItem.indexOf("inputCombo") > -1) {
            var deleteMe = document.getElementById('comboOptions');
            deleteMe.style.height = (20 * (deleteMe.childNodes.length + 1)) + "px";
            var comboOption = document.createElement("div");
            comboOption.setAttribute("id", "comboOption" + (deleteMe.childNodes.length + 1));
            comboOption.setAttribute("class", selectedItem);
            comboOption.style.position = "relative";
            comboOption.style.width = (deleteMe.offsetWidth - 20) + "px";
            comboOption.style.height = "20px";
            comboOption.style.cursor = "pointer";
            comboOption.innerHTML = "Option " + (deleteMe.childNodes.length + 1);
            comboOption.setAttribute("onclick", "select(this)");
            deleteMe.appendChild(comboOption);
            var comboItem = document.getElementById(selectedItem);
            for (var i = 0; i < deleteMe.childNodes.length; i++) {
                if (i == 0) {
                    comboItem.setAttribute("options", deleteMe.childNodes[i].innerHTML);
                }
                else {
                    comboItem.setAttribute("options", comboItem.getAttribute("options") + "^^" + deleteMe.childNodes[i].innerHTML);
                }
            }
        }
    }
}

function select(element) {
    if (element != null) {
        document.getElementById('xPos').innerHTML = element.style.left.replace("px", "");
        document.getElementById('yPos').innerHTML = element.style.top.replace("px", "");
        document.getElementById('width').innerHTML = element.offsetWidth;
        document.getElementById('height').innerHTML = element.offsetHeight;
        selectedItem = element.id;
        clearAll();
        if (element.id.indexOf("comboOption") > -1) {
            if (element.className.indexOf("inputCombo") > -1) {
                document.getElementById('lblText').style.color = "#000000";
                document.getElementById('textValue').value = element.innerHTML;
                document.getElementById('textValue').disabled = false;
                document.getElementById('textValue').style.borderColor = "#000000";
                document.getElementById('textValue').style.color = "#000000";
            }
        }
        else {
            var deleteMe = document.getElementById('comboOptions');
            if (deleteMe != null) {
                inputPanel.removeChild(deleteMe);
            }
            var tempElement;
            if (element.id.indexOf("inputCheck") > -1) {
                var textElement;
                for (var i = 0; i < element.childNodes.length; i++) {
                    if (element.childNodes[i].id != null) {
                        if (element.childNodes[i].id.indexOf("checkBox") > -1) {
                            var temp = element.childNodes[i].getAttribute("checked");
                            if (temp == "checked") {
                                element.childNodes[i].removeAttribute("checked");
                                element.setAttribute("checked", "false");
                            }
                            else {
                                element.childNodes[i].setAttribute("checked", "checked");
                                element.setAttribute("checked", "true");
                            }
                        }
                        if (element.childNodes[i].id.indexOf("checkText") > -1) {
                            textElement = element.childNodes[i];
                        }
                    }
                }
                document.getElementById('lblFieldType').innerHTML = "Check Box Field";
                document.getElementById('lblText').style.color = "#000000";
                document.getElementById('textValue').value = textElement.innerHTML;
                document.getElementById('textValue').disabled = false;
                document.getElementById('textValue').style.borderColor = "#000000";
                document.getElementById('textValue').style.color = "#000000";
                document.getElementById('lblFontSize').style.color = "#000000";
                document.getElementById('fontSizeResult').innerHTML = element.style.fontSize;
                document.getElementById('fontSizeResult').style.color = "#000000";
                document.getElementById('comboFontSize').style.backgroundImage = "url(Images/form_combo_avail.png)";
                document.getElementById('lblFontColour').style.color = "#000000";
                document.getElementById('fontColour').style.backgroundColor = element.style.color;
                document.getElementById('fontColour').style.borderColor = "#000000";
                setBorders(element, "#000000");
            }
            if (element.id.indexOf("inputCombo") > -1) {
                document.getElementById('addFieldItem').style.backgroundImage = "url(Images/add_field_item_off.png)";
                document.getElementById('lblFieldType').innerHTML = "Drop Down Field";
                tempElement = document.getElementById(element.id.replace("inputCombo", "inputLabel"));
                var temp = element.innerHTML.substring(0, element.innerHTML.indexOf("<"));
                document.getElementById('lblFontSize').style.color = "#000000";
                document.getElementById('fontSizeResult').innerHTML = element.style.fontSize;
                document.getElementById('fontSizeResult').style.color = "#000000";
                document.getElementById('comboFontSize').style.backgroundImage = "url(Images/form_combo_avail.png)";
                document.getElementById('lblFontColour').style.color = "#000000";
                document.getElementById('fontColour').style.backgroundColor = element.style.color;
                document.getElementById('fontColour').style.borderColor = "#000000";
                document.getElementById('lblBackColour').style.color = "#000000";
                document.getElementById('backColour').style.backgroundColor = element.style.backgroundColor;
                document.getElementById('backColour').style.borderColor = "#000000";
                document.getElementById('lblRequired').style.color = "#000000";
                document.getElementById('cbRequired').style.backgroundImage = "url(Images/form_cb_avail.png)";
                setBorders(element, "#000000");
                setBorders(tempElement, "#000000");

                var options = element.getAttribute("options").split("^^");
                var comboOptions = document.createElement("div");
                comboOptions.setAttribute("id", "comboOptions");
                comboOptions.style.position = "absolute";
                comboOptions.style.top = (element.offsetTop + element.offsetHeight) + "px";
                comboOptions.style.left = element.style.left;
                comboOptions.style.width = (element.offsetWidth - 20) + "px";
                comboOptions.style.height = (20 * options.length) + "px";
                comboOptions.style.backgroundColor = element.style.backgroundColor;
                comboOptions.style.color = element.style.color;
                comboOptions.style.lineHeight = element.style.lineHeight;
                comboOptions.style.fontSize = element.style.fontSize;
                comboOptions.style.fontFamily = element.style.fontFamily;
                comboOptions.style.textAlign = element.style.textAlign;
                for (var i = 0; i < options.length; i++) {
                    var comboOption = document.createElement("div");
                    comboOption.setAttribute("id", "comboOption" + i);
                    comboOption.setAttribute("class", element.id);
                    comboOption.style.position = "relative";
                    comboOption.style.width = (element.offsetWidth - 20) + "px";
                    comboOption.style.height = "20px";
                    comboOption.style.cursor = "pointer";
                    comboOption.innerHTML = options[i];
                    comboOption.setAttribute("onclick", "select(this)");
                    comboOptions.appendChild(comboOption);
                }
                inputPanel.appendChild(comboOptions);
            }
            if (element.id.indexOf("submitButton") > -1) {
                if (element.style.backgroundImage == "none" || element.style.backgroundImage == "") {
                    document.getElementById('cdBtnStandard').style.backgroundImage = "url(Images/form_cb_checked.png)";
                    document.getElementById('cbInitImage').style.backgroundImage = "url(Images/form_cb_avail.png)";
                    document.getElementById('lblText').style.color = "#000000";
                    var temp = element.innerHTML.substring(0, element.innerHTML.indexOf("<"));
                    document.getElementById('textValue').value = temp;
                    document.getElementById('textValue').disabled = false;
                    document.getElementById('textValue').style.borderColor = "#000000";
                    document.getElementById('textValue').style.color = "#000000";
                    document.getElementById('lblFontSize').style.color = "#000000";
                    document.getElementById('fontSizeResult').innerHTML = element.style.fontSize;
                    document.getElementById('fontSizeResult').style.color = "#000000";
                    document.getElementById('comboFontSize').style.backgroundImage = "url(Images/form_combo_avail.png)";
                }
                else {
                    var url1 = element.style.backgroundImage;
                    url1 = url1.substring(url1.indexOf("url(") + 4).replace(")", "");
                    document.getElementById('cdBtnStandard').style.backgroundImage = "url(Images/form_cb_avail.png)";
                    document.getElementById('cbInitImage').style.backgroundImage = "url(Images/form_cb_checked.png)";
                    document.getElementById('lblImage1').innerHTML = url1;
                    document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_avail.png)";
                    document.getElementById('lblRollover').style.color = "#000000";
                    document.getElementById('lblImage2').style.color = "#000000";
                    if (element.getAttribute("onmouseover") != null) {
                        var url2 = element.getAttribute("onmouseover");
                        url2 = url2.substring(url2.indexOf("RollOver(") + 10).replace(")", "");
                        document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_checked.png)";
                        document.getElementById('lblImage2').innerHTML = url2;
                    }
                }
            }
            if (element.id.indexOf("inputText") > -1) {
                tempElement = document.getElementById(element.id.replace("inputText", "inputLabel"));
                tagLoc = element.getAttribute("tagLoc");
                if (element.getAttribute("limit") != "no") {
                    document.getElementById('cbLimitText').style.backgroundImage = "url(Images/form_cb_checked.png)";
                    document.getElementById('textLimit').value = element.getAttribute("limit");
                    document.getElementById('textLimit').disabled = false;
                    document.getElementById('textLimit').style.borderColor = "#000000";
                    document.getElementById('textLimit').style.color = "#000000";
                }
                else {
                    document.getElementById('cbLimitText').style.backgroundImage = "url(Images/form_cb_avail.png)";
                }
                document.getElementById('lblLimit').style.color = "#000000";
                document.getElementById('lblChars').style.color = "#000000";
                document.getElementById('lblValid').style.color = "#000000";
                document.getElementById('lblFontSize').style.color = "#000000";
                document.getElementById('fontSizeResult').innerHTML = element.style.fontSize;
                document.getElementById('fontSizeResult').style.color = "#000000";
                document.getElementById('comboFontSize').style.backgroundImage = "url(Images/form_combo_avail.png)";
                document.getElementById('typeResult').innerHTML = element.getAttribute("valid");
                document.getElementById('typeResult').style.color = "#000000";
                document.getElementById('comboValidation').style.backgroundImage = "url(Images/form_combo_avail.png)";
                document.getElementById('lblBorderStyle').style.color = "#000000";
                document.getElementById('bStyleResult').style.color = "#000000";
                document.getElementById('comboStyle').style.backgroundImage = "url(Images/form_combo_avail.png)";
                var temp = element.style.borderStyle.substring(0, 1).toUpperCase();
                var bStyle = temp + element.style.borderTopStyle.substring(1) + " " + element.style.borderTopWidth;
                document.getElementById('bStyleResult').innerHTML = bStyle;
                document.getElementById('lblBackColour').style.color = "#000000";
                document.getElementById('backColour').style.backgroundColor = element.style.backgroundColor;
                document.getElementById('backColour').style.borderColor = "#000000";
                document.getElementById('lblBorderColour').style.color = "#000000";
                document.getElementById('borderColourOut').style.backgroundColor = element.style.borderColor;
                document.getElementById('borderColourOut').style.borderColor = "#000000";
                document.getElementById('borderColourIn').style.borderColor = "#000000";
                document.getElementById('lblFontColour').style.color = "#000000";
                document.getElementById('fontColour').style.backgroundColor = element.style.color;
                document.getElementById('fontColour').style.borderColor = "#000000";
                document.getElementById('lblRequired').style.color = "#000000";
                document.getElementById('cbRequired').style.backgroundImage = "url(Images/form_cb_avail.png)";
                for (var i = 0; i < tempElement.childNodes.length; i++) {
                    if (tempElement.childNodes[i].id != null) {
                        if (tempElement.childNodes[i].id.indexOf("compStar") > -1) {
                            if (tempElement.childNodes[i].style.display == "inline") {
                                document.getElementById('cbRequired').style.backgroundImage = "url(Images/form_cb_checked.png)";
                            }
                        }
                    }
                }
                setBorders(element, "#000000");
                setBorders(tempElement, "#000000");
                if (element.style.borderTopStyle != "none" && element.style.borderTopWidth != "0px") {
                    disableBorders(element);
                }
            }
            if (element.id.indexOf("inputLabel") > -1) {
                tempElement = document.getElementById(element.id.replace("inputLabel", "inputText"));
                if (tempElement == null) {
                    tempElement = document.getElementById(element.id.replace("inputLabel", "inputCombo"));
                }
                var temp = element.innerHTML.substring(0, element.innerHTML.indexOf("<"));
                document.getElementById('lblText').style.color = "#000000";
                document.getElementById('lblFontSize').style.color = "#000000";
                document.getElementById('fontSizeResult').innerHTML = element.style.fontSize;
                document.getElementById('fontSizeResult').style.color = "#000000";
                document.getElementById('comboFontSize').style.backgroundImage = "url(Images/form_combo_avail.png)";
                document.getElementById('textValue').value = temp;
                document.getElementById('textValue').disabled = false;
                document.getElementById('textValue').style.borderColor = "#000000";
                document.getElementById('textValue').style.color = "#000000";
                document.getElementById('fontSizeResult').innerHTML = element.style.fontSize;
                document.getElementById('fontSizeResult').style.color = "#000000";
                document.getElementById('comboFontSize').style.backgroundImage = "url(Images/form_combo_avail.png)";
                setBorders(element, "#000000");
                setBorders(tempElement, "#000000");
                if (tempElement.id.indexOf('inputText') > -1) {
                    if (tempElement.style.borderTopStyle != "none" && tempElement.style.borderTopWidth != "0px") {
                        disableBorders(tempElement);
                    }
                }
            }
            if (element.id.indexOf("compKey") > -1) {
                var temp = element.innerHTML.substring(element.innerHTML.toLowerCase().indexOf("</span>") + 7);
                var temp2 = temp.substring(0, temp.indexOf("<"));
                document.getElementById('lblText').style.color = "#000000";
                document.getElementById('lblFontSize').style.color = "#000000";
                document.getElementById('fontSizeResult').innerHTML = element.style.fontSize;
                document.getElementById('fontSizeResult').style.color = "#000000";
                document.getElementById('comboFontSize').style.backgroundImage = "url(Images/form_combo_avail.png)";
                document.getElementById('textValue').value = temp2;
                document.getElementById('textValue').disabled = false;
                document.getElementById('textValue').style.borderColor = "#000000";
                document.getElementById('textValue').style.color = "#000000";
            }
        }
    }
}

function setBorders(element, colour) {
    for (var i = 0; i < element.childNodes.length; i++) {
        if (element.childNodes[i].className != null) {
            if (element.childNodes[i].className.indexOf("Border") > -1) {
                element.childNodes[i].style.borderColor = colour;
            }
        }
    }
}

function clearAll() {
    var mainPanel = document.getElementById('content');
    document.getElementById('addFieldItem').style.backgroundImage = "url(Images/add_field_item_disabled.png)";
    for (var i = 0; i < mainPanel.childNodes.length; i++) {
        if (mainPanel.childNodes[i].id != null) {
            if (mainPanel.childNodes[i].id != "") {
                if (mainPanel.childNodes[i].id.indexOf("lbl") > -1) {
                    if (mainPanel.childNodes[i].id.indexOf("lblStandard") < 0 && mainPanel.childNodes[i].id.indexOf("lblImage") < 0 &&
                                mainPanel.childNodes[i].id.indexOf("lblImage1") < 0) {
                        mainPanel.childNodes[i].style.color = "#929396";
                    }
                }
                if (mainPanel.childNodes[i].id.indexOf("Result") > -1) {
                    mainPanel.childNodes[i].style.color = "#929396";
                }
                if (mainPanel.childNodes[i].id.indexOf("text") == 0) {
                    mainPanel.childNodes[i].value = "";
                    mainPanel.childNodes[i].disabled = true;
                    mainPanel.childNodes[i].style.borderColor = "#929396";
                }
                if (mainPanel.childNodes[i].id.indexOf("cb") == 0) {
                    if (mainPanel.childNodes[i].id.indexOf("cdBtnStandard") < 0 && mainPanel.childNodes[i].id.indexOf("cbInitImage") < 0) {
                        mainPanel.childNodes[i].style.backgroundImage = "url(Images/form_cb_unavail.png)";
                    }
                }
                if (mainPanel.childNodes[i].id.indexOf("combo") == 0) {
                    mainPanel.childNodes[i].style.backgroundImage = "url(Images/form_combo_unavail.png)";
                }
                if (mainPanel.childNodes[i].id.indexOf("Colour") > -1) {
                    mainPanel.childNodes[i].style.backgroundColor = "#e9e9ea"
                    mainPanel.childNodes[i].style.borderColor = "#929396"
                }
                if (mainPanel.childNodes[i].id == "typeResult") {
                    mainPanel.childNodes[i].innerHTML = "Any Text";
                }
                if (mainPanel.childNodes[i].id == "fontSizeResult") {
                    mainPanel.childNodes[i].innerHTML = "0px";
                }
                if (mainPanel.childNodes[i].id == "bStyleResult") {
                    mainPanel.childNodes[i].innerHTML = "None";
                }
                if (mainPanel.childNodes[i].id == "dropDownOptionsResult") {
                    mainPanel.childNodes[i].innerHTML = "Option 1";
                }
            }
        }
    }
}

function setButtonType() {
    clearAll();
    var standard = document.getElementById('cdBtnStandard').style.backgroundImage.indexOf("checked") > -1;
    $("#" + submitButton.id).resizable('destroy');
    var oldButton = submitButton;
    var oldButtonW = oldButton.style.width;
    var oldButtonH = oldButton.style.height;
    var oldButtonL = oldButton.style.left;
    var oldButtonT = oldButton.style.top;
    if (!standard) {
        document.getElementById('cdBtnStandard').style.backgroundImage = "url(Images/form_cb_checked.png)";
        document.getElementById('cbInitImage').style.backgroundImage = "url(Images/form_cb_avail.png)";
        document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_unavail.png)";
        document.getElementById('lblRollover').style.color = "#929396";
        document.getElementById('lblImage2').style.color = "#929396";
        var newButton = document.createElement("div");
        inputPanel.replaceChild(newButton, oldButton);
        newButton.setAttribute("onclick", "select(this)");
        newButton.style.background = "#9c9c9c";
        newButton.style.width = oldButtonW;
        newButton.style.height = oldButtonH;
        newButton.style.left = oldButtonL;
        newButton.style.top = oldButtonT;
        newButton.style.lineHeight = buttonLineHeight;
        newButton.style.fontFamily = buttonFontFamily;
        newButton.style.fontSize = buttonFontSize;
        newButton.style.color = buttonFontColour;
        newButton.style.cursor = "move";
        newButton.innerHTML = buttonText;
        newButton.setAttribute("id", "submitButton" + mainCount);
        addBorders(newButton);
        setDraggable("#submitButton" + mainCount);
        setResizable("#submitButton" + mainCount);
        document.getElementById('lblImage1').innerHTML = "No Image Set";
        document.getElementById('lblImage2').innerHTML = "No Image Set";
        submitButton = newButton;
    }
    else {
        document.getElementById('cdBtnStandard').style.backgroundImage = "url(Images/form_cb_avail.png)";
        document.getElementById('cbInitImage').style.backgroundImage = "url(Images/form_cb_avail.png)";
        var newButton = document.createElement("div");
        inputPanel.replaceChild(newButton, oldButton);
        newButton.setAttribute("onclick", "select(this)");
        newButton.style.backgroundImage = "url(" + buttonImage1 + ")";
        newButton.style.width = oldButtonW;
        newButton.style.height = oldButtonH;
        newButton.style.left = oldButtonL;
        newButton.style.top = oldButtonT;
        newButton.style.cursor = "move";
        newButton.setAttribute("id", "submitButton" + mainCount);
        addBorders(newButton);
        setDraggable("#submitButton" + mainCount);
        setResizable("#submitButton" + mainCount);
        submitButton = newButton;
        setButtonImage('init');
    }
}

function setButtonImage(id) {
    imageLoc = id;
    parent.showImagegallery("", "", submitButton.offsetHeight, submitButton.offsetWidth, id.replace("#", ""), "");
}

function setImage(imageURL) {
    if (imageLoc == "init") {
        submitButton.style.backgroundImage = "url(" + imageURL + ")";
        submitButton.setAttribute("onmouseout", "setRollOver('" + imageURL + "')");
        document.getElementById('lblImage1').innerHTML = imageURL;
        document.getElementById('cbInitImage').style.backgroundImage = "url(Images/form_cb_checked.png)";
        document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_avail.png)";
        document.getElementById('lblRollover').style.color = "#000000";
        document.getElementById('lblImage2').style.color = "#000000";
    }
    else {
        submitButton.setAttribute("onmouseover", "setRollOver('" + imageURL + "')");
        document.getElementById('lblImage2').innerHTML = imageURL;
        document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_checked.png)";
    }
}

function setImageResize(imageURL, size) {
    if (imageLoc == "init") {
        submitButton.style.width = size.split(';')[0] + "px";
        submitButton.style.height = size.split(';')[1] + "px";
        submitButton.style.backgroundImage = "url(" + imageURL + ")";
        submitButton.setAttribute("onmouseout", "setRollOver('" + imageURL + "')");
        document.getElementById('lblImage1').innerHTML = imageURL;
        document.getElementById('cbInitImage').style.backgroundImage = "url(Images/form_cb_checked.png)";
        document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_avail.png)";
        document.getElementById('lblRollover').style.color = "#000000";
        document.getElementById('lblImage2').style.color = "#000000";
    }
    else {
        submitButton.setAttribute("onmouseover", "setRollOver('" + imageURL + "')");
        document.getElementById('lblImage2').innerHTML = imageURL;
        document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_checked.png)";
    }
}

function setRollOver(imageURL) {
    submitButton.style.backgroundImage = "url(" + imageURL + ")";
}

function showValidateDropDown() {
    if (document.getElementById('comboValidation').style.backgroundImage.indexOf("form_combo_avail") > -1) {
        if (document.getElementById('inputTypeContainer').style.display == "inline") {
            document.getElementById('inputTypeContainer').style.display = "none";
        }
        else {
            document.getElementById('inputTypeContainer').style.display = "inline";
        }
    }
}

function setValidate(id) {
    var input = document.getElementById(selectedItem);
    if (selectedItem.indexOf("inputLabel") > -1) {
        input = document.getElementById(element.id.replace("inputText", "inputLabel"));
    }
    document.getElementById('typeResult').innerHTML = id;
    if (id == "Any") {
        input.setAttribute("valid", "Any Text");
        setValidateText("Accepts any text");
    }
    else {
        if (id == "Numbers") {
            input.setAttribute("valid", "Numbers");
            setValidateText("Accepts numbers only");
        }
        if (id == "Email") {
            input.setAttribute("valid", "Email");
            setValidateText("Accepts email adresses");
        }
        if (id == "Postcode") {
            input.setAttribute("valid", "Postcode");
            setValidateText("Accepts postcodes");
        }
    }
    document.getElementById('inputTypeContainer').style.display = "none";
}

function showBStyleDropDown() {
    if (document.getElementById('comboStyle').style.backgroundImage.indexOf("form_combo_avail") > -1) {
        if (document.getElementById('bStyleContainer').style.display == "inline") {
            document.getElementById('bStyleContainer').style.display = "none";
        }
        else {
            document.getElementById('bStyleContainer').style.display = "inline";
        }
    }
}

function setBStyle(id) {
    var element;
    element = document.getElementById(selectedItem);
    if (id == "None") {
        if (element.style.borderStyle == "solid") {
            decreaseBorder(element, "1", true);
        }
        if (element.style.borderStyle == "inset") {
            decreaseBorder(element, "2", true);
        }
        element.style.borderStyle = "none";
        element.style.borderWidth = "0px";
    }
    if (id == "Solid 1px") {
        if (element.style.borderStyle == "none") {
            increaseBorder(element, "1");
        }
        if (element.style.borderStyle == "inset") {
            decreaseBorder(element, "1", false);
        }
        element.style.borderStyle = "solid";
        element.style.borderWidth = "1px";
        if (element.style.borderColor == "#f4f4f5") {
            element.style.borderColor = "#000000"
        }
    }
    if (id == "Inset 2px") {
        if (element.style.borderStyle == "none") {
            increaseBorder(element, "2");
        }
        if (element.style.borderStyle == "solid") {
            increaseBorder(element, "1");
        }
        element.style.borderStyle = "inset";
        element.style.borderWidth = "2px";
        if (element.style.borderColor == "#f4f4f5") {
            element.style.borderColor = "#000000"
        }
    }
    document.getElementById('bStyleResult').innerHTML = id;
    document.getElementById('bStyleContainer').style.display = "none";
}

function increaseBorder(element, size) {
    element.style.width = (parseInt(element.style.width.replace("px", "")) - (size * 2)) + "px";
    element.style.height = (parseInt(element.style.height.replace("px", "")) - (size * 2)) + "px";
    disableBorders(element);
}

function decreaseBorder(element, size, enable) {
    element.style.width = (parseInt(element.style.width.replace("px", "")) + (size * 2)) + "px";
    element.style.height = (parseInt(element.style.height.replace("px", "")) + (size * 2)) + "px";
    if (enable) {
        enableBorders(element);
    }
}

function disableBorders(element) {
    for (var i = 0; i < element.childNodes.length; i++) {
        if (element.childNodes[i].className != null) {
            if (element.childNodes[i].className.indexOf("Border") > -1) {
                element.childNodes[i].style.display = "none";
            }
        }
    }
}

function enableBorders(element) {
    for (var i = 0; i < element.childNodes.length; i++) {
        if (element.childNodes[i].className != null) {
            if (element.childNodes[i].className.indexOf("Border") > -1) {
                element.childNodes[i].style.display = "inline";
            }
        }
    }
}

function showFontSizeDropDown() {
    if (document.getElementById('comboFontSize').style.backgroundImage.indexOf("form_combo_avail") > -1) {
        if (document.getElementById('fontSizeContainer').style.display == "inline") {
            document.getElementById('fontSizeContainer').style.display = "none";
        }
        else {
            document.getElementById('fontSizeContainer').style.display = "inline";
        }
    }
}

function setFontSize(id) {
    var element;
    element = document.getElementById(selectedItem);
    element.style.fontSize = id;
    element.style.lineHeight = (parseInt(id.replace("px", "")) + 4) + "px";
    if (selectedItem.indexOf("submitButton") > -1) {
        buttonFontSize = id;
    }
    document.getElementById('fontSizeContainer').style.display = "none";
    document.getElementById('fontSizeResult').innerHTML = id;
    element.style.lineHeight = element.style.height;
}

function limitText(element) {
    if (document.getElementById('cbLimitText').style.backgroundImage.indexOf("form_cb_unavail") < 0 && document.getElementById('cbLimitText').style.backgroundImage != "") {
        var element2 = document.getElementById(selectedItem);
        if (element.style.backgroundImage.indexOf("form_cb_checked.png") > -1) {
            element.style.backgroundImage = "url(Images/form_cb_avail.png)";
            for (var i = 0; i < element2.childNodes.length; i++) {
                if (element2.childNodes[i].className != null) {
                    if (element2.childNodes[i].className.indexOf("limit") > -1) {
                        element2.childNodes[i].style.display = "none";
                        element2.setAttribute("limit", "no");
                        document.getElementById('textLimit').value = "";
                        document.getElementById('textLimit').disabled = true;
                        document.getElementById('textLimit').style.borderColor = "#929396";
                        document.getElementById('textLimit').style.color = "#929396";
                    }
                }
            }
        }
        else {
            element.style.backgroundImage = "url(Images/form_cb_checked.png)";
            for (var i = 0; i < element2.childNodes.length; i++) {
                if (element2.childNodes[i].className != null) {
                    if (element2.childNodes[i].className.indexOf("limit") > -1) {
                        element2.childNodes[i].style.display = "inline";
                        document.getElementById('textLimit').value = element2.childNodes[i].innerHTML;
                        element2.setAttribute("limit", element2.childNodes[i].innerHTML);
                        prevVal = element2.childNodes[i].innerHTML;
                        document.getElementById('textLimit').disabled = false;
                        document.getElementById('textLimit').style.borderColor = "#000000";
                        document.getElementById('textLimit').style.color = "#000000";
                    }
                }
            }
        }
    }
}
var prevVal = "";

function setLimitText(inputTextElement) {
    var text = inputTextElement.value;
    if (!IsNumeric(text)) {
        parent.showMessage("form_not_numeric", 3000, "small");
        inputTextElement.value = prevVal;
    }
    else {
        prevVal = text;
        limitElement.innerHTML = text;
        element.setAttribute("limit", text);
    }
}

function IsNumeric(sText) {
    var ValidChars = "0123456789";
    var IsNumber = true;
    var Char;
    for (i = 0; i < sText.length && IsNumber == true; i++) {
        Char = sText.charAt(i);
        if (ValidChars.indexOf(Char) == -1) {
            IsNumber = false;
        }
    }
    return IsNumber;
}

function savePanel() {
    for (var i = 0; i < inputPanel.childNodes.length; i++) {
        removeAll(inputPanel.childNodes[i]);
    }
    var tempStr = inputPanel.innerHTML.replace("select(this)", "").replace("unselectable=\"on\"", "");
    var strTextResult = "";
    var tempArray = tempStr.split(' ');
    for (var j = 0; j < tempArray.length; j++) {
        if (tempArray[j].toLowerCase().indexOf("jquery") > -1) {
            if (tempArray[j].indexOf(">") > -1) {
                tempArray[j] = tempArray[j].substring(tempArray[j].indexOf('>'));
            }
            else {
                tempArray[j] = "";
            }
        }
        if (tempArray[j].toLowerCase().indexOf("class=") > -1) {
            tempArray[j] = "";
        }
        if (tempArray[j].length > 1) {
            strTextResult += tempArray[j] + " ";
        }
    }
    inputPanel.innerHTML = strTextResult;
    var retVal = "";
    var validPresent = false;
    for (var i = 0; i < inputPanel.childNodes.length; i++) {
        var bComp = false;
        if (inputPanel.childNodes[i].id != null) {
            inputPanel.childNodes[i].style.cursor = "default";
            if (inputPanel.childNodes[i].id.indexOf("submitButton") > -1) {
                inputPanel.childNodes[i].style.cursor = "pointer";
                var temp = inputPanel.childNodes[i].style.cssText.toLowerCase();
                if (document.getElementById('cdBtnStandard').style.backgroundImage.indexOf("checked") > -1) {
                    var temp2 = temp.toLowerCase().split(';');
                    var temp3 = "";
                    for (var j = 0; j < temp2.length; j++) {
                        if (temp2[j].indexOf("background") == -1 && temp2[j].indexOf("line-height") == -1) {
                            temp3 += temp2[j] + ";";
                        }
                    }
                    retVal += "<input type=\"button\" id=\"" + inputPanel.childNodes[i].id + "\" value=\"" + inputPanel.childNodes[i].innerHTML +
                        "\" onclick=\"validateData(this)\" style=\"" + temp3 + "\" />";
                }
                else {
                    retVal += "<div id=\"" + inputPanel.childNodes[i].id + "\" onclick=\"validateData(this)\" style=\"" + temp + "\"";
                    if (document.getElementById('lblImage2').innerHTML.indexOf("http") > -1) {
                        retVal += " onmouseover='setRollOver(this, \"url(" + document.getElementById('lblImage2').innerHTML + ")\")'" +
                                      " onmouseout='setRollOver(this, \"url(" + document.getElementById('lblImage1').innerHTML + ")\")'";
                    }
                    retVal += "></div>";
                }
            }
            if (inputPanel.childNodes[i].id.indexOf("inputLabel") > -1) {
                var temp = inputPanel.childNodes[i].style.cssText.toLowerCase();
                var inputLabelElement = inputPanel.childNodes[i];
                var textVal = inputLabelElement.innerHTML.substring(0, inputLabelElement.innerHTML.indexOf("<"));
                retVal += "<div id=\"" + inputLabelElement.id + "\" style=\"" + temp + "\">" + textVal;
                retVal += "<div style=\"position: absolute; width: 10px; display: ";
                var compElement = document.getElementById(inputLabelElement.id.replace("inputLabel", "compStar"));
                if (compElement.style.display == "inline") {
                    retVal += "inline;";
                    validPresent = true;
                }
                else {
                    retVal += "none;";
                    validPresent = false;
                }
                retVal += " font-family: Arial; height: 10px; color: #ff0000; font-size: 24px; top: 0px; left: -12px\" id=\"" + compElement.id + "\">*</div>";
                retVal += "</div>";
            }
            if (inputPanel.childNodes[i].id.indexOf("inputText") > -1) {
                var valid = inputPanel.childNodes[i].getAttribute("valid");
                var temp = inputPanel.childNodes[i].style.cssText.toLowerCase();
                var left = (parseInt(inputPanel.childNodes[i].style.left.replace("px", "")) + inputPanel.childNodes[i].offsetWidth + 5) + "px";
                var top = inputPanel.childNodes[i].style.top;
                if (inputPanel.childNodes[i].getAttribute("multi") == "yes") {
                    retVal += "<textarea cols=\"20\" rows=\"2\" id=\"" + inputPanel.childNodes[i].id + "\" style=\"" + temp + "\"" +
                                " valid=\"" + inputPanel.childNodes[i].getAttribute("valid") + "\" limit=\"" + inputPanel.childNodes[i].getAttribute("limit") + "\"" +
                                " tagLoc=\"" + inputPanel.childNodes[i].getAttribute("tagLoc") + "\"" +
                                " onkeyup=\"checkCount(this, \"" + inputPanel.childNodes[i].getAttribute("limit") + "\")\"";
                    if (valid == "Any Text" && validPresent) {
                        retVal += " onblur=\"validateTextComp(this)\"";
                    }
                    if (valid == "Numbers") {
                        retVal += " onblur=\"validateNumbers(this)\"";
                    }
                    if (valid == "Postcode") {
                        retVal += " onblur=\"validatePostcode(this)\"";
                    }
                    if (valid == "Email") {
                        retVal += " onblur=\"validateEmail(this)\"";
                    }
                    retVal += "></textarea>";
                }
                else {
                    var maxCount = inputPanel.childNodes[i].getAttribute("limit");
                    retVal += "<input type=\"text\" id=\"" + inputPanel.childNodes[i].id + "\" valid=\"" + inputPanel.childNodes[i].getAttribute("valid") + "\"" +
                                " tagLoc=\"" + inputPanel.childNodes[i].getAttribute("tagLoc") + "\"" +
                                " limit=\"" + inputPanel.childNodes[i].getAttribute("limit") + "\" style=\"" + temp + "\"";
                    if (maxCount != "no") {
                        retVal += " maxlength=\"" + maxCount + "\"";
                    }
                    if (valid == "Any Text" && validPresent) {
                        retVal += " onblur=\"validateTextComp(this)\" ";
                    }
                    if (valid == "Numbers") {
                        retVal += " onblur=\"validateNumbers(this)\" ";
                    }
                    if (valid == "Postcode") {
                        retVal += " onblur=\"validatePostcode(this)\" ";
                    }
                    if (valid == "Email") {
                        retVal += " onblur=\"validateEmail(this)\" ";
                    }
                    retVal += "/>";
                }
                if (valid != "Any Text") {
                    retVal += "<div id=\"" + inputPanel.childNodes[i].id.replace("inputText", "validate") + "\" style=\"position:absolute; width:20px; height:20px; display:inline; " +
                                            "background-image:url(http://image.locallinkup.com/console/red_cross_20.png); left:" + left + "; top:" + top + ";\"></div>";
                }
                else if (validPresent) {
                    retVal += "<div id=\"" + inputPanel.childNodes[i].id.replace("inputText", "validate") + "\" style=\"position:absolute; width:20px; height:20px; display:inline; " +
                                            "background-image:url(http://image.locallinkup.com/console/red_cross_20.png); left:" + left + "; top:" + top + ";\"></div>";
                }
            }
            if (inputPanel.childNodes[i].id.indexOf("compKey") > -1) {
                var temp = inputPanel.childNodes[i].style.cssText;
                retVal += "<div id=\"" + inputPanel.childNodes[i].id + "\" style=\"" + temp + "\">" + inputPanel.childNodes[i].innerHTML + "</div>";
            }
            if (inputPanel.childNodes[i].id.indexOf("inputCombo") > -1) {
                var temp = inputPanel.childNodes[i].style.cssText.toLowerCase();
                var left = (parseInt(inputPanel.childNodes[i].style.left.replace("px", "")) + inputPanel.childNodes[i].offsetWidth + 5) + "px";
                var top = inputPanel.childNodes[i].style.top;
                var options = inputPanel.childNodes[i].getAttribute('options').split('^^');
                retVal += "<select id=\"" + inputPanel.childNodes[i].id + "\" options=\"" + inputPanel.childNodes[i].getAttribute('options') + "\" tagLoc=\"" +
                            inputPanel.childNodes[i].getAttribute("tagLoc") + "\"  style=\"" + temp + "\">";
                for (var j = 0; j < options.length; j++) {
                    retVal += "<option onclick=\"setComboOption(this)\">" + options[j] + "</option>";
                }
                retVal += "</select>";
                if (validPresent) {
                    retVal += "<div id=\"" + inputPanel.childNodes[i].id.replace("inputCombo", "validate") + "\" style=\"position:absolute; width:20px; height:20px; display:inline; " +
                                            "background-image:url(http://image.locallinkup.com/console/red_cross_20.png); left:" + left + "; top:" + top + ";\"></div>";
                }
            }
            if (inputPanel.childNodes[i].id.indexOf("inputCheck") > -1) {
                var element = inputPanel.childNodes[i];
                var temp = element.style.cssText.toLowerCase();
                var height = element.style.lineHeight;
                var checked = element.getAttribute("checked");
                var text = element.getAttribute("text");
                retVal += "<div id=\"" + element.id + "\" checked=\"" + checked + "\" text=\"" + text + "\" style=\"" + temp + "\">";
                retVal += "<input id=\"checkBox\" class=\"floatLeft\" type=\"checkBox\" style=\"position:relative;\"";
                if (checked == "true") {
                    retVal += " checked=\"checked\" ";
                }
                retVal += "/><div id=\"checkText\" class=\"floatLeft\" style=\"position:relative; height:" + height + "; min-width:20px;\">" + text + "</div></div>";
            }
        }
    }
    parent.setForm(inputPanel.style.width, inputPanel.style.height, retVal);
    closeEditor();
}

function removeAll(element) {
    $("#" + element.id).resizable('destroy');
    for (var i = 0; i < element.childNodes.length; i++) {
        if (element.childNodes[i].tagName != null) {
            if (element.childNodes[i].tagName.toLowerCase() == "div") {
                if (element.childNodes[i].id == null) {
                    element.removeChild(element.childNodes[i]);
                    i--;
                }
                else if (element.childNodes[i].id == "") {
                    element.removeChild(element.childNodes[i]);
                    i--;
                }
                else {
                    element.childNodes[i].id = element.childNodes[i].id.replace("\"", "");
                }
            }
        }
    }
}

function increase(dir) {
    if (dir == "width") {
        var newWidth = parseInt(inputPanel.style.width.replace("px", "")) + 10;
        if (newWidth > maxWidth) {
            parent.showMessage("form_max_width", 3000, "small");
        }
        else {
            inputPanel.style.width = newWidth + "px";
            document.getElementById('formWidth').innerHTML = newWidth;
            inputPanel.style.left = ((610 - newWidth) / 2) + "px"
        }
    }
    if (dir == "height") {
        var newHeight = (parseInt(inputPanel.style.height.replace("px", "")) + 10).toString();
        inputPanel.style.height = newHeight + "px";
        document.getElementById('formHeight').innerHTML = newHeight;
    }
}

function decrease(dir) {
    if (dir == "width") {
        var newWidth = parseInt(inputPanel.style.width.replace("px", "")) - 10;
        inputPanel.style.width = newWidth + "px";
        document.getElementById('formWidth').innerHTML = newWidth;
        inputPanel.style.left = ((610 - newWidth) / 2) + "px"
    }
    if (dir == "height") {
        var newHeight = (parseInt(inputPanel.style.height.replace("px", "")) - 10).toString();
        inputPanel.style.height = newHeight + "px";
        document.getElementById('formHeight').innerHTML = newHeight;
    }
}

function setContent(data, element) {
    var bits = data.split("^^");
    mainCount = bits[2];
    maxWidth = parseInt(bits[3]);
    var newPanel = document.createElement("div");
    newPanel.setAttribute("id", "dragMeInput" + mainCount);
    newPanel.style.position = "absolute";
    newPanel.style.border = "dotted 1px #000000";
    newPanel.style.left = ((610 - parseInt(bits[0])) / 2).toString() + "px";
    newPanel.style.top = "0px";
    newPanel.style.width = bits[0] + "px";
    newPanel.style.height = bits[1] + "px";
    if (maxWidth > 600) {
        maxWidth = 600;
    }

    var retVal2 = ""
    for (var i = 0; i < element.childNodes.length; i++) {
        element.childNodes[i].style.cursor = "move";
        if (element.childNodes[i].id.indexOf("submitButton") > -1) {
            element.childNodes[i].style.cursor = "move";
            var temp = element.childNodes[i].style.cssText.toLowerCase();
            retVal2 += "<div id=\"" + element.childNodes[i].id + "\" onclick=\"select(this)\" style='" + temp + "'";
            if (temp.toLowerCase().indexOf("background") > -1) {
                document.getElementById('cdBtnStandard').style.backgroundImage = "url(Images/form_cb_avail.png)";
                document.getElementById('lblRollover').style.color = "#000000";
                document.getElementById('lblImage2').style.color = "#000000";
                var url1 = element.childNodes[i].style.backgroundImage;
                url1 = url1.substring(url1.indexOf("http"));
                url1 = url1.substring(0, url1.indexOf(")"));
                document.getElementById('lblImage1').innerHTML = url1;
                document.getElementById('cbInitImage').style.backgroundImage = "url(Images/form_cb_checked.png)";
                if (element.childNodes[i].getAttribute('onmouseout') != null) {
                    retVal2 += " onmouseout='setRollOver(\"" + url1 + "\")'";
                    document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_avail.png)";
                    document.getElementById('lblImage2').innerHTML = "No Image Set";
                    var url2 = "";
                    if (element.childNodes[i].getAttribute("onmouseover") != null) {
                        url2 = element.childNodes[i].getAttribute("onmouseover");
                        url2 = url2.substring(url2.indexOf("http"));
                        url2 = url2.substring(0, url2.indexOf(")"));
                        retVal2 += " onmouseover='setRollOver(\"" + url2 + "\")'";
                        document.getElementById('lblImage2').innerHTML = url2;
                        document.getElementById('cbRollImage').style.backgroundImage = "url(Images/form_cb_checked.png)";

                    }
                }
                retVal2 += "></div>";
            }
            else {
                retVal2 += "; text-align:center;" +
                                  " line-height:25px;" +
                                  " background-color:#9c9c9c;" +
                                  " background-image:none;\">" + element.childNodes[i].value + "</div>";
                document.getElementById('cdBtnStandard').style.backgroundImage = "url(Images/form_cb_checked.png)";
            }
        }
        if (element.childNodes[i].id.indexOf("inputLabel") > -1) {
            element.childNodes[i].style.cursor = "move";
            var temp = element.childNodes[i].style.cssText.toLowerCase();
            retVal2 += "<div id=\"" + element.childNodes[i].id + "\" onclick=\"select(this)\" style=\"" + temp + "\">" + element.childNodes[i].innerHTML + "</div>";
            if (element.childNodes[i].innerHTML.indexOf("compStar") > -1) {
                if (element.childNodes[i].innerHTML.indexOf("inline") > -1) {
                    compulsoryCount++;
                    compKey = true;
                }
            }
            elementCount++;
        }
        if (element.childNodes[i].id.indexOf("inputText") > -1) {
            element.childNodes[i].style.cursor = "move";
            var temp = element.childNodes[i].style.cssText.toLowerCase();
            var valid = element.childNodes[i].getAttribute("valid");
            var tagLoc = element.childNodes[i].getAttribute("tagLoc");
            retVal2 += "<div id=\"" + element.childNodes[i].id +
                              "\" onclick=\"select(this)\"" +
                              " style=\"" + temp + "\"" +
                              " valid=\"" + valid + "\"" +
                              " tagLoc=\"" + tagLoc + "\"" +
                              " limit=\"" + element.childNodes[i].getAttribute("limit") + "\"";
            if (element.childNodes[i].tagName.toLowerCase() == "textarea") {
                retVal2 += " multi=\"yes\"";
            }
            else {
                retVal2 += " multi=\"no\"";
            }
            retVal2 += ">" + valid + "<div class=limitDiv";
            if (element.childNodes[i].getAttribute("onkeyup") != null) {
                retVal2 += " style=\"display:inline;\">" + element.childNodes[i].getAttribute("limit") + "</div>";
            }
            else if (element.childNodes[i].getAttribute("maxlength") != null) {
                retVal2 += " style=\"display:inline;\">" + element.childNodes[i].getAttribute("maxlength") + "</div>";
            }
            else {
                retVal2 += " style=\"display:none;\">20</div>";
            }
            retVal2 += "</div>";
        }
        if (element.childNodes[i].id.indexOf("inputCombo") > -1) {
            element.childNodes[i].style.cursor = "move";
            var temp = element.childNodes[i].style.cssText.toLowerCase();
            var options = element.childNodes[i].getAttribute("options");
            var tagLoc = element.childNodes[i].getAttribute("tagLoc");
            var topPos = ((parseInt(element.childNodes[i].style.height.replace("px", "")) - 12) / 2);
            retVal2 += "<div id=\"" + element.childNodes[i].id +
                              "\" onclick=\"select(this)\"" +
                              " style=\"" + temp + "\"" +
                              " options=\"" + options + "\"" +
                              " tagLoc=\"" + tagLoc + "\">Drop Down" +
                              "<img style=\"position:absolute; right:4px; top:" + topPos + "px;\" width=\"17px\" height=\"11px\" src=\"Images/form_drop_down_arrow.png\"/></div>";
        }
        if (element.childNodes[i].id.indexOf("inputCheck") > -1) {
            var element2 = element.childNodes[i];
            var temp = element2.style.cssText.toLowerCase();
            var height = element2.style.lineHeight;
            var checked = element2.getAttribute("checked");
            var text = element2.getAttribute("text");
            retVal2 += "<div id=\"" + element2.id + "\" checked=\"" + checked + "\" text=\"" + text + "\" onclick=\"select(this)\" style=\"" + temp + "\">";
            retVal2 += "<input id=\"checkBox\" class=\"floatLeft\" type=\"checkBox\" style=\"position:relative;\"";
            if (checked == "true") {
                retVal2 += " checked=\"checked\" ";
            }
            retVal2 += "/><div id=\"checkText\" class=\"floatLeft\" style=\"position:relative; height:" + height + "; min-width:20px;\">" + text + "</div></div>";
        }
        if (element.childNodes[i].id.indexOf("compKey") > -1) {
            element.childNodes[i].style.cursor = "move";
            temp = element.childNodes[i].style.cssText;
            retVal2 += "<div id=\"" + element.childNodes[i].id + "\" onclick=\"select(this)\" style=\"" + temp + "\">" + element.childNodes[i].innerHTML + "</div>";
        }
    }
    newPanel.innerHTML = retVal2;
    document.getElementById('workingPanel').appendChild(newPanel);
    inputPanel = newPanel;
    inputPanel.style.backgroundColor = "#f2f2f2";
    for (var i = 0; i < newPanel.childNodes.length; i++) {
        if (newPanel.childNodes[i].id.indexOf("submitButton") > -1) {
            addBorders(newPanel.childNodes[i]);
            setDraggable("#" + newPanel.childNodes[i].id);
            setResizable("#" + newPanel.childNodes[i].id);
            submitButton = newPanel.childNodes[i];
        }
        if (newPanel.childNodes[i].id.indexOf("inputLabel") > -1) {
            var tempInput = document.getElementById(newPanel.childNodes[i].id.replace("inputLabel", "inputText"));
            addBorders(newPanel.childNodes[i]);
            setDraggable("#" + newPanel.childNodes[i].id);
            if (tempInput == null) {
                tempInput = document.getElementById(newPanel.childNodes[i].id.replace("inputLabel", "inputCombo"));
            }
            if (tempInput.getAttribute("tagLoc") == "left") {
                setResizableinputLabelLeft("#" + newPanel.childNodes[i].id);
            }
            else {
                setResizableinputLabelTop("#" + newPanel.childNodes[i].id);
            }
        }
        if (newPanel.childNodes[i].id.indexOf("inputText") > -1) {
            addBorders(newPanel.childNodes[i]);
            setDraggable("#" + newPanel.childNodes[i].id);
            setResizableInput("#" + newPanel.childNodes[i].id);
            if (newPanel.childNodes[i].style.borderStyle != "none" && newPanel.childNodes[i].style.borderSize != "0px") {
                disableBorders(newPanel.childNodes[i]);
            }
        }
        if (newPanel.childNodes[i].id.indexOf("inputCombo") > -1) {
            addBorders(newPanel.childNodes[i]);
            setDraggable("#" + newPanel.childNodes[i].id);
            setResizableInput("#" + newPanel.childNodes[i].id);
        }
        if (newPanel.childNodes[i].id.indexOf("compKey") > -1 ||
                    newPanel.childNodes[i].id.indexOf("inputCheck") > -1) {
            addBorders(newPanel.childNodes[i]);
            setDraggable("#" + newPanel.childNodes[i].id);
            setResizable("#" + newPanel.childNodes[i].id);
        }
    }
}

function deleteInput() {
    if (selectedItem.indexOf("inputLabel") > -1) {
        inputPanel.removeChild(document.getElementById(selectedItem));
        var item = document.getElementById(selectedItem.replace("inputLabel", "inputText"));
        if (item == null) {
            item = document.getElementById(selectedItem.replace("inputLabel", "inputCombo"));
        }
        inputPanel.removeChild(item);
        selectedItem = "";
    }
    else if (selectedItem.indexOf("inputCombo") > -1) {
        inputPanel.removeChild(document.getElementById(selectedItem));
        inputPanel.removeChild(document.getElementById(selectedItem.replace("inputCombo", "inputLabel")));
        inputPanel.removeChild(document.getElementById('comboOptions'));
        selectedItem = "";
    }
    else if (selectedItem.indexOf("inputText") > -1) {
        inputPanel.removeChild(document.getElementById(selectedItem));
        inputPanel.removeChild(document.getElementById(selectedItem.replace("inputText", "inputLabel")));
        selectedItem = "";
    }
    else if (selectedItem.indexOf("comboOption") > -1) {
        var deleteMe = document.getElementById('comboOptions');
        deleteMe.style.height = (20 * (deleteMe.childNodes.length - 1)) + "px";
        var comboOption = document.getElementById(selectedItem);
        var comboItem = document.getElementById(comboOption.className);
        deleteMe.removeChild(comboOption);
        for (var i = 0; i < deleteMe.childNodes.length; i++) {
            if (i == 0) {
                comboItem.setAttribute("options", deleteMe.childNodes[i].innerHTML);
            }
            else {
                comboItem.setAttribute("options", comboItem.getAttribute("options") + "^^" + deleteMe.childNodes[i].innerHTML);
            }
        }
    }
    else {
        parent.showMessage("form_select_input", 3000, "small");
    }
    clearAll();
}

function inputScroll(sender, eventArgs) {
    var wrapperDiv = document.getElementById('workingPanel');
    if (inputPanel.offsetHeight > wrapperDiv.offsetHeight) {
        var availableHeight = inputPanel.scrollHeight - wrapperDiv.offsetHeight;
        var sliderSmallChange = sender.get_smallChange();
        var sliderMinValue = sender.get_minimumValue();
        var sliderValue = sender.get_value();
        var steps = sliderValue / sliderSmallChange;
        var stepLength = availableHeight / ((sender.get_maximumValue() - sliderMinValue) / sliderSmallChange);
        var newPosition = (-1) * steps * stepLength;
        inputPanel.style.top = ((sliderValue == sliderMinValue) ? 0 : newPosition) + "px";
    }
}

function showInputSelector() {
    var tempDiv = document.getElementById('inputSelector');
    var timer = 0;
    if (tempDiv.offsetLeft < 85) {
        $(tempDiv).each(function(i) {
            timer = (timer * .8 + 800);
            $(this).animate({ left: "206px" }, timer);
        });
    }
    if (tempDiv.offsetLeft > 200) {
        $(tempDiv).each(function(i) {
            timer = (timer * .8 + 800);
            $(this).animate({ left: "80px" }, timer);
        });
    }
}

function setAddFieldRollOver(element) {
    if (element.style.backgroundImage.indexOf("disabled") < 0) {
        element.style.backgroundImage = "url(Images/add_field_item_on.png)";
    }
}

function setAddFieldRollOff(element) {
    if (element.style.backgroundImage.indexOf("disabled") < 0) {
        element.style.backgroundImage = "url(Images/add_field_item_off.png)";
    }
}