<script>
$( document ).ready(function() {
  var canvas1_1 = Raphael(document.getElementById("canvas1"), 397, 398);
  var rect1_1 = canvas1_1.rect(180, 90, 26, 19).attr({"fill": "#FBD071"}); 
  var rect1_2 = canvas1_1.rect(100, 276, 40, 19).attr({"fill": "#8F7070"}); 
});
</script>

<script>
$( document ).ready(function() {
  var canvas2 = Raphael(document.getElementById("canvas2"), 397, 398); 
  var img2_1 = canvas2.image("#WORKSPACE_IMAGES#yacht.png", 180, 90, 26, 19).glow({width:1,opacity:0.8});
  var img2_2 = canvas2.image("#WORKSPACE_IMAGES#cargo_ship.png", 100, 276, 40, 19).glow({width:1,opacity:0.8});
});</script>

<script>
$( document ).ready(function() {
  var canvas = Raphael(document.getElementById("canvas"), 397, 398);
  
  var txt1 = canvas.text(220, 94, "Q-114");
  txt1.attr({ "font-size": 9, "font-family": "Arial, Helvetica, sans-serif","fill": "black",transform:"r-11"});
  var box1 = txt1.getBBox();
  var img1 = canvas.image("#WORKSPACE_IMAGES#yacht.png", 180, 90, 26, 19).attr({transform:"r-11"}).glow({width:1,opacity:0.8});
  txt1.toFront();

  /* ***** */

  var txt2 = canvas.text(225, 118, "T-912");
  txt2.attr({ "font-size": 9, "font-family": "Arial, Helvetica, sans-serif","fill": "black",transform:"r-11"});  
  var box2 = txt1.getBBox();
  var img2 = canvas.image("#WORKSPACE_IMAGES#yacht.png", 185, 115, 26, 19).attr({transform:"r-11"}).glow({width:1,opacity:0.8});
  txt2.toFront();        

  /* ***** */

  var txt3 = canvas.text(144, 246, "T-999");
  txt3.attr({ "font-size": 9, "font-family": "Arial, Helvetica, sans-serif","fill": "black",transform:"r-281"});  
  var box3 = txt1.getBBox();
  var img3 = canvas.image("#WORKSPACE_IMAGES#yacht.png", 125, 210, 26, 19).attr({transform:"r-281"}).glow({width:1,opacity:0.8});
  txt3.toFront();   
});
</script>