adminsetting.js

/**//*
##############################################
#     BigMole Dynamic Discussion Board 2.0     #
#     By Emil A Eklund (http://BigMole.5188.org/contact.html#emil)      #
#    and Erik Arvidson (http://BigMole.5188.org/contact.html#erik)     #
#              April 24, 1999                #
##############################################
# Feel free to use this script for personal  #
# and non-profit organisation's websites,    #
# as long as you're giving us credits for it #
# in other words, not removing nur modifying #
# this notice in any of the files it apperes #
##############################################
#   For comercial use contact Emil or Erik   #
##############################################

This file is for the admin settings window.
It includes code for a DHTML Select Box that
can be found as a separate script at BigMole
*/

var cgiFile = "../index.cgi";    // due to the fact that this is located in ./admin/

var loadingMessage = "Loading...";
var errorString = "Error! ";
var createNewGroupError = errorString + "A group stored with that filename already exists. Change the Data File or Update the current group.";
var updatePasswordError = errorString + "Your two new passwords doesn't match";
var responseTimeoutError = errorString + "The Server didn't respond";
var updatePasswordSuccessMessage = "Password updated.";
var contactError = errorString + "Couldn't contact main window"; // This error occurs when the settings window can't find the main window
var contactPassError = errorString + "Couldn't get password from main window"; // This error occurs when the main window didn't contain the password.
                                                                               // This can happen if the main window isn't in admin mode

var responseTimeLimit = 30000;    // This is the time the application waits for a response from the
                                //server before giving an error message

///////////////////////////////////////////////////////////////////////////////////////////////////
// select.js (this was slightly edited to work better in this application
///////////////////////////////////////////////////////////////////////////////////////////////////

var overOptionCss = "background: highlight; color: highlighttext";    // No need to edit
var sizedBorderCss = "1 inset buttonhighlight";                        // these

var globalSelect;    //This is used when calling an unnamed selectbox with onclick="this.PROPERTY"

var ie4 = (document.all != null);
var ie5 = (document.getElementById != null);

var q = 0;


function initSelectBox(el) ...{
    copySelected(el);
    
    var size = el.getAttribute("size");

// These two lines combined with execution in optionClick() allow you to write:
//        onchange="alert(this.options[this.selectedIndex].value)"
    el.options = el.children[1].children;
    el.selectedIndex = findSelected(el);    //Set the index now!
// Some methods that are supported on the real SELECT box
    el.remove = new Function("i", "int_remove(this,i)");
    el.item   = new Function("i", "return this.options[i]");
    el.add    = new Function("e", "i", "int_add(this, e, i)");
// The real select box let you have lot of options with the same NAME. In that case the item
// needs two arguments. When using DIVs you can't have two with the same NAME (or ID) and
// then there is no need for the second argument

    if (el.options[el.selectedIndex] != null)
        el.options[el.selectedIndex].selected = true;

    dropdown = el.children[1];

    if (size != null) ...{
        if (size > 1) ...{
            el.size = size;
            dropdown.style.zIndex = 0;
            initSized(el);
        }
        else ...{
            el.size = 1;
            dropdown.style.zIndex = 99;
            if (dropdown.offsetHeight > 200) ...{
                dropdown.style.height = "200";
                dropdown.style.overflow = "auto";
            }
        }
    }
    
    highlightSelected(el,true);
}

function int_remove(el,i) ...{
    if (el.options[i] != null)
        el.options[i].outerHTML = "";
}

function int_add(el, e, i) ...{
    var html = "<div class='option'";
    if (e.value != null)
        html += ' value="' + e.value.replace(/"/g, "/"") + '"';
    if (e.style.cssText != null)
        html += " style='" + e.style.cssText + "'";
    html += ">";
    if (e.text != null)
        html += e.text;
    html += "</div>"

    if ((i == null) || (i >= el.options.length))
        i = el.options.length-1;

    if (el.options.length == 0) ...{
        el.children[1].insertAdjacentHTML("BeforeEnd", html);
    }
    else
        el.options[i].insertAdjacentHTML("AfterEnd", html);
}
    
function initSized(el) ...{
//alert("initSized -------->");
    var h = 0;
    el.children[0].style.display = "none";

    dropdown = el.children[1];
    dropdown.style.visibility = "visible";

    if (dropdown.children.length > el.size) ...{
        dropdown.style.overflow = "auto";
        for (var i=0; i<el.size; i++) ...{
            h += dropdown.children[i].offsetHeight;
        }

        if (dropdown.style.borderWidth != null) ...{
            dropdown.style.pixelHeight = h + 4; //2 * parseInt(dropdown.style.borderWidth);
        }

        else
            dropdown.style.height = h;

    }
    else if (dropdown.children.length == 0)...{
    }
    else ...{
        dropdown.style.height = dropdown.children[0].offsetHeight * el.size;
    }

    dropdown.style.border = sizedBorderCss;


    el.style.height = dropdown.style.pixelHeight;
}

function copySelected(el) ...{
    var selectedIndex = findSelected(el);

    selectedCell = el.children[0].rows[0].cells[0];
    selectedDiv  =     el.children[1].children[selectedIndex];

    if (selectedCell == null || selectedDiv == null) return;
    
    selectedCell.innerHTML = selectedDiv.outerHTML;
}

// This function returns the first selected option and resets the rest
// in case some idiot has set more than one to selcted :-)
function findSelected(el) ...{
    var selected = null;


    ec = el.children[1].children;    //the table is the first child
    var ecl = ec.length;
    
    for (var i=0; i<ecl; i++) ...{
        if (ec[i].getAttribute("selected") != null) ...{
            if (selected == null) ...{    // Found first selected
                selected = i;
            }
            else
                ec[i].removeAttribute("selected");    //Like I said. Only one selected!
        }
    }
//    if (selected == null)
//        selected = 0;    //When starting this is the most logic start value if none is present

    return selected;
}

function toggleDropDown(el) ...{
    if (el.size == 1) ...{
        dropDown = el.children[1];
        
        if (dropDown.style.visibility == "")
            dropDown.style.visibility = "hidden";
            
        if (dropDown.style.visibility == "hidden")
            showDropDown(dropDown);
        else
            hideDropDown(dropDown);
    }
}

function optionClick() ...{
    el = getReal(window.event.srcElement, "className", "option");

    if (el.className == "option") ...{
        dropdown  = el.parentElement;
        selectBox = dropdown.parentElement;
        
        oldSelected = dropdown.children[findSelected(selectBox)]

        if (oldSelected == null) ...{
            el.setAttribute("selected", 1);
            selectBox.selectedIndex = findSelected(selectBox);
        }
        else if(oldSelected != el) ...{
            oldSelected.removeAttribute("selected");
            el.setAttribute("selected", 1);
            selectBox.selectedIndex = findSelected(selectBox);
        }

        if (selectBox.onchange != null) ...{    // This executes the onchange when you chnage the option
            if (selectBox.id != "") ...{        // For this to work you need to replace this with an ID or name
                eval(selectBox.onchange.replace(/this/g, selectBox.id));
            }
            else ...{
                globalSelect = selectBox;
                eval(selectBox.onchange.replace(/this/g, "globalSelect"));
            }
        }
        
        if (el.backupCss != null)
            el.style.cssText = el.backupCss;
        copySelected(selectBox);
        toggleDropDown(selectBox);
        highlightSelected(selectBox, true);
    }
}

function optionOver() ...{
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");
    if (toEl == fromEl) return;
    var el = toEl;
    
    if (el.className == "option") ...{
        if (el.backupCss == null)
            el.backupCss = el.style.cssText;
        highlightSelected(el.parentElement.parentElement, false);
        el.style.cssText = el.backupCss + "; " + overOptionCss;
        this.highlighted = true;
    }
}

function optionOut() ...{
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");

    if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) ...{
        if (toEl == null)
            return;
        if (toEl.className != "option")
            return;
    }
    
    if (toEl != null) ...{
        if (toEl.className != "option") ...{
            if (fromEl.className == "option")
                highlightSelected(fromEl.parentElement.parentElement, true);
        }
    }
    
    if (toEl == fromEl) return;
    var el = fromEl;

    if (el.className == "option") ...{
        if (el.backupCss != null)
            el.style.cssText = el.backupCss;
    }

}

function highlightSelected(el,add) ...{
    var selectedIndex = findSelected(el);
    
    selected = el.children[1].children[selectedIndex];
    
    if (selected == null) return;
    
    if (add) ...{
        if (selected.backupCss == null)
            selected.backupCss = selected.style.cssText;
        selected.style.cssText = selected.backupCss + "; " + overOptionCss;
    }
    else if (!add) ...{
        if (selected.backupCss != null)
            selected.style.cssText = selected.backupCss;
    }
}

function hideShownDropDowns() ...{
    var el = getReal(window.event.srcElement, "className", "select");
    
    var spans = document.all.tags("SPAN");
    var selects = new Array();
    var index = 0;
    
    for (var i=0; i<spans.length; i++) ...{
        if ((spans[i].className == "select") && (spans[i] != el)) ...{
            dropdown = spans[i].children[1];
            if ((spans[i].size == 1) && (dropdown.style.visibility == "visible"))
                selects[index++] = dropdown;
        }
    }
    
    for (var j=0; j<selects.length; j++) ...{
        hideDropDown(selects[j]);
    }    

}

function hideDropDown(el) ...{
    if (typeof(fade) == "function")
        fade(el, false);
    else
        el.style.visibility = "hidden";
}

function showDropDown(el) ...{
    if (typeof(fade) == "function")
        fade(el, true);
    else if (typeof(swipe) == "function")
        swipe(el, 2);
    else
        el.style.visibility = "visible";
}

function initSelectBoxes() ...{
    var spans = document.all.tags("SPAN");
    var selects = new Array();
    var index = 0;
    
    for (var i=0; i<spans.length; i++) ...{
        if (spans[i].className == "select")
            selects[index++] = spans[i];
    }
    
    for (var j=0; j<selects.length; j++) ...{
        initSelectBox(selects[j]);
    }    
}

function getReal(el, type, value) ...{
    temp = el;
    while ((temp != null) && (temp.tagName != "BODY")) ...{
        if (eval("temp." + type) == value) ...{
            el = temp;
            return el;
        }
        temp = temp.parentElement;
    }
    return el;
}


///////////////////////////////////////////////////////////////////////////////////////////////////
// End select.js
///////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////
// writeSelect.js This file is part of the DHTML Select to give X browser support. There is no need
// to edit this unless you want to mess with select
///////////////////////////////////////////////////////////////////////////////////////////////////
function writeSelectBox(matrix, id, size, onchange, css) ...{
    var d = window.document;

    // The NN part has been remove
    var s = createIEString(matrix, id, size, onchange, css);
    document.write(s);
}

function createIEString(matrix, id, size, onchange, css) ...{
    var str = "";
    // Span startTag    
        str += '<span class="select"';
        if (size == null)
            size = 1;
        str += ' size="' + size + '"';    
        if (id != null)
            str += ' id="' + id + '"';
        if (onchange != null)
            str += ' onchange="' + onchange + '"';
        if (css != null)
            str += ' style="' + css + '"';
        str += '> ';
    
    // Table Tag
        str += '<table class="selectTable" cellspacing="0" cellpadding="0" ';
        str += ' onclick="toggleDropDown(this.parentElement)"> ';
        str += '<tr> ';
        str += '<td class="selected">&nbsp;</td> ';
        str += '<td align="CENTER" valign="MIDDLE" class="Button" ';
        str += ' onmousedown="this.style.border='2 inset buttonhighlight'" ';
        str += ' onmouseup="this.style.border='2 outset buttonhighlight'"> ';
        str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td> ';
        str += '</tr> ';
        str += '</table> ';
        
    // DropDown startTag
        str += '<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()"> ';
        
        for (var i=0; i<matrix.length; i++) ...{
            html     = matrix[i].html;
            value    = matrix[i].value;
            css      = matrix[i].css;
            selected = matrix[i].selected;
            
        // Write option starttag
            str += '<div class="option"';
            if (value != null)
                str += ' value="' + value + '"';
            if (css != null)
                str += ' style="' + css + '"';
            if (selected != null)
                str += ' selected';
            str += '> ';
            
        // Write HTML contents
            str += html;
        // Write end tag
            str += '</div> ';
        }
    
    //DropDown endtag
        str += '</div> ';
        
    // Span endTag
        str += '</span> ';
        
    return str;
}

function Option(html, value, css, selected) ...{
    this.html = html;
    this.value = value;
    this.css = css;
    this.selected = selected;
}
///////////////////////////////////////////////////////////////////////////////////////////////////
// end writeSelect.js
///////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////
// This is the specific code for the settings window. The customisation part is at the top
// of this document (except formatting of the option element, see directly below)
///////////////////////////////////////////////////////////////////////////////////////////////////

// If you want to change the layout inside the Selectbox edit here
function formatOption(img, name, descr) ...{
    return "<img src='" + img + "' class='groupIcon'><b>" + name + "</b><br>" + descr;
}

initAdminSettings();

function initAdminSettings() ...{
    window.onload = initAdminSettingsOnload;
    document.onclick = hideShownDropDowns;
}

function initAdminSettingsOnload() ...{
    initSelectBoxes();
    serverLoadSelect();
}

var optionArray = new Array();    //This is used when creating the select in the html file
optionArray[0] = new Option(
"<div style='height:42'>" + loadingMessage + "</div>",
'|:||:||:|');

function populateInputs(value) ...{
    var a = value.split("|:|");
    
    nameInp.value = a[1];
    descrInp.value = a[2];
    imgInp.value = a[3];
    fileInp.value = a[0];
}

function highlightOver() ...{
    var el = window.event.srcElement;
    if (el.tagName == "INPUT" || el.tagName == "BUTTON") ...{
        el.style.borderWidth = 2;
        el.style.padding     = 0;
    }
    
    el = getReal(el,"className","dropDown");
    if (el.className == "dropDown") ...{
        el.style.borderWidth = 2;
        el.style.padding     = 0;
    }
}

function highlightOut() ...{
    var el = window.event.srcElement;
    if (el.tagName == "INPUT" || el.tagName == "BUTTON") ...{
        el.style.borderWidth = 1;
        el.style.padding     = 1;
    }
    el = getReal(el,"className","dropDown");
    if (el.className == "dropDown") ...{
        el.style.borderWidth = 1;
        el.style.padding     = 1;
    }
}

if (ie5) ...{
    document.onmouseover = highlightOver;
    document.onmouseout = highlightOut;
}

function createNewGroup() ...{
    var o = groupSelect.options;
    
    for (var i=0; i<o.length; i++) ...{
        if (fileInp.value == o[i].value.split("|:|")[0]) ...{
            alert(createNewGroupError);
            return;
        }
    }
    
    var str = cgiFile + "?action=newgroup";

    str += "&group=" + fileInp.value;
    str += "&name=" + escape(nameInp.value);
    str += "&description=" + escape(descrInp.value);
    str += "&image=" + escape(imgInp.value);

    openWithPassword(str);
}

function updateGroup() ...{
    var str = cgiFile + "?action=updategroup";

    str += "&group=" + fileInp.value;    
    str += "&name=" + escape(nameInp.value);
    str += "&description=" + escape(descrInp.value);
    str += "&image=" + escape(imgInp.value);

    openWithPassword(str);
}

function removeGroup() ...{
    var str = cgiFile + "?action=removegroup"
    
    str += "&group=" + fileInp.value;
    
    openWithPassword(str);
}

function updatePassword() ...{
    if (npwd1.value != npwd2.value)
        alert(updatePasswordError);
    else ...{
        var str = cgiFile + "?action=updatepassword";
    
        str += "&old=" + escape(opwd.value);    
        str += "&new1=" + escape(npwd1.value);
        str += "&new2=" + escape(npwd2.value);
    
        openWithPassword(str);
    }
}

function serverLoadSelect() ...{
    var str = cgiFile + "?action=loadselect"
    disableAll();
    document.frames[0].location = str;
}

var disableTimer;

function disableAll() ...{
    var inps = document.all.tags("INPUT");
    var btns = document.all.tags("BUTTON");
    
    for (var i=0; i<inps.length; i++)
        inps[i].disabled = true;
        
    for (var i=0; i<btns.length; i++)
        btns[i].disabled = true;
        
    disableDiv.style.display = "block";
    disableTimer = window.setTimeout("responseTimeout()", responseTimeLimit);
}

function enableAll() ...{
    var inps = document.all.tags("INPUT");
    var btns = document.all.tags("BUTTON");
    
    for (var i=0; i<inps.length; i++)
        inps[i].disabled = false;
        
    for (var i=0; i<btns.length; i++)
        btns[i].disabled = false;

    disableDiv.style.display = "none";
    window.clearTimeout(disableTimer);
}


function responseTimeout() ...{
    alert(responseTimeoutError);
    enableAll();
}


function createNewGroupResponse(success, group, name, descr, img, errorMsg) ...{
    if (!success)
        alert(errorString + errorMsg);
    else ...{
        var o = document.createElement("OPTION");
        o.text = formatOption(img, name, descr);
        o.value = group + "|:|" + name + "|:|" + descr + "|:|" + img;
        groupSelect.add(o);
    }
    enableAll();
}

function updateGroupResponse(success, group, name, descr, img, errorMsg) ...{
    if (!success)
        alert(errorMsg);
    else ...{
        var o = groupSelect.options;
    
        for (var i=0; i<o.length; i++) ...{
            if (group == o[i].value.split("|:|")[0]) ...{
                groupSelect.remove(i);
                break;
            }
        }
            
        var o = document.createElement("OPTION");
        o.text = formatOption(img, unescape(name), unescape(descr));
        o.value = group + "|:|" + unescape(name) + "|:|" + unescape(descr) + "|:|" + unescape(img);
        groupSelect.add(o);
    }
    enableAll();
}

function removeGroupResponse(success, group, errorMsg) ...{
    if (!success)
        alert(errorString + errorMsg);
    else ...{
        var o = groupSelect.options;
    
        for (var i=0; i<o.length; i++) ...{
            if (group == o[i].value.split("|:|")[0]) ...{
                groupSelect.remove(i);
                break;
            }
        }
    }
    enableAll();
}

function updatePasswordResponse(success, errorMsg) ...{
    if (success)
        alert(updatePasswordSuccessMessage);
    else
        alert(errorString + errorMsg);
    
    enableAll();
}


function updateSelectOption(group,data) ...{
    var d = data.split("|:|");
    var o = groupSelect.options;
    
    for (var i=0; i<o.length; i++) ...{
        if (o[i].value.split("|:|")[0] == d[0]) ...{
            o[i].innerHTML = formatOption(d[3], d[1], d[2]);
            o[i].value = data;
            if (o[i].selected)
                populateInputs(data);
            break;
        }
    }
}

function openWithPassword(str) ...{
    var top = opener.parent;
    var pwd;
    
    if (top != null && top.treeframe != null)
        pwd = top.treeframe.document.body.password;
    else ...{
        alert(contactError);
        return;
    }
        
    if  (pwd == null || pwd == "") ...{
        alert(contactPassError);
        return;
    }
    
    str += "&pwd=" + pwd;
    
    document.frames["com"].location = str;
    disableAll();
}

function loadSelect(success, data, errorMsg) ...{
    if (!success)
        alert("Error! " + errorMsg);
    else ...{
        groupSelect.remove(0);

        for (var i=0; i<data.length; i++) ...{
            
            var o = document.createElement("OPTION");
            o.text = formatOption(data[i][3], unescape(data[i][1]), unescape(data[i][2]));
            o.value = data[i][0] + "|:|" + unescape(data[i][1]) + "|:|" + unescape(data[i][2]) + "|:|" + data[i][3];
            
            groupSelect.add(o);
        }
    }
    enableAll();
}