var paper = Raphael("meh");

​

var rect = paper.rect(60,0,60,200).attr({

  fill: '#000000',

  opacity: '0.3'

});

​

var c1 = paper.circle(100,100,50).attr('fill','#eebbcc');

var c2 = paper.circle(80,80,45).attr('fill','#bbeecc');

var c3 = paper.circle(60,60,40).attr('fill','#ccbbee');

var c4 = paper.circle(130,130,40).attr('fill','#ddddaa');

​

function correctOrder()

{

   for ( var i = 0; i < set1.length; i++)

   {

      var temp_circ = set1.pop();

      temp_circ.toFront();

      set1.splice(0, 0, temp_circ);

   }

}

​

// Changing the order here changes the final stacking 

// order after applying toFront() and toBack()

var set1 = paper.set().push(c3,c4,c2,c1);

set1.attr('stroke', false);

​

// This gets forgotten as soon as toFront() or 

// toBack() are applied

c2.toFront();

​

var t1 = paper.text(90,220,"To back");

var t2 = paper.text(90,240,"To front");

var t3 = paper.text(90,260,"Insert after");

var t4 = paper.text(90,280,"Insert before");

​

var text=paper.set(t1,t2,t3,t4).attr({'font-size': '16px', cursor: 'pointer'});

​

t1.click(function(){set1.toBack();});

t2.click(function(){correctOrder();});

t3.click(function(){set1.insertAfter(rect);});

t4.click(function(){set1.insertBefore(rect);});

​

​

​