define(["react", "jquery"], function(React,$) {
    return function(ContentEditor, Block, ContentBlock) {
        return React.createClass({

            onDocChange: function(c, oldDoc, newDoc) {
                this.props.onChange(this, oldDoc, newDoc);
            },

            onContentChange: function(e) {
                var oldDoc = this.props.doc;
                var newDoc = $.extend({}, oldDoc);
                newDoc.value = e.target.value;
                this.onDocChange(this, oldDoc, newDoc);
            },

            onExplanationChange: function(c, oldVal, newVal) {
                var oldDoc = this.props.doc;
                var newDoc = $.extend({}, oldDoc);
                newDoc.explanation = newVal;
                this.onDocChange(this, oldDoc, newDoc);
            },

            toggle: function(attribute) {
                return function() {
                    var oldDoc = this.props.doc;
                    var newDoc = $.extend({}, oldDoc);
                    newDoc[attribute] = !oldDoc[attribute];
                    this.onDocChange(this, oldDoc, newDoc);
                }.bind(this);
            },

            render: function() {
                var emptyExplanation = {
                    type: "content",
                    children: [],
                    encoding: "markdown"
                };
                return (
                    <Block type="glossaryTerm" blockTypeTitle="Glossary term" doc={this.props.doc} onChange={this.onDocChange}>
                        <div className="small-3 columns">
                            <div className="row">
                                <input type="text" value={this.props.doc.value} onChange={this.onContentChange} placeholder="Glossary term"/>
                            </div>
                        </div>
                        <div className="small-9 columns" >
                            <ContentBlock type="content" blockTypeTitle="Explanation" doc={this.props.doc.explanation || emptyExplanation} onChange={this.onExplanationChange} />
                        </div>
                    </Block>
                );
            }
        })
    }
})

@@ -451,16 +451,156 @@
 .value;%0A
+                if (newDoc.autoId) %7B%0A                    newDoc.id = e.target.value.toLowerCase().replace(/%5B%5E%5Cw%5D/g, '-');%0A                %7D%0A
         
@@ -639,32 +639,32 @@
 ldDoc, newDoc);%0A
-
             %7D,%0A%0A
@@ -931,32 +931,747 @@
             %7D,%0A%0A
+            onAutoIdToggle: function(c, oldVal, newVal) %7B%0A                var oldDoc = this.props.doc;%0A                var newDoc = $.extend(%7B%7D, oldDoc);%0A                newDoc.autoId = !newDoc.autoId;%0A                if (newDoc.autoId) %7B%0A                    newDoc.id = newDoc.value.toLowerCase().replace(/%5B%5E%5Cw%5D/g, '-');%0A                %7D%0A                this.onDocChange(this, oldDoc, newDoc);%0A            %7D,%0A%0A            onIdChange: function(c, oldVal, newVal) %7B%0A                var oldDoc = this.props.doc;%0A                var newDoc = $.extend(%7B%7D, oldDoc);%0A                newDoc.id = c.target.value.toLowerCase().replace(/%5B%5E%5Cw%5D/g, '-');%0A                this.onDocChange(this, oldDoc, newDoc);%0A            %7D,%0A%0A
             togg
@@ -2027,32 +2027,167 @@
 r: function() %7B%0A
+                if (typeof this.props.doc.autoId == 'undefined') %7B%0A                    this.props.doc.autoId = true;%0A                %7D%0A
                 
@@ -2742,19 +2742,411 @@
 ry term%22
+ 
 /%3E%0A
+                                %3Cinput type=%22checkbox%22 checked=%7Bthis.props.doc.autoId%7D onChange=%7Bthis.onAutoIdToggle%7D /%3E%3Clabel%3EAutomatic IDs%3C/label%3E%0A                                %7Bthis.props.doc.autoId && %3Cp%3EID: %7Bthis.props.doc.id%7D%3C/p%3E%7D%0A                                %7B!this.props.doc.autoId && %3Cinput type=%22text%22 value=%7Bthis.props.doc.id%7D onChange=%7Bthis.onIdChange%7D placeholder=%22ID%22 /%3E%7D%0A
         

Allow editing of glossary terms IDs and add the option to have them auto-generated