sub-build-your-own-skelton-what-are-bones-bones-are-alive.html

<!-- i-C-a -->
<div data-role="page" id="sub-build-your-own-skelton-what-are-bones-bones-are-alive">
  <script src="js/slidebar_build_your_own_skelton.js"></script>
  <link rel="stylesheet" href="css/style_build_your_own_skelton.css" />
  <div class="menuhousing"></div>
  <div class="homebtnholder"><div class="homebtnskelton"></div></div>
  <div class="mpbtnholder"><div class="mpbtnskelton"></div></div>
  <div class="cpbtnholder"><div class="cpbtnskelton"></div></div>
  <div class="infobtnholder"><div class="infobtnskelton"></div></div>
  <div class="credsbtnholder"><div class="credsbtnskelton"></div></div>
  <div class="menubtnholder"><div class="menubtnskelton"></div></div>
  
  <div class="bptitleholder"><h1>Bones are alive!</h1></div>
  <!--<div id="forceslink" style="position:absolute;left:225px;top:105px;width:250px;height:60px;"></div>
  <div id="aerodynamicslink" style="position:absolute;left:225px;top:255px;width:250px;height:60px;"></div>
  <div id="rollinglink" style="position:absolute;left:225px;top:400px;width:250px;height:60px;"></div>-->
  <div data-role="content" class="kidzcontent">
	<div class="bones-are-alive-text">
		<p>If you've ever seen a skeleton or fossil in a museum, you might think that all bones are dead.  But your bones are all very much alive, growing and changing all the time just like your fingernails or your hair!</p>
		<p>This is because bones contain living cells!  These cells die and are replaced throughout your life.</p>
		<p>Your bones need to be alive so you can grow and get taller, and even get repaired when they are fractured or broken.   You are born with around 300 bones, but these bones fuse together as you grow so you end up with only 206!  If you check the image of a growing baby, the bones colored red are not connected, but these fuse together as you grow!</p>
		<p>Your bones stop growing in your twenties but your bone can continue to repair throughout your life. </p>
    </div>   
    <div class="botlogoholder"><a href="home.html" class="homelinkbh"><img src="css/images/9-12/Human_Body/bottomhomehb.png"></a></div>
  </div> <!-- end content -->  
    
  
  <!--<div class="audiopanel">-->
    <!-- images are in slidebarnat.js 
         note: change the ids to be able play the narration
    -->
    <div class="micbtnholder"><div class="micbtnskelton" id="playstopbonesarealive"></div></div>
    <div class="bskelton"><div class="rwskelton" id="bonesarealiveaudiobbtn"></div></div>
    <div class="plskelton"><div class="plpsskelton" id="bonesarealiveaudioplbtn"></div></div>
    <div class="fskelton"><div class="fwskelton" id="bonesarealiveaudiofbtn"></div></div>
    <div id="actualaudio-bonesarealive" style="visibility:hidden;"></div>
  <!--</div>-->
  <script>
  // sound setup is in home.html and index.js
    sound = new Audio(); // 'sound' is now an audio object
    var playing;
    var paused;
    (function() {
      playing = false;
      paused = true;
      if(sound.canPlayType('audio/mpeg')) {
        $('#actualaudio-bonesarealive').html('<audio id="bonesarealiveaudio" controls preload onpause="playsskelton()" onplay="pauseskelton()"><source src="audio/Build_Your_Own_Skelton/Bone_Are_Alive.mp3" type="audio/mpeg"></audio>');
      } 
    
      $("#sub-build-your-own-skelton-what-are-bones-bones-are-alive").swipe( { swipeRight:goBack, allowPageScroll:"auto"} );
    })();
    

    
    $('.homelinkbh').on('tap', function() { bgsoundskelton.pause(); bgsoundskelton.currentTime = 0; mainaudiobg.play(); });
    
    function goBack() {
      $.mobile.changePage("sub-build-your-own-skelton.html", {transition: "slide", reverse: true });
    }
    
    function playsskelton() {
         bgsoundskelton.play();
    }
       
    function pauseskelton() {
         bgsoundskelton.pause();
    }
    /* ******************** */
    /* this is the microphone button */
    $("#playstopbonesarealive").on('tap', function() {
      if(!playing) {
        bonesarealiveaudio.play();
        $('.micbtnskelton').css('background-position-x', '-81px');
        playing = true;
        paused = false;
      } else {
        bonesarealiveaudio.pause(); bonesarealiveaudio.currentTime = 0;
        $('.micbtnskelton').css('background-position-x', '0px');
        playing = false;
        paused = true;
      }
    });
    
    $("#bonesarealiveaudioplbtn").on('tap', function() {
      if(!paused) {
        bonesarealiveaudio.pause();
        paused = true;
      } else {
        bonesarealiveaudio.play();
        paused = false;
      }
      //$(".audiopanel").css({"backgroundPosition":"-197px 0px"});
    });
    
    $("#bonesarealiveaudiofbtn").on('tap', function() {
      var ctime = bonesarealiveaudio.currentTime;
      bonesarealiveaudio.currentTime = ctime + 10;
    });
    
    $("#bonesarealiveaudiobbtn").on('tap', function() {
      var ctime = bonesarealiveaudio.currentTime;
      bonesarealiveaudio.currentTime = ctime - 10;
    });
    
    $("#bonesarealiveaudiopsbtn").on('tap', function() {
      bonesarealiveaudio.pause();
    });
  </script>
</div> <!--//home-->