Home | History | Annotate | Download | only in sort 
      1 <html>
      2 <head>
      3 <title>Sorting in action</title>
      4 
      5 <link rel=stylesheet href="sort.css" type="text/css">
      6 
      7 <script src="sort.js"></script>
      8 <script src="sort-bubble.js"></script>
      9 <script src="sort-insertion.js"></script>
     10 <script src="sort-quick.js"></script>
     11 <script src="sort-heap.js"></script>
     12 
     13 <script>
     14 var sorts = new Array();
     15 sorts.push(new Sort("Bubble", sort_bubble));
     16 sorts.push(new Sort("Insertion", sort_insertion));
     17 sorts.push(new Sort("Quick", sort_quick));
     18 sorts.push(new Sort("Heap", sort_heap));
     19 
     20 
     21 function init() {
     22   function starter(sort) {
     23     return function(){sort.start();};
     24   }
     25   for (var i = 0; i < sorts.length; i++) {
     26     var sort = sorts[i];
     27     sort.init();
     28     var graph = document.getElementById(sort.name);
     29     graph.onclick = starter(sort);
     30   }
     31   var inner_loop = document.getElementById("inner_loop");
     32   inner_loop.checked = inner_loop_enabled != 0;
     33 }
     34 
     35 function start_all() {
     36   for (var i = 0; i < sorts.length; i++) {
     37     sorts[i].start();
     38   }
     39 }
     40 
     41 function reset_all() {
     42   for (var i = 0; i < sorts.length; i++) {
     43     sorts[i].reset();
     44   }
     45 }
     46 
     47 function change_size(val) {
     48   size = val;
     49   reset_all();
     50 }
     51 
     52 function enable_inner_loop(enabled) {
     53   if (enabled) {
     54     inner_loop_enabled = 1;
     55   } else {
     56     inner_loop_enabled = 0;
     57   }
     58 }
     59 
     60 </script>
     61 </head>
     62 <body onload="init();">
     63 
     64 
     65 <div id="sort_container" style="border: 0px solid black; margin: 0px">
     66 <div>
     67 <div class="button" onclick="start_all();">Start All</div>
     68 <div class="button" onclick="reset_all();">Reset All</div>
     69 ...or click on each algorithm to start separately
     70 <div style="float:right">
     71 <b>Size</b><input onchange="change_size(this.value);" id="size" value=300 size=3>
     72 <b>Inner Loop</b><input id="inner_loop" type="checkbox" onchange="enable_inner_loop(this.checked);" id="inner loop">
     73 </div>
     74 </div>
     75 
     76 <div>
     77 <ul id="Heap" class="bar">
     78 </ul>
     79 </div>
     80 
     81 <div>
     82 <ul id="Quick" class="bar">
     83 </ul>
     84 </div>
     85 
     86 <div>
     87 <ul id="Bubble" class="bar">
     88 </ul>
     89 </div>
     90 
     91 <div>
     92 <ul id="Insertion" class="bar">
     93 </ul>
     94 </div>
     95 
     96 </div>
     97 
     98 </body>
     99 </html>
    100