ref.save = true;
ref.inMWEditBox = true;
},  
/**
- Clear all rows of passed in add citation panes.
- @param {Node} citePanes raw DOM element
- /
clearCitePanes: function(citePanes)
{
if(citePanes.hasChildNodes)
{
citePanes.removeChild(citePanes.firstChild);
}
},  
/**
- Add event handler to Delete Field button in Add/Edit Reference panes
- @param {Node} fieldRow the fieldRow DOM element to remove
- /
activateRemoveField: function(fieldRow)
{
$('.delete-field', fieldRow).click(function
{
$(fieldRow).hide(
'highlight',{},'slow',
function {
$(fieldRow).remove;
}
);
});
},  
/**
- Changes the panel for the add reference panel to the correct type of entry
- @param {Node} menu Raw HTML menu element
- /
changeAddPane: function(menu) {
// Reset scroll
$('#add-fields').scrollTop(0);
$(menu.parentNode).show; // cite/citation vbox.  
var citePanes = $(".addpanes", menu.parentNode.parentNode).get(0);
this.clearCitePanes(citePanes);
var newRefType = menu.value;  
var genPane = document.getElementById("dummyCitePane").cloneNode(true);
var $genPane = $(genPane).attr('id', '');
$genPane.data('proveitRefType', newRefType);  
// name the ref-name-row
$('.ref-name-row', $genPane).children('input').attr('id','addrefname');
$('.ref-name-row', $genPane).children('label').attr('for','addrefname');  
// Somewhat hackish. What's a better way?
var newRef;
if(menu.id == "citemenu")
{
newRef = new this.CiteReference({});
}
else
{
newRef = new this.CitationReference({});
}
newRef.type = newRefType;
var descs = this.getDescriptions;
var defaultParams = newRef.getDefaultParams.slice(0); // copy
defaultParams.sort(newRef.getSorter);
//var required = newRef.getRequiredParams;  
// Possibly, Cite objects should automatically include default parameters in their param maps. That would seem to make this simpler.
for(var i = 0; i < defaultParams.length; i++)
{
newRef.params[defaultParams[i]] = "";
}  
// Should there be a getParamKeys or similar function for this, or even getSortedParamKeys?
var newParams = [];
for(param in newRef.params)
{
newParams.push(param);
}
newParams.sort(newRef.getSorter);
var required = newRef.getRequiredParams;  
var paramList = $(".paramlist", $genPane)[0];
for(var i = 0; i < newParams.length; i++)
{
var param = newParams[i];
var paramBox;  
if(descs[param])
{
paramBox = document.getElementById("preloadedparamrow").cloneNode(true);
var label = $('.paramdesc', paramBox);
if(required[param])
{
label.addClass("required");
$('.delete-field', paramBox).remove; // don't let people remove required fields
}
else
{
this.activateRemoveField(paramBox);
}
label.text(descs[param]);
// Basically the same code as nameHbox above
label.attr("for", this.NEW_PARAM_PREFIX + param);
if(param == 'accessdate')
$('.paramvalue', paramBox).val(this.dateFormatter.format(new Date));
}
else
{
// Throwing an error here doesn't make sense if user-added fields can be copied over.
// throw new Error("Undefined description for param: " + param);
paramBox = document.getElementById("addedparamrow").cloneNode(true);
var nameTextbox = $(".paramdesc", paramBox)[0];
nameTextbox.setAttribute("value", param);
}
paramBox.id = "";
this.activateRemoveField(paramBox);  
$(".paramvalue", paramBox)[0].id = this.NEW_PARAM_PREFIX + param;
//paramBox.childNodes[2].value = newRef.params[param]; // Causes parameters to disappear. Why?
$(paramBox).show;
paramList.appendChild(paramBox);
}
$genPane.show;
$(citePanes).prepend($genPane);
},  
/**
- Create ProveIt HTML GUI
- /
createGUI: function
{
if(this.getGUI.length > 0)
{
// GUI already created
return false;
}  
// more JqueryUI CSS: http://blog.jqueryui.com/2009/06/jquery-ui-172/
var gui = $('<div/>', {id: this.GUI_ID});
var tabs = $('<div/>', {id: 'tabs'});
var created = $('<h1/>');
var createdLink = $('<a/>', {title: 'Created by the ELC Lab at Georgia Tech',
href: 'http://proveit.cc.gatech.edu',
target: '_blank'});
// Main logo in upper-
var logo = $('<img/>', {src: this.STATIC_BASE + 'logo.png', alt: 'ProveIt', height: 30, width: 118 });
createdLink.append(logo);
created.append(createdLink);
// Minimize/maximize button
var showHideButton = $('<button/>', {text: 'show/hide'});
created.append(showHideButton);
tabs.append(created);
var header = $('<ul/>');
var view = $('<li/>');
// View tab link
var viewLink = $('<a/>', {id: 'view-link', "class": 'tab-link', href: '#view-tab'});
viewLink.append('References (');
var numRefs = $('<span/>', {id: 'numRefs'}).
append('0');
viewLink.append(numRefs).
append(')');
view.append(viewLink);
header.append(view);
var add = $('<li/>');
// Add tab link
var addLink = $('<a/>', {id: 'add-link', "class": 'tab-link', href: '#add-tab'}).
append('Add a Reference');
add.append(addLink);
header.append(add);
tabs.append(header);
// View tab
var viewTab = $('<div/>', {id: 'view-tab', css: {display: ''}});
// View pane used for displaying references; within view tab
var viewPane = $('<div/>', {id: 'view-pane'});
var viewScroll = $('<div/>', {"class": 'scroll',
style: 'height: ;'});
// Ref list root element
var refTable = $('<table/>', {id: 'refs'});
var dummyRef = $('<tr/>', {id: 'dummyRef',
style: 'display: ;'});
dummyRef.append($('<td/>', {"class": 'number'})).
append($('<td/>', {"class": 'type'})).
append($('<td/>', {"class": 'title'}));
//append($('<td/>', {"class": 'details'}));
var editTd = $('<td/>', {"class": 'edit'}).
append($('<button/>', {text: 'edit'}));
dummyRef.append(editTd);
refTable.append(dummyRef);
viewScroll.append(refTable);
viewPane.append(viewScroll);
viewTab.append(viewPane);
// div#edit-pane, within view tab
var editPane = $('<div/>', {id: 'edit-pane', style: 'display: '});
// div#edit-fields
var editFields = $('<div/>', {id: 'edit-fields',
"class": 'inputs scroll',
style: 'height: ',
tabindex: -1});
// div.ref-name-row
var refNameRow = $('<div/>', {"class": 'ref-name-row',
tabindex: -1});
var refLabel = $('<label/>', {'for': 'editrefname',
title: 'This is a unique identifier that can be used to refer to this reference elsewhere on the page.',
"class": 'paramdesc'}).
append('&lt;ref&gt; name');
refNameRow.append(refLabel);
refNameRow.append($('<input/>', {id: 'editrefname',
"class": 'paramvalue',
tabindex: 0}));
// div.paramlist
var paramList = $('<div/>', {"class": 'paramlist'});  
editFields.append(refNameRow);
editFields.append(paramList);
editPane.append(editFields);  
// div#edit-buttons, part of edit pane
var editButtons = $('<div/>', {id: 'edit-buttons'});
var addFieldButton = $('<button/>', {style: 'margin-: ;'}).
append('add field');
editButtons.append(addFieldButton);
var reqSpan = $('<span/>', {"class": 'required',
text: 'bold'});
editButtons.append(reqSpan).
append(' = required field');
var saveButton = $('<button/>', {"class": '-side accept',
text: 'update edit form'});
editButtons.append(saveButton);
var cancelButton = $('<button/>', {"class": '-side cancel',
text: 'cancel'});
editButtons.append(cancelButton);
editPane.append(editButtons);
viewTab.append(editPane);
tabs.append(viewTab);  
// dumy cite pane
var dummyCite = $('<div/>', {id: 'dummyCitePane',
"class": 'typepane',
style: 'display: '});
var addRefNameRow = refNameRow.clone;
//$('input', addRefNameRow).attr('id', 'addrefname');
//$('label', addRefNameRow).attr('for', 'addrefname');
dummyCite.append(addRefNameRow);
dummyCite.append($('<div/>', {"class": 'paramlist'}));
tabs.append(dummyCite);  
var preloadedparam = $('<div/>', {id: 'preloadedparamrow',
"class": 'preloadedrow input-row',
style: 'display: '}).
append($('<label/>', {"class": 'paramdesc'}));
var paramvalue = $('<input/>', {"class": 'paramvalue',
tabindex: 0});
preloadedparam.append(paramvalue);
var deleteButton = $('<button/>', {"class": 'delete-field',
tabindex: -1}).
append('delete field');
preloadedparam.append(deleteButton);
tabs.append(preloadedparam);
var addedparam = $('<div/>', {id: 'addedparamrow',
"class": 'addedrow input-row',
style: 'display: '}).
append($('<input/>', {"class": 'paramdesc',
tabindex: 0})).
append(paramvalue.clone).
append(deleteButton.clone);