// Some global variables
var listId = null;
var dynamic = false;
var itemCount = 0;
var timerId;
var saving = false;

// trim() function from Flickr

function trim(text)
{
    while (text.substring(0,1) == ' ') {
        text = text.substring(1, text.length);
    }
    while (text.substring(text.length - 1, text.length) == ' ') {
        text = text.substring(0, text.length - 1);
    }
    return text;
}

// Following two functions from clagnut:
// http://www.clagnut.com/sandbox/imagefades/

function setOpacity(elem, opacity)
{
    opacity = (opacity == 100)?99.999:opacity;
    elem.style.opacity = opacity/100;
}

function fadeOut(id, opacity)
{
    var elem = document.getElementById(id);
    if (opacity > 0) {
        setOpacity(elem, opacity);
        opacity -= 10;
        timerId = setTimeout("fadeOut('"+id+"', "+opacity+")", 300);
    } else if (opacity <= 0) {
        hideBlock(id);
        clearTimeout(timerId);
    }
}

function resetSearchForm(field)
{
    if (field.value == '') {
        field.style.color = '';
        field.form.reset();
    }
}

function clearSearchForm(field)
{
    field.value = '';
    field.style.color = "#000;";
}

// Everything else by SNF Labs

function popupHelp(url)
{
    var props = "height=400,width=350,resizable=yes,status=yes,scrollbars=yes";
    var w = window.open(url, "slop", props);
    w.focus();
}

function redirectOpener(url)
{
    opener.document.location = unescape(url);
}

function focusField(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}

function showBlock(id)
{
    document.getElementById(id).style.display = "block";
}

function hideBlock(id)
{
    document.getElementById(id).style.display = "none";
}

function showSpan(id)
{
    document.getElementById(id).style.display = "inline";
}

function hideSpan(id)
{
    document.getElementById(id).style.display = "none";
}

function showMessage(text, cl)
{
    var msg = document.createElement("p");
    msg.setAttribute("class", cl);
    var txtNode = document.createTextNode(text);
    msg.appendChild(txtNode);
    var container = document.getElementById("message");
    container.style.display = "block";
    if (container.childNodes.length > 0) {
        container.replaceChild(msg, container.firstChild);
    } else {
        container.appendChild(msg);
    }
}

function showCommentsMessage(text, cl)
{
    var msg = document.createElement("p");
    msg.setAttribute("class", cl);
    var txtNode = document.createTextNode(text);
    msg.appendChild(txtNode);
    var container = document.getElementById("comments-message");
    container.style.display = "block";
    if (container.childNodes.length > 0) {
        container.replaceChild(msg, container.firstChild);
    } else {
        container.appendChild(msg);
    }
}

function validateComment()
{
    var elem = document.getElementById("comment");
    if (trim(elem.value) == '') {
        var msg = "Hey, you didn't write a comment!";
        showCommentsMessage(msg, 'error');
        return false;
    } else {
        return true;
    }
}

function confirmExit()
{
    if (saving) {
        return "Your list is still being saved.";
    }
}

function getListCount()
{
    var list = document.getElementById("list");
    var items = list.getElementsByTagName("li");
    return items.length;
}

function checkListLength()
{
    if (getListCount() < 1) {
        document.getElementById("empty-warning").style.display = "block";
    }
}

function initList(id)
{
    listId = id;
    dynamic = true;
    checkListLength();
    itemCount = getListCount();
}

function validateListCreation()
{
    if (getListCount() < 1) {
        return false;
    } else {
        showBlock("wait");
        return true;
    }
}

function setPreviewAction()
{
    var url = document.getElementById("comments-form").action + "#preview";
    document.getElementById("comments-form").setAttribute("action", url);
}

function changeListType(val)
{
    var container = document.getElementById("list-container");
    var list = document.getElementById("list");
    var newList;

    // Change value of "ordered"
    if (val == 0) {
        val = 1;
    } else {
        val = 0;
    }
    document.getElementById("list-ordered").value = val;

    // Change "ul" to "ol" and vice versa
    if (val == 0) {
        newList = document.createElement("ul");
    } else {
        newList = document.createElement("ol");
    }

    var listItems = list.getElementsByTagName("li");
    for (var i = 0; i < listItems.length; i++) {
        var item = listItems[i].cloneNode(true);
        newList.appendChild(item);
    }
    container.removeChild(list);
    newList.setAttribute("id", "list");
    container.appendChild(newList);
    initReorder();
}

function makeListItem(itemId, text)
{
    // New list items should look like this:
    //
    // <li id="item_0" class="draggable" style="position:relative;">
    //    <span id="text_0">new list item text<span>
    //    <a id="del_0" class="delete" onclick="blahblah">[x]</a>
    //    <input type="hidden" id="val_0" name="val_0" value="new list item text" />
    //    <input type="hidden" class="draggable" name="pos_0" value="0" />
    // </li>

    var item = document.createElement("li");
    var id = "item_" + itemId;
    var txtNodeId = "text_" + itemId;
    var deleteButtonId = "delBtn_" + itemId;
    item.setAttribute("id", id);
    item.setAttribute("class", "draggable");
    item.setAttribute("style", "position: relative;");
    // The text node must be wrapped in a span so that we 
    // can use innerHTML() on it when converting to UBB Code
    var txtWrapper = document.createElement("span");
    txtWrapper.setAttribute("id", txtNodeId);
    var txtNode = document.createTextNode(text);
    txtWrapper.appendChild(txtNode);
    item.appendChild(txtWrapper);

    var deleteButton = document.createElement("a");
    var delTxtNode = document.createTextNode("[x]");
    var onclickVal = "removeListItem('" + id + "')";
    deleteButton.setAttribute("id", deleteButtonId);
    deleteButton.setAttribute("class", "delete");
    deleteButton.setAttribute("onclick", onclickVal);
    deleteButton.setAttribute("title", "delete this item");
    deleteButton.appendChild(delTxtNode)
    item.appendChild(deleteButton);

    var frmVal = document.createElement("input");
    frmVal.setAttribute("type", "hidden");
    var val = "val_" + itemId;
    frmVal.setAttribute("id", val);
    frmVal.setAttribute("name", val);
    frmVal.setAttribute("value", text);
    item.appendChild(frmVal);

    var frmPos = document.createElement("input");
    frmPos.setAttribute("class", "draggable");
    frmPos.setAttribute("type", "hidden");
    var pos = "pos_" + itemId;
    frmPos.setAttribute("id", pos);
    frmPos.setAttribute("name", pos);
    frmPos.setAttribute("value", "0");
    item.appendChild(frmPos);

    return item;
}

function addListItem(text)
{
    // Make sure user didn't submit empty string
    text = trim(text);
    if (text == '') { return; }

    var itemId = itemCount;

    // Save list item to DB
    if (dynamic) {
        createItem(listId, text, itemCount + 1);
        itemId = "new";
    }

    // Clear empty list message
    document.getElementById("empty-warning").style.display = "none";

    var list = document.getElementById("list");
    var item = makeListItem(itemId, text);
    list.appendChild(item);

    // Convert to UBB Code
    // It has to be done here so that innerHTML can be used
    var txtWrapper = document.getElementById("text_" + itemId);
    // For some reason an ordinary space character doesn't work here,
    // so I have to use an &nbsp;
    txtWrapper.innerHTML = bbcode(txtWrapper.innerHTML) + '&#160;';

    // Clear input box and set focus
    document.getElementById("list-item").value = "";
    document.getElementById("list-item").focus();

    try {
        document.getElementById("save").removeAttribute("disabled");
    } catch (e) {
        // On the list view page, there is no "save" button... do nothing
    }

    itemCount++;
    initReorder();
    storePositions();
}

function replaceListItem(oldItem, text)
{
    // UNUSED FUNCTION
    var list = document.getElementById("list");
    var newItem = makeListItem(text);
    list.replaceChild(newItem, oldItem);

    // Clear input box and set focus
    document.getElementById("list-item").value = "";
    document.getElementById("list-item").focus();

    itemCount++;
    initReorder();
}

function setItemId(oldId, newId)
{
    var item = document.getElementById("item_" + oldId);
    item.setAttribute("id", "item_" + newId);
    var txtSpan = document.getElementById("text_" + oldId);
    txtSpan.setAttribute("id", "text_" + newId);
    var delBtn = document.getElementById("delBtn_" + oldId);
    delBtn.setAttribute("onclick", "removeListItem('item_" + newId + "');");
    delBtn.setAttribute("id", "delBtn_" + newId);
    var valField = document.getElementById("val_" + oldId);
    valField.setAttribute("id", "val_" + newId);
    valField.setAttribute("name", "val_" + newId);
    var posField = document.getElementById("pos_" + oldId);
    posField.setAttribute("id", "pos_" + newId);
    posField.setAttribute("name", "pos_" + newId);
}

function removeListItem(id)
{
    var response = window.confirm("Are you sure you want to delete this item?");
    if (response) {
        // Save to database
        if (dynamic) {
            deleteItem(id.slice(5));
        }
        
        var list = document.getElementById("list");
        list.removeChild(document.getElementById(id));

        if (getListCount() == 0) {
            document.getElementById("empty-warning").style.display = "block";
            document.getElementById("save").setAttribute("disabled", "disabled");
        }
    }
}

function makeEditable(displayElem)
{
    // Some assumptions for this and saveEdit():
    //
    // Edit field ID: x
    // Edit save button ID: x-ok
    // Display element ID: x-display
    
    // Hide display element
    displayElem.style.display = "none";

    // Find edit box and show it
    var editBoxId = displayElem.id.slice(0,-8);
    var editBox = document.getElementById(editBoxId);
    //editBox.setAttribute("type", "text");
    editBox.style.display = "inline";
    editBox.focus();
    editBox.select();
    // Show OK and buttons
    var editBtnId = editBoxId + "-ok";
    var editBtn = document.getElementById(editBtnId);
    editBtn.style.display = "inline";
    var cancelBtnId = editBoxId + "-cancel";
    var cancelBtn = document.getElementById(cancelBtnId);
    cancelBtn.style.display = "inline";
}

function saveEdit(editBtn)
{
    // Set hidden form value to new text
    var editBoxId = editBtn.id.slice(0,-3);
    var editBox = document.getElementById(editBoxId);
    var val = trim(editBox.value);
    // Set display element to new text (and BBCode it)
    var displayId = editBoxId + "-display";
    var displayElem = document.getElementById(displayId);
    displayElem.innerHTML = bbcode(val);
    // Hide edit box
    editBox.style.display = "none";
    // Hide OK button
    //var editBtnId = editBoxId + "-ok";
    //var editBtn = document.getElementById(editBtnId);
    editBtn.style.display = "none";
    // Hide Cancel button
    var cancelBtnId = editBoxId + "-cancel";
    var cancelBtn = document.getElementById(cancelBtnId);
    cancelBtn.style.display = "none";
    // Show display element
    displayElem.style.display = "block";

    // Save to database if dynamic=true
    if (dynamic) {
        // Bail if default value is used
        if ((val == "untitled") || (val == "(no description)")) {
            return;
        }
        var type = editBtn.id.slice(5,-3);
        saveText(listId, type, val);
    }
}

function cancelEdit(cancelBtn)
{
    var editBoxId = cancelBtn.id.slice(0,-7);
    var editBox = document.getElementById(editBoxId);
    var editBtnId = editBoxId + "-ok";
    var editBtn = document.getElementById(editBtnId);
    // Hide edit box
    editBox.style.display = "none";
    // Hide OK button
    editBtn.style.display = "none";
    // Hide Cancel button
    cancelBtn.style.display = "none";
    // Show display element
    var displayId = editBox.id + "-display";
    var displayElem = document.getElementById(displayId);
    displayElem.style.display = "block";
}