src/webkit/data/test_shell/sort/sort.html

   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>