anchor.diff:          .calign { text-align: center; }
           table.items td.dark-border { border-top: solid 1px #333; }
           table.summary>tbody>tr>td:nth-child(1) { font-weight: bold; font-size: 0.85em; text-align: right; padding-right: 12px; background-color: #f9f9f9; }
  -		.pagination { margin: 0;}
  -		.table-summary { color: #999; }
  +		    .pagination { margin: 0;}
  +		    .table-summary { color: #999; }
  +        #waveform { border: solid 1px #ccc; margin-bottom: 8px; height: 128px; }
         </style>
  +      
  +      <script>
  +  
  +      var wavesurfer = Object.create(WaveSurfer);
  +    	var wavesurfer_initialized = false;
  +
  +      $(document).ready(function() {
  +    
  +        $('.audio').click(function(e) {
  +            $("#audio-file").val($(this).attr("href"));
  +            e.preventDefault();
  +            $("#audio-popup").modal('show');
  +        });
  +      
  +        $("#audio-popup").on('shown.bs.modal', function () {
  + 
  +      		if (wavesurfer_initialized == false) {
  +            wavesurfer.init({
  +              container: '#waveform',
  +              waveColor: 'violet',
  +              progressColor: 'purple',
  +              normalize: false
  +            });
  +			
  +      			wavesurfer_initialized = true;
  +      		}
  + 
  +          wavesurfer.load($("#audio-file").val());
  +          wavesurfer.on('ready', function () {
  +            wavesurfer.play();
  +          });
  +
  +          });
  +      
  +          $("#audio-popup").on('hidden', function () {      
  +            wavesurfer.destroy(); 
  +          });
  +      
  +          $('.back').click(function() {
  +            wavesurfer.skipBackward(); 
  +          });
  +      
  +          $('.forth').click(function() {
  +            wavesurfer.skipForward(); 
  +          });
  +      
  +          $('.play').click(function() {
  +            wavesurfer.playPause(); 
  +          });
  +      
  +        });
  +      </script>
   	  
   	  <%= yield :head %>
   	</head>
  
positive.code: <!DOCTYPE html>
  <html lang="en">
  	<head>
        <meta charset="utf-8">
        <title><%= Cache.setting(:system, 'Website Name')%>: <%= yield :title %></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="Rhombus CMS, Inc.">
  
        <link href="/rhombus_core/sb-admin-2/css/bootstrap.min.css" rel="stylesheet">
        <link href="/rhombus_core/sb-admin-2/css/sb-admin-2.css" rel="stylesheet">
        <link href="/rhombus_core/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  	  <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet">
  
        <script src="/rhombus_core/sb-admin-2/js/jquery-1.11.0.js"></script>
  	  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script src="/rhombus_core/sb-admin-2/js/bootstrap.min.js"></script>
        <script src="/rhombus_core/sb-admin-2/js/sb-admin-2.js"></script>
        <script src="/rhombus_core/sb-admin-2/js/plugins/metisMenu/metisMenu.min.js"></script>
  	  <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
  	  <script src="//cdn1.tampahost.net/js/rails.js"></script>
  
  	  <%= csrf_meta_tags %>
  	  
  
negative.code:     <!-- /#page-wrapper -->
  
      </div>
      
      <input type="hidden" id="audio-file" value=""/>
      <div id="audio-popup" class="modal fade">
      	<div class="modal-dialog">
      		<div class="modal-content">
      		  <div class="modal-header">
      		    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      		    <h4>Voicemail</h4>
      		  </div>
  
      		  <div class="modal-body">
    
      		    <div id="wave-timeline"></div>
      		    <div id="waveform"></div>
  
      		    <div class="controls">
      		      <button class="btn btn-primary back">
      		        <i class="icon-step-backward"></i> Backward
      		       </button>
  
      		       <button class="btn btn-primary play">
      		        <i class="icon-play"></i>
      		          Play
      		          /
      		          <i class="icon-pause"></i>
      		          Pause
      		        </button>
  
      		        <button class="btn btn-primary forth">
      		          <i class="icon-step-forward"></i>
      		          Forward
      		        </button>
      		    </div>
        	  	  </div>
    
      		  <div class="modal-footer">
      		    <a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</a>
      		  </div>
  		  
      		</div>
      	</div>
      </div>
  
      </body>
  
  