Difference between revisions of "Team:Slovenia/libraries/custom-js"

 
(125 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Slovenia}}
+
function reloader() {
−
<html>
+
    try {
−
<head>
+
        //console.log('start');
−
    <title>Protease inducible secretion</title>
+
        /*$('.ui.sticky.global').sticky({
−
    <link rel="stylesheet"
+
            context: '#context',
−
          href="//2016.igem.org/Team:Slovenia/libraries/semantic-min-css?action=raw&ctype=text/css">
+
            offset: 16
−
    <script type="text/javascript"
+
        });
−
             src="//2016.igem.org/Team:Slovenia/libraries/semantic-min-js?action=raw&ctype=text/javascript"></script>
+
        $('.ui.sticky.image').sticky({
−
    <link rel="stylesheet" type="text/css" href="//2016.igem.org/Team:Slovenia/libraries/custom-css?action=raw&ctype=text/css">
+
            context: '#context',
−
    <script type="text/javascript" src="//2016.igem.org/Team:Slovenia/libraries/custom-js?action=raw&ctype=text/javascript"></script>
+
            offset: 27
−
    <script type="text/javascript"
+
        });
−
             src="//2016.igem.org/Team:Slovenia/libraries/zitator-js?action=raw&ctype=text/javascript"></script>
+
        $('.ui.sticky.text.menu').sticky({
−
    <script type="text/javascript"
+
            context: '#context',
−
             src="https://2016.igem.org/Team:Slovenia/libraries/bibtexparse-js?action=raw&ctype=text/javascript"></script>
+
            offset: 200
−
<!-- MathJax (LaTeX for the web) -->
+
        });
−
    <script type="text/x-mathjax-config">
+
        $('.ui.sticky.text').sticky({
−
        MathJax.Hub.Config({
+
            context: '#context',
−
            tex2jax: {
+
            offset: 200
−
                 inlineMath: [['$', '$'], ['\\(', '\\)']]
+
        });*/
−
            },
+
        $('.image_div > img').visibility({
−
            jax: ["input/TeX","output/SVG"],
+
            type: 'image',
−
             TeX: {
+
             transition: 'fade in',
−
                extensions: ["mhchem.js"],
+
            duration: 500
−
                 equationNumbers: {autoNumber: "all" },
+
        });
−
                 Macros: {
+
        $('.teamimg').hover(function () {
−
                  goodbreak: '\\mmlToken{mo}[linebreak="goodbreak"]{}',
+
            var width = $(this).outerWidth() / 2;
−
                  badbreak: ['\\mmlToken{mo}[linebreak="badbreak"]{#1}',1],
+
            $(this).find('.left').animate({right: width}, {queue: false, duration: 300});
−
                  nobreak: ['\\mmlToken{mo}[linebreak="nobreak"]{#1}',1],
+
            $(this).find('.right').animate({left: width}, {queue: false, duration: 300});
−
                  invisibletimes: ['\\mmlToken{mo}{\u2062}']
+
        }, function () {
 +
            $(this).find('.left').animate({right: 0}, {queue: false, duration: 300});
 +
            $(this).find('.right').animate({left: 0}, {queue: false, duration: 300});
 +
        });
 +
        $(function () {
 +
            // The parameter are the selector for the container(s) of text in which you want replacement
 +
            // and a URL pointing to your bibfile - mind the same origin policy...
 +
            var zitator = new Zitator(".citing", "//2016.igem.org/wiki/images/5/53/T--Slovenia--references.txt");
 +
            zitator.zitiere();
 +
        });
 +
        function isScrolledIntoView(elem) {
 +
            var docViewTop = $(window).scrollTop();
 +
             var docViewBottom = docViewTop + $(window).height() - $("#menucomb").height();
 +
 
 +
             var elemTop = $(elem).offset().top;
 +
            var elemBottom = elemTop + $(elem).height();
 +
 
 +
            if (elemTop >= docViewTop) {
 +
                return true;
 +
            }
 +
            else if (elemBottom >= docViewBottom) {
 +
                return true;
 +
            }
 +
            return false; // || elemTop >= docViewTop) ;
 +
        }
 +
 
 +
        function clearStyleOfSideMenu() {
 +
            //console.log("calling a function");
 +
            var id = null;
 +
            $("span.section.colorize").each(function () {
 +
                var id = this.id;
 +
                 //console.log(id);
 +
                var selector = 'a[href*="#'.concat(id).concat('"]');
 +
                $(selector).css("color", "");
 +
             });
 +
 
 +
            $("span.section.colorize").each(function() {
 +
                 var ident = this.id;
 +
                 console.log(ident);
 +
                console.log(this);
 +
                if(ident != "") {
 +
                    var parent = (this.parentNode).parentNode;
 +
                    if(isScrolledIntoView(parent)) {
 +
                        var selector = 'a[href*="#'.concat(ident).concat('"]');
 +
                        $(selector).css("color", "#DB2828");
 +
                        console.log(selector);
 +
                        return false;
 +
                    }
 
                 }
 
                 }
−
             },
+
             });
−
             CommonHTML: { linebreaks: { automatic: true, width: "75% container" } },
+
 
−
             "HTML-CSS": { linebreaks: { automatic: true, width: "68% container" }},
+
             /*var color = true;
−
            SVG: { linebreaks: { automatic: true, width: "200% container" }}
+
            $(".section").each(function () {
 +
            //clear each parent
 +
            var id = this.id;
 +
            var selector = 'a[href*="#'.concat(id).concat('"]');
 +
            if (isScrolledIntoView($(this).parent().parent())) {
 +
            // nastavi barvo trenutni sekcij
 +
            if(color) {
 +
 
 +
            console.log("section is found");
 +
            color = false;
 +
            return false; //break from function
 +
            }
 +
            }
 +
            });*/
 +
        }
 +
 
 +
        $(document).ready(function () {
 +
                clearStyleOfSideMenu();
 +
                $(window).scroll(function () {
 +
                    clearStyleOfSideMenu();
 +
                });
 +
             }
 +
        );
 +
        $(".menuItem").mouseenter(
 +
            function () {
 +
                var loc = window.location.href;
 +
                var defaultItem;
 +
                var parent;
 +
                $(".submenu").each(function () {
 +
                        var context = this;
 +
                        $("a", context).each(function () {
 +
                            if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
                                defaultItem = $(context).attr("id");
 +
                                parent = $("#".concat(defaultItem.replace("Submenu", "")));
 +
                            }
 +
                        });
 +
                    }
 +
                );
 +
                $(".ui.simple.item.menuItem a").each(function () {
 +
                    if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
                        parent = $($(this).parents('.ui.simple.item.menuItem'));
 +
                        defaultItem = (parent.attr('id')).concat("Submenu");
 +
                        //console.log(defaultItem);
 +
                    }
 +
                });
 +
                defaultItem = document.getElementById(defaultItem);
 +
                clearElements();
 +
                var submenu = document.getElementById(this.id.concat("Submenu"));
 +
                var submenuText = document.getElementById("SecondarySubmenu");
 +
                if (submenuText.innerHTML != submenu.innerHTML) {
 +
                    this.className = "ui simple active item menuItem";
 +
                    submenuText.innerHTML = submenu.innerHTML;
 +
                }
 +
                else {
 +
                    parent.attr("class", "ui simple active item menuItem");
 +
                    submenuText.innerHTML = defaultItem.innerHTML;
 +
                }
 +
            }
 +
        );
 +
        $("#menucomb").mouseleave(function () {
 +
                setDefaultMenu();
 +
            }
 +
        );
 +
    } catch (e) {
 +
        //console.log('startReloading');
 +
        $.getScript("https://2016.igem.org/Team:Slovenia/libraries/semantic-min-js?action=raw&ctype=text/javascript", function () {
 +
            //console.log('success');
 +
            reloader();
 
         });
 
         });
−
     </script>
+
        //console.log('endReloading');
−
<script type="text/javascript" async
+
     }
−
             src="//2016.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+
}
−
    </script>
+
$(document).ready(injectHeader);
−
</head>
+
$(document).ready(reloader);
−
<body>
+
function enumerateKeys(object) {
 +
    var numberPairs = {};
 +
    var objectPairs = {};
 +
    var number = 0;
 +
 
 +
    var matches = document.body.querySelectorAll(object + '[data-ref]');
 +
    while (number < matches.length) {
 +
        var refName = matches[number].dataset.ref;
 +
console.log(refName);
 +
console.log(matches[number]);
 +
        if (refName in numberPairs) {
 +
            console.log(refName, "This label has already been assigned.");
 +
        } else {
 +
            numberPairs[number + 1] = matches[number];
 +
            objectPairs[refName] = number + 1;
 +
            console.log(refName);
 +
        }
 +
        number++;
 +
    }
 +
    return [numberPairs, objectPairs, number];
 +
}
 +
 
 +
function enumerate() {
 +
    var tables = enumerateKeys('table');
 +
    var figures = enumerateKeys('figure');
 +
 
 +
    var maximum = Math.max(tables[2], figures[2]);
 +
 
 +
    for (var number = 1; number <= maximum; number++) {
 +
        if (number in tables[0]) {
 +
            $(tables[0][number]).children('caption').prepend("Table " + number + ": ")
 +
        }
 +
        if (number in figures[0]) {
 +
            $(figures[0][number]).children('figcaption').prepend("Figure " + number + ": ")
 +
        }
 +
    }
 +
 
 +
    $(this).find('ref').each(function () {
 +
        var label = $(this).text();
 +
        $(this).click(function (event) {
 +
            event.preventDefault();
 +
        });
 +
        if (label in tables[1]) {
 +
            var number = tables[1][label];
 +
            $(this).html("<a href=''> Table " + tables[1][label] + " </a>");
 +
            $(this).on('click', function () {
 +
                window.scroll(0, $(tables[0][number]).offset().top - 150);
 +
            })
 +
        } else {
 +
            var number = figures[1][label];
 +
            $(this).html("<a href=''>Figure " + figures[1][label] + "</a>");
 +
             $(this).on('click', function () {
 +
                window.scroll(0, $(figures[0][number]).offset().top - 150);
 +
            })
 +
        }
 +
    });
 +
}
 +
$(document).ready(enumerate);
 +
$(document).ready(setDefaultMenu);
 +
$(document).ready(function(){
 +
    $('.ui.accordion').accordion();
 +
});
 +
 
 +
function resize(img) {
 +
    if (!(img.className.indexOf("big") >= 0)) {
 +
        img.className = "ui big centered image";
 +
        img.parentElement.parentElement.setAttribute("align-property", img.parentElement.parentElement.align);
 +
        img.parentElement.parentElement.setAttribute("align", "center");
 +
        img.parentElement.parentElement.setAttribute("data-property", img.parentElement.parentElement.style.cssText);
 +
        img.parentElement.parentElement.style.cssText = "clear: both";
 +
    }
 +
    else {
 +
        img.parentElement.parentElement.setAttribute("align", "");
 +
        img.className = "ui image";
 +
        img.parentElement.parentElement.style.cssText = img.parentElement.parentElement.getAttribute("data-property");
 +
        img.parentElement.parentElement.align = img.parentElement.parentElement.getAttribute("align-property");
 +
    }
 +
    //scroll to image, (if two images are floated and the right one is resised, then the image gets pushed down)
 +
    //var top = img.offsetTop;
 +
    //console.log($(img).offset().top);
 +
    //console.log($("menucomb").height());
 +
    $(window).scrollTop($(img).offset().top -  $(window).height()/2 + $(img).height()/2);
 +
}
 +
 
 +
function setDefaultMenu() {
 +
    //console.log("calling set default item");
 +
    clearElements();
 +
    var loc = window.location.href;
 +
    var defaultItem;
 +
    var parent;
 +
    $(".submenu").each(function () {
 +
            var context = this;
 +
            $(this).css("color", "#DB2828");
 +
            $(this).css("font-weight", "bold");
 +
            $("a", context).each(function () {
 +
                //console.log($(this).attr("href"));
 +
                if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
                    defaultItem = $(context).attr("id");
 +
                    parent = $("#".concat(defaultItem.replace("Submenu", "")));
 +
                    $(this).css("color", "#DB2828");
 +
                    $(this).css("font-weight", "bold");
 +
                }
 +
            });
 +
 
 +
        }
 +
    );
 +
    $(".ui.simple.item.menuItem a").each(function () {
 +
        if (loc.match(/[^#]*/) == $(this).attr("href")) {
 +
            parent = $($(this).parents('.ui.simple.item.menuItem'));
 +
            defaultItem = (parent.attr('id')).concat("Submenu");
 +
        }
 +
    });
 +
 
 +
    var submenuText = document.getElementById("SecondarySubmenu");
 +
    defaultItem = document.getElementById(defaultItem);
 +
    parent.attr("class", "ui simple active item menuItem");
 +
    submenuText.innerHTML = defaultItem.innerHTML;
 +
}
 +
 
 +
function clearElements() {
 +
    var elements = document.getElementsByClassName("menuItem");
 +
    for (var i = 0; i < elements.length; i++) {
 +
        elements[i].className = "ui simple item menuItem";
 +
    }
 +
}
 +
 
 +
function injectHeader() {
 +
    //console.log("Injecting header");
 +
    var menu = "<div class='submenu' id='projectSubmenu'> \
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Description' \
 +
  class='item menuFix'>Description</a> \
 +
</div> \
 +
</div> \
 +
<div class = 'submenu' id='homeSubmenu'> \
 +
<div class='menu'> \
 +
  <a href='https://2016.igem.org/Team:Slovenia' class='item menuFix'><img border='0' alt='USflag' src='//2016.igem.org/wiki/images/5/5d/T--Slovenia--USflag.png'></a> \
 +
  <a href='https://2016.igem.org/Team:Slovenia/HomeSlo' class='item menuFix'><img border='0' alt='USflag' src='//2016.igem.org/wiki/images/7/7b/T--Slovenia--SLOflag.png'></a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='partsSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 15%'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Parts' \
 +
  class='item menuFix'>All Parts</a> \
 +
  <a href='https://2016.igem.org/Team:Slovenia/Basic_Part' \
 +
  class='item menuFix'>New Basic Part</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Part_Collection' \
 +
  class='item menuFix'>Part Collection</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='notebookSubmenu'> \
 +
<!-- this is notebook submenu --> \
 +
<div class='menu' style = 'position: absolute; right: 8%'>\
 +
<a href='https://2016.igem.org/Team:Slovenia/Notebook' class='item menuFix'>Log book</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Measurement' class='item menuFix'>Protocols</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Notebook/Proposals' class='item menuFix'>Initial proposals</a> \
 +
</div>\
 +
</div> \
 +
<div class='submenu' id='societySubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 0'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Integrated_Practices' class='item menuFix'>Integrated Practices</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Engagement' \
 +
  class='item menuFix'>Education and Public Engagement</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Collaborations' \
 +
  class='item menuFix'>Collaboration</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Safety' \
 +
  class='item menuFix'>Safety</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='homeSubmenu'> \
 +
</div> \
 +
<div class='submenu' id='ideaSubmenu'> \
 +
<!-- this is idea submenu -->\
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Idea/Challenge' class='item menuFix'>Challenges</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Idea/Solution' class='item menuFix'>Solutions</a> \
 +
</div>\
 +
</div> \
 +
<div class='submenu' id='mechanosensingSubmenu'> \
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Overview' class='item menuFix'>Overview</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Mechanosensitive_channels' class='item menuFix'>Mechanosensitive channels</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Gas_vesicles' class='item menuFix'>Gas vesicles</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/CaDependent_mediator' class='item menuFix'>Ca-dependent mediator</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='implementationSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 30%'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Demonstrate' class='item menuFix'>Protease inducible secretion</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Proof' class='item menuFix'>Touch painting</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Implementation/Impact' class='item menuFix'>Impact</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='proteaseSignallingSubmenu'> \
 +
<div class='menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Overview' class='item menuFix'>Overview</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Reporters' class='item menuFix'>Reporters</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Orthogonality' class='item menuFix'>Orthogonality</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Split_proteases' class='item menuFix'>Split proteases</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Light_dependent_mediator' class='item menuFix'>Light-dependent mediator</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Logic' class='item menuFix'>Logic</a> \
 +
</div> \
 +
</div> \
 +
<div  class='submenu' id='dryLabSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 30%'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Hardware' class='item menuFix'>Ultrasound controlling device</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Model' class='item menuFix'>Modeling of ultrasound</a>  \
 +
<a href='https://2016.igem.org/Team:Slovenia/Software' class='item menuFix'>CaPTURE software</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/ModelLogic' class='item menuFix'>Modeling logic gates</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/CoiledCoilInteraction' class='item menuFix'>Coiled-coil interaction model</a> \
 +
</div> \
 +
</div> \
 +
<div class='submenu' id='teamSubmenu'> \
 +
<div class='menu' style = 'position: absolute; right: 0'> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Team/Students' class='item menuFix'>Students</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Team/Advisors' class='item menuFix'>Advisors</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Attributions' class='item menuFix'>Attributions</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Sponsors'  class='item menuFix'>Sponsors</a> \
 +
</div> \
 +
</div> \
 +
<div class='ui sticky global' id='menucomb'> \
 +
<div class='ui red secondary ten item pointing menu'> \
 +
<a href='https://2016.igem.org/Team:Slovenia' class='ui simple item menuItem menuFix' id='home'> \
 +
                        Home \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Idea/Challenge' class='ui simple item menuItem menuFix' id='idea'> \
 +
                        Idea \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Mechanosensing/Overview' class='ui simple item menuItem menuFix' id='mechanosensing'> \
 +
                        Mechano- <br>sensing \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Protease_signaling/Overview' class='ui simple item menuItem menuFix' id='proteaseSignalling'> \
 +
                        Protease<br /> signaling\
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Hardware' class='ui simple item menuItem menuFix' id='dryLab'> \
 +
                        Dry lab \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Demonstrate' class='ui simple item menuItem menuFix' id='implementation'> \
 +
                        Implementation \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Parts' class='ui simple item menuItem menuFix' id='parts' > \
 +
                        Parts \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Notebook' class='ui simple item menuItem menuFix' id='notebook' > \
 +
                        Notebook \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Integrated_Practices' class='ui simple item menuItem menuFix' id='society'> \
 +
                        Society \
 +
</a> \
 +
<a href='https://2016.igem.org/Team:Slovenia/Team/Students' class='ui simple item menuItem menuFix' id='team'> \
 +
                        Team \
 +
</a> \
 +
</div> \
 +
  \
 +
<div class='ui secondary menu' id='SecondarySubmenu'> \
 +
</div> \
 +
</div>";
 +
    var contextDiv = document.getElementById("context");
 +
    contextDiv.innerHTML = menu.concat(contextDiv.innerHTML);
 +
var elements = document.getElementsByClassName("menuFix");
 
 
 +
if(window.innerWidth < 768 ) {
 +
//phone
 +
console.log("small screen");
 +
for (var i = 0; i < elements.length; i++) {
 +
elements[i].setAttribute("style", "font-size:5px;");
 +
}
 +
}
 +
else if(window.innerWidth < 800) {
 +
//small screen
 +
console.log("small screen");
 +
for (var i = 0; i < elements.length; i++) {
 +
elements[i].setAttribute("style", "font-size:7px;");
 +
}
 +
}
 +
else if(window.innerWidth < 980) {
 +
//medium screen
 +
console.log("small screen");
 +
for (var i = 0; i < elements.length; i++) {
 +
elements[i].setAttribute("style", "font-size:9px;");
 +
}
 +
}
 +
else if(window.innerWidth < 1280) {
 +
//normal
 +
console.log("small screen");
 +
for (var i = 0; i < elements.length; i++) {
 +
elements[i].setAttribute("style", "font-size:11px;");
 +
}
 +
}
 +
console.log("end of injecting");
 +
}
 +
 +
$('.playGif').on('click', function () {
 +
    //console.log("play detected");
 +
    var parent = $(this);
 +
    var parAlt = parent.attr('data-alt');
 +
    var parSrc = parent.attr('src');
 +
    parent.attr("src", parAlt).attr("data-alt", parSrc);
 +
});
 +
function relativeCoords() {
 +
    console.log("what what");
 +
    var img = document.getElementById("projectScheme");
 +
    var c1 = [74, 132, 136, 217, 241, 225, 319, 175, 365, 89, 298, 42, 152, 62];
 +
    var c2 =  [387, 125, 393, 283, 423, 316, 518, 190, 486, 120];
 +
    var c3 = [528, 77, 497, 134, 537, 173, 672, 185, 739, 145, 733, 94, 694, 71];
 +
    var c4 = [393, 283, 423, 316, 454, 300, 474, 260, 537, 273, 494, 305, 678, 285, 697, 243, 788, 239, 788, 330, 383, 374, 343, 319];
 +
 +
    for(i = 0; i < c1.length; i++) {
 +
        c1[i] = (c1[i]/(800.0)*img.clientWidth);
 +
    }
 +
    document.getElementById("area1").coords = c1.toString();
 +
 +
    for(i = 0; i < c2.length; i++) {
 +
        c2[i] = (c2[i]/(800.0)*img.clientWidth);
 +
    }
 +
    document.getElementById("area2").coords = c2.toString();
 +
 +
    for(i = 0; i < c3.length; i++) {
 +
        c3[i] = (c3[i]/(800.0)*img.clientWidth);
 +
    }
 +
    document.getElementById("area3").coords = c3.toString();
 +
 +
    for(i = 0; i < c4.length; i++) {
 +
        c4[i] = (c4[i]/(800.0)*img.clientWidth);
 +
    }
 +
    document.getElementById("area4").coords = c4.toString();
 +
}
 +
 +
function relativeCoordsStar() {
 +
    var img = document.getElementById("starScheme");
 +
var c1 = [254, 239, 194, 163, 225, 51, 319, 163];
 +
var c2 = [260, 242, 323, 170, 452, 193, 363, 288];
 +
var c3 = [260, 249, 362, 295, 389, 433, 260, 369];
 +
var c4 = [252, 246, 252, 369, 131, 426, 150, 294];
 +
var c5 = [250, 242, 147, 288, 55, 192, 187, 169];
 
 
−
<div id="example">
+
    for(i = 0; i < c1.length; i++) {
−
<div class="pusher">
+
        c1[i] = (c1[i]/(515.0)*img.clientWidth);
−
<div class="full height">
+
    }
−
<div class="banana">
+
    document.getElementById("patients").coords = c1.toString();
−
<a href = "//2016.igem.org/Team:Slovenia">
+
−
<img class="ui medium sticky image" src="//2016.igem.org/wiki/images/d/d1/T--Slovenia--logo.png">
+
−
</a>
+
−
<div class="ui vertical sticky text menu">
+
−
<a class="item" href="#intro" style="margin-left: 10%">
+
−
<i class="selected radio icon"></i>
+
−
<b>Project</b>
+
−
</a>
+
−
<a class="item" href="#achievements" style="margin-left: 10%">
+
−
<i class="selected radio icon"></i>
+
−
<b>Achievements</b>
+
−
</a>
+
−
<a class="item" href="#requirements" style="margin-left: 10%">
+
−
<i class="selected radio icon"></i>
+
−
<b>Medal requirements</b>
+
−
</a>
+
−
<a class="item" href="idea">
+
−
<i class="chevron circle right icon"></i>
+
−
<b>Idea</b>
+
−
</a>
+
−
+
−
</div>
+
−
+
−
</div>
+
−
<div class="article" id="context">
+
−
<!-- menu goes here -->
+
−
<!-- content goes here -->
+
−
<div>
+
−
<div class="main ui citing justified container">
+
−
<h1 class = "ui centered dividing header"><span class="section">nbsp;</span>Protease-based inducible secretion</h1>
+
−
<div class = "ui segment">
+
−
+
−
<p>Fast sensing and fast signaling pathway were developed using protease-based pathway. In the final step for the construction of rapidly responding cells we wanted to
+
−
implement a fast output that would not require a slow transcription/translation biosynthesis of new proteins. We decided to engineer a system capable of regulated secretion
+
−
of a protein using genetically encoded components.</p>
+
−
<p>To achieve a fast regulated cellular response resulting in the release of a protein, we decided to mimic the release of insulin from beta cells where the protein of
+
−
interest is pre-formed and present in the cell in secretory granules. In contrast to the specialized storage and release mechanism of insulin from beta cells we wanted to
+
−
develop a more general and modular solution by making use of components already existing in different types of cells. Additionally, there should be minimal leakage from the
+
−
protein depot in the uninduced state and after induction secretion from the cell should be fast.</p>
+
−
+
−
<div class="ui styled fluid accordion">
+
−
<div class="active title">
+
−
<i class="dropdown icon"></i>
+
−
Further explanation ...
+
−
</div>
+
−
<div class="content">
+
−
<p> Not many systems for the inducible release of proteins have been engineered to date. In one of the few examples Rivera et al. developed a system where the protein of interest
+
−
was fused to a conditional aggregation domain (CAD). <x-ref>Rivera2000</x-ref>. These domains form aggregates in the endoplasmic reticulum (ER) that are too large to exit the ER.
+
−
After the addition of a small synthetic molecule, the CADs start to disaggregate and the protein of interest can be secreted. In the second example Chen et al. introduced a
+
−
light-triggered secretion system. They also based their system on conditional aggregation; however they used the plant photoreceptor UVR8 which forms photolabile homodimers to make
+
−
aggregates on the ER membrane. Upon light excitation the aggregates made by UVR8 started to disaggregate and were transported from the ER to the plasma membrane, but have not been
+
−
observed in the cell supernatant. <x-ref>Chen2013</x-ref>
+
−
The weakness of the two described systems is that they both rely on the exogenous chemical or physical signals instead of using a biochemical signal to induce the secretion, which
+
−
means that they can’t be integrated into the signaling system that’s senses the cellular state. In order to better respond to the state of the cell or a logic circuit inside a cell
+
−
we decided to develop an inducible secretion system based on the biochemical signal.
+
−
</p>
+
−
</div>
+
−
</div>
+
−
<p><br />Many proteins that reside on the membrane or in the lumen of the ER contain short peptide signals. Proteins present in the lumen of the ER contain a KDEL C-terminal sequence
+
−
(Lys-Asp-Glu-Leu) while type I transmembrane (TM) proteins contain a dilysine (KKXX) motif on their C-terminus (cytosolic side). <x-ref> Munro1987, Jackson1990,
+
−
Stornaiuolo2003</x-ref>. The mechanism that allows these proteins to stay in the ER is more retrieval than retention. However we decided to use the term retention for
+
−
description of this process. ER luminal proteins interact with the KDEL receptor, a transmembrane ER resident protein. The cytosolic part of the KDEL receptor interacts with
+
−
coat proteins I (COP I) which coat vesicles and are responsible for transporting proteins from the cis end of the Golgi apparatus (cis-GA) back to the ER. The KKXX motif present
+
−
on type I TM proteins can directly interact with the COP I for retrieval. <x-ref> Stornaiuolo2003, Letourneur1994 </x-ref>.</p>
+
−
<p>Our idea was that if we proteolytically remove the retention signal, the protein of interest would no longer be retrieved back to the ER and could be secreted from the cell.
+
−
To achieve this we designed two types of secretory reporters, one type based on the luminal retention using KDEL sequence and the other based on the transmembrane retention with
+
−
a KKMP sequence. In each case, the retention sequence was preceded by a TEVp cleavage site to allow for inducible secretion, which could be replaced by any other peptide target
+
−
of our orthogonal protease set.</p>
+
−
</div>
+
−
+
−
+
−
<div class = "ui segment">
+
−
<h4>Secretion from the ER lumen</h4><br/>
+
−
<p>To achieve and detect the inducible secretion from the ER lumen, we created two reporter constructs with a cleavable KDEL sequence targeted to the ER lumen: SEAPKDEL and
+
−
TagRFPKDEL. Those proteins contained a protease target motif between the reporter domain and the KDEL domain, aimed to enable protein secretion after the proteolytic cleavage.
+
−
We used a TEVp variant (erTEVp) for all of our experiments with luminal retention.</p>
+
−
<!--tukej manjka extended text
+
−
In order to rely on TEVp cleavage in the ER lumen, we had to take some additional considerations into account. Cesaratto et al.</x-ref>Cesaratto2015</x-ref> reported that the wild
+
−
type TEV protease is not active in the lumen of ER. They designed a TEV protease variant active in the endoplasmic reticulum by preventing two major types of post-translational
+
−
modifications: N-glycosylation and cysteine oxidation. To avoid these inhibiting modifications, mutations N23Q, C130S and N171T were made. To ensure correct localization and
+
−
accumulation of this TEVp variant inside the endoplasmic reticulum, we also attached a signal sequence at the N-terminus and KDEL at the C-terminus of the protein.-->
+
−
<h4>Results</h4><br/>
+
−
+
−
<div style= "float:right;">
+
−
<figure data-ref="1">
+
−
<img class="ui medium image" src="https://static.igem.org/mediawiki/2016/9/9e/T--Slovenia--6.2.1.png" >
+
−
<figcaption><b>Cleavage with ER-residing protease (erTEV) facilitates secretion of reporter from cells.</b><br/>
+
−
(A) Scheme of the reporter with cleavable KDEL retention signal and protease target motif.
+
−
(B) The reporter with the KDEL retention signal was localized in the ER. HEK293T cells were transfected with the indicated reporters and in (C) also with erTEVp.
+
−
Localization was detected with confocal microscopy. (C)The reporter was detected in the medium of cells only when cotransfected with erTEVp. HEK293T cells were transfected
+
−
with the indicated constructs. Reporters were detected with WB in the concentrated medium.
+
−
</figcaption>
+
−
</figure>
+
−
</div>
+
−
<p>When the TagRFP<sup>KDEL</sup> reporter (<ref>1</ref>A) was expressed in the ER without an active erTEVp we confirmed its localization in the ER with confocal microscopy
+
−
(<ref>1</ref>B). Additionally, we could not detect any TagRFP in the cell medium with Western blotting. When erTEVp was present and active in the ER, the KDEL sequence was
+
−
removed from the reporter and the protein was secreted from the cell, which we detected with Western blot (<ref>1</ref>C), demonstrating that proteolytic activity in the ER can
+
−
regulate protein secretion.
+
−
</p>
+
−
+
−
<div style = "float:left;">
+
−
<figure data-ref="2">
+
−
<img class="ui medium image" src="https://static.igem.org/mediawiki/2016/6/61/T--Slovenia--6.2.2.png" >
+
−
<figcaption><b>Secretion of the SEAP reporter from ER lumen by cleavage with ER-resident protease.</b><br/>
+
−
HEK293T cells were transfected with indicated reporter and erTEVp. Increased SEAP activity was detected in the medium of cells
+
−
expressing both reporter and erTEVp protease.</figcaption></figure>
+
−
</div>
+
−
<p style="clear:right">Using SEAP<sup>KDEL</sup> we were able to confirm that the reporter is not present in the cell medium without coexpression of erTEVp. When erTEVp was cotransfected with
+
−
the reporter, we detected a large increase in enzymatic activity in the medium (<ref>2</ref>).
+
−
</p>
+
−
</div>
+
−
+
−
<div class = "ui segment">
+
−
<h4>Secretion from the ER membrane</h4><br/>
+
−
<p>The second approach to regulate protein secretion from the ER by protease was to used KKMP ER retention peptide linked to the transmembrane protein with a protease target
+
−
motif on the cytoplasmic side, N-terminal to the KKMP peptide. A transmembrane (TM) domain from the B-cell receptor
+
−
(<a href="http://parts.igem.org/Part:BBa_K157010">Bba_K157010</a>) was used for the integration of target proteins in the ER membrane. Similar as described above, two reporter
+
−
constructs with SEAP and TagRFP (SEAP:TM<sup>KKMP</sup> and TagRFP:TM<sup>KKMP</sup>) were designed and the constructs also contained a signal sequence at their N-terminus and a
+
−
proteolytically cleavable ER retention signal at their C-terminus. In case of the transmembrane targeted reporters we used the KKMP retention signal preceded by 3 copies of the
+
−
TEVp cleavage site on the cytosolic side of the membrane.</p>
+
−
<p>Additionally, either one or four furin cleavage sites were inserted between the protein of interest on the luminal side of the ER, which enable cleavage of the reporter
+
−
protein from the membrane, but this could occur only after the KKMP had been removed and the protein could enter the trans-GA. Furin is a native cellular endoprotease that is
+
−
active only in the trans-GA.</x-ref>Henrich2003</x-ref> This allowed us to design our constructs so that they are cleaved off of the membrane without any modified scar sequences
+
−
attached to them.</p>
+
−
<h4>Results</h4><br/>
+
−
+
−
<div style="float:left" align = "left;">
+
−
<figure data-ref="3">
+
−
<img onclick="resize(this);" class="ui medium image" src="https://static.igem.org/mediawiki/2016/b/b4/T--Slovenia--6.2.3.png" >
+
−
<figcaption><b>Localization of protease-responsive reporters on ER depending on the proteolysis. </b><br/>
+
−
(A) The transmembrane reporter without the KKMP retention signal was localized both on the ER and plasma membrane. (B) The transmembrane reporter with the KKMP retention
+
−
signal was localized exclusively on the ER membrane. (C) After cleavage of the KKMP retention signal, the transmembrane reporter translocated to the plasma membrane. HEK293T
+
−
cells were transfected with the indicated reporters and in (C) also with TEVp. Localization was detected with confocal microscopy. Each image is accompanied with a scheme of
+
−
the transfected construct. (D) Glycosylated reporter was detected in the medium of cells transfected with the transmembrane reporter without the KKMP retention signal.
+
−
HEK293T cells were transfected with the indicated constructs. Reporters were detected with WB in the concentrated medium. In lane 2, sample was incubated with N-glycosidase
+
−
F.
+
−
</figcaption>
+
−
</figure>
+
−
</div>
+
−
<p>Localization of the TagRFP:TM<sup>KKMP</sup> reporter was confirmed by the confocal microscopy. We used a control reporter without the KKMP retention signal (TagRFP:TM)
+
−
which we detected both on the ER and the plasma membrane (<ref>3</ref>A). In case of the present KKMP retention signal, the reporter was detected only on the ER
+
−
(<ref>3</ref>B). When TagRFP:TM<sup>KKMP</sup> was coexpressed with TEVp, localization of the reporter was similar to the localization of the positive control (TagRFP:TM)
+
−
on the plasma membrane and the ER (<ref>3</ref>C).</p>
+
−
<p>A band with a slightly larger apparent size than the expected size of TagRFP (28 kDa) was detected by western blotting in cells transfected with TagRFP:TM. We showed that the
+
−
unexpected difference in size was due to glycosylation, as we detected the protein at the expected size after deglycosylation of the medium sample with N-glycosidase F. We were
+
−
unable to detect a corresponding band in the medium of cells transfected with TagRFP:TM<sup>KKMP</sup> in the absence of the protease.</p>
+
−
<p>Together, these results confirm that localization and secretion of the protein reporter with the transmembrane domain depends on the presence and proteolysis of the KKMP
+
−
retention signal and that proteolysis can be used to induce secretion of already synthesized protein.</p>
+
−
+
−
<div style="float:right" align = "right">
+
−
<figure data-ref="4">
+
−
<img class="ui medium image" src="https://static.igem.org/mediawiki/2016/2/2f/T--Slovenia--6.2.4.png" >
+
−
<figcaption><b>Inducible secretion of reporter localized on ER membrane.</b><br/> 
+
−
SEAP activity was increased in the medium of cells induced with rapamycin. (B) Scheme of the transmembrane reporter with cleavable KKMP retention signal and inducible protease.
+
−
HEK293T cells were transfected with the indicated reporter and rapamycin inducible split proteases. Uncleaved proteases were used as positive control.</figcaption>
+
−
</figure>
+
−
</div>
+
−
<p style="clear:left">Finally, we cotransfected cells with SEAP:TM<sup>KKMP</sup> and rapamycin-inducible split TEVp. We detected increased levels of the SEAP enzymatic activity in the medium of
+
−
cells stimulated with rapamycin, which was dose dependent with respect to the amount of the transfected reporter-coding plasmid (<ref>4</ref>). These results confirm that
+
−
secretion of a target protein can be made inducible by an externally supplied signal, processed through our split protease system.</p>
+
  
 +
    for(i = 0; i < c2.length; i++) {
 +
        c2[i] = (c2[i]/(515.0)*img.clientWidth);
 +
    }
 +
    document.getElementById("scientists").coords = c2.toString();
  
 +
    for(i = 0; i < c3.length; i++) {
 +
        c3[i] = (c3[i]/(515.0)*img.clientWidth);
 +
    }
 +
    document.getElementById("iGEMers").coords = c3.toString();
  
−
</div>
+
    for(i = 0; i < c4.length; i++) {
−
+
        c4[i] = (c4[i]/(515.0)*img.clientWidth);
−
+
    }
−
+
    document.getElementById("researches").coords = c4.toString();
−
+
−
</div>
+
    for(i = 0; i < c5.length; i++) {
−
</div>
+
        c5[i] = (c5[i]/(515.0)*img.clientWidth);
−
</div>
+
    }
−
</body>
+
    document.getElementById("doctors").coords = c5.toString();
−
</html>
+
}

Latest revision as of 18:03, 19 October 2016

function reloader() { 

   try {
       //console.log('start');
       /*$('.ui.sticky.global').sticky({
           context: '#context',
           offset: 16
       });
       $('.ui.sticky.image').sticky({
           context: '#context',
           offset: 27
       });
       $('.ui.sticky.text.menu').sticky({
           context: '#context',
           offset: 200
       });
       $('.ui.sticky.text').sticky({
           context: '#context',
           offset: 200
       });*/
       $('.image_div > img').visibility({
           type: 'image',
           transition: 'fade in',
           duration: 500
       });
       $('.teamimg').hover(function () {
           var width = $(this).outerWidth() / 2;
           $(this).find('.left').animate({right: width}, {queue: false, duration: 300});
           $(this).find('.right').animate({left: width}, {queue: false, duration: 300});
       }, function () {
           $(this).find('.left').animate({right: 0}, {queue: false, duration: 300});
           $(this).find('.right').animate({left: 0}, {queue: false, duration: 300});
       });
       $(function () {
           // The parameter are the selector for the container(s) of text in which you want replacement
           // and a URL pointing to your bibfile - mind the same origin policy...
           var zitator = new Zitator(".citing", "//2016.igem.org/wiki/images/5/53/T--Slovenia--references.txt");
           zitator.zitiere();
       });
       function isScrolledIntoView(elem) {
           var docViewTop = $(window).scrollTop();
           var docViewBottom = docViewTop + $(window).height() - $("#menucomb").height();

           var elemTop = $(elem).offset().top;
           var elemBottom = elemTop + $(elem).height();

           if (elemTop >= docViewTop) {
               return true;
           }
           else if (elemBottom >= docViewBottom) {
               return true;
           }
           return false; // || elemTop >= docViewTop) ;
       }

       function clearStyleOfSideMenu() {
           //console.log("calling a function");
           var id = null;
           $("span.section.colorize").each(function () {
               var id = this.id;
               //console.log(id);
               var selector = 'a[href*="#'.concat(id).concat('"]');
               $(selector).css("color", "");
           });

           $("span.section.colorize").each(function() {
               var ident = this.id;
               console.log(ident);
               console.log(this);
               if(ident != "") {
                   var parent = (this.parentNode).parentNode;
                   if(isScrolledIntoView(parent)) {
                       var selector = 'a[href*="#'.concat(ident).concat('"]');
                       $(selector).css("color", "#DB2828");
                       console.log(selector);
                       return false;
                   }
               }
           });

           /*var color = true;
            $(".section").each(function () {
            //clear each parent
            var id = this.id;
            var selector = 'a[href*="#'.concat(id).concat('"]');
            if (isScrolledIntoView($(this).parent().parent())) {
            // nastavi barvo trenutni sekcij
            if(color) {

            console.log("section is found");
            color = false;
            return false; //break from function
            }
            }
            });*/
       }

       $(document).ready(function () {
               clearStyleOfSideMenu();
               $(window).scroll(function () {
                   clearStyleOfSideMenu();
               });
           }
       );
       $(".menuItem").mouseenter(
           function () {
               var loc = window.location.href;
               var defaultItem;
               var parent;
               $(".submenu").each(function () {
                       var context = this;
                       $("a", context).each(function () {
                           if (loc.match(/[^#]*/) == $(this).attr("href")) {
                               defaultItem = $(context).attr("id");
                               parent = $("#".concat(defaultItem.replace("Submenu", "")));
                           }
                       });
                   }
               );
               $(".ui.simple.item.menuItem a").each(function () {
                   if (loc.match(/[^#]*/) == $(this).attr("href")) {
                       parent = $($(this).parents('.ui.simple.item.menuItem'));
                       defaultItem = (parent.attr('id')).concat("Submenu");
                       //console.log(defaultItem);
                   }
               });
               defaultItem = document.getElementById(defaultItem);
               clearElements();
               var submenu = document.getElementById(this.id.concat("Submenu"));
               var submenuText = document.getElementById("SecondarySubmenu");
               if (submenuText.innerHTML != submenu.innerHTML) {
                   this.className = "ui simple active item menuItem";
                   submenuText.innerHTML = submenu.innerHTML;
               }
               else {
                   parent.attr("class", "ui simple active item menuItem");
                   submenuText.innerHTML = defaultItem.innerHTML;
               }
           }
       );
       $("#menucomb").mouseleave(function () {
               setDefaultMenu();
           }
       );
   } catch (e) {
       //console.log('startReloading');
       $.getScript("https://2016.igem.org/Team:Slovenia/libraries/semantic-min-js?action=raw&ctype=text/javascript", function () {
           //console.log('success');
           reloader();
       });
       //console.log('endReloading');
   }

} $(document).ready(injectHeader); $(document).ready(reloader); function enumerateKeys(object) { 

   var numberPairs = {};
   var objectPairs = {};
   var number = 0;

   var matches = document.body.querySelectorAll(object + '[data-ref]');
   while (number < matches.length) {
       var refName = matches[number].dataset.ref;

console.log(refName); console.log(matches[number]); 

       if (refName in numberPairs) {
           console.log(refName, "This label has already been assigned.");
       } else {
           numberPairs[number + 1] = matches[number];
           objectPairs[refName] = number + 1;
           console.log(refName);
       }
       number++;
   }
   return [numberPairs, objectPairs, number];

}

function enumerate() { 

   var tables = enumerateKeys('table');
   var figures = enumerateKeys('figure');

   var maximum = Math.max(tables[2], figures[2]);

   for (var number = 1; number <= maximum; number++) {
       if (number in tables[0]) {
           $(tables[0][number]).children('caption').prepend("Table " + number + ": ")
       }
       if (number in figures[0]) {
           $(figures[0][number]).children('figcaption').prepend("Figure " + number + ": ")
       }
   }

   $(this).find('ref').each(function () {
       var label = $(this).text();
       $(this).click(function (event) {
           event.preventDefault();
       });
       if (label in tables[1]) {
           var number = tables[1][label];
           $(this).html("<a href=> Table " + tables[1][label] + " </a>");
           $(this).on('click', function () {
               window.scroll(0, $(tables[0][number]).offset().top - 150);
           })
       } else {
           var number = figures[1][label];
           $(this).html("<a href=>Figure " + figures[1][label] + "</a>");
           $(this).on('click', function () {
               window.scroll(0, $(figures[0][number]).offset().top - 150);
           })
       }
   });

} $(document).ready(enumerate); $(document).ready(setDefaultMenu); $(document).ready(function(){ 

   $('.ui.accordion').accordion();

});

function resize(img) { 

   if (!(img.className.indexOf("big") >= 0)) {
       img.className = "ui big centered image";
       img.parentElement.parentElement.setAttribute("align-property", img.parentElement.parentElement.align);
       img.parentElement.parentElement.setAttribute("align", "center");
       img.parentElement.parentElement.setAttribute("data-property", img.parentElement.parentElement.style.cssText);
       img.parentElement.parentElement.style.cssText = "clear: both";
   }
   else {
       img.parentElement.parentElement.setAttribute("align", "");
       img.className = "ui image";
       img.parentElement.parentElement.style.cssText = img.parentElement.parentElement.getAttribute("data-property");
       img.parentElement.parentElement.align = img.parentElement.parentElement.getAttribute("align-property");
   }
   //scroll to image, (if two images are floated and the right one is resised, then the image gets pushed down)
   //var top = img.offsetTop;
   //console.log($(img).offset().top);
   //console.log($("menucomb").height());
   $(window).scrollTop($(img).offset().top -  $(window).height()/2 + $(img).height()/2);

}

function setDefaultMenu() { 

   //console.log("calling set default item");
   clearElements();
   var loc = window.location.href;
   var defaultItem;
   var parent;
   $(".submenu").each(function () {
           var context = this;
           $(this).css("color", "#DB2828");
           $(this).css("font-weight", "bold");
           $("a", context).each(function () {
               //console.log($(this).attr("href"));
               if (loc.match(/[^#]*/) == $(this).attr("href")) {
                   defaultItem = $(context).attr("id");
                   parent = $("#".concat(defaultItem.replace("Submenu", "")));
                   $(this).css("color", "#DB2828");
                   $(this).css("font-weight", "bold");
               }
           });

       }
   );
   $(".ui.simple.item.menuItem a").each(function () {
       if (loc.match(/[^#]*/) == $(this).attr("href")) {
           parent = $($(this).parents('.ui.simple.item.menuItem'));
           defaultItem = (parent.attr('id')).concat("Submenu");
       }
   });

   var submenuText = document.getElementById("SecondarySubmenu");
   defaultItem = document.getElementById(defaultItem);
   parent.attr("class", "ui simple active item menuItem");
   submenuText.innerHTML = defaultItem.innerHTML;

}

function clearElements() { 

   var elements = document.getElementsByClassName("menuItem");
   for (var i = 0; i < elements.length; i++) {
       elements[i].className = "ui simple item menuItem";
   }

}

function injectHeader() { 

   //console.log("Injecting header");
var menu = " \ \ \ \ \ \ \ \ \ \ \ \ "; 
   var contextDiv = document.getElementById("context");
   contextDiv.innerHTML = menu.concat(contextDiv.innerHTML);

var elements = document.getElementsByClassName("menuFix");

if(window.innerWidth < 768 ) { //phone console.log("small screen"); for (var i = 0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size:5px;"); } } else if(window.innerWidth < 800) { //small screen console.log("small screen"); for (var i = 0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size:7px;"); } } else if(window.innerWidth < 980) { //medium screen console.log("small screen"); for (var i = 0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size:9px;"); } } else if(window.innerWidth < 1280) { //normal console.log("small screen"); for (var i = 0; i < elements.length; i++) { elements[i].setAttribute("style", "font-size:11px;"); } } console.log("end of injecting"); }

$('.playGif').on('click', function () { 

   //console.log("play detected");
   var parent = $(this);
   var parAlt = parent.attr('data-alt');
   var parSrc = parent.attr('src');
   parent.attr("src", parAlt).attr("data-alt", parSrc);

}); function relativeCoords() { 

   console.log("what what");
   var img = document.getElementById("projectScheme");
   var c1 = [74, 132, 136, 217, 241, 225, 319, 175, 365, 89, 298, 42, 152, 62];
   var c2 =  [387, 125, 393, 283, 423, 316, 518, 190, 486, 120];
   var c3 = [528, 77, 497, 134, 537, 173, 672, 185, 739, 145, 733, 94, 694, 71];
   var c4 = [393, 283, 423, 316, 454, 300, 474, 260, 537, 273, 494, 305, 678, 285, 697, 243, 788, 239, 788, 330, 383, 374, 343, 319];

   for(i = 0; i < c1.length; i++) {
       c1[i] = (c1[i]/(800.0)*img.clientWidth);
   }
   document.getElementById("area1").coords = c1.toString();

   for(i = 0; i < c2.length; i++) {
       c2[i] = (c2[i]/(800.0)*img.clientWidth);
   }
   document.getElementById("area2").coords = c2.toString();

   for(i = 0; i < c3.length; i++) {
       c3[i] = (c3[i]/(800.0)*img.clientWidth);
   }
   document.getElementById("area3").coords = c3.toString();

   for(i = 0; i < c4.length; i++) {
       c4[i] = (c4[i]/(800.0)*img.clientWidth);
   }
   document.getElementById("area4").coords = c4.toString();

}

function relativeCoordsStar() { 

   var img = document.getElementById("starScheme");

var c1 = [254, 239, 194, 163, 225, 51, 319, 163]; var c2 = [260, 242, 323, 170, 452, 193, 363, 288]; var c3 = [260, 249, 362, 295, 389, 433, 260, 369]; var c4 = [252, 246, 252, 369, 131, 426, 150, 294]; var c5 = [250, 242, 147, 288, 55, 192, 187, 169]; 

   for(i = 0; i < c1.length; i++) {
       c1[i] = (c1[i]/(515.0)*img.clientWidth);
   }
   document.getElementById("patients").coords = c1.toString();

   for(i = 0; i < c2.length; i++) {
       c2[i] = (c2[i]/(515.0)*img.clientWidth);
   }
   document.getElementById("scientists").coords = c2.toString();

   for(i = 0; i < c3.length; i++) {
       c3[i] = (c3[i]/(515.0)*img.clientWidth);
   }
   document.getElementById("iGEMers").coords = c3.toString();

   for(i = 0; i < c4.length; i++) {
       c4[i] = (c4[i]/(515.0)*img.clientWidth);
   }
   document.getElementById("researches").coords = c4.toString();

   for(i = 0; i < c5.length; i++) {
       c5[i] = (c5[i]/(515.0)*img.clientWidth);
   }
   document.getElementById("doctors").coords = c5.toString();

}