1.1 --- a/factory/v2012/script.js	Fri Jan 06 17:41:08 2012 +0100
     1.2 +++ b/factory/v2012/script.js	Fri Jan 06 18:28:31 2012 +0100
     1.3 @@ -10,11 +10,13 @@
     1.4      image.onload = init_logo;
     1.5      image.src = "images/logobase.png";
     1.6      $("#logo").click(handle_click);   
     1.7 -    $("#logo").hover(function() {
     1.8 +    $("#logo").hover(function(event) {
     1.9          $(this).css("cursor", "pointer");        
    1.10      }, function() {
    1.11          $(this).css("cursor", "auto");
    1.12      });
    1.13 +    $("#logo").mousemove(function(event) { handle_hover(event); });
    1.14 +    $("#logo").mouseout(function(event) { handle_mouse_out(event); });
    1.15      $("#sim").mousemove(function(event) { simulation.mouse_moved(mouse_pos(event, "#sim")); });
    1.16      var onEachFrame;
    1.17      if (window.webkitRequestAnimationFrame) {
    1.18 @@ -102,28 +104,87 @@
    1.19          if (ces && x >= ces["min_x"] && x <= ces["max_x"]
    1.20              && y >= ces["min_y"] && y <= ces["max_y"]) {    
    1.21              ces["func"](event.target.id, ces);
    1.22 +            last_colours[0] = black;
    1.23              break;
    1.24          }
    1.25      }
    1.26  }
    1.27  
    1.28 +function handle_hover(event) {
    1.29 +    var xy = mouse_pos(event, "#logo");
    1.30 +    var x = xy[0];
    1.31 +    var y = xy[1];
    1.32 +    for (var i in click_events[event.target.id]) {
    1.33 +        var ces = click_events[event.target.id][i];
    1.34 +        if (ces && x >= ces["min_x"] && x <= ces["max_x"]
    1.35 +            && y >= ces["min_y"] && y <= ces["max_y"]) {    
    1.36 +            highlight_menu(event.target.id, ces);
    1.37 +            break;
    1.38 +        }
    1.39 +    }
    1.40 +}
    1.41 +
    1.42 +function handle_mouse_out(event) {
    1.43 +    highlight_menu(event.target.id, null);
    1.44 +}
    1.45 +
    1.46  function switch_page(id, params) {
    1.47      var page = params["args"][0];
    1.48      $("body").load(page);
    1.49      document.location.href = page;    
    1.50  }
    1.51 +var last_highlight;
    1.52 +var last_colours = new Array();
    1.53 +function highlight_menu(id, p) {
    1.54 +    if (last_highlight == p) {
    1.55 +        return;
    1.56 +    }
    1.57 +    var canvas = document.getElementById("logo");
    1.58 +    var context = canvas.getContext("2d");    
    1.59 +    var image = context.getImageData(0, 0, menu_width, menu_height);
    1.60 +    if (p) {
    1.61 +        var page = p["args"][0]; 
    1.62 +        var min_x = p["min_x"];
    1.63 +        var max_x = p["max_x"];
    1.64 +        var min_y = p["min_y"];
    1.65 +        var max_y = p["max_y"];
    1.66 +        console.log(page);
    1.67 +        last_colours[0] = colour_area(image, min_x + 10, max_x - 10, 0, 60, orange);
    1.68 +        last_colours[1] = colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, white);
    1.69 +        console.log(last_colours);
    1.70 +    }
    1.71 +    if (last_highlight && last_colours && last_colours[0] && last_colours[1]) {        
    1.72 +        page = last_highlight["args"][0]; 
    1.73 +        min_x = last_highlight["min_x"];
    1.74 +        max_x = last_highlight["max_x"];
    1.75 +        min_y = last_highlight["min_y"];
    1.76 +        max_y = last_highlight["max_y"]; 
    1.77 +        colour_area(image, min_x + 10, max_x - 10, 0, 60, last_colours[0]);
    1.78 +        colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, last_colours[1]);
    1.79 +    }
    1.80 +    context.putImageData(image, 0, 0);
    1.81 +    last_highlight = p;
    1.82 +}
    1.83  
    1.84  function colour_area(image, min_x, max_x, min_y, max_y, colour) {   
    1.85 -    var pixels = image.data;    
    1.86 +    var pixels = image.data;
    1.87 +    var old_colour;
    1.88      for (var y = min_y; y <= max_y; y += 1) {
    1.89          for (var x = min_x; x <= max_x; x += 1) {
    1.90              var pix_colour = getPixel(image, x, y);
    1.91              if (pix_colour.a > 0) {
    1.92 -                colour.a = pix_colour.a;
    1.93 -                setPixel(image, x, y, colour);
    1.94 +                colour.a = pix_colour.a;               
    1.95 +                setPixel(image, x, y, colour); 
    1.96 +                if (pix_colour.a == 255) {
    1.97 +                    old_colour = new Colour(pix_colour.r,
    1.98 +                                            pix_colour.g,
    1.99 +                                            pix_colour.b,
   1.100 +                                            pix_colour.a);
   1.101 +                }
   1.102              }
   1.103          }
   1.104 -    }    
   1.105 +    }
   1.106 +    return old_colour;
   1.107  }
   1.108  
   1.109  function init_logo(event) {
   1.110 @@ -379,10 +440,10 @@
   1.111  }
   1.112  
   1.113  var white = new Colour(255, 255, 255);
   1.114 -var black = new Colour(0, 0, 0);
   1.115 -var orange = new Colour(201, 87, 35);
   1.116 -var green = new Colour(90, 215, 21);
   1.117 -var background = new Colour(34, 34, 34);
   1.118 +var black = new Colour(0, 0, 0, 255);
   1.119 +var orange = new Colour(201, 87, 35, 255);
   1.120 +var green = new Colour(90, 215, 21, 255);
   1.121 +var background = new Colour(34, 34, 34, 255);
   1.122  
   1.123  function setPixel(image, x, y, colour) {
   1.124      var index = 4 * (x + y * image.width);

     2.1 --- a/script.js	Fri Jan 06 17:41:08 2012 +0100
     2.2 +++ b/script.js	Fri Jan 06 18:28:31 2012 +0100
     2.3 @@ -10,11 +10,13 @@
     2.4      image.onload = init_logo;
     2.5      image.src = "images/logobase.png";
     2.6      $("#logo").click(handle_click);   
     2.7 -    $("#logo").hover(function() {
     2.8 +    $("#logo").hover(function(event) {
     2.9          $(this).css("cursor", "pointer");        
    2.10      }, function() {
    2.11          $(this).css("cursor", "auto");
    2.12      });
    2.13 +    $("#logo").mousemove(function(event) { handle_hover(event); });
    2.14 +    $("#logo").mouseout(function(event) { handle_mouse_out(event); });
    2.15      $("#sim").mousemove(function(event) { simulation.mouse_moved(mouse_pos(event, "#sim")); });
    2.16      var onEachFrame;
    2.17      if (window.webkitRequestAnimationFrame) {
    2.18 @@ -102,28 +104,87 @@
    2.19          if (ces && x >= ces["min_x"] && x <= ces["max_x"]
    2.20              && y >= ces["min_y"] && y <= ces["max_y"]) {    
    2.21              ces["func"](event.target.id, ces);
    2.22 +            last_colours[0] = black;
    2.23              break;
    2.24          }
    2.25      }
    2.26  }
    2.27  
    2.28 +function handle_hover(event) {
    2.29 +    var xy = mouse_pos(event, "#logo");
    2.30 +    var x = xy[0];
    2.31 +    var y = xy[1];
    2.32 +    for (var i in click_events[event.target.id]) {
    2.33 +        var ces = click_events[event.target.id][i];
    2.34 +        if (ces && x >= ces["min_x"] && x <= ces["max_x"]
    2.35 +            && y >= ces["min_y"] && y <= ces["max_y"]) {    
    2.36 +            highlight_menu(event.target.id, ces);
    2.37 +            break;
    2.38 +        }
    2.39 +    }
    2.40 +}
    2.41 +
    2.42 +function handle_mouse_out(event) {
    2.43 +    highlight_menu(event.target.id, null);
    2.44 +}
    2.45 +
    2.46  function switch_page(id, params) {
    2.47      var page = params["args"][0];
    2.48      $("body").load(page);
    2.49      document.location.href = page;    
    2.50  }
    2.51 +var last_highlight;
    2.52 +var last_colours = new Array();
    2.53 +function highlight_menu(id, p) {
    2.54 +    if (last_highlight == p) {
    2.55 +        return;
    2.56 +    }
    2.57 +    var canvas = document.getElementById("logo");
    2.58 +    var context = canvas.getContext("2d");    
    2.59 +    var image = context.getImageData(0, 0, menu_width, menu_height);
    2.60 +    if (p) {
    2.61 +        var page = p["args"][0]; 
    2.62 +        var min_x = p["min_x"];
    2.63 +        var max_x = p["max_x"];
    2.64 +        var min_y = p["min_y"];
    2.65 +        var max_y = p["max_y"];
    2.66 +        console.log(page);
    2.67 +        last_colours[0] = colour_area(image, min_x + 10, max_x - 10, 0, 60, orange);
    2.68 +        last_colours[1] = colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, white);
    2.69 +        console.log(last_colours);
    2.70 +    }
    2.71 +    if (last_highlight && last_colours && last_colours[0] && last_colours[1]) {        
    2.72 +        page = last_highlight["args"][0]; 
    2.73 +        min_x = last_highlight["min_x"];
    2.74 +        max_x = last_highlight["max_x"];
    2.75 +        min_y = last_highlight["min_y"];
    2.76 +        max_y = last_highlight["max_y"]; 
    2.77 +        colour_area(image, min_x + 10, max_x - 10, 0, 60, last_colours[0]);
    2.78 +        colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, last_colours[1]);
    2.79 +    }
    2.80 +    context.putImageData(image, 0, 0);
    2.81 +    last_highlight = p;
    2.82 +}
    2.83  
    2.84  function colour_area(image, min_x, max_x, min_y, max_y, colour) {   
    2.85 -    var pixels = image.data;    
    2.86 +    var pixels = image.data;
    2.87 +    var old_colour;
    2.88      for (var y = min_y; y <= max_y; y += 1) {
    2.89          for (var x = min_x; x <= max_x; x += 1) {
    2.90              var pix_colour = getPixel(image, x, y);
    2.91              if (pix_colour.a > 0) {
    2.92 -                colour.a = pix_colour.a;
    2.93 -                setPixel(image, x, y, colour);
    2.94 +                colour.a = pix_colour.a;               
    2.95 +                setPixel(image, x, y, colour); 
    2.96 +                if (pix_colour.a == 255) {
    2.97 +                    old_colour = new Colour(pix_colour.r,
    2.98 +                                            pix_colour.g,
    2.99 +                                            pix_colour.b,
   2.100 +                                            pix_colour.a);
   2.101 +                }
   2.102              }
   2.103          }
   2.104 -    }    
   2.105 +    }
   2.106 +    return old_colour;
   2.107  }
   2.108  
   2.109  function init_logo(event) {
   2.110 @@ -379,10 +440,10 @@
   2.111  }
   2.112  
   2.113  var white = new Colour(255, 255, 255);
   2.114 -var black = new Colour(0, 0, 0);
   2.115 -var orange = new Colour(201, 87, 35);
   2.116 -var green = new Colour(90, 215, 21);
   2.117 -var background = new Colour(34, 34, 34);
   2.118 +var black = new Colour(0, 0, 0, 255);
   2.119 +var orange = new Colour(201, 87, 35, 255);
   2.120 +var green = new Colour(90, 215, 21, 255);
   2.121 +var background = new Colour(34, 34, 34, 255);
   2.122  
   2.123  function setPixel(image, x, y, colour) {
   2.124      var index = 4 * (x + y * image.width);