Team:Evry/main-img.js

(function($){

  var Renderer = function(elt){
    var dom = $(elt)
    var canvas = dom.get(0)
    var ctx = canvas.getContext("2d");
    var gfx = arbor.Graphics(canvas)
    var sys = null

    var _vignette = null
    var selected = null,
        nearest = null,
        _mouseP = null;

    
    var that = {
      init:function(pSystem){
        sys = pSystem
        sys.screen({size:{width:dom.width(), height:dom.height()},padding:[36,60,36,60]})

        $(window).resize(that.resize)
        that.resize()
        that._initMouseHandling()

        if (document.referrer.match(/GoldenBricksxxxxxxxx|Plasmids|AIDSystem/)){
          // if we got here by hitting the back button in one of the Benchwork, 
          // start with the Benchwork section pre-selected
          that.switchSection('Benchwork')
        }
      },
      resize:function(){
        // canvas.width = .5* $(window).width()
        // canvas.height = .5* $(window).height()
        sys.screen({size:{width:canvas.width, height:canvas.height}})
        _vignette = null
        that.redraw()
      },
      redraw:function(){
        gfx.clear()
        sys.eachEdge(function(edge, p1, p2){
          if (edge.source.data.alpha * edge.target.data.alpha == 0) return
          gfx.line(p1, p2, {stroke:"#b2b19d", width:3, alpha:edge.target.data.alpha})
        })
        sys.eachNode(function(node, pt){
          var w = Math.max(20, 20+gfx.textWidth(node.name) )
          if (node.data.alpha===0) return

          if (node.data.shape=='img'){
	    var img_elem = new Image();
	    img_elem.src = node.data.url;
	    ctx.drawImage(img_elem, pt.x-w/2, pt.y-w/2, w, w); // Redimensionnement de l'image prévue comme tu le souhaitais !
            gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:0})
          }

          else if (node.data.shape=='dot'){
            gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:node.data.alpha})
            gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", weight:"bold", size:12})      
          }

          else{
            gfx.rect(pt.x-w/2, pt.y-8, w, 20, 4, {fill:node.data.color, alpha:node.data.alpha})
            gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
            gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
          }
        })
        that._drawVignette()
      },
      
      _drawVignette:function(){
        var w = canvas.width
        var h = canvas.height
        var r = 20

     /*   if (!_vignette){
          var top = ctx.createLinearGradient(0,0,0,r)
          top.addColorStop(0, "#e0e0e0")
          top.addColorStop(.7, "rgba(255,255,255,0)")

          var bot = ctx.createLinearGradient(0,h-r,0,h)
          bot.addColorStop(0, "rgba(255,255,255,0)")
          bot.addColorStop(1, "white")

          _vignette = {bot:bot}
        } */
        
        // top
        ctx.fillStyle = _vignette.top
        ctx.fillRect(0,0, w,r)

        // bot
        ctx.fillStyle = _vignette.bot
        ctx.fillRect(0,h-r, w,r)
      },

      switchMode:function(e){
        if (e.mode=='hidden'){
          dom.stop(true).fadeTo(e.dt,0, function(){
            if (sys) sys.stop()
            $(this).hide()
          })
        }else if (e.mode=='visible'){
          dom.stop(true).css('opacity',0).show().fadeTo(e.dt,1,function(){
            that.resize()
          })
          if (sys) sys.start()
        }
      },
      
      switchSection:function(newSection){
        var parent = sys.getEdgesFrom(newSection)[0].source
        var children = $.map(sys.getEdgesFrom(newSection), function(edge){
          return edge.target
        })
        
        sys.eachNode(function(node){
          if (node.data.shape=='dot') return // skip all but leafnodes
          if (node.data.shape=='img') return // skip all but leafnodes
          var nowVisible = ($.inArray(node, children)>=0)
          var newAlpha = (nowVisible) ? 1 : 0
          var dt = (nowVisible) ? .5 : .5
          sys.tweenNode(node, dt, {alpha:newAlpha})

          if (newAlpha==1){
            node.p.x = parent.p.x + .05*Math.random() - .025
            node.p.y = parent.p.y + .05*Math.random() - .025
            node.tempMass = .001
          }
        })
      },
      
      
      _initMouseHandling:function(){
        // no-nonsense drag and drop (thanks springy.js)
        selected = null;
        nearest = null;
        var dragged = null;
        var oldmass = 1

        var _section = null

        var handler = {
          moved:function(e){
            var pos = $(canvas).offset();
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
            nearest = sys.nearest(_mouseP);

            if (!nearest.node) return false

//            if (nearest.node.data.shape!='dot'){
              selected = (nearest.distance < 50) ? nearest : null
              if (selected){
                 dom.addClass('linkable')
                 window.status = selected.node.data.link//.replace(/^\//,"http://"+window.location.host+"/")//.replace(/^#/,'')
              }
              else{
                 dom.removeClass('linkable')
                 window.status = ''
              }
//            }else 
            if ($.inArray(nearest.node.name, ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx']) >=0 ){
              if (nearest.node.name!=_section){
                _section = nearest.node.name
                that.switchSection(_section)
              }
              dom.removeClass('linkable')
              window.status = ''
            }
            
            return false
          },
          clicked:function(e){
            var pos = $(canvas).offset();
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
            nearest = dragged = sys.nearest(_mouseP);
            
            if (nearest && selected && nearest.node===selected.node){
              var link = selected.node.data.link
              if (link.match(/^#/)){
                 $(that).trigger({type:"navigate", path:link.substr(1)})
              }else{
                 window.location = link
              }
              return false
            }
            
            
            if (dragged && dragged.node !== null) dragged.node.fixed = true

            $(canvas).unbind('mousemove', handler.moved);
            $(canvas).bind('mousemove', handler.dragged)
            $(window).bind('mouseup', handler.dropped)

            return false
          },
          dragged:function(e){
            var old_nearest = nearest && nearest.node._id
            var pos = $(canvas).offset();
            var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)

            if (!nearest) return
            if (dragged !== null && dragged.node !== null){
              var p = sys.fromScreen(s)
              dragged.node.p = p
            }

            return false
          },

          dropped:function(e){
            if (dragged===null || dragged.node===undefined) return
            if (dragged.node !== null) dragged.node.fixed = false
            dragged.node.tempMass = 1000
            dragged = null;
            // selected = null
            $(canvas).unbind('mousemove', handler.dragged)
            $(window).unbind('mouseup', handler.dropped)
            $(canvas).bind('mousemove', handler.moved);
            _mouseP = null
            return false
          }


        }

        $(canvas).mousedown(handler.clicked);
        $(canvas).mousemove(handler.moved);

      }
    }
    
    return that
  }
  
  
  var Nav = function(elt){
    var dom = $(elt)

    var _path = null
    
    var that = {
      init:function(){
        $(window).bind('popstate',that.navigate)
        dom.find('> a').click(that.back)
        $('.more').one('click',that.more)
        
        $('#Model dl:not(.datastructure) dt').click(that.reveal)
        that.update()
        return that
      },
      more:function(e){
        $(this).removeAttr('href').addClass('less').html('&nbsp;').siblings().fadeIn()
        $(this).next('h2').find('a').one('click', that.less)
        
        return false
      },
      less:function(e){
        var more = $(this).closest('h2').prev('a')
        $(this).closest('h2').prev('a')
        .nextAll().fadeOut(function(){
          $(more).text('creation & use').removeClass('less').attr('href','#')
        })
        $(this).closest('h2').prev('a').one('click',that.more)
        
        return false
      },
      reveal:function(e){
        $(this).next('dd').fadeToggle('fast')
        return false
      },
      back:function(){
        _path = "/"
        if (window.history && window.history.pushState){
          window.history.pushState({path:_path}, "", _path);
        }
        that.update()
        return false
      },
      navigate:function(e){
        var oldpath = _path
        if (e.type=='navigate'){
          _path = e.path
          if (window.history && window.history.pushState){
             window.history.pushState({path:_path}, "", _path);
          }else{
            that.update()
          }
        }else if (e.type=='popstate'){
          var state = e.originalEvent.state || {}
          _path = state.path || window.location.pathname.replace(/^\//,'')
        }
        if (_path != oldpath) that.update()
      },
      update:function(){
        var dt = 'slow'
        if (_path===null){
          // this is the original page load. don't animate anything just jump
          // to the proper state
          _path = window.location.pathname.replace(/^\//,'')
          dt = 0
          dom.find('p').css('opacity',0).show().fadeTo('slow',1)
        }

        switch (_path){
          case '':
          case '/':
//          dom.find('p').text('a graph visualization library using web workers and jQuery')
          dom.find('> a').removeClass('active').attr('href','#')

          $('#Model').fadeTo('fast',0, function(){
            $(this).hide()
            $(that).trigger({type:'mode', mode:'visible', dt:dt})
          })
          document.title = "The French Froggies Project!"
          break
          
        }
        
      }
    }
    return that
  }
  
  $(document).ready(function(){
    var CLR = {
      branch:"#b2b19d",
      level3benchwork:"#FFBF3E",
      level3model:"#4B86C7"
    }
	/*Thibault BEGIN*/
    var theUI = {

       // ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx']

      nodes:{"The French Froggies Project!":{color:"#51C215", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Project', url:'https://static.igem.org/mediawiki/2012/c/cf/French.png'}, //Attribut url pour l'image ajouté /*Thibault*/

             "Xenopus as a chassis":{color:"#63a358", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/FrenchFrog', url:'https://static.igem.org/mediawiki/2012/b/bd/Xenope.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                 "Creation of new Xenopus plasmids":{color:"#63a358", alpha:0, link:'FrenchFrog#plasmid'},
                 "How to micro inject in Xenopus eggs":{color:"#63a358", alpha:0, link:'InjectionTuto'},
                 "Development stages":{color:"#63a358", alpha:0, link:'Stages'},
                 "Characterization of plasmids and reporters":{color:"#63a358", alpha:0, link:'Tadpole_injection1'},

             "Hormonal Communicati":{color:"#852c2b", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/AIDSystem', url:'https://static.igem.org/mediawiki/2012/e/e2/Hormone.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                 "The auxin emitter":{color:"#852c2b", alpha:0, link:'AIDSystem#auxin'},
                 "The auxin receiver":{color:"#852c2b", alpha:0, link:'AIDSystem#AID'},
                 "Auxin toxicity":{color:"#852c2b", alpha:0, link:'AuxinTOX'},
                 "Auxin Uptake":{color:"#852c2b", alpha:0, link:'auxin_uptake'},

             "Modelingxxxxxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Modeling', url:'https://static.igem.org/mediawiki/2012/5/5b/ModelingDHIUHEIUHD.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                 "General Model":{color:CLR.level3model, alpha:0, link:'ODE_model'},
                 "Rigorous derivations of ODEs":{color:CLR.level3model, alpha:0, link:'auxin_pde'},
                 "Diffusion in a realistic geometry":{color:CLR.level3model, alpha:0, link:'Auxin_diffusion'},
                 "Auxin production":{color:CLR.level3model, alpha:0, link:'auxin_production'},
                 "Auxin reception":{color:CLR.level3model, alpha:0, link:'auxin_detection'},
                 "Plasmid diffusion":{color:CLR.level3model, alpha:0, link:'plasmid_splitting'},
                 "Model integration":{color:CLR.level3model, alpha:0, link:'model_integration'},

             "GoldenBricksxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/GB', url:'https://static.igem.org/mediawiki/2012/a/a4/GoldeN.png'},  //Attribut url pour l'image ajouté /*Thibault*/

             "Human Practicexxxxxx":{color:"#a6953f", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/HumanPractice', url:'https://static.igem.org/mediawiki/2012/b/ba/HumanPractice.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                 "Hi Xenope!":{color:"#a6953f", alpha:0, link:'Team:Evry/HumanPractice/Introduction'},
                 "Would you be my chassis?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/modelorganism'},
                 "Feed the frogs!":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/freedthefrogs'},
                 "I'm a chassis, really?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/chassis'},
                 "Should we work with Xenopus again?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/future'},
                 "What the laws says...":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/others'},

             "The Teamxxxxxxxxxxxx":{color:"#632e8c", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Team', url:'https://static.igem.org/mediawiki/2012/9/93/TeamEVRY.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                 "Our Team":{color:"#632e8c", alpha:0, link:'Team'},
                 "Our Sponsors":{color:"#632e8c", alpha:0, link:'Sponsors'},
                 "Attributions":{color:"#632e8c", alpha:0, link:'Attributions'},
                 "Official profile":{color:"#632e8c", alpha:0, link:'https://igem.org/Team.cgi?year=2012'},
                 "Collaborations":{color:"#632e8c", alpha:0, link:'Collaboration'}
            },

      edges:{

       
        "The French Froggies Project!":{
            "Xenopus as a chassis":{"length":0.8,"weight":2},
            "Hormonal Communicati":{"length":0.8,"weight":2},
            "Modelingxxxxxxxxxxxx":{"length":0.8,"weight":2},
            "GoldenBricksxxxxxxxx":{"length":1.5,"weight":2},
            "Human Practicexxxxxx":{"length":0.75,"weight":2},
            "The Teamxxxxxxxxxxxx":{"length":0.5,"weight":2}
        },


        "Xenopus as a chassis":{
            "Creation of new Xenopus plasmids":{"length":0.75,"weight":1},
            "How to micro inject in Xenopus eggs":{"length":0.75,"weight":2},
            "Development stages":{"length":0.75,"weight":2},
            "Characterization of plasmids and reporters":{"length":0.75,"weight":2}
        },
        "Hormonal Communicati":{
            "The auxin emitter":{"length":1,"weight":2},
            "The auxin receiver":{"length":1,"weight":2},
            "Auxin toxicity":{"length":1,"weight":2},
            "Auxin Uptake":{"length":1,"weight":2}
            
        },

        "Modelingxxxxxxxxxxxx":{
            "General Model":{"length":0.5,"weight":2},
            "Rigorous derivations of ODEs":{"length":0.5,"weight":2},
            "Diffusion in a realistic geometry":{"length":0.75,"weight":2},
            "Auxin production":{"length":0.5,"weight":2},
            "Auxin reception":{"length":0.5,"weight":2},
            "Plasmid diffusion":{"length":0.5,"weight":2},
            "Model integration":{"length":0.5,"weight":2}
            
        },

        "GoldenBricksxxxxxxxx":{},


        "Human Practicexxxxxx":{
            "Hi Xenope!":{"length":0.5,"weight":2},
            "Would you be my chassis?":{"length":0.5,"weight":2},
            "Feed the frogs!":{"length":0.5,"weight":2},
            "I'm a chassis, really?":{"length":0.5,"weight":2},
            "Should we work with Xenopus again?":{"length":0.5,"weight":2},
            "What the laws says...":{"length":0.5,"weight":2}
        },

        "The Teamxxxxxxxxxxxx":{
            "Our Team":{"length":0.5,"weight":2},
            "Our Sponsors":{"length":0.5,"weight":2},
            "Attributions":{"length":0.5,"weight":2},
            "Official profile":{"length":0.5,"weight":2},
            "Collaborations":{"length":0.5,"weight":2}
        }
      }
    }
	/*Thibault END*/

    var sys = arbor.ParticleSystem()
    sys.parameters({stiffness:900, repulsion:50, gravity:true, dt:0.015})
    sys.renderer = Renderer("#sitemap")
    sys.graft(theUI)
    
    var nav = Nav("#nav")
    $(sys.renderer).bind('navigate', nav.navigate)
    $(nav).bind('mode', sys.renderer.switchMode)
    nav.init()
  })
})(this.jQuery)