// var lib = {'width': 1280, 'height': 720},
//     preview_item_container = document.getElementById('preview_item'),
//     preview_item_scene = new THREE.Scene(),
//     preview_item_renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(),
//     preview_item_camera,
//     preview_item_controls,
//     preview_object_container = document.getElementById('preview_object'),
//     preview_object_scene = new THREE.Scene(),
//     preview_object_renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(),
//     preview_object_camera,
//     preview_object_controls,
//     preview_item_current,
//     preview_object_scene_items = [],
//     loadingBar,
//     maincontainer;
//
// var words = [
//     new Word("Vesicles", "Κυστίδια", "", 0.35),
//     new Word("Centriole", "Κεντρίλιο", "Οι μικροσωληνίσκοι προέρχονται από το κεντρόσωμα, μια ειδική περιοχή του κυττάρου (το κέντρο οργάνωσης των μικροσωληνίσκων). Το κεντρόσωμα συντίθεται από μικροσωληνίσκους και σχηματίζει ευδιάκριτα οργανίδια, τα κεντρίλια.", 2.3),
//     new Word("CellWall", "Κυτταρικό τοίχωμα", "το κυτταρικό τοίχωμα των φυτικών κυττάρων, το οποίο αποτελεί στοιχείο διάκρισης ανάμεσα στα φυτικά και στα ζωικά κύτταρα. Είναι ένα σχετικά ανθεκτικό εξωτερικό περίβλημα, που αποτελείται από διάφορους πολυσακχαρίτες. Ο κυριότερος από αυτούς είναι η κυτταρίνη", 0.17),
//     new Word("Chloroplast", "Χλωροπλάστης", "Υπάρχουν μόνο στα κύτταρα των πράσινων τμημάτων των φυτών. Στα οργανίδια αυτά γίνεται η φωτοσύνθεση.", 0.75),
//     new Word("GolgiApparatus_type00", "Σύμπλεγμα Golgi", "Αποτελείται από ομάδες παράλληλων πεπλατυσμένων σάκων από στοιχειώδη μεμβράνη. Είναι το οργανίδιο που συγκεντρώνει και τροποποιεί τις πρωτεΐνες που παράγονται στο αδρό ενδοπλασματικό δίκτυο.", 0.7),
//     new Word("Leukoplast", "Αμυλοπλάστες", "Στα πλαστίδια ανήκουν και οι άχρωμοι αμυλοπλάστες, που βρίσκονται στα κύτταρα των ριζών των φυτών και αποτελούν αποθήκες αμύλου, καθώς επίσης οι χρωμοπλάστες, που περιέχουν χρωστικές και βρίσκονται στα άνθη, στα φύλλα και στους καρπούς.", 9),
//     new Word("Lysosome", "Λυσόσωμα", "Τα λυσοσώματα είναι σφαιρικά οργανίδια που περιβάλλονται από απλή στοιχειώδη μεμβράνη. Περιέχουν υδρολυτικά ένζυμα που βοηθούν στην πέψη μεγαλομοριακών ουσιών ενδοκυτταρικής ή εξωκυτταρικής προέλευσης, αλλά και μικροοργανισμών, που πιθανόν έχουν εισβάλει στο κύτταρο (ζωικό) με τη διαδικασία της ενδοκύττωσης.", 4.5),
//     new Word("Mitochondrion", "Μιτοχόνδριο", "Τα μιτοχόνδρια υπάρχουν σε όλα τα ευκαρυωτικά κύτταρα (φωτοσυνθετικά και μη), με εξαίρεση τα ώριμα ερυθρά αιμοσφαίρια. Είναι τα οργανίδια στα οποία γίνεται μετατροπή της ενέργειας σε μορφή που να μπορεί να αξιοποιηθεί για τις διάφορες λειτουργίες του κυττάρου.", 1.2),
//     new Word("Ribosome", "Ριβόσωμα", "Οι σχηματισμοί αυτοί δεν περιβάλλονται από μεμβράνη και αποτελούνται από rRNA και πρωτεΐνες. Στα ριβοσώματα γίνεται η πρωτεϊνοσύνθεση.", 23),
//     new Word("Cytoskeleton", "Κυττοσκελετός", "το κυτταρόπλασμα των ευκαρυωτικών κυττάρων διασχίζεται από ένα πολύμορφο πλέγμα ινιδίων, τα οποία συγκροτούν τον κυτταρικό σκελετό. Χάρη στον κυτταρικό σκελετό, που αποτελείται από μικροϊνίδια, μακροϊνίδια, ενδιάμεσα ινίδια και μικροσωληνίσκους, τα κύτταρα υποστηρίζονται μηχανικά.", 0.17),
//     new Word("PlasmaMembrane", "Πλασματική μεμβράνη", "Πλασματική μεμβράνη ονομάζουμε αυτήν που οριοθετεί το κύτταρο σε σχέση με το εξωτερικό του περιβάλλον.", 0.17),
//     new Word("Reticulum", "Ενδοπλασματικό δίκτυο", "Είναι ένα πολυδαίδαλο σύνολο αγωγών και κύστεων το οποίο διασχίζει το κυτταρόπλασμα. Οι μεμβράνες του, που αποτελούν το 50% και πλέον των στοιχειωδών μεμβρανών του κυττάρου, συχνά εμφανίζονται συνδεδεμένες με την πλασματική μεμβράνη, τον πυρηνικό φάκελο ή τις μεμβράνες των υπόλοιπων οργανιδίων.", 0.4),
//     new Word("Nucleus", "Πυρήνας", "Ο πυρήνας είναι το πιο ευδιάκριτο οργανίδιο των ευκαρυωτικών κυττάρων. Το σχήμα του πυρήνα είναι συνήθως σφαιρικό ή ωοειδές και η διάμετρος του, αν και ποικίλλει, προσεγγίζει τα 5 μm", 0.5),
//     new Word("Cytoplasm", "Κυττόπλασμα", "η ημίρρευστη μάζα του κυττάρου είναι η βασική ουσία της έμβιας ύλης, η ουσία δηλαδή από την οποία απορρέουν όλες οι ζωτικές λειτουργίες.", 0.2),
// ];
//
// shuffle(words)
//
// var HTMLElements = [
//     new HTMLElement('div', 'controls', 10, 0, 1260, 70),
//     new HTMLElement('div', 'text', 10, 475, 550, 185),
//     new HTMLElement('div', 'headline', 10, 443, 550, 32),
//     new HTMLElement('div', 'preview_item', 10, 80, 550, 360),
//     new HTMLElement('div', 'preview_object', 570, 80, 700, 580),
//     new HTMLElement('div', 'progessbarContainer', 60, 680, 1190, 20)
// ];
//
// var cell01 = (function () {
//
//     setupHTMLElements();
//
//     window.addEventListener('load', init, false);
//
//     window.addEventListener('resize', onResize);
//
//     function init() {
//         THREE.Cache.clear();
//         var loader = new THREE.ObjectLoader();
//         loader.load('models/intialization.json?v1_1', function (obj) {
//             preview_object_scene.add(obj);
//         });
//         loader.load('models/intialization.json?v1_1', function (obj) {
//             preview_item_scene.add(obj);
//         });
//         //cubemap
//         var path = "models/images/skybox/";
//         var format = '.png';
//         var urls = [
//             path + 'seamless' + format, path + 'seamless' + format,
//             path + 'seamless' + format, path + 'seamless' + format,
//             path + 'seamless' + format, path + 'seamless' + format
//         ];
//         var skybox = new THREE.CubeTextureLoader().load(urls);
//         skybox.format = THREE.RGBFormat;
//         skybox.anisotropy = 0.1;
//         preview_item_scene.background = skybox;
//         preview_object_scene.background = skybox;
//
//         loadJsonModelsInAZip('models/scene.zip');
//     }
//
//     function loadJsonModelsInAZip(zipUrl) {
//         new JSZip.external.Promise(function (resolve, reject) {
//             JSZipUtils.getBinaryContent(zipUrl, function (err, data) {
//                 if (err) {
//                     reject(err);
//                 } else {
//                     resolve(data);
//                 }
//             });
//         }).then(function (data) {
//             return JSZip.loadAsync(data);
//         }).then(function (zip) {
//             zip.files['scene.json']
//                 .async("string").then(function (txt) {
//                 preloadObjects(JSON.parse(txt));
//             })
//         });
//     }
//
//     function preloadObjects(json) {
//         var loadingManager = new THREE.LoadingManager();
//         var loader = new THREE.ObjectLoader(loadingManager);
//         loader.setTexturePath('models/')
//         loadingBar = new ProgressBar.Line(progessbarContainer, {
//             color: '#aaa',
//             strokeWidth: 1,
//             trailWidth: 1,
//             easing: 'easeInOut',
//             from: {color: '#7f7f7f', width: 1},
//             to: {color: '#7f7f7f', width: 1},
//             step: function (state, line) {
//                 line.path.setAttribute('stroke', state.color);
//                 line.path.setAttribute('stroke-width', state.width);
//             }
//         });
//
//         loadingManager.onStart = function (item, loaded, total) {
//             console.log('Loading started');
//         };
//
//         loadingManager.onLoad = function () {
//             console.log('Loading complete');
//             document.getElementById("_preload_div_").style.display = "none";
//             initScene();
//             loadingBar.destroy();
//             onResize();
//         };
//
//         loadingManager.onProgress = function (item, loaded, total) {
//             loadingBar.animate(1.0);
//         };
//
//         loadingManager.onError = function (url) {
//             console.log('Error loading');
//         };
//         // loader.load('models/scene1.json', function (obj) {
//         loader.parse(json, function (obj) {
//             obj.traverse(function (child) {
//                 if (child instanceof THREE.Mesh) {
//                     var mesh = child;
//                     child.geometry.computeVertexNormals(true);
//                     child.geometry.sortFacesByMaterialIndex();
//                     child.geometry.computeFaceNormals();
//                 }
//             });
//             preview_object_scene.getObjectByName("World").add(obj.getObjectByName("Plant"));
//             preview_item_scene.getObjectByName("World").add(obj.getObjectByName("Compartments"));
//         });
//     }
//
//     function initScene() {
//         init_preview_object();
//         init_preview_item();
//         requestAnimationFrame(animate);
//         render();
//     }
//
//     function render() {
//         preview_item_renderer.render(preview_item_scene, preview_item_camera);
//         preview_object_renderer.render(preview_object_scene, preview_object_camera);
//     }
//
//     function preview_item_render() {
//         preview_item_renderer.render(preview_item_scene, preview_item_camera);
//     }
//
//     function preview_object_render() {
//         preview_object_renderer.render(preview_object_scene, preview_object_camera);
//     }
//
//     function init_preview_item() {
//         preview_item_container = document.getElementById('preview_item');
//         preview_item_camera = new THREE.PerspectiveCamera(45, preview_item_container.offsetWidth / preview_item_container.offsetHeight, 0.1, 10);
//         preview_item_camera.position.z = 0.3;
//         preview_item_controls = new THREE.OrbitControls(preview_item_camera, preview_item_container);
//         preview_item_controls.minDistance = 0.21;
//         preview_item_controls.maxDistance = 0.4;
//         preview_item_controls.autoRotate = true;
//         preview_item_controls.enableDamping = true;
//         preview_item_controls.dampingFactor = 0.8;
//         preview_item_controls.enableKeys = false;
//         preview_item_controls.addEventListener('change', preview_item_render);
//         preview_item_renderer = new THREE.WebGLRenderer({
//             antialias: true,
//             sortObjects: false,
//             logarithmicDepthBuffer: true
//         });
//         preview_item_renderer.gammaInput = true;
//         preview_item_renderer.gammaOutput = true;
//         preview_item_renderer.setSize(preview_item_container.offsetWidth, preview_item_container.offsetHeight);
//         preview_item_container.appendChild(preview_item_renderer.domElement);
//     }
//
//     function init_preview_object() {
//         preview_object_container = document.getElementById('preview_object');
//         preview_object_camera = new THREE.PerspectiveCamera(45, preview_object_container.offsetWidth / preview_object_container.offsetHeight, 0.001, 10);
//         preview_object_camera.position.z = 1.6;
//         preview_object_controls = new THREE.OrbitControls(preview_object_camera, preview_object_container);
//         preview_object_controls.minDistance = 1.3;
//         preview_object_controls.maxDistance = 2.1;
//         preview_object_controls.autoRotate = true;
//         preview_object_controls.enableKeys = false;
//         preview_object_controls.enableDamping = true;
//         preview_object_controls.dampingFactor = 0.8;
//         preview_object_controls.addEventListener('change', preview_object_render);
//         preview_object_renderer = new THREE.WebGLRenderer({
//             antialias: true,
//             sortObjects: false,
//             logarithmicDepthBuffer: true
//         });
//         preview_object_renderer.gammaInput = true;
//         preview_object_renderer.gammaOutput = true;
//         preview_object_renderer.setSize(preview_object_container.offsetWidth, preview_object_container.offsetHeight);
//         preview_object_container.appendChild(preview_object_renderer.domElement);
//     }
//
//     function animate(time) {
//         preview_item_controls.update();
//         preview_object_controls.update();
//         requestAnimationFrame(animate);
//     }
//
//     function setupHTMLElements() {
//
//         maincontainer = new HTMLElement('div', 'maincontainer', 0, 46, 1280, 600);
//
//         maincontainer.attach();
//
//         document.getElementById('maincontainer').style.visibility = 'hidden';
//
//         HTMLElements.forEach(function (element) {
//             element.attach(maincontainer);
//         });
//
//         var wordsContainer = document.createElement('div');
//
//         wordsContainer.id = "wordsContainer";
//
//         document.getElementById('controls').appendChild(wordsContainer);
//
//         $(words).each(function (i, w) {
//             var element = document.createElement("div");
//
//             var label = document.createElement("label");
//             label.innerText = w.getTitle();
//             label.setAttribute("labelfor", w.name);
//
//             $(label).bind('contextmenu', function (e) {
//                 e.preventDefault();
//                 labelRightClickHandler(e.target);
//             });
//
//             element.appendChild(label);
//             element.className = "tag";
//             element.objectType = w.name;
//             element.addEventListener("click", function (event) {
//                 if (!hasValue(preview_item_current)) {
//                     itemDisplay(element.objectType, preview_item_scene);
//                 }
//                 else {
//                     itemHide();
//                     itemDisplay(element.objectType, preview_item_scene);
//                 }
//                 document.getElementById('headline').innerHTML = "<h3>" + w.getTitle() + "</h3>";
//                 document.getElementById('text').innerHTML = w.getDisplaytext();
//             });
//
//             element.draggable = true;
//             element.ondragstart = function (ev) {
//                 drag(ev);
//             };
//             wordsContainer.appendChild(element);
//             element.domelement = element;
//         });
//
//         document.getElementById('preview_object').ondragover = function (ev) {
//             allowDrop(ev);
//         };
//
//         document.getElementById('preview_object').ondrop = function (ev) {
//             drop(ev);
//         };
//     }
//
//     function labelRightClickHandler(e) {
//         if (preview_object_scene_items.indexOf($(e)[0].getAttribute("labelfor")) != -1 && $(e).hasClass("active")) {
//             $(e).removeClass("active");
//             preview_object_scene_items.remove($(e)[0].getAttribute("labelfor"));
//             preview_object_scene.handleItemVisibility();
//         }
//     }
//
//     function allowDrop(ev) {
//         ev.preventDefault();
//     }
//
//     function drag(ev) {
//         ev.dataTransfer.setData("objectType", ev.toElement.objectType);
//     }
//
//     function drop(ev, ui) {
//         ev.preventDefault();
//         var objectType = ev.dataTransfer.getData("objectType");
//         itemDisplay(objectType, preview_object_scene);
//     }
//
//     function itemDisplay(name, scene) {
//         var o = scene.getObjectByName(name, true);
//         switch (scene) {
//             case preview_item_scene:
//
//                 if (hasValue(o)) {
//                     o.visible = true;
//                 }
//                 var s = getScale(o.name);
//                 o.scale.set(s.x, s.y, s.z);
//                 preview_item_current = o;
//                 if (!preview_item_controls.autoRotate) {
//                     preview_item_render();
//                 }
//                 break;
//             case preview_object_scene:
//                 if (hasValue(o) && preview_object_scene_items.indexOf(o.name) == -1) {
//                     preview_object_scene_items.push(o.name);
//                 }
//                 $(".tag > label").each(function (i, t) {
//                     if (preview_object_scene_items.indexOf(t.getAttribute("labelfor")) != -1) {
//                         $(this).addClass("active");
//                     }
//                 });
//                 preview_object_scene.handleItemVisibility();
//                 break;
//
//         }
//     }
//
//     preview_object_scene.handleItemVisibility = function () {
//         $(preview_object_scene.getObjectByName("Plant", true).children).each(function (i, child) {
//             if (preview_object_scene_items.indexOf(child.name) != -1) {
//                 child.visible = true;
//             }
//             else {
//                 child.visible = false;
//             }
//         });
//     };
//
//     function preview_object_scene_items_show() {
//         $(preview_object_scene.getObjectByName("Plant", true).children).each(function (i, child) {
//             if (preview_object_scene_items.indexOf(child.name) != -1) {
//                 child.visible = true;
//             }
//             else {
//                 child.visible = false;
//             }
//         });
//     }
//
//     function itemHide() {
//         THREE.Cache.clear();
//         preview_item_current.visible = false;
//         preview_item_current = null;
//     }
//
//     var getWordByName = function (word) {
//         var result = null;
//         words.forEach(function (entry) {
//             if (entry.name == word) {
//                 result = entry;
//             }
//         });
//         return result;
//     };
//
//     var getScale = function (word) {
//         var result = new THREE.Vector3(1, 1, 1);
//         words.forEach(function (entry) {
//             if (entry.name == word) {
//                 if (hasValue(entry.scale)) {
//                     result.set(entry.scale, entry.scale, entry.scale);
//                 }
//             }
//         });
//         return result;
//     };
//
// })();
//
// function Word(name, title, displaytext, scale) {
//     this.name = name;
//     this.scale = scale;
//     this.title = title;
//     this.displaytext = displaytext;
//     this.getTitle = function () {
//         return (hasValue(this.title) && this.title != "") ? this.title : this.name;
//     }
//     this.getDisplaytext = function () {
//         return (hasValue(this.title) && this.displaytext != "") ? "<p>" + this.displaytext + "</p>" : "<p>Σχετικό κείμενο</p>";
//     }
// }
//
// function HTMLElement(type, id, x, y, width, height) {
//     this.domelement = document.createElement(type);
//     this.x = x;
//     this.y = y;
//     this.width = width;
//     this.height = height;
//     this.attach = function (parentElement) {
//         this.domelement.id = id;
//         if (id == 'progessbarContainer') {
//             document.getElementById('animation_container').appendChild(this.domelement);
//         }
//         else {
//             typeof parentElement === "undefined" ? document.getElementById('animation_container').appendChild(this.domelement) : document.getElementById(parentElement.domelement.id).appendChild(this.domelement);
//         }
//         this.setDimentions();
//     }
//     this.display = function (parentElement) {
//         this.domelement.style.visibility = "visible"
//     }
//     this.setDimentions = function () {
//         var pRatio = window.devicePixelRatio || 1,
//             xRatio = window.innerWidth / lib.width,
//             yRatio = window.innerHeight / lib.height,
//             sRatio = Math.min(xRatio, yRatio);
//         this.domelement.style.position = "absolute";
//         this.domelement.x = x != null ? x * pRatio * sRatio : 0;
//         this.domelement.y = y != null ? y * pRatio * sRatio : 0;
//         this.domelement.style.left = x != null ? x * sRatio + 'px' : 0;
//         this.domelement.style.top = y != null ? y * sRatio + 'px' : 0;
//         this.domelement.width = width != null ? width * pRatio * sRatio : lib.width * pRatio * sRatio;
//         this.domelement.height = height != null ? height * pRatio * sRatio : lib.height * pRatio * sRatio;
//         this.domelement.style.width = width != null ? width * sRatio + 'px' : width * sRatio + 'px';
//         this.domelement.style.height = height != null ? height * sRatio + 'px' : height * sRatio + 'px';
//     }
// }
//
// function hasValue(o) {
//     return (o !== undefined || o != null)
// }
//
// function onResize() {
//     var pRatio = window.devicePixelRatio || 1,
//         xRatio = window.innerWidth / lib.width,
//         yRatio = window.innerHeight / lib.height,
//         sRatio = Math.min(xRatio, yRatio);
//     HTMLElements.forEach(function (element) {
//         element.setDimentions();
//     });
//     if (hasValue(preview_item_container))
//         preview_item_renderer.setSize(preview_item_container.offsetWidth, preview_item_container.offsetHeight);
//     if (hasValue(preview_object_container))
//         preview_object_renderer.setSize(preview_object_container.offsetWidth, preview_object_container.offsetHeight);
//     if (hasValue(maincontainer)) {
//         maincontainer.setDimentions();
//     }
//
//     $('#headline').css("line-height", $('#headline')[0].offsetHeight * sRatio + "px");
//     $('.tag').css("font-size", 14 * sRatio + "px");
//     $('#text').css("padding", 10 * sRatio + "px");
//     $('.tag').css("margin-top", 5 * sRatio + "px");
//     $('.tag').css("margin-left", 5 * sRatio + "px");
//     $('.tag').css("margin-right", 5 * sRatio + "px");
//     $('.tag').css("margin-bottom", 0 + "px");
//     $('.tag label').css("padding-top", 7 * sRatio + "px");
//     $('.tag label').css("padding-left", 18 * sRatio + "px");
//     $('.tag label').css("padding-right", 18 * sRatio + "px");
//     $('.tag label').css("padding-bottom", 6 * sRatio + "px");
// }
//
// Array.prototype.remove = function () {
//     var what, a = arguments, L = a.length, ax;
//     while (L && this.length) {
//         what = a[--L];
//         while ((ax = this.indexOf(what)) !== -1) {
//             this.splice(ax, 1);
//         }
//     }
//     return this;
// };
//
// /**
//  * Shuffles array in place.
//  * @param {Array} a items An array containing the items.
//  */
// function shuffle(a) {
//     var j, x, i;
//     for (i = a.length - 1; i > 0; i--) {
//         j = Math.floor(Math.random() * (i + 1));
//         x = a[i];
//         a[i] = a[j];
//         a[j] = x;
//     }
//     return a;
// }