Index: /js/human_3d_alignment/src/widgets/fitviewer.jsx
===================================================================
--- /js/human_3d_alignment/src/widgets/fitviewer.jsx	(revision 911)
+++ /js/human_3d_alignment/src/widgets/fitviewer.jsx	(revision 912)
@@ -116,16 +116,21 @@
         this.createThirdRow = this.createThirdRow.bind(this);
         this.createFourthRow = this.createFourthRow.bind(this);
-        this.select = this.select.bind(this);
-    }
-
-    select(e) {
+        this.selectLetter = this.selectLetter.bind(this);
+        this.selectNumber = this.selectNumber.bind(this);
+    }
+
+    selectNumber(e) {
         let item = null;
         let index;
 
+        let type = 0;
+
         for (let i = 0; i < this.props.parts1; i++) {
             let index2 = (i+1).toString();
+            let itemRow1 =  document.querySelector('#rowField1');
             let itemD = document.querySelector('#creature' + index2);
             let itemP = document.querySelector('#p' + index2);
-            if (e.target === itemD || e.target === itemP) {
+            if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow1) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow1)) {
+                type = 1;
                 item = null;
                 index = index2;
@@ -134,94 +139,16 @@
         }
 
-        for (let i = 0; i < this.props.parts2; i++) {
-            let index2 = '';
-            if (i + 1 + 64 > 90) {
-                index2 = String.fromCharCode(i + 1 + 70);
-            } else {
-                index2 = String.fromCharCode(i + 1 + 64);
-            }     
-            let itemD = document.querySelector('#creature' + index2);
-            let itemP = document.querySelector('#p' + index2);
-            if (e.target === itemD || e.target === itemP) {
-                item = null;
-                index = index2;
-                item = document.querySelector('#creature' + index);
-            }
-        }
-
         if (this.state.choosed != ' ') {
-            if (!item) {
-                if (!isNaN(this.state.choosed)) {
-                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
-                        let index2 = (i+1).toString();
-                        let itemD =  document.querySelector('#field1-' + index2);
-
-                        
-                        if (e.target === itemD) {
-                            let index3 = this.props.selected1.indexOf(this.state.choosed);
-
-                            if (index3 > -1) {
-                                this.props.handleChangeSelected(1, index3, ' ');
-                            }
-                            this.props.handleChangeSelected(1, i, this.state.choosed);
-                        }
-                    }
-                } else {
-                    for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
-                        let index2 = (i+1).toString();
-                        let itemD =  document.querySelector('#field2-' + index2);
-
-                        
-                        if (e.target === itemD) {
-
-                            let temp = this.state.choosed;
-                            if (this.state.choosed.charCodeAt(0) > 90) {
-                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
-                            }
-
-                            let index3 = this.props.selected2.indexOf(temp);
-
-                            if (index3 > -1) {
-                                this.props.handleChangeSelected(2, index3, ' ');
-                            }
-                            this.props.handleChangeSelected(2, i, this.state.choosed);
-                        }
-                    }
-                }
+            if (type == 0) {
                 this.setState({ choosed: ' ' }, function() {
                     console.log(this.state.choosed);
                 });
-
-            } else {
-                let item2 = document.querySelector('#creature' + this.state.choosed);
-                if ((item.parentNode.parentNode.parentNode.className == 'rowField' || item.parentNode.parentNode.parentNode.className == 'rowBench') &&
-                    (item2.parentNode.parentNode.parentNode.className == 'rowField' || item2.parentNode.parentNode.parentNode.className == 'rowBench')) {
-                    let nr = 0;
-                    let index1 = 0;
-                    let index2 = 0;
-                    let temp = this.state.choosed;
-                    if (this.state.choosed.charCodeAt(0) > 90) {
-                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
-                    }
-                    if (!isNaN(this.state.choosed)) {
-                        nr = 1;
-                        index1 = this.props.selected1.indexOf(this.state.choosed);
-                        index2 = this.props.selected1.indexOf(index);
-                    } else {
-                        nr = 2;
-                        let temp1 = this.state.choosed;
-                        let temp2 = index;
-                        if (this.state.choosed.charCodeAt(0) > 90) {
-                            temp1 = String.fromCharCode(temp1.charCodeAt(0) - 6);
-                        }
-                        if (index.charCodeAt(0) > 90) {
-                            temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
-                        }
-
-                        index1 = this.props.selected2.indexOf(temp);
-                        index2 = this.props.selected2.indexOf(temp2);
-                    }
-                    this.props.handleChangeSelected(nr, index1, index);
-                    this.props.handleChangeSelected(nr, index2, this.state.choosed);
+            } else {
+                if (!isNaN(this.state.choosed)) {
+                    let index1 = this.props.selected1.indexOf(index.toString());
+                    let index2 = this.props.selected1.indexOf(this.state.choosed);
+
+                    this.props.handleChangeSelected(1, index1, this.state.choosed);
+                    this.props.handleChangeSelected(1, index2, index.toString());
 
                     this.setState({ choosed: ' ' }, function() {
@@ -229,37 +156,10 @@
                     });
                 } else {
-                    if (item.parentNode.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode || 
-                        item.parentNode.parentNode.parentNode === item2.parentNode.parentNode.parentNode.parentNode) {
-                        let nr = 0;
-                        let index1 = 0;
-                        let index2 = 0;
-                        if (!isNaN(this.state.choosed)) {
-                            nr = 1;
-                            index1 = this.props.selected1.indexOf(this.state.choosed);
-                            index2 = this.props.selected1.indexOf(index);
-                        } else {
-                            nr = 2;
-                            let temp = this.state.choosed;
-                            let temp2 = index;
-                            if (this.state.choosed.charCodeAt(0) > 90) {
-                                temp = String.fromCharCode(temp.charCodeAt(0) - 6);
-                            }
-                            if (index.charCodeAt(0) > 90) {
-                                temp2 = String.fromCharCode(temp2.charCodeAt(0) - 6);
-                            }
-                            index1 = this.props.selected2.indexOf(temp);
-                            index2 = this.props.selected2.indexOf(temp2);
-                        }
-                        this.props.handleChangeSelected(nr, index1, index);
-                        this.props.handleChangeSelected(nr, index2, this.state.choosed);
-                        this.setState({ choosed: ' ' }, function() {
-                            console.log(this.state.choosed);
-                        });
-                    } else {
-                        this.setState({ choosed: index }, function() {
-                            console.log(this.state.choosed);
-                        });
-                    }
-                }
+                    this.setState({ choosed: index }, function() {
+                        console.log(this.state.choosed);
+                    });
+                }
+    
+                    
             }
         } else {
@@ -269,4 +169,109 @@
                 });
             }
+        }
+    }
+
+    selectLetter(e) {
+        let index;
+        let indexL;
+
+        let type = 0;
+
+        for (let i = 0; i < this.props.parts2; i++) {
+            let index2 = '';
+            if (i + 1 + 64 > 90) {
+                index2 = String.fromCharCode(i + 1 + 70);
+            } else {
+                index2 = String.fromCharCode(i + 1 + 64);
+            }
+            let itemRow2 =  document.querySelector('#rowCreature2');
+            let itemD = document.querySelector('#creature' + index2);
+            let itemP = document.querySelector('#p' + index2);
+
+            if ((e.target === itemD && e.target.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode == itemRow2) ||
+                (e.target === itemD && e.target.parentNode.parentNode.parentNode.parentNode === itemRow2) || (e.target === itemP && e.target.parentNode.parentNode.parentNode.parentNode.parentNode == itemRow2)) {
+                type = 1;
+                index = index2;
+                indexL = index2;
+                if (indexL.charCodeAt(0) > 90) {
+                    indexL = String.fromCharCode(indexL.charCodeAt(0) - 6);
+                }
+            }
+        }
+
+        if (this.state.choosed != ' ') {
+            if (type == 0) {
+                for (let i = 0; i < Math.min(this.props.parts1, this.props.parts2); i++) {
+                    let index2 = (i+1).toString();
+                    let itemD =  document.querySelector('#field2-' + index2);
+
+                    if (e.target === itemD) {
+                        let temp = this.state.choosed;
+                        if (this.state.choosed.charCodeAt(0) > 90) {
+                            temp = String.fromCharCode(temp.charCodeAt(0) - 6);
+                        }
+
+                        let index3 = this.props.selected2.indexOf(temp);
+
+                        if (index3 > -1) {
+                            this.props.handleChangeSelected(2, index3, ' ');
+                        }
+                        this.props.handleChangeSelected(2, i, this.state.choosed);
+                    }
+
+                }
+
+                this.setState({ choosed: ' ' }, function() {
+                    console.log(this.state.choosed);
+                });
+            } else {
+                if (isNaN(this.state.choosed)) {
+
+                    let temp = this.state.choosed;
+                    if (temp.charCodeAt(0) > 90) {
+                        temp = String.fromCharCode(temp.charCodeAt(0) - 6);
+                    }
+
+                    if (indexL == temp) {
+                        this.setState({ choosed: ' ' }, function() {
+                            console.log(this.state.choosed);
+                        });
+                    } else {
+                        let index1 = this.props.selected2.indexOf(indexL);
+                        let index2 = this.props.selected2.indexOf(temp);
+
+                        if (index1 > -1 && index2 > -1) {
+                            this.props.handleChangeSelected(2, index1, this.state.choosed);
+                            this.props.handleChangeSelected(2, index2, index);
+                            this.setState({ choosed: ' ' }, function() {
+                                console.log(this.state.choosed);
+                            });
+                        } else if (index1 > -1 && index2 <= -1) {
+                            this.props.handleChangeSelected(2, index1, this.state.choosed);
+                            this.setState({ choosed: ' ' }, function() {
+                                console.log(this.state.choosed);
+                            });
+                        } else if (index1 <= -1 && index2 > -1) {
+                            this.props.handleChangeSelected(2, index2, indexL);
+                            this.setState({ choosed: ' ' }, function() {
+                                console.log(this.state.choosed);
+                            });
+                        } else {
+                            this.setState({ choosed: index }, function() {
+                                console.log(this.state.choosed);
+                            });
+                        }
+                    }
+                } else {
+                    this.setState({ choosed: index }, function() {
+                        console.log(this.state.choosed);
+                    });
+                }
+            }
+            
+        } else {
+            this.setState({ choosed: index }, function() {
+                console.log(this.state.choosed);
+            });
         }
     }
@@ -285,5 +290,5 @@
                                 <div id={'creature' + this.props.selected1[i]} 
                                     className='creature1' 
-                                    onMouseDown={this.select}
+                                    onMouseDown={this.selectNumber}
                                     style={styles.creatureBench1}>
                                     <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
@@ -302,5 +307,5 @@
                                 <div id={'creature' + this.props.selected1[i]} 
                                     className='creature1' 
-                                    onMouseDown={this.select}
+                                    onMouseDown={this.selectNumber}
                                     style={styles.creatureBench}>
                                     <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
@@ -316,5 +321,5 @@
                     <div id='cellnull' className='cell' style={styles.cell}>
                         <div id={'field1-'+(i+1).toString()} 
-                            onMouseDown = {this.select}
+                            onMouseDown = {this.selectNumber}
                             className='field'
                             style={styles.middleField}>
@@ -352,5 +357,5 @@
                                 <div id={'creature' + value}
                                     className='creature2' 
-                                    onMouseDown={this.select}
+                                    onMouseDown={this.selectLetter}
                                     style={styles.creatureBench2}>
                                     <p id={'p' + value} style={styles.creatureText}>
@@ -369,5 +374,5 @@
                                 <div id={'creature' + value} 
                                     className='creature2' 
-                                    onMouseDown={this.select}
+                                    onMouseDown={this.selectLetter}
                                     style={styles.creatureBench}>
                                     <p id={'p' + value} style={styles.creatureText}>
@@ -383,5 +388,5 @@
                     <div id='cellnull' className='cell' style={styles.cell}>
                         <div id={'field2-'+(i+1).toString()} 
-                            onMouseDown = {this.select}
+                            onMouseDown = {this.selectLetter}
                             className='field'
                             style={styles.middleField}>
@@ -416,5 +421,5 @@
                             <div id={'creature' + idtext} 
                                 className='creature2' 
-                                onMouseDown={this.select}
+                                onMouseDown={this.selectLetter}
                                 style={styles.creatureBench2}>
                                 <p id={'p' + idtext} style={styles.creatureText}>
@@ -429,5 +434,5 @@
                             <div id={'creature' + idtext}
                                 className='creature2' 
-                                onMouseDown={this.select}
+                                onMouseDown={this.selectLetter}
                                 style={styles.creatureBench}>
                                 <p id={'p' + idtext} style={styles.creatureText}>
@@ -460,15 +465,15 @@
                 </h2>
 
-                <div key='rowsFields' onMouseDown = {this.select} className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
-                    <div id='rowCreature1' onMouseDown = {this.select}>
-                        <div id='rowField1' className='rowField' onMouseDown = {this.select} style={styles.row}>
+                <div key='rowsFields' className="rows" style={{display: 'table', borderCollapse: 'separate', borderSpacing: '15px'}}>
+                    <div id='rowCreature1' onMouseDown = {this.selectNumber}>
+                        <div id='rowField1' className='rowField' onMouseDown = {this.selectNumber} style={styles.row}>
                             {this.createSecondRow()}
                         </div>
                     </div>
-                    <div id='rowCreature2'>
-                        <div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
+                    <div id='rowCreature2' onMouseDown = {this.selectLetter}>
+                        <div id='rowField2' className='rowField' onMouseDown = {this.selectLetter} style={styles.row}>
                             {this.createThirdRow()}
                         </div>
-                        <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
+                        <div id='rowBench2' className='rowBench' onMouseDown = {this.selectLetter} style={styles.row}>
                             {this.createFourthRow()}
                         </div>
