dusadrian/setToFront.html

## setToFront.html
<html>
  <head>
    <script src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="container" style="position:absolute;left:25%;right:25%;top:25%;bottom:25%;background-color:#DDD">
    </div>
    <script type='text/javascript'>
      var container = $('#container');
      var paper = Raphael(container[0], '100%', '100%');

      var groups = [];

      var setToFront = function(myset) {
        for (var i = 0; i < groups[myset.idx].items.length; i++) {
          groups[myset.idx].items[i].toFront();
        }
      }

      var mr1 = paper.rect(50, 50, 100, 100).attr({fill: 'white'});
      var mr2 = paper.rect(50, 50, 50, 50).attr({fill: 'red'});
      var set1 = paper.set(mr1, mr2);
      set1.idx = groups.length;
      groups.push(set1);

      var mr3 = paper.rect(175, 100, 100, 100).attr({fill: 'white'});
      var mr4 = paper.rect(225, 100, 50, 50).attr({fill: 'blue'});
      var set2 = paper.set(mr3, mr4);
      set2.idx = groups.length;
      groups.push(set2);

      set1.click(function() {setToFront(set1);});
      set2.click(function() {setToFront(set2);});

    </script>
  </body>
</html>
	<html>
	<head>
	<script src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	</head>
	<body>
	<div id="container" style="position:absolute;left:25%;right:25%;top:25%;bottom:25%;background-color:#DDD">
	</div>
	<script type='text/javascript'>
	var container = $('#container');
	var paper = Raphael(container[0], '100%', '100%');

	var groups = [];

	var setToFront = function(myset) {
	for (var i = 0; i < groups[myset.idx].items.length; i++) {
	groups[myset.idx].items[i].toFront();
	}
	}

	var mr1 = paper.rect(50, 50, 100, 100).attr({fill: 'white'});
	var mr2 = paper.rect(50, 50, 50, 50).attr({fill: 'red'});
	var set1 = paper.set(mr1, mr2);
	set1.idx = groups.length;
	groups.push(set1);

	var mr3 = paper.rect(175, 100, 100, 100).attr({fill: 'white'});
	var mr4 = paper.rect(225, 100, 50, 50).attr({fill: 'blue'});
	var set2 = paper.set(mr3, mr4);
	set2.idx = groups.length;
	groups.push(set2);

	set1.click(function() {setToFront(set1);});
	set2.click(function() {setToFront(set2);});

	</script>
	</body>
	</html>