Team:USP-Brazil/Testejava

<script> <script> var imageWidth = 1240,

   imageHeight = 1754,
   imageAspectRatio = imageWidth / imageHeight,
   $window = $(window);

var hotSpots = [{

 'title': 'Human',
 'description': 'Our Human Practices approach has three pillars: Expert advice, Biology Thematic Week and most importantly an all-female group of students from Brazils Technical School',
 'x': -245,
 'y': -185

}, {

 'title': 'Modelling',
 'description': 'We develop a system of ODEs, where we can look to specifically one parameter to propose a "crosstalk value" for each combination, comparing with our experiments. After the evaluation of the crosstalk value, we then recombined to find the best matches for combinations of N quorum sensing systems.',
 'x': -230,
 'y': 195

}, {

 'title': 'Team',
 'description': 'Hello iGEMers! We are the USP-Brazil team and we welcome you to our wiki. The USP-Brazil team is formed by people of different areas like cellular biology, microbiology, molecular biology, ecology and developmental biology. All the members are from undergraduate or graduate courses of the University of São Paulo. The integration between members of different areas and different courses made us a highly interdisciplinary team and with that we were able to develop our project for the competition.',
 'x': 228,
 'y': -200

}, {

 'title': 'Project',
 'description': 'The main theme of our project is communication. With that in the mind, we chose to work with naturally occurring communication systems. Bacteria are a well established model in synthetic biology, so what a better way of unifying the two and study their communication system? The field of synthetic biology is relatively new, and we believe it is essential that in this phase it is important is to is lay the foundational groundwork for the development of new modular tools.',
 'x': 245,
 'y': 170,

}, {

 'title': 'Wetlab',
 'description': 'We begun our experiments with the first three candidates for Sender systems (Lux, Las, Rhl) and all of the six Receiver systems. In this page, we will go through each one of the Sender systems and report how our reporters responded to the signal.',
 'x': 10,
 'y': 372

}, {

 'title': 'Resources',
 'description': 'It can hear things.',
 'x': -5,
 'y': -370,

}, { }];

function appendHotSpots() {

 for (var i = 0; i < hotSpots.length; i++) {

var $hotSpot = $('

').addClass('hot-spot');

   $('.container').append($hotSpot);
 }
 positionHotSpots();

}

function appendSpeechBubble() {

var $speechBubble = $('

').addClass('speech-bubble');

 $('.container').append($speechBubble);

}

function handleHotSpotMouseover(e) {

 var $currentHotSpot = $(e.currentTarget),
     currentIndex = $currentHotSpot.index(),
     $speechBubble = $('.speech-bubble'),
     title = hotSpots[currentIndex]['title'],
     description = hotSpots[currentIndex]['description'],
     hotSpotTop = $currentHotSpot.offset().top,
     hotSpotLeft = $currentHotSpot.offset().left,
     hotSpotHalfSize = $currentHotSpot.width() / 2,
     speechBubbleHalfSize = $speechBubble.width() / 2,
     topTarget = hotSpotTop - $speechBubble.height(),
     leftTarget = (hotSpotLeft - (speechBubbleHalfSize)) + hotSpotHalfSize;
 
     $speechBubble.empty();
     $speechBubble.append($('h1').text(title));
     $speechBubble.append($('p').text(description));
 
     $speechBubble.css({
       'top': topTarget - 20,
       'left': leftTarget,
       'display': 'block'
    }).stop().animate({
        opacity: 1
 }, 200);

}

function handleHotSpotMouseout(){

 var $speechBubble = $('.speech-bubble');
 $speechBubble.stop().animate({
   opacity: 0
 }, 200, function(){
   $speechBubble.hide();
 });

}

function positionHotSpots() {

 var windowWidth = $window.width(),
   windowHeight = $window.height(),
   windowAspectRatio = windowWidth / windowHeight,
   $hotSpot = $('.hot-spot');

 $hotSpot.each(function(index) {
   var xPos = hotSpots[index]['x'],
       yPos = hotSpots[index]['y'],
       desiredLeft = 0,
       desiredTop = 0;

   if (windowAspectRatio > imageAspectRatio) {
     yPos = (yPos / imageHeight) * 100;
     xPos = (xPos / imageWidth) * 100;
   } else {
     yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100;
     xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100;
   }

   $(this).css({
     'margin-top': yPos + '%',
     'margin-left': xPos + '%'
   });

 });

}

appendHotSpots(); appendSpeechBubble(); $(window).resize(positionHotSpots); $('.hot-spot').on('mouseover', handleHotSpotMouseover); $('.hot-spot').on('mouseout', handleHotSpotMouseout); </script>

</script>