diff --git a/js/components/AccountTree.js b/js/components/AccountTree.js
new file mode 100644
index 0000000..6a98997
--- /dev/null
+++ b/js/components/AccountTree.js
@@ -0,0 +1,118 @@
+var React = require('react');
+
+var ReactBootstrap = require('react-bootstrap');
+var Button = ReactBootstrap.Button;
+var Collapse = ReactBootstrap.Collapse;
+var Glyphicon = ReactBootstrap.Glyphicon;
+
+class AccountTreeNode extends React.Component {
+	constructor() {
+		super();
+		this.state = {expanded: false};
+		this.onToggle = this.handleToggle.bind(this);
+		this.onChildSelect = this.handleChildSelect.bind(this);
+		this.onSelect = this.handleSelect.bind(this);
+	}
+	handleToggle(e) {
+		e.preventDefault();
+		this.setState({expanded:!this.state.expanded});
+	}
+	handleChildSelect(account) {
+		if (this.props.onSelect != null)
+			this.props.onSelect(account);
+	}
+	handleSelect() {
+		if (this.props.onSelect != null)
+			this.props.onSelect(this.props.account);
+	}
+	render() {
+		var glyph = this.state.expanded ? 'minus' : 'plus';
+		var active = (this.props.selectedAccount != -1 &&
+			this.props.account.AccountId == this.props.selectedAccount);
+
+		var self = this;
+		var children = this.props.accountChildren[this.props.account.AccountId].map(function(childId) {
+			var account = self.props.accounts[childId];
+			return (
+				<AccountTreeNode
+					key={account.AccountId}
+					account={account}
+					selectedAccount={self.props.selectedAccount}
+					accounts={self.props.accounts}
+					accountChildren={self.props.accountChildren}
+					onSelect={self.onChildSelect}/>
+		   );
+		});
+		var accounttreeClasses = "accounttree"
+		var expandButton = [];
+		if (children.length > 0) {
+			expandButton.push((
+				<Button onClick={this.onToggle}
+						key={1}
+						bsSize="xsmall"
+						bsStyle="link"
+						className="accounttree-expandbutton">
+					<Glyphicon glyph={glyph} bsSize="xsmall"/>
+				</Button>
+			));
+		} else {
+			accounttreeClasses += "-nochildren";
+		}
+		return (
+			<div className={accounttreeClasses}>
+				{expandButton}
+				<Button onClick={this.onSelect}
+						active={active}
+						bsStyle="link"
+						className="accounttree-name">
+					{this.props.account.Name}
+				</Button>
+				<Collapse in={this.state.expanded}>
+					<div>
+						{children}
+					</div>
+				</Collapse>
+			</div>
+		);
+	}
+}
+
+class AccountTree extends React.Component {
+	constructor() {
+		super();
+		this.onSelect = this.handleSelect.bind(this);
+	}
+	handleSelect(account) {
+		if (this.props.onSelectAccount != null) {
+			this.props.onSelectAccount(account);
+		}
+		if (this.props.onSelect != null && this.props.onSelectKey != null) {
+			this.props.onSelect(this.props.onSelectKey);
+		}
+	}
+	render() {
+		var accounts = this.props.accounts;
+
+		var children = [];
+		for (var accountId in accounts) {
+			if (accounts.hasOwnProperty(accountId) &&
+					accounts[accountId].isRootAccount()) {
+				children.push((<AccountTreeNode
+					key={accounts[accountId].AccountId}
+					account={accounts[accountId]}
+					selectedAccount={this.props.selectedAccount}
+					accounts={this.props.accounts}
+					accountChildren={this.props.accountChildren}
+					onSelect={this.onSelect}/>));
+			}
+		}
+
+		return (
+			<div className="accounttree-root">
+				{children}
+			</div>
+		);
+	}
+}
+
+module.exports = AccountTree;
diff --git a/js/components/AccountsTab.js b/js/components/AccountsTab.js
index cebdae6..f508abe 100644
--- a/js/components/AccountsTab.js
+++ b/js/components/AccountsTab.js
@@ -30,350 +30,10 @@ var Account = models.Account;
 var AccountType = models.AccountType;
 var AccountTypeList = models.AccountTypeList;
 
+var AccountTree = require('./AccountTree');
 var AccountCombobox = require('./AccountCombobox');
 var AccountRegister = require('./AccountRegister');
-
-class AddEditAccountModal extends React.Component {
-	getInitialState(props) {
-		var s = {
-			accountid: -1,
-			security: 1,
-			parentaccountid: -1,
-			type: 1,
-			name: "",
-			ofxurl: "",
-			ofxorg: "",
-			ofxfid: "",
-			ofxuser: "",
-			ofxbankid: "",
-			ofxacctid: "",
-			ofxaccttype: "CHECKING",
-			ofxclientuid: "",
-			ofxappid: "",
-			ofxappver: "",
-			ofxversion: "",
-			ofxnoindent: false,
-		};
-		if (!props) {
-			return s;
-		} else if (props.editAccount != null) {
-			s.accountid = props.editAccount.AccountId;
-			s.name = props.editAccount.Name;
-			s.security = props.editAccount.SecurityId;
-			s.parentaccountid = props.editAccount.ParentAccountId;
-			s.type = props.editAccount.Type;
-			s.ofxurl = props.editAccount.OFXURL;
-			s.ofxorg = props.editAccount.OFXORG;
-			s.ofxfid = props.editAccount.OFXFID;
-			s.ofxuser = props.editAccount.OFXUser;
-			s.ofxbankid = props.editAccount.OFXBankID;
-			s.ofxacctid = props.editAccount.OFXAcctID;
-			s.ofxaccttype = props.editAccount.OFXAcctType;
-			s.ofxclientuid = props.editAccount.OFXClientUID;
-			s.ofxappid = props.editAccount.OFXAppID;
-			s.ofxappver = props.editAccount.OFXAppVer;
-			s.ofxversion = props.editAccount.OFXVersion;
-			s.ofxnoindent = props.editAccount.OFXNoIndent;
-		} else if (props.initialParentAccount != null) {
-			s.security = props.initialParentAccount.SecurityId;
-			s.parentaccountid = props.initialParentAccount.AccountId;
-			s.type = props.initialParentAccount.Type;
-		}
-		return s;
-	}
-	constructor() {
-		super();
-		this.state = this.getInitialState();
-		this.onCancel = this.handleCancel.bind(this);
-		this.onChange = this.handleChange.bind(this);
-		this.onNoIndentClick = this.handleNoIndentClick.bind(this);
-		this.onSecurityChange = this.handleSecurityChange.bind(this);
-		this.onTypeChange = this.handleTypeChange.bind(this);
-		this.onParentChange = this.handleParentChange.bind(this);
-		this.onSubmit = this.handleSubmit.bind(this);
-	}
-	componentWillReceiveProps(nextProps) {
-		if (nextProps.show && !this.props.show) {
-			this.setState(this.getInitialState(nextProps));
-		}
-	}
-	handleCancel() {
-		if (this.props.onCancel != null)
-			this.props.onCancel();
-	}
-	handleChange() {
-		this.setState({
-			name: ReactDOM.findDOMNode(this.refs.name).value,
-			ofxurl: ReactDOM.findDOMNode(this.refs.ofxurl).value,
-			ofxorg: ReactDOM.findDOMNode(this.refs.ofxorg).value,
-			ofxfid: ReactDOM.findDOMNode(this.refs.ofxfid).value,
-			ofxuser: ReactDOM.findDOMNode(this.refs.ofxuser).value,
-			ofxbankid: ReactDOM.findDOMNode(this.refs.ofxbankid).value,
-			ofxacctid: ReactDOM.findDOMNode(this.refs.ofxacctid).value,
-			ofxclientuid: ReactDOM.findDOMNode(this.refs.ofxclientuid).value,
-			ofxappid: ReactDOM.findDOMNode(this.refs.ofxappid).value,
-			ofxappver: ReactDOM.findDOMNode(this.refs.ofxappver).value,
-			ofxversion: ReactDOM.findDOMNode(this.refs.ofxversion).value,
-		});
-		if (this.state.type != AccountType.Investment) {
-			this.setState({
-				ofxaccttype: ReactDOM.findDOMNode(this.refs.ofxaccttype).value,
-			});
-		}
-	}
-
-	handleNoIndentClick() {
-		this.setState({ofxnoindent: !this.state.ofxnoindent});
-	}
-	handleSecurityChange(security) {
-		if (security.hasOwnProperty('SecurityId'))
-			this.setState({
-				security: security.SecurityId
-			});
-	}
-	handleTypeChange(type) {
-		if (type.hasOwnProperty('TypeId'))
-			this.setState({
-				type: type.TypeId
-			});
-	}
-	handleParentChange(parentAccount) {
-		this.setState({parentaccountid: parentAccount.AccountId});
-	}
-	handleSubmit() {
-		var a = new Account();
-
-		if (this.props.editAccount != null)
-			a.AccountId = this.state.accountid;
-		a.Name = this.state.name;
-		a.ParentAccountId = this.state.parentaccountid;
-		a.SecurityId = this.state.security;
-		a.Type = this.state.type;
-
-		a.OFXURL = this.state.ofxurl;
-		a.OFXORG = this.state.ofxorg;
-		a.OFXFID = this.state.ofxfid;
-		a.OFXUser = this.state.ofxuser;
-		a.OFXBankID = this.state.ofxbankid;
-		a.OFXAcctID = this.state.ofxacctid;
-		a.OFXAcctType = this.state.ofxaccttype;
-		a.OFXClientUID = this.state.ofxclientuid;
-		a.OFXAppID = this.state.ofxappid;
-		a.OFXAppVer = this.state.ofxappver;
-		a.OFXVersion = this.state.ofxversion;
-		a.OFXNoIndent = this.state.ofxnoindent;
-
-		if (this.props.onSubmit != null)
-			this.props.onSubmit(a);
-	}
-	render() {
-		var headerText = (this.props.editAccount != null) ? "Edit" : "Create New";
-		var buttonText = (this.props.editAccount != null) ? "Save Changes" : "Create Account";
-		var rootName = (this.props.editAccount != null) ? "Top-level Account" : "New Top-level Account";
-		var ofxBankIdName = "Broker ID";
-		var ofxAcctType = [];
-		if (this.state.type != AccountType.Investment) {
-			ofxBankIdName = "Bank ID";
-			ofxAcctType = (
-				<FormGroup>
-					<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
-					<Col xs={10}>
-					<FormControl
-							componentClass="select"
-							placeholder="select"
-							value={this.state.ofxaccttype}
-							onChange={this.onChange}
-							ref="ofxaccttype">
-						<option value="CHECKING">Checking</option>
-						<option value="SAVINGS">Savings</option>
-						<option value="CC">Credit Card</option>
-						<option value="MONEYMRKT">Money Market</option>
-						<option value="CREDITLINE">Credit Line</option>
-						<option value="CD">CD</option>
-					</FormControl>
-					</Col>
-				</FormGroup>
-			);
-		}
-		var bankIdDisabled = (this.state.type != AccountType.Investment && this.state.ofxaccttype == "CC") ? true : false;
-		return (
-			<Modal show={this.props.show} onHide={this.onCancel}>
-				<Modal.Header closeButton>
-					<Modal.Title>{headerText} Account</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-				<Tabs defaultActiveKey={1} id="editAccountTabs">
-					<Tab eventKey={1} title="General">
-					<Form horizontal onSubmit={this.onSubmit}>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>Name</Col>
-						<Col xs={10}>
-						<FormControl type="text"
-							value={this.state.name}
-							onChange={this.onChange}
-							ref="name"/>
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>Parent Account</Col>
-						<Col xs={10}>
-						<AccountCombobox
-							accounts={this.props.accounts}
-							accountChildren={this.props.accountChildren}
-							value={this.state.parentaccountid}
-							rootName={rootName}
-							onChange={this.onParentChange}
-							ref="parent" />
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>Security</Col>
-						<Col xs={10}>
-						<Combobox
-							suggest
-							data={this.props.security_list}
-							valueField='SecurityId'
-							textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
-							defaultValue={this.state.security}
-							onChange={this.onSecurityChange}
-							ref="security" />
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
-						<Col xs={10}>
-						<Combobox
-							suggest
-							data={AccountTypeList}
-							valueField='TypeId'
-							textField='Name'
-							defaultValue={this.state.type}
-							onChange={this.onTypeChange}
-							ref="type" />
-						</Col>
-					</FormGroup>
-					</Form>
-					</Tab>
-					<Tab eventKey={2} title="Sync (OFX)">
-					<Form horizontal onSubmit={this.onSubmit}>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>OFX URL</Col>
-						<Col xs={10}>
-						<FormControl type="text"
-							value={this.state.ofxurl}
-							onChange={this.onChange}
-							ref="ofxurl"/>
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>ORG</Col>
-						<Col xs={10}>
-						<FormControl type="text"
-							value={this.state.ofxorg}
-							onChange={this.onChange}
-							ref="ofxorg"/>
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>FID</Col>
-						<Col xs={10}>
-						<FormControl type="text"
-							value={this.state.ofxfid}
-							onChange={this.onChange}
-							ref="ofxfid"/>
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>Username</Col>
-						<Col xs={10}>
-						<FormControl type="text"
-							value={this.state.ofxuser}
-							onChange={this.onChange}
-							ref="ofxuser"/>
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>{ofxBankIdName}</Col>
-						<Col xs={10}>
-						<FormControl type="text"
-							disabled={bankIdDisabled}
-							value={this.state.ofxbankid}
-							onChange={this.onChange}
-							ref="ofxbankid"/>
-						</Col>
-					</FormGroup>
-					<FormGroup>
-						<Col componentClass={ControlLabel} xs={2}>Account ID</Col>
-						<Col xs={10}>
-						<FormControl type="text"
-							value={this.state.ofxacctid}
-							onChange={this.onChange}
-							ref="ofxacctid"/>
-						</Col>
-					</FormGroup>
-					{ofxAcctType}
-					<Panel collapsible header="Advanced Settings">
-						<FormGroup>
-							<Col componentClass={ControlLabel} xs={2}>Client UID</Col>
-							<Col xs={10}>
-							<FormControl type="text"
-								value={this.state.ofxclientuid}
-								onChange={this.onChange}
-								ref="ofxclientuid"/>
-							</Col>
-						</FormGroup>
-						<FormGroup>
-							<Col componentClass={ControlLabel} xs={2}>App ID</Col>
-							<Col xs={10}>
-							<FormControl type="text"
-								value={this.state.ofxappid}
-								onChange={this.onChange}
-								ref="ofxappid"/>
-							</Col>
-						</FormGroup>
-						<FormGroup>
-							<Col componentClass={ControlLabel} xs={2}>App Version</Col>
-							<Col xs={10}>
-							<FormControl type="text"
-								value={this.state.ofxappver}
-								onChange={this.onChange}
-								ref="ofxappver"/>
-							</Col>
-						</FormGroup>
-						<FormGroup>
-							<Col componentClass={ControlLabel} xs={2}>OFX Version</Col>
-							<Col xs={10}>
-							<FormControl type="text"
-								value={this.state.ofxversion}
-								onChange={this.onChange}
-								ref="ofxversion"/>
-							</Col>
-						</FormGroup>
-						<FormGroup>
-							<Col xsOffset={2} xs={10}>
-							<Checkbox
-								checked={this.state.ofxnoindent ? "checked" : ""}
-								onClick={this.onNoIndentClick}>
-									Don't indent OFX request files
-							</Checkbox>
-							</Col>
-						</FormGroup>
-					</Panel>
-					</Form>
-					</Tab>
-				</Tabs>
-				</Modal.Body>
-				<Modal.Footer>
-					<ButtonGroup className="pull-right">
-						<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
-						<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
-					</ButtonGroup>
-				</Modal.Footer>
-			</Modal>
-		);
-	}
-}
-
+var AddEditAccountModal = require('./AddEditAccountModal');
 
 class DeleteAccountModal extends React.Component {
 	getInitialState(props) {
@@ -491,125 +151,6 @@ class DeleteAccountModal extends React.Component {
 	}
 }
 
-class AccountTreeNode extends React.Component {
-	constructor() {
-		super();
-		this.state = {expanded: false};
-		this.onToggle = this.handleToggle.bind(this);
-		this.onChildSelect = this.handleChildSelect.bind(this);
-		this.onSelect = this.handleSelect.bind(this);
-	}
-	handleToggle(e) {
-		e.preventDefault();
-		this.setState({expanded:!this.state.expanded});
-	}
-	handleChildSelect(account) {
-		if (this.props.onSelect != null)
-			this.props.onSelect(account);
-	}
-	handleSelect() {
-		if (this.props.onSelect != null)
-			this.props.onSelect(this.props.account);
-	}
-	render() {
-		var glyph = this.state.expanded ? 'minus' : 'plus';
-		var active = (this.props.selectedAccount != -1 &&
-			this.props.account.AccountId == this.props.selectedAccount);
-		var buttonStyle = active ? "info" : "link";
-
-		var self = this;
-		var children = this.props.accountChildren[this.props.account.AccountId].map(function(childId) {
-			var account = self.props.accounts[childId];
-			return (
-				<AccountTreeNode
-					key={account.AccountId}
-					account={account}
-					selectedAccount={self.props.selectedAccount}
-					accounts={self.props.accounts}
-					accountChildren={self.props.accountChildren}
-					onSelect={self.onChildSelect}/>
-		   );
-		});
-		var accounttreeClasses = "accounttree"
-		var expandButton = [];
-		if (children.length > 0) {
-			expandButton.push((
-				<Button onClick={this.onToggle}
-						key={1}
-						bsSize="xsmall"
-						bsStyle="link"
-						className="accounttree-expandbutton">
-					<Glyphicon glyph={glyph} bsSize="xsmall"/>
-				</Button>
-			));
-		} else {
-			accounttreeClasses += "-nochildren";
-		}
-		return (
-			<div className={accounttreeClasses}>
-				{expandButton}
-				<Button onClick={this.onSelect}
-						bsStyle={buttonStyle}
-						className="accounttree-name">
-					{this.props.account.Name}
-				</Button>
-				<Collapse in={this.state.expanded}>
-					<div>
-						{children}
-					</div>
-				</Collapse>
-			</div>
-		);
-	}
-}
-
-class AccountTree extends React.Component {
-	constructor() {
-		super();
-		this.state = {height: 0};
-		this.onSelect = this.handleSelect.bind(this);
-	}
-	handleSelect(account) {
-		if (this.props.onSelect != null) {
-			this.props.onSelect(account);
-		}
-	}
-	resize() {
-		var div = ReactDOM.findDOMNode(this);
-		this.setState({height: div.parentElement.clientHeight - 73});
-	}
-	componentDidMount() {
-		this.resize();
-		var self = this;
-		$(window).resize(function() {self.resize();});
-	}
-	render() {
-		var accounts = this.props.accounts;
-
-		var children = [];
-		for (var accountId in accounts) {
-			if (accounts.hasOwnProperty(accountId) &&
-					accounts[accountId].isRootAccount()) {
-				children.push((<AccountTreeNode
-					key={accounts[accountId].AccountId}
-					account={accounts[accountId]}
-					selectedAccount={this.props.selectedAccount}
-					accounts={this.props.accounts}
-					accountChildren={this.props.accountChildren}
-					onSelect={this.onSelect}/>));
-			}
-		}
-
-		var style = {height: this.state.height + "px"};
-
-		return (
-			<div className="accounttree-root" style={style} >
-				{children}
-			</div>
-		);
-	}
-}
-
 class AccountsTab extends React.Component {
 	constructor() {
 		super();
diff --git a/js/components/AddEditAccountModal.js b/js/components/AddEditAccountModal.js
new file mode 100644
index 0000000..76a4328
--- /dev/null
+++ b/js/components/AddEditAccountModal.js
@@ -0,0 +1,368 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+var ReactBootstrap = require('react-bootstrap');
+var Col = ReactBootstrap.Col;
+var Tabs = ReactBootstrap.Tabs;
+var Tab = ReactBootstrap.Tab;
+var Panel = ReactBootstrap.Panel;
+var Modal = ReactBootstrap.Modal;
+var Form = ReactBootstrap.Form;
+var FormGroup = ReactBootstrap.FormGroup;
+var FormControl = ReactBootstrap.FormControl;
+var ControlLabel = ReactBootstrap.ControlLabel;
+var Checkbox = ReactBootstrap.Checkbox;
+var Button = ReactBootstrap.Button;
+var ButtonGroup = ReactBootstrap.ButtonGroup;
+
+var Combobox = require('react-widgets').Combobox;
+
+var AccountCombobox = require('./AccountCombobox');
+
+var models = require('../models');
+var Account = models.Account;
+var AccountType = models.AccountType;
+var AccountTypeList = models.AccountTypeList;
+
+class AddEditAccountModal extends React.Component {
+	getInitialState(props) {
+		var s = {
+			accountid: -1,
+			security: 1,
+			parentaccountid: -1,
+			type: 1,
+			name: "",
+			ofxurl: "",
+			ofxorg: "",
+			ofxfid: "",
+			ofxuser: "",
+			ofxbankid: "",
+			ofxacctid: "",
+			ofxaccttype: "CHECKING",
+			ofxclientuid: "",
+			ofxappid: "",
+			ofxappver: "",
+			ofxversion: "",
+			ofxnoindent: false,
+		};
+		if (!props) {
+			return s;
+		} else if (props.editAccount != null) {
+			s.accountid = props.editAccount.AccountId;
+			s.name = props.editAccount.Name;
+			s.security = props.editAccount.SecurityId;
+			s.parentaccountid = props.editAccount.ParentAccountId;
+			s.type = props.editAccount.Type;
+			s.ofxurl = props.editAccount.OFXURL;
+			s.ofxorg = props.editAccount.OFXORG;
+			s.ofxfid = props.editAccount.OFXFID;
+			s.ofxuser = props.editAccount.OFXUser;
+			s.ofxbankid = props.editAccount.OFXBankID;
+			s.ofxacctid = props.editAccount.OFXAcctID;
+			s.ofxaccttype = props.editAccount.OFXAcctType;
+			s.ofxclientuid = props.editAccount.OFXClientUID;
+			s.ofxappid = props.editAccount.OFXAppID;
+			s.ofxappver = props.editAccount.OFXAppVer;
+			s.ofxversion = props.editAccount.OFXVersion;
+			s.ofxnoindent = props.editAccount.OFXNoIndent;
+		} else if (props.initialParentAccount != null) {
+			s.security = props.initialParentAccount.SecurityId;
+			s.parentaccountid = props.initialParentAccount.AccountId;
+			s.type = props.initialParentAccount.Type;
+		}
+		return s;
+	}
+	constructor() {
+		super();
+		this.state = this.getInitialState();
+		this.onCancel = this.handleCancel.bind(this);
+		this.onChange = this.handleChange.bind(this);
+		this.onNoIndentClick = this.handleNoIndentClick.bind(this);
+		this.onSecurityChange = this.handleSecurityChange.bind(this);
+		this.onTypeChange = this.handleTypeChange.bind(this);
+		this.onParentChange = this.handleParentChange.bind(this);
+		this.onSubmit = this.handleSubmit.bind(this);
+	}
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.show && !this.props.show) {
+			this.setState(this.getInitialState(nextProps));
+		}
+	}
+	handleCancel() {
+		if (this.props.onCancel != null)
+			this.props.onCancel();
+	}
+	handleChange() {
+		this.setState({
+			name: ReactDOM.findDOMNode(this.refs.name).value,
+			ofxurl: ReactDOM.findDOMNode(this.refs.ofxurl).value,
+			ofxorg: ReactDOM.findDOMNode(this.refs.ofxorg).value,
+			ofxfid: ReactDOM.findDOMNode(this.refs.ofxfid).value,
+			ofxuser: ReactDOM.findDOMNode(this.refs.ofxuser).value,
+			ofxbankid: ReactDOM.findDOMNode(this.refs.ofxbankid).value,
+			ofxacctid: ReactDOM.findDOMNode(this.refs.ofxacctid).value,
+			ofxclientuid: ReactDOM.findDOMNode(this.refs.ofxclientuid).value,
+			ofxappid: ReactDOM.findDOMNode(this.refs.ofxappid).value,
+			ofxappver: ReactDOM.findDOMNode(this.refs.ofxappver).value,
+			ofxversion: ReactDOM.findDOMNode(this.refs.ofxversion).value,
+		});
+		if (this.state.type != AccountType.Investment) {
+			this.setState({
+				ofxaccttype: ReactDOM.findDOMNode(this.refs.ofxaccttype).value,
+			});
+		}
+	}
+
+	handleNoIndentClick() {
+		this.setState({ofxnoindent: !this.state.ofxnoindent});
+	}
+	handleSecurityChange(security) {
+		if (security.hasOwnProperty('SecurityId'))
+			this.setState({
+				security: security.SecurityId
+			});
+	}
+	handleTypeChange(type) {
+		if (type.hasOwnProperty('TypeId'))
+			this.setState({
+				type: type.TypeId
+			});
+	}
+	handleParentChange(parentAccount) {
+		this.setState({parentaccountid: parentAccount.AccountId});
+	}
+	handleSubmit() {
+		var a = new Account();
+
+		if (this.props.editAccount != null)
+			a.AccountId = this.state.accountid;
+		a.Name = this.state.name;
+		a.ParentAccountId = this.state.parentaccountid;
+		a.SecurityId = this.state.security;
+		a.Type = this.state.type;
+
+		a.OFXURL = this.state.ofxurl;
+		a.OFXORG = this.state.ofxorg;
+		a.OFXFID = this.state.ofxfid;
+		a.OFXUser = this.state.ofxuser;
+		a.OFXBankID = this.state.ofxbankid;
+		a.OFXAcctID = this.state.ofxacctid;
+		a.OFXAcctType = this.state.ofxaccttype;
+		a.OFXClientUID = this.state.ofxclientuid;
+		a.OFXAppID = this.state.ofxappid;
+		a.OFXAppVer = this.state.ofxappver;
+		a.OFXVersion = this.state.ofxversion;
+		a.OFXNoIndent = this.state.ofxnoindent;
+
+		if (this.props.onSubmit != null)
+			this.props.onSubmit(a);
+	}
+	render() {
+		var headerText = (this.props.editAccount != null) ? "Edit" : "Create New";
+		var buttonText = (this.props.editAccount != null) ? "Save Changes" : "Create Account";
+		var rootName = (this.props.editAccount != null) ? "Top-level Account" : "New Top-level Account";
+		var ofxBankIdName = "Broker ID";
+		var ofxAcctType = [];
+		if (this.state.type != AccountType.Investment) {
+			ofxBankIdName = "Bank ID";
+			ofxAcctType = (
+				<FormGroup>
+					<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
+					<Col xs={10}>
+					<FormControl
+							componentClass="select"
+							placeholder="select"
+							value={this.state.ofxaccttype}
+							onChange={this.onChange}
+							ref="ofxaccttype">
+						<option value="CHECKING">Checking</option>
+						<option value="SAVINGS">Savings</option>
+						<option value="CC">Credit Card</option>
+						<option value="MONEYMRKT">Money Market</option>
+						<option value="CREDITLINE">Credit Line</option>
+						<option value="CD">CD</option>
+					</FormControl>
+					</Col>
+				</FormGroup>
+			);
+		}
+		var bankIdDisabled = (this.state.type != AccountType.Investment && this.state.ofxaccttype == "CC") ? true : false;
+		return (
+			<Modal show={this.props.show} onHide={this.onCancel}>
+				<Modal.Header closeButton>
+					<Modal.Title>{headerText} Account</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+				<Tabs defaultActiveKey={1} id="editAccountTabs">
+					<Tab eventKey={1} title="General">
+					<Form horizontal onSubmit={this.onSubmit}>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Name</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							value={this.state.name}
+							onChange={this.onChange}
+							ref="name"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Parent Account</Col>
+						<Col xs={10}>
+						<AccountCombobox
+							accounts={this.props.accounts}
+							accountChildren={this.props.accountChildren}
+							value={this.state.parentaccountid}
+							rootName={rootName}
+							onChange={this.onParentChange}
+							ref="parent" />
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Security</Col>
+						<Col xs={10}>
+						<Combobox
+							suggest
+							data={this.props.security_list}
+							valueField='SecurityId'
+							textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
+							defaultValue={this.state.security}
+							onChange={this.onSecurityChange}
+							ref="security" />
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
+						<Col xs={10}>
+						<Combobox
+							suggest
+							data={AccountTypeList}
+							valueField='TypeId'
+							textField='Name'
+							defaultValue={this.state.type}
+							onChange={this.onTypeChange}
+							ref="type" />
+						</Col>
+					</FormGroup>
+					</Form>
+					</Tab>
+					<Tab eventKey={2} title="Sync (OFX)">
+					<Form horizontal onSubmit={this.onSubmit}>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>OFX URL</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							value={this.state.ofxurl}
+							onChange={this.onChange}
+							ref="ofxurl"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>ORG</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							value={this.state.ofxorg}
+							onChange={this.onChange}
+							ref="ofxorg"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>FID</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							value={this.state.ofxfid}
+							onChange={this.onChange}
+							ref="ofxfid"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Username</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							value={this.state.ofxuser}
+							onChange={this.onChange}
+							ref="ofxuser"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>{ofxBankIdName}</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							disabled={bankIdDisabled}
+							value={this.state.ofxbankid}
+							onChange={this.onChange}
+							ref="ofxbankid"/>
+						</Col>
+					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Account ID</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							value={this.state.ofxacctid}
+							onChange={this.onChange}
+							ref="ofxacctid"/>
+						</Col>
+					</FormGroup>
+					{ofxAcctType}
+					<Panel collapsible header="Advanced Settings">
+						<FormGroup>
+							<Col componentClass={ControlLabel} xs={2}>Client UID</Col>
+							<Col xs={10}>
+							<FormControl type="text"
+								value={this.state.ofxclientuid}
+								onChange={this.onChange}
+								ref="ofxclientuid"/>
+							</Col>
+						</FormGroup>
+						<FormGroup>
+							<Col componentClass={ControlLabel} xs={2}>App ID</Col>
+							<Col xs={10}>
+							<FormControl type="text"
+								value={this.state.ofxappid}
+								onChange={this.onChange}
+								ref="ofxappid"/>
+							</Col>
+						</FormGroup>
+						<FormGroup>
+							<Col componentClass={ControlLabel} xs={2}>App Version</Col>
+							<Col xs={10}>
+							<FormControl type="text"
+								value={this.state.ofxappver}
+								onChange={this.onChange}
+								ref="ofxappver"/>
+							</Col>
+						</FormGroup>
+						<FormGroup>
+							<Col componentClass={ControlLabel} xs={2}>OFX Version</Col>
+							<Col xs={10}>
+							<FormControl type="text"
+								value={this.state.ofxversion}
+								onChange={this.onChange}
+								ref="ofxversion"/>
+							</Col>
+						</FormGroup>
+						<FormGroup>
+							<Col xsOffset={2} xs={10}>
+							<Checkbox
+								checked={this.state.ofxnoindent ? "checked" : ""}
+								onClick={this.onNoIndentClick}>
+									Don't indent OFX request files
+							</Checkbox>
+							</Col>
+						</FormGroup>
+					</Panel>
+					</Form>
+					</Tab>
+				</Tabs>
+				</Modal.Body>
+				<Modal.Footer>
+					<ButtonGroup className="pull-right">
+						<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
+						<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
+					</ButtonGroup>
+				</Modal.Footer>
+			</Modal>
+		);
+	}
+}
+
+module.exports = AddEditAccountModal;