<!--     /////////////////  -->
<!--    //  S i M O N  //   -->
<!--   /////////////////    -->

<div id="Container" onclick="colourisatION()">
<svg id="iON" viewBox="0 0 1600 900">
<!--  *  /////////////////////////////////////////////////////////////-->  
<circle  class="orbit Electron" id="F3"  cx="1080" cy="370"  r="20" />
<circle  class="orbit Proton"   id="F2"  cx="640"  cy="330"  r="20" />
<circle  class="orbit Neutron"  id="F1"  cx="800"  cy="330"  r="20" />
<!--  i  /////////////////////////////////////////////////////////////-->  
<circle  class="Proton"   id="P1"  cx="680"  cy="470"  r="20" />
<circle  class="Neutron"  id="N1"  cx="680"  cy="410"  r="20" />
<circle  class="Electron" id="E1"  cx="680"  cy="450"  r="20" />
<circle  class="Neutron"  id="N2"  cx="680"  cy="490"  r="20"/>
<!--  O  /////////////////////////////////////////////////////////////--> 
<circle  class="Nucleus"  id="O"   cx="800"  cy="450"  r="40" />
<!--  N  /////////////////////////////////////////////////////////////--> 
<circle  class="Proton"   id="P6"  cx="1000" cy="470"  r="20" />
<circle  class="Neutron"  id="N3"  cx="920"  cy="410"  r="20" />  
<circle  class="Neutron"  id="N4"  cx="940"  cy="430"  r="20" />
<circle  class="Neutron"  id="N5"  cx="980"  cy="470"  r="20" />  
<circle  class="Proton"   id="P2"  cx="920"  cy="450"  r="20" />
<circle  class="Proton"   id="P3"  cx="920"  cy="470"  r="20" />
<circle  class="Proton"   id="P4"  cx="920"  cy="490"  r="20" />
<circle  class="Proton"   id="P5"  cx="1000" cy="430"  r="20" />
<circle  class="Electron" id="E2"  cx="960"  cy="450"  r="20" />
<circle  class="Electron" id="E3"  cx="1000" cy="490"  r="20" />
<circle  class="Neutron"  id="N6"  cx="1000" cy="410"  r="20" />  
<circle  class="Neutron"  id="N7"  cx="1000" cy="450"  r="20" />
</svg>
</div>

/*  /////////////////  //////////////////////////////////////////////////////*/
/* //  S i M O N  //   //////////////////////////////////////////////////////*/
/*/////////////////    //////////////////////////////////////////////////////*/

body, html {
 margin-top:    0px;   /*////////////////////////////////////////////////////*/
 margin-right:  0px;   /*////////////////////////////////////////////////////*/
 margin-bottom: 0px;   /*////////////////////////////////////////////////////*/
 margin-left:   0px;   /*////////////////////////////////////////////////////*/
 width:         100%;  /*////////////////////////////////////////////////////*/
 height:        100%;  /*////////////////////////////////////////////////////*/
 background:    #FFF;} /*////////////////////////////////////////////////////*/
#Container {           /*////////////////////////////////////////////////////*/
 width:         100%;  /*////////////////////////////////////////////////////*/
 height:        100%;  /*////////////////////////////////////////////////////*/
 background:    none;  /*////////////////////////////////////////////////////*/
 text-align:   "center";}/*//////////////////////////////////////////////////*/
#iON          {        /*////////////////////////////////////////////////////*/
 margin-left:   auto ; /*////////////////////////////////////////////////////*/
 margin-right:  auto ; /*////////////////////////////////////////////////////*/
 display:       block; /*////////////////////////////////////////////////////*/
 width:         100% ; /*////////////////////////////////////////////////////*/
 height:        100% ;}/*////////////////////////////////////////////////////*/
.Universe     { fill   :rgb(255,255,255);} /*////////////////////////////////*/
.Neutron      { fill   :rgb(255,255,255);} /*////////////////////////////////*/
.Proton       { fill   :rgb(255,255,255);} /*////////////////////////////////*/
.Electron     { fill   :rgb(255,255,255);} /*////////////////////////////////*/
.Nucleus      { stroke :rgb(255,255,255);  /*////////////////////////////////*/
                stroke-width:40;fill:none;}/*////////////////////////////////*/

// query elements from the DOM then run a function on each of the element.
// Great at assigning a different animation on a group of elements
function each(query, func) {
  var res = document.querySelectorAll(query);
  for (i = 0; i < res.length; i++) { 
    func(res[i], i);
  }
}


// Define colour palette /////////////////////////////////////////////////
function colourisatION () {
  
  var positive = Math.random() - .5 > 0;
  
  // Light colours ///////////////////////////////// 
  var lightPalette = [ 
    { r:250, g:175, b:145 }, // 0 - Light peach
    { r:255, g:200, b:110 }, // 1 - Light yellow
    { r:234, g:218, b:172 }, // 2 - Light sand
    { r:160, g:130, b:120 }, // 3 - Light brown
    { r:175, g:175, b:180 }, // 4 - Light grey
    { r:240, g:232, b:225 }, // 5 - Light stone

    // Bright colours ////////////////////////////////  

    { r:150, g:200, b:105 }, // 6 - Bright green
    { r:0  , g:175, b:150 }, // 7 - Bright jade
    { r:0  , g:165, b:230 }, // 8 - Bright blue
    { r:245, g:140, b:70  }, // 9 - Bright orange
    { r:215, g:70,  b:65  }, // 10- Bright red
    { r:110, g:110, b:175 }  // 11- Bright purple
    ].sort(random_sort);     // Randomise
  
  

  // Dark colours //////////////////////////////////
  var darkPalette = [ 
    { r:40 , g:10 , b:55  }, // 12- Heavy purple
    { r:65 , g:10 , b:35  }, // 13- Heavy red
    { r:0  , g:20 , b:55  }, // 14- Heavy blue
    { r:35 , g:40 , b:50  }, // 15- Heavy grey
    { r:55 , g:40 , b:40  }, // 16- Heavy brown
    { r:0  , g:40 , b:30  }  // 17- Heavy green
  ].sort(random_sort);
  // Randomising the array;
  
  
  //// Transition btween colours usig GSAP.

  var neutron = toRGB((positive ? lightPalette : darkPalette)[0])
  
  TweenMax.to('.Neutron', 2, {
    fill: neutron
  });
  TweenMax.to('.Nucleus', 2, {
    stroke: neutron
  });
  
  TweenMax.to('.Electron', 2, {
    fill: toRGB(lightPalette[1])
  });
  TweenMax.to('.Proton', 2, {
    fill: toRGB(lightPalette[2])
  });
  
  TweenMax.to('body', 2, {
    backgroundColor: toRGB((positive ? darkPalette : lightPalette)[0])
  });
  
  // Explode the logo and put it back in place
  
 //  each('circle:not(.Nucleus):not(.orbit)', function(el, i){ //
 
  each('circle:not(.Nucleus)', function(el, i){
    var x = el.cx;
    var y = el.cy;
    
    var tl = new TimelineLite();

    tl.add(
       TweenMax.to (el, 1, { 
        x: -400+Math.random()*800,
        y: -400+Math.random()*800
      })
     );
   
   tl.add(
          TweenMax.to (el, 1, { 
        x: -400+Math.random()*800,
      })
     );
   
      tl.add(
          TweenMax.to (el, 1, { 
        y: -400+Math.random()*800,
      })
     );
   
    tl.add(
       TweenMax.to (el, 1, {
        x: 0,
        y: 0
      })
    );



    

  });

  
} //////////////////////////////////////////




TweenMax.to("#F1", 3, {
  rotation:360,
  svgOrigin:"800 450",
  repeat: -1,
  ease:'linear'
});

TweenMax.to("#F2", 6, {
  rotation:-360,
  svgOrigin:"800 450",
  repeat: -1,
  ease:'linear'
});

TweenMax.to("#F3", 9, {
  rotation:360,
  svgOrigin:"800 450",
  repeat: -1,
  ease:'linear'
});


colourisatION();




function toRGB (rgb){
  return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
}
function random_sort () {
  return .5 - Math.random();
}
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }