Index: js/human_3d_alignment/src/widgets/endviewer.jsx
===================================================================
--- js/human_3d_alignment/src/widgets/endviewer.jsx	(revision 911)
+++ js/human_3d_alignment/src/widgets/endviewer.jsx	(revision 911)
@@ -0,0 +1,66 @@
+/*global Module*/
+"use strict";
+import React from 'react';
+
+const styles = {
+    content: {
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+        top: '50%',
+        textAlign: 'center',
+        fontSize: '30px'
+    },
+    text: {
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
+    }
+}
+
+/**
+ * Component for assesing genotypes matching.
+ */
+class EndViewer extends React.Component {
+    /**
+     * Basic constructor.
+     * @param {any} props properties of Component
+     */
+    constructor(props) {
+        super(props);
+        this.props = props;
+        
+        this.download = this.download.bind(this);
+    }
+
+    download(type) {
+        let file = new Blob([this.props.result], {type: type});
+        let filename = this.props.userId + '.csv';
+        if (window.navigator.msSaveOrOpenBlob) // IE10+
+            window.navigator.msSaveOrOpenBlob(file, filename);
+        else { // Others
+            let a = document.createElement("a"),
+                    url = URL.createObjectURL(file);
+            a.href = url;
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            setTimeout(function() {
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);  
+            }, 1500); 
+        }
+    }    
+     
+    render() {
+
+        return (
+            <div id = 'end' style={styles.content}>
+                <div style={styles.text}>Dziękujemy za udział w badaniu!</div>
+                <div>
+                    <button styles={styles.text} onClick={() => {this.download('text/plain')}}>Pobierz wyniki</button>
+                </div>
+            </div>
+        );
+    }
+}                          
+
+export default EndViewer;
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 911)
@@ -0,0 +1,482 @@
+/*global Module*/
+"use strict";
+
+import React from 'react';
+
+
+const styles = {
+    header: {
+        textAlign: 'center',
+        letterSpacing: '5px',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
+        webkitUserSelect : 'none', 
+        mozUserSelect: 'none', 
+        msUserSelect: 'none', 
+        userSelect: 'none'
+    },
+    creatureText: {
+        margin: '0',
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        marginRight: '-50%',
+        transform: 'translate(-50%, -50%)',
+        webkitUserSelect : 'none',
+        mozUserSelect: 'none',
+        msUserSelect: 'none',
+        userSelect: 'none',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
+    },
+    creatureBench: { 
+        position: 'relative', 
+        border: '2px solid black', 
+        color: 'white', 
+        backgroundColor: 'gray',
+        width: '50px', 
+        height: '50px', 
+        fontSize: '30px',
+        pointerEvent: 'none',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
+    },
+    creatureBench1: { 
+        position: 'relative', 
+        border: '2px solid black', 
+        color: 'white', 
+        backgroundColor: 'red',
+        width: '50px', 
+        height: '50px', 
+        fontSize: '30px',
+        pointerEvents: 'none',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
+    },
+    creatureBench2: { 
+        position: 'relative', 
+        border: '2px solid black', 
+        color: 'white', 
+        backgroundColor: 'blue',
+        width: '50px', 
+        height: '50px', 
+        fontSize: '30px',
+        pointerEvents: 'none',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace",
+    },
+    middleField:{
+        position: 'relative', 
+        color: 'gray', 
+        backgroundColor: 'gray',
+        width: '54px',
+        height: '54px',
+        webkitUserSelect: 'none',
+        mozUserSelect: 'none',
+        msUserSelect: 'none',
+        userSelect: 'none'
+    },
+    emptyField: {
+        display: 'table', 
+        width: '100%', 
+        height: '20px'
+    },
+    field: {
+        display: 'flex'
+    },
+    empty: {
+        webkitUserSelect : 'none',
+        mozUserSelect: 'none',
+        msUserSelect: 'none',
+        userSelect: 'none'
+    },
+    cell: {
+        display: 'table-cell'
+    },
+    row: {
+        display: 'table-row',
+    }
+};
+
+/**
+ * Component for assesing genotypes matching.
+ */
+class FitViewer extends React.Component {
+    /**
+     * Basic constructor.
+     * @param {any} props properties of Component
+     */
+    constructor(props) {
+        super(props);
+        this.props = props;
+
+        this.state = {
+            height: 2,
+            choosed: ' ',
+            initialX: 0,
+            initialY: 0
+        }
+        
+        this.createSecondRow = this.createSecondRow.bind(this);
+        this.createThirdRow = this.createThirdRow.bind(this);
+        this.createFourthRow = this.createFourthRow.bind(this);
+        this.select = this.select.bind(this);
+    }
+
+    select(e) {
+        let item = null;
+        let index;
+
+        for (let i = 0; i < this.props.parts1; i++) {
+            let index2 = (i+1).toString();
+            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);
+            }
+        }
+
+        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);
+                        }
+                    }
+                }
+                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);
+
+                    this.setState({ choosed: ' ' }, function() {
+                        console.log(this.state.choosed);
+                    });
+                } 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);
+                        });
+                    }
+                }
+            }
+        } else {
+            if (item != null) {
+                this.setState({ choosed: index }, function() {
+                    console.log(this.state.choosed);
+                });
+            }
+        }
+    }
+
+    createSecondRow() {
+        let row = []
+        let len = Math.min(this.props.parts1, this.props.parts2);
+        for (let i = 0; i < len; i++) {        
+            if (this.props.selected1[i] != ' ') {
+                if (this.props.selected1[i] && this.state.choosed == this.props.selected1[i]) {   
+                    row.push(
+                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
+                            <div id={'field1-'+(i+1).toString()} 
+                                className='field'
+                                style={styles.middleField}>
+                                <div id={'creature' + this.props.selected1[i]} 
+                                    className='creature1' 
+                                    onMouseDown={this.select}
+                                    style={styles.creatureBench1}>
+                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
+                                        {this.props.selected1[i]}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                } else {
+                    row.push(
+                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
+                            <div id={'field1-'+(i+1).toString()} 
+                                className='field'
+                                style={styles.middleField}>
+                                <div id={'creature' + this.props.selected1[i]} 
+                                    className='creature1' 
+                                    onMouseDown={this.select}
+                                    style={styles.creatureBench}>
+                                    <p id={'p' + this.props.selected1[i]} style={styles.creatureText}>
+                                        {this.props.selected1[i]}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                }
+            } else {
+                row.push(
+                    <div id='cellnull' className='cell' style={styles.cell}>
+                        <div id={'field1-'+(i+1).toString()} 
+                            onMouseDown = {this.select}
+                            className='field'
+                            style={styles.middleField}>
+                            &nbsp;
+                        </div>
+                    </div>
+                );
+            }    
+        }
+        if (row.length == 0) {
+            row.push(
+                <div style={styles.empty}>&nbsp;</div>
+            );
+        }
+        return row;
+    }
+
+    createThirdRow() {
+        let row = [];
+        let len = Math.min(this.props.parts1, this.props.parts2);
+        for (let i = 0; i < len; i++) {  
+            if (this.props.selected2[i] && this.props.selected2[i] != ' ') { 
+                let value = this.props.selected2[i];
+                let char = value.charCodeAt(0);
+                if (char > 90) {
+                    char += 6;
+                    value = String.fromCharCode(char);
+                }
+                if (this.state.choosed == value) {    
+                    row.push(
+                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
+                            <div id={'field2-'+(i+1).toString()}
+                                className='field'
+                                style={styles.middleField}>
+                                <div id={'creature' + value}
+                                    className='creature2' 
+                                    onMouseDown={this.select}
+                                    style={styles.creatureBench2}>
+                                    <p id={'p' + value} style={styles.creatureText}>
+                                        {value}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                } else {
+                    row.push(
+                        <div id={'cell'+(i+1).toString()} className='cell' style={styles.cell}>
+                            <div id={'field2-'+(i+1).toString()}
+                                className='field'
+                                style={styles.middleField}>
+                                <div id={'creature' + value} 
+                                    className='creature2' 
+                                    onMouseDown={this.select}
+                                    style={styles.creatureBench}>
+                                    <p id={'p' + value} style={styles.creatureText}>
+                                        {value}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    );
+                }
+            } else {
+                row.push(
+                    <div id='cellnull' className='cell' style={styles.cell}>
+                        <div id={'field2-'+(i+1).toString()} 
+                            onMouseDown = {this.select}
+                            className='field'
+                            style={styles.middleField}>
+                        </div>
+                    </div>
+                );
+            }
+        }
+        if (row.length == 0) {
+            row.push(
+                <div style={styles.empty}>&nbsp;</div>
+            );
+        }
+        return row;
+    }
+
+    createFourthRow() {
+        let row = [];
+        for (let i = 0; i < this.props.parts2; i++) {
+            let idtext = '';
+            let idtext1 = String.fromCharCode(i + 1 + 64);
+            if (i + 1 + 64 >= 91) {
+                idtext = String.fromCharCode(i  + 1 + 70);
+            } else {
+                idtext = idtext1;
+            }
+
+            if (this.props.selected2.indexOf(idtext1) < 0) {
+                if (this.state.choosed == idtext) {
+                    row.push(
+                        <div id={'cell'+idtext} className='cell' style={styles.cell}>
+                            <div id={'creature' + idtext} 
+                                className='creature2' 
+                                onMouseDown={this.select}
+                                style={styles.creatureBench2}>
+                                <p id={'p' + idtext} style={styles.creatureText}>
+                                    {idtext}
+                                </p>
+                            </div>
+                        </div>
+                    );
+                } else {
+                    row.push(
+                        <div id={'cell'+idtext} className='cell' style={styles.cell}>
+                            <div id={'creature' + idtext}
+                                className='creature2' 
+                                onMouseDown={this.select}
+                                style={styles.creatureBench}>
+                                <p id={'p' + idtext} style={styles.creatureText}>
+                                    {idtext}
+                                </p>
+                            </div>
+                        </div>
+                    );
+                }
+            }
+        }
+        if (row.length == 0) {
+            row.push(
+                <div id='cellnull' className='cell' style={styles.cell}>
+                    <div style={styles.empty}>&nbsp;</div>
+                </div>
+            );
+        }
+        return row;
+    }
+     
+    render() {     
+        let h = ((this.props.fitHeight * 150 - 16) + 8 * (this.props.fitHeight - 1)).toString() + 'px';
+        let w = ((this.props.fitWidth * 150 - 16) + 8 * (this.props.fitWidth - 1)).toString() + 'px';
+
+        return (
+            <div id='fit' className='fit' onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}} style={{position: 'relative', width: w, height: h, whiteSpace: 'no-wrap', overflow: 'auto'}}>
+                <h2 className='title' style={styles.header}>
+                    DOPASOWANIE
+                </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}>
+                            {this.createSecondRow()}
+                        </div>
+                    </div>
+                    <div id='rowCreature2'>
+                        <div id='rowField2' className='rowField' onMouseDown = {this.select} style={styles.row}>
+                            {this.createThirdRow()}
+                        </div>
+                        <div id='rowBench2' className='rowBench' onMouseDown = {this.select} style={styles.row}>
+                            {this.createFourthRow()}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default FitViewer;
Index: js/human_3d_alignment/src/widgets/parmviewer.jsx
===================================================================
--- js/human_3d_alignment/src/widgets/parmviewer.jsx	(revision 911)
+++ js/human_3d_alignment/src/widgets/parmviewer.jsx	(revision 911)
@@ -0,0 +1,105 @@
+/*global Module*/
+"use strict";
+
+import React from 'react';
+import Select from 'react-select';
+
+const genders = [
+    { value: 'empty', label: ' ' },
+    { value: 'man', label: 'Mężczyzna' },
+    { value: 'woman', label: 'Kobieta' }
+];
+
+const currentYear = new Date().getFullYear();
+
+const years = [];
+years.push({value: 'empty', label: ' '})
+    
+for (let i = 0; i < 120; i += 1) {
+    years.push({ value: currentYear - i, label: currentYear - i });
+}
+
+const styles = {
+    header: {
+        display: 'table',
+        width: '100%',
+        height: '20px'
+    },
+    row: {
+        display: 'table',
+        width: '100%',
+        tableLayout: 'fixed'
+    },
+    desc: {
+        display: 'table-cell',
+        textAlign: 'right',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
+        webkitUserSelect : 'none', 
+        mozUserSelect: 'none', 
+        msUserSelect: 'none', 
+        userSelect: 'none'
+    },
+    ind: {
+        display: 'table-cell',
+        width: '20px',
+        webkitUserSelect : 'none', 
+        mozUserSelect: 'none', 
+        msUserSelect: 'none', 
+        userSelect: 'none'
+    },
+    select: {
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace"
+    }
+}
+
+/**
+ * Component for adding user parameters
+ */
+class ParmViewer extends React.Component {
+    /**
+     * Basic constructor.
+     * @param {any} props properties of Component
+     */
+    constructor(props) {
+        super(props);
+        this.props = props;
+        this.state = {};
+    }
+     
+    render() {
+        
+        return (
+            <div>
+                <div style={styles.header}/>
+                <div className='age' style={styles.row}>
+                    <span htmlFor="age" style={styles.desc}>Wiek</span>
+                    <Select 
+                        options={years}
+                        onChange={this.props.handleChangeYear}
+                        placeholder={'Wybierz rok urodzenia'}
+                        display={'table-cell'}
+                        height={'20px'} 
+                        styles={styles.select}
+                        noValidate
+                    />
+                    <div style={styles.ind}/>
+                </div>
+                <div className='gender' style={styles.row}>
+                    <span htmlFor="gender" style={styles.desc}>Płeć</span>
+                    <Select
+                        options={genders}
+                        onChange={this.props.handleChangeGender}
+                        placeholder='Wybierz płeć'
+                        display={'table-cell'}
+                        height={'20px'}
+                        styles={styles.select}
+                        noValidate
+                    />
+                    <div style={styles.ind}/>
+                </div>
+            </div>
+        );
+    }
+}                   
+
+export default ParmViewer;
Index: js/human_3d_alignment/src/widgets/similviewer.jsx
===================================================================
--- js/human_3d_alignment/src/widgets/similviewer.jsx	(revision 881)
+++ js/human_3d_alignment/src/widgets/similviewer.jsx	(revision 911)
@@ -3,9 +3,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import * as THREE from 'three';
 import Sviewer from '../visualization/sviewer';
 import { Md3dRotation, MdYoutubeSearchedFor } from 'react-icons/lib/md';
-import GenotypeParser from '../utils/genotypeparser';
-import _ from 'lodash';
-import * as THREE from 'three';
 
 /**
@@ -24,5 +22,7 @@
             rezoom: true,
             valid: true,
-            clicked: false
+            clicked: false,
+            controlMode: 'translate',
+            round: 0
         };
         this.start = this.start.bind(this);
@@ -38,13 +38,7 @@
         let temp2 = ReactDOM.findDOMNode(this.mount).parentNode;
         this.viewer = new Sviewer(temp2.clientWidth, temp2.clientHeight, temp);
-        if (this.model) {
-            //Module.destroy(this.model);
-        }
-        this.model = GenotypeParser.getModelFromGenotype("X(X,X)");
-        this.model2 = GenotypeParser.getModelFromGenotype("XX");
-        this.viewer.loadMeshesFromModel(this.model, this.model2);
         this.viewer.setAutoRotate(this.state.autorotate);
         this.viewer.setRezoom(this.state.rezoom);
-        //this.elementspicker = new ElementsPicker(this.viewer.scene, this.viewer.camera.getPerspectiveCamera());
+
         this.renderScene = this.viewer.renderScene.bind(this.viewer);
         this.lastw = temp2.clientWidth;
@@ -94,4 +88,35 @@
             this.viewer.renderer, 
             this.viewer.camera.getPerspectiveCamera());
+            
+        if (!this.props.blockView) {
+
+            if (this.props.round != this.state.round) {
+                this.setState({ round: this.props.round }, function() {
+                    console.log(`Round in sim: `, this.state.round);
+                });
+                this.viewer.add2Genotypes(this.props.genotype1, this.props.genotype2);
+                this.viewer.addLines(this.props.selected1, this.props.selected2);
+            }
+            if (this.props.controlMode != this.state.controlMode) {
+                this.setState({ controlMode: this.props.controlMode }, function() {
+                    console.log('Control mode: ', this.state.controlMode);
+                    this.viewer.setMode(this.state.controlMode);
+                })
+            }
+            if (this.viewer.selected1 != this.props.selected1) {
+                this.viewer.selected1 = [];
+                this.viewer.selected1 = this.props.selected1;
+            }
+            if (this.viewer.selected2 != this.props.selected2) {
+                this.viewer.selected2 = [];
+                this.viewer.selected2 = this.props.selected2;
+            }
+            if (this.props.round == this.state.round) {
+                this.viewer.addText();
+                this.viewer.addLines(this.props.selected1, this.props.selected2);
+            } else {
+                this.viewer.clearView();
+            }
+        }
     }
 
@@ -107,6 +132,7 @@
      */
     switchRezoom() {
-        this.setState({rezoom: !this.state.rezoom});
-        this.viewer.setRezoom(!this.state.rezoom);
+        this.setState({rezoom: !this.state.rezoom}, function() {
+            this.viewer.setRezoom(this.state.rezoom);
+        });
     }
 
@@ -115,6 +141,11 @@
      */
     switchAutorotate() {
-        this.setState({autorotate: !this.state.autorotate});
-        this.viewer.setAutoRotate(!this.state.autorotate);
+        if (this.state.rezoom) {
+            this.switchRezoom();
+        }
+        this.setState({autorotate: !this.state.autorotate}, function() {
+            console.log(this.state.autorotate);
+            this.viewer.setAutoRotate(this.state.autorotate);
+        });
     }
 
@@ -127,5 +158,4 @@
         mousePosition.x = ((evt.clientX - bound.left) / bound.width) * 2 - 1;
         mousePosition.y = -((evt.clientY - bound.top) / bound.height) * 2 + 1;
-        //let vector = new THREE.Vector3(mousePosition.x, mousePosition.y, 0.5);
         let vector = new THREE.Vector2(mousePosition.x, mousePosition.y);
         return vector;
@@ -137,4 +167,12 @@
      */
     handleMouseDown(evt) {
+        if (this.state.rezoom) {
+            this.switchRezoom();
+        }
+
+        if (this.state.autorotate) {
+            this.switchAutorotate();
+        }
+
         evt.preventDefault();
         let mousePosition = this.getMousePosition(evt);
@@ -147,4 +185,19 @@
      */
     handleMouseUp(evt) {
+
+        let position1 = [];
+        let position2 = [];
+        let rotation1 = [];
+        let rotation2 = [];
+        this.viewer.framstick1.mesh.position.toArray(position1);
+        this.viewer.framstick2.mesh.position.toArray(position2);
+        this.viewer.framstick1.mesh.rotation.toArray(rotation1);
+        this.viewer.framstick2.mesh.rotation.toArray(rotation2);
+
+        this.props.handleChangePosition1(position1);
+        this.props.handleChangePosition2(position2);
+        this.props.handleChangeRotation1(rotation1);
+        this.props.handleChangeRotation2(rotation2);
+
         evt.preventDefault();
         let mousePosition = this.getMousePosition(evt);
@@ -160,7 +213,5 @@
         let mousePosition = this.getMousePosition(evt);
         this.viewer.handleMouseMove(mousePosition);
-    }
-
-    
+    }    
      
     render() {
@@ -170,5 +221,5 @@
                     <tr onMouseDown={ev => {if (ev) ev.stopPropagation();}}>
                         <td rowSpan={2} style={{position:'relative', verticalAlign: 'top', alignContent: 'left'}}>
-                            <div style={{height: '100%', width: '100%', position: 'absolute', transform: 'translateZ(0)'}} onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
+                            <div id="simcontainer" style={{height: '100%', width: '100%', position: 'absolute', transform: 'translateZ(0)'}} onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
                                 <canvas ref={(mount) => {this.mount = mount;}} onMouseDown={(evt) => this.handleMouseDown(evt)} onMouseUp={(evt) => this.handleMouseUp(evt)} onMouseMove={(evt) => this.handleMouseMove(evt)} style={{position: 'absolute', zIndex: 1}}></canvas>
                                 <Md3dRotation onClick={() => this.switchAutorotate()}  style={{zIndex: 2, position: 'absolute', left: '5%', bottom: 0, width: '20%', height: '20%', maxWidth: '40px', maxHeight: '40px', minWidth: '15px', minHeight: '15px', color: this.state.autorotate ? 'green' : 'black'}} />
Index: js/human_3d_alignment/src/widgets/sliderviewer.jsx
===================================================================
--- js/human_3d_alignment/src/widgets/sliderviewer.jsx	(revision 911)
+++ js/human_3d_alignment/src/widgets/sliderviewer.jsx	(revision 911)
@@ -0,0 +1,160 @@
+/*global Module*/
+"use strict";
+
+import React from 'react';
+import Slider from 'react-input-slider';
+
+const styles = {
+    header: {
+        textAlign: 'center',
+        letterSpacing: '5px',
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
+        webkitUserSelect : 'none', 
+        mozUserSelect: 'none', 
+        msUserSelect: 'none', 
+        userSelect: 'none'
+    },
+    interval: {
+        display: 'table',
+        width: '100%',
+        height: '20px'
+    },
+    small_interval: {
+        display: 'table',
+        width: '100%',
+        height: '5px'
+    },
+    slider_position: {
+        textAlign: 'center',
+        width: '100%'
+    },
+    nextButton_position: {
+        display: 'table',
+        width: '100%',
+        textAlign: 'center'
+    },
+    finishButton_position: {
+        display: 'table',
+        width: '90%',
+        textAlign: 'right'
+    },
+    slider: {
+        width: '80%'
+    },
+    nextButton: {
+        width: '250px',
+        height: '50px',
+        fontSize: '28px'
+    },
+    finishButton: {
+        width: '200px',
+        height: '40px',
+        backgroundColor: 'red',
+        color: 'white',
+        fontSize: '16px'
+    },
+    percent: {
+        textAlign: 'center', 
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
+        webkitUserSelect : 'none', 
+        mozUserSelect: 'none', 
+        msUserSelect: 'none', 
+        userSelect: 'none'
+    }
+}
+
+/**
+ * Component for adding user parameters
+ */
+class SliderViewer extends React.Component {
+    /**
+     * Basic constructor.
+     * @param {any} props properties of Component
+     */
+    constructor(props) {
+        super(props);
+        this.props = props;
+        this.state = { 
+            percent: 50
+        }
+
+        this.handleChangePercent = this.handleChangePercent.bind(this);
+        this.onClickNext = this.onClickNext.bind(this);
+    }
+    
+    /**
+     * Allow to change percent in state of sliderViewer and set it also in props
+     * @param {number} per choosed similarity of framsticks by user in percentage
+     */
+    handleChangePercent(per) {
+		this.setState({ percent: per.x }, function() {
+            console.log(this.state.percent);
+            this.props.handleChangePercent(this.state.percent);
+        });
+    }
+
+    onClickNext() {
+        let index1 = this.props.selected1.indexOf(' ');
+        let index2 = this.props.selected2.indexOf(' ');
+
+        if (index1 < 0 && index2 < 0) {
+            this.props.onClickNext();
+            this.setState({ percent: 50 }, function() {
+                console.log(this.state.percent);
+                this.props.handleChangePercent(this.state.percent);
+            });
+        } else {
+            let min = '';
+            let max = '';
+            if (this.props.parts1 <= this.props.parts2) {
+                min = 'pierwszego';
+                max = 'drugiego';
+            } else {
+                min = 'drugiego';
+                max = 'pierwszego';
+            }
+            alert('Należy dopasować wszystkie wierzchołki z '+min+' modelu z wierzchołkami '+max+' modelu.');
+        }
+        
+    }
+
+    render() {
+        return (
+            <div onMouseDown={ev => {if (ev) ev.stopPropagation();}} onTouchStart={ev => {if (ev) ev.stopPropagation();}}>
+                <h2 className='title' style={styles.header}>
+                    PODOBIEŃSTWO
+                </h2>
+                <div style={styles.interval}/>
+                <div className='slider' style={styles.slider_position}>
+                    <Slider 
+                        min={0}
+                        max={100}
+                        x = {this.state.percent}
+                        percent = {this.state.percent}
+                        style={styles.slider}
+                        onChange={this.handleChangePercent}
+                    />
+                </div> 
+                <div style={styles.small_interval}/>
+                <div className='percent' style={styles.percent}>
+                    {this.state.percent} %
+                </div>
+                <div style={styles.interval}/>
+                <div style={styles.nextButton_position}>
+                    <button type='button' onClick={this.onClickNext} disabled={this.props.isDisable} style={styles.nextButton}>
+                        Następny
+                    </button>
+                </div>
+                <div style={styles.small_interval}/>
+                <div style={styles.finishButton_position}>
+                    <button type='button' onClick={this.props.onClickFinish} style={styles.finishButton}>
+                        Zamknij
+                    </button>
+                </div>
+                
+            </div>
+        );
+    }
+}
+
+export default SliderViewer;
Index: js/human_3d_alignment/src/widgets/textviewer.jsx
===================================================================
--- js/human_3d_alignment/src/widgets/textviewer.jsx	(revision 911)
+++ js/human_3d_alignment/src/widgets/textviewer.jsx	(revision 911)
@@ -0,0 +1,42 @@
+/*global Module*/
+"use strict";
+import React from 'react';
+
+const styles = {
+    content: {
+        position: 'absolute',
+        margin: '10px 10px 10px 10px',
+        height: '100%',
+        verticalAlign: 'sub',
+        textAlign: 'justify', 
+        fontFamily: "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace", 
+        webkitUserSelect : 'none', 
+        mozUserSelect: 'none', 
+        msUserSelect: 'none', 
+        userSelect: 'none'
+    }
+}
+
+/**
+ * Component for assessing genotype matching.
+ */
+class TextViewer extends React.Component {
+    /**
+     * Basic constructor.
+     * @param {any} props properties of Component
+     */
+    constructor(props) {
+        super(props);
+        this.props = props;
+    }
+     
+    render() {
+        return (
+            <div style={styles.content}>
+                Dopasuj (nałóż na siebie) oba modele jak najlepiej, wedle własnej opinii, przesuwając je i obracając za pomocą myszy. Potem po prawej stronie okienka przypisz każdy wierzchołek jednego modelu (cyferki) najlepiej odpowiadającemu (wedle własnej opinii) wierzchołkowi drugiego modelu (literki).
+            </div>
+        );
+    }
+}                          
+
+export default TextViewer;
