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

 
(38 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Slovenia}}
+
function reloader() {
−
<html>
+
     try {
−
<head>
+
        //console.log('start');
−
     <title>Integrated practices</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>
+
−
    <link rel="stylesheet" type="text/css" href="//2016.igem.org/Team:Slovenia/libraries/custom-css?action=raw&ctype=text/css">
+
−
    <script type="text/javascript" src="//2016.igem.org/Team:Slovenia/libraries/custom-js?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
            src="//2016.igem.org/Team:Slovenia/libraries/zitator-js?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
            src="https://2016.igem.org/Team:Slovenia/libraries/bibtexparse-js?action=raw&ctype=text/javascript"></script>
+
−
<!-- MathJax (LaTeX for the web) -->
+
−
    <script type="text/x-mathjax-config">
+
−
        MathJax.Hub.Config({
+
−
            tex2jax: {
+
−
                inlineMath: [['$', '$'], ['\\(', '\\)']]
+
−
            },
+
−
            jax: ["input/TeX","output/SVG"],
+
−
            TeX: {
+
−
                extensions: ["mhchem.js"],
+
−
                equationNumbers: {autoNumber: "all" },
+
−
                Macros: {
+
−
                  goodbreak: '\\mmlToken{mo}[linebreak="goodbreak"]{}',
+
−
                  badbreak: ['\\mmlToken{mo}[linebreak="badbreak"]{#1}',1],
+
−
                  nobreak: ['\\mmlToken{mo}[linebreak="nobreak"]{#1}',1],
+
−
                  invisibletimes: ['\\mmlToken{mo}{\u2062}']
+
−
                }
+
−
             },
+
−
            CommonHTML: { linebreaks: { automatic: true, width: "75% container" } },
+
−
            "HTML-CSS": { linebreaks: { automatic: true, width: "68% container" }},
+
−
            SVG: { linebreaks: { automatic: true, width: "200% container" }}
+
 
         });
 
         });
−
    </script>
+
        $('.ui.sticky.image').sticky({
−
<script type="text/javascript" async
+
            context: '#context',
−
             src="//2016.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+
            offset: 27
−
    </script>
+
        });
−
</head>
+
        $('.ui.sticky.text.menu').sticky({
−
<body>
+
            context: '#context',
−
<script>
+
            offset: 200
−
    $(document).ready(
+
        });
 +
        $('.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 () {
 
             function () {
−
                 var getImgs = function () {
+
                 var loc = window.location.href;
−
                    var imgs = [];
+
                var defaultItem;
−
                    $('img').each(function () {
+
                var parent;
−
                        console.log("image detected");
+
                $(".submenu").each(function () {
−
                        var data = $(this).data('alt');
+
                        var context = this;
−
                        imgs.push(data);
+
                        $("a", context).each(function () {
−
                    });
+
                            if (loc.match(/[^#]*/) == $(this).attr("href")) {
−
                     return imgs;
+
                                defaultItem = $(context).attr("id");
−
                };
+
                                parent = $("#".concat(defaultItem.replace("Submenu", "")));
−
                 var imgs = getImgs();
+
                            }
−
                //preload images
+
                        });
−
                var image = [];
+
                     }
−
                 $.each(imgs, function (index) {
+
                 );
−
                     console.log("loading resource");
+
                 $(".ui.simple.item.menuItem a").each(function () {
−
                    image[index] = new Image();
+
                     if (loc.match(/[^#]*/) == $(this).attr("href")) {
−
                    image[index].src = imgs[index];
+
                        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");
 +
                }
 +
            });
 +
 +
        }
 
     );
 
     );
−
     function loadImage(sourceImage, name) {
+
     $(".ui.simple.item.menuItem a").each(function () {
−
         console.log(sourceImage);
+
         if (loc.match(/[^#]*/) == $(this).attr("href")) {
−
        var image = document.getElementById("starScheme");
+
            parent = $($(this).parents('.ui.simple.item.menuItem'));
−
        image.src = sourceImage;
+
            defaultItem = (parent.attr('id')).concat("Submenu");
−
var myId = document.getElementById("tekst");
+
        }
−
if(name == 'patients') {
+
    });
−
if(myId.innerHTML != "") {
+
−
myId.innerHTML = "";
+
−
}
+
−
else {
+
−
myId.innerHTML = '<p>Above all, we wanted to talk to the final users of our project, the patients who could potentially be using it in the future. Since they will be the ones to actually live with it every day, their opinion is paramount as the negative attitude of the end users towards medical application of synthetic biology would make the efforts to develop applications vain. \
+
−
According to the WHO, the number of diabetics has risen to 422 million by 2014. While we might not realize in everyday lives, diabetics are our friends, our grandparents, our uncles, our doctors, our postmen, our clerks, our hairdressers… As persons who do not suffer from a chronic disease, we cannot completely ourselves from our privileged position, as being a part of the community requires the experience of the life and hardship the members face. But we wanted to be allies to this community. Allyship is about being a humble guest in somebody else’s struggle, listening and learning from it, and doing what you can to help. For this reason we decided to get to know people living with diabetes and learn what we could from them, at the same time introducing our research efforts, not as a device that will at once end all their difficulties, but as a small beacon of hope. In the name of medical information confidentiality we omitted naming them or showing their pictures. \
+
−
Having lived with a chronic disease for most of their lives, the patients were perfectly willing to try another method that could help. More than anything they were excited over the possibility of not having to prick themselves with a needle several times a day. While we mostly presented the potential foundational advantages of the system and explained that arriving to the final working device might take years, they were kind enough to highlight some of their concerns connected to the system and suggestions we could integrate in the design. Understandably, they were mostly interested in safety and the way the device would be integrated into the body. They wanted to know in what ways their bodies would be protected from the modified cells and in how the cells in the device would be protected, as well as how we would make sure the system is not triggered randomly. While years from a possible final device, we paid attention and tried to find the solutions to their concerns. To separate the modified cells in the device from patient’s unaltered ones, we suggest microencapsulation of cells in alginate capsule, which do not trigger the immune system and were proven to work by many researchers in their publications and also by the 2012 Slovenian iGEM t[link]eam. In that project students already introduced several safety mechanisms, which still seem effective. To make sure the system is not induced randomly, by walking under a blue light at a party or being examined by ultrasound, we realized that we could use the logic operations[Link na podstran Logika], so two different inputs are needed for activation, which strongly decreases the possibility of an unwanted activation. Alternatively, one of the inputs can be used to recognize the correct type of cells or cell state and the other to recognize when it should be induced.</p>';
+
−
}
+
−
}
+
−
else if(name == 'scientists') {
+
−
if(myId.innerHTML != "") {
+
−
myId.innerHTML = "";
+
−
}
+
−
else {
+
−
+
−
}
+
−
}
+
−
else if(name == 'iGEMers') {
+
−
if(myId.innerHTML != "") {
+
−
myId.innerHTML = "";
+
−
}
+
−
else {
+
−
+
−
}
+
−
}
+
−
else if(name == 'researches') {
+
−
if(myId.innerHTML != "") {
+
−
myId.innerHTML = "";
+
−
}
+
−
else {
+
  
−
}
+
    var submenuText = document.getElementById("SecondarySubmenu");
−
}
+
    defaultItem = document.getElementById(defaultItem);
−
else if(name == 'doctors') {
+
    parent.attr("class", "ui simple active item menuItem");
−
if(myId.innerHTML != "") {
+
    submenuText.innerHTML = defaultItem.innerHTML;
−
myId.innerHTML = "";
+
}
−
}
+
 
−
else {
+
function clearElements() {
−
+
    var elements = document.getElementsByClassName("menuItem");
−
}
+
    for (var i = 0; i < elements.length; i++) {
−
}
+
        elements[i].className = "ui simple item menuItem";
−
else {
+
−
myId.innerHTML = "";
+
−
}
+
 
     }
 
     }
−
</script>
+
}
 +
 
 +
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");
 
 
−
<div id="example">
+
if(window.innerWidth < 768 ) {
−
<div class="pusher">
+
//phone
−
<div class="full height">
+
console.log("small screen");
−
<div class="banana">
+
for (var i = 0; i < elements.length; i++) {
−
<a href = "//2016.igem.org/Team:Slovenia">
+
elements[i].setAttribute("style", "font-size:5px;");
−
<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">
+
else if(window.innerWidth < 800) {
−
<a class="item" href="#intro" style="margin-left: 10%">
+
//small screen
−
<i class="selected radio icon"></i>
+
console.log("small screen");
−
<b>Project</b>
+
for (var i = 0; i < elements.length; i++) {
−
</a>
+
elements[i].setAttribute("style", "font-size:7px;");
−
<a class="item" href="#achievements" style="margin-left: 10%">
+
}
−
<i class="selected radio icon"></i>
+
}
−
<b>Achievements</b>
+
else if(window.innerWidth < 980) {
−
</a>
+
//medium screen
−
<a class="item" href="#requirements" style="margin-left: 10%">
+
console.log("small screen");
−
<i class="selected radio icon"></i>
+
for (var i = 0; i < elements.length; i++) {
−
<b>Medal requirements</b>
+
elements[i].setAttribute("style", "font-size:9px;");
−
</a>
+
}
−
<a class="item" href="idea">
+
}
−
<i class="chevron circle right icon"></i>
+
else if(window.innerWidth < 1280) {
−
<b>Idea</b>
+
//normal
−
</a>
+
console.log("small screen");
−
+
for (var i = 0; i < elements.length; i++) {
−
</div>
+
elements[i].setAttribute("style", "font-size:11px;");
−
+
}
−
</div>
+
}
−
<div class="article" id="context">
+
console.log("end of injecting");
−
<!-- menu goes here -->
+
}
−
<!-- content goes here -->
+
−
<div class="main ui citing justified container"><h1 class = "ui left dividing header"><span class="section">&nbsp;</span>Integrated Practices</h1>
+
−
<div class = "ui segment">
+
−
<p>Various extraordinary synthetic biology projects can be depicted as boats and ships, seeking the safety of a harbor in the wide ocean, their main purpose
+
−
finding the final destination.</p>
+
−
<p>No matter how different or fascinating the boat is, its main purpose is to safely arrive to the harbor. Before there were modern GPS systems, sailors
+
−
had to rely on using natural events and signs. One of the main was the lodestar, the most shining star, which is always a good orientation point.</p>
+
−
<p>Similarly, many research projects can struggle no matter how fascinating they are. They might lose the feeling of reality and just travel for the sake of travel.</p>
+
−
<p>In order to give the right coordinates, which showed to be of high importance in our case, we developed a new symbol for future iGEM teams who might apply their
+
−
projects to the medical field – community oriented lodestar. No matter if the team is competing in the foundational advance or medical application section, maximization
+
−
of benefit to society should be the number one priority.</p>
+
−
<p><b>/interactive picture comes here/</b></p>
+
−
<!--ŽIGA, vstavi interaktivno zvezdo za human practices; tekst imaš v wordu HP (ali me pa pocukej za rokav :D)-->
+
  
−
<div style = "display:block; width: 100%; margin-left:auto; margin-right:auto;" align = "center">
+
$('.playGif').on('click', function () {
−
<div style = "width:40%;float:left;%">
+
    //console.log("play detected");
−
                                    <img width="100%" onresize="relativeCoordsStar();" onload="relativeCoordsStar();"
+
    var parent = $(this);
−
                                        style="border-radius: 15px;"
+
    var parAlt = parent.attr('data-alt');
−
                                        src="//2016.igem.org/wiki/images/3/30/T--Slovenia--LoadStar-v5-01.png"
+
    var parSrc = parent.attr('src');
−
                                        alt="project scheme" usemap="#starMap" id="starScheme"/>
+
    parent.attr("src", parAlt).attr("data-alt", parSrc);
−
<map name="starMap">
+
});
−
                                        <area id="patients" shape="poly" coords="" alt="patients"
+
function relativeCoords() {
−
                                              onmouseover="loadImage('//2016.igem.org/wiki/images/4/4b/T--Slovenia--LoadStar-v5-1-01.png', 'patients')"
+
    console.log("what what");
−
                                              onmouseout="loadImage('//2016.igem.org/wiki/images/3/30/T--Slovenia--LoadStar-v5-01.png', 'patients')">
+
    var img = document.getElementById("projectScheme");
−
                                        <area id="scientists" shape="poly" coords="" alt="scientists"
+
    var c1 = [74, 132, 136, 217, 241, 225, 319, 175, 365, 89, 298, 42, 152, 62];
−
                                              onmouseover="loadImage('//2016.igem.org/wiki/images/1/14/T--Slovenia--LoadStar-v5-2-01.png', 'scientists')"
+
    var c2 = [387, 125, 393, 283, 423, 316, 518, 190, 486, 120];
−
                                              onmouseout="loadImage('//2016.igem.org/wiki/images/3/30/T--Slovenia--LoadStar-v5-01.png', 'scientists')">
+
    var c3 = [528, 77, 497, 134, 537, 173, 672, 185, 739, 145, 733, 94, 694, 71];
−
                                        <area id="iGEMers" shape="poly" coords="" alt="iGEMers"
+
    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];
−
                                              onmouseover="loadImage('//2016.igem.org/wiki/images/b/b7/T--Slovenia--LoadStar-v5-3-01.png', 'iGEMers')"
+
 
−
                                              onmouseout="loadImage('//2016.igem.org/wiki/images/3/30/T--Slovenia--LoadStar-v5-01.png', 'iGEMers')">
+
    for(i = 0; i < c1.length; i++) {
−
                                        <area id="researches" shape="poly" coords="" alt="researches"
+
        c1[i] = (c1[i]/(800.0)*img.clientWidth);
−
                                              onmouseover="loadImage('//2016.igem.org/wiki/images/e/e7/T--Slovenia--LoadStar-v5-4-01.png', 'researches')"
+
    }
−
                                              onmouseout="loadImage('//2016.igem.org/wiki/images/3/30/T--Slovenia--LoadStar-v5-01.png', 'researches')">
+
    document.getElementById("area1").coords = c1.toString();
−
                                        <area id="doctors" shape="poly" coords="" alt="doctors"
+
 
−
                                              onmouseover="loadImage('//2016.igem.org/wiki/images/2/2d/T--Slovenia--LoadStar-v5-5-01.png', 'doctors')"
+
    for(i = 0; i < c2.length; i++) {
−
                                              onmouseout="loadImage('//2016.igem.org/wiki/images/3/30/T--Slovenia--LoadStar-v5-01.png', 'doctors')">  
+
        c2[i] = (c2[i]/(800.0)*img.clientWidth);
−
</map>
+
    }
−
+
    document.getElementById("area2").coords = c2.toString();
−
</div>
+
 
−
<div style = "float:left; width:60%" id = "tekst">
+
    for(i = 0; i < c3.length; i++) {
−
+
        c3[i] = (c3[i]/(800.0)*img.clientWidth);
−
</div>
+
    }
−
</div>
+
    document.getElementById("area3").coords = c3.toString();
−
+
 
−
<p style = "clear:both;">Consequently, if ever lost, teams should just find the shining star and orient in respect to it. By thorough discussions and careful implementation of ideas
+
    for(i = 0; i < c4.length; i++) {
−
provided by all the participants involved in dialogue, iGEM team should be able to present at the Giant Jamboree the most of the project –completely analyzed project
+
        c4[i] = (c4[i]/(800.0)*img.clientWidth);
−
in real life. It’s not only the idea that influences the minds and thinking of individuals involved, but the relationship is reciprocal. The people involved have a great
+
    }
−
deal of influence over the idea itself as well. The concept will be explained on our example. While we are competing in the foundational advance track we have considered
+
    document.getElementById("area4").coords = c4.toString();
−
many possible medical applications of our project, particularly diabetes, Parkinson’s disease and hemorrhagic diseases, since medicine is the field of study of several
+
}
−
students and other students and mentors have a soft spot for this direction. .</p>
+
 
−
+
function relativeCoordsStar() {
−
</div>
+
    var img = document.getElementById("starScheme");
−
</div>
+
var c1 = [254, 239, 194, 163, 225, 51, 319, 163];
−
</div>
+
var c2 = [260, 242, 323, 170, 452, 193, 363, 288];
−
</div>
+
var c3 = [260, 249, 362, 295, 389, 433, 260, 369];
−
</div>
+
var c4 = [252, 246, 252, 369, 131, 426, 150, 294];
−
</div>
+
var c5 = [250, 242, 147, 288, 55, 192, 187, 169];
−
<div>
+
−
<a href="//igem.org/Main_Page">
+
    for(i = 0; i < c1.length; i++) {
−
<img border="0" alt="iGEM" src="//2016.igem.org/wiki/images/8/84/T--Slovenia--logo_250x250.png" width="5%" style = "position: fixed; bottom:0%; right:1%;">
+
        c1[i] = (c1[i]/(515.0)*img.clientWidth);
−
</a>
+
    }
−
</div>
+
    document.getElementById("patients").coords = c1.toString();
−
</body>
+
 
−
</html>
+
    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();
 +
}

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();

}