Return to Answer

I gave it a shot.

window.onload = function () {
 var R = Raphael("paper", 532, 500),
 attrs = {
 fill: "#0B0",
 stroke: "#fff",
 "stroke-width": 3,
 cursor: "pointer"
 },
 paths = [
 {id: 'btn_1', p:"M 180,130 L 340,130, L 392,212, L 128,212 z"},
 {id: 'btn_2', p:"M 128,212 L 392,212, L 435,280, L 85,280 z"}
 ],
 current,
 max,
 i;
 
 for (i = 0, max = paths.length; i < max; i++) {
 initPath(paths[i].p, attrs, paths[i].id);
 }
 
 function initPath(pathStr, attrs, targetId) {
 var path = R.path(pathStr).attr(attrs),
 txElm = document.getElementById(targetId);
 path.click(function (e) {
 if (current) {
 if (current === txElm) {
 return;
 }
 current.style.display = '';
 }
 current = txElm;
 current.style.display = 'block';
 this.toFront();
 R.safari();
 });
 }
 }​

Integrated Dan Lee's comments and defined a function instead of making a new closure in each loop iteration.

I gave it a shot.

window.onload = function () {
 var R = Raphael("paper", 532, 500),
 attrs = {
 fill: "#0B0",
 stroke: "#fff",
 "stroke-width": 3,
 cursor: "pointer"
 },
 paths = [
 {id: 'btn_1', p:"M 180,130 L 340,130, L 392,212, L 128,212 z"},
 {id: 'btn_2', p:"M 128,212 L 392,212, L 435,280, L 85,280 z"}
 ],
 current,
 max,
 i;
 
 for (i = 0, max = paths.length; i < max; i++) {
 initPath(paths[i].p, attrs, paths[i].id);
 }
 
 function initPath(pathStr, attrs, targetId) {
 var path = R.path(pathStr).attr(attrs),
 txElm = document.getElementById(targetId);
 path.click(function (e) {
 if (current) {
 if (current === txElm) {
 return;
 }
 current.style.display = '';
 }
 current = txElm;
 current.style.display = 'block';
 this.toFront();
 R.safari();
 });
 }
 }​

Integrated Dan Lee's comments and defined a function instead of making a new closure in each loop iteration.

Added this CSS style:

.stylin {
 cursor: pointer;
 fill: #f66;
 stroke-width: 10;
 stroke: #88f;
}

And changed the JS to:

window.onload = function () {
 var R = Raphael("paper", 532, 500),
 paths = [
 R.path("M 180,130 L 340,130, L 392,212, L 128,212 z").data('target','btn_1'),
 R.path("M 128,212 L 392,212, L 435,280, L 85,280 z").data('target','btn_2')
 ],
 max = paths.length,
 pathStyle = 'stylin',
 i,
 path,
 target,
 tx;
 
  for (i = 0; i < max; i++) {
 path = paths[i];
 path.node.className.animVal = pathStyle;
 path.node.className.baseVal = pathStyle;
 target = document.getElementById(path.data('target'));
 path.data('target', target);
 path.click(function (e) {
 var target = this.data('target');
  if (tx) {
 if (tx === target) {
 return;
 }
 tx.style.display = 'none';
 }
 tx = target;
 tx.style.display = 'block';
 this.toFront();
 R.safari();
 });
 }
 };

jsFiddle

Not so sure about using the CSS style like that... Seems rather brash.

The mouse-listener code is easier for me to understand. I used the Element.data() and Element.click() methods to help things along. I also didn't use a closure in the for loop.

window.onload = function () {
 var R = Raphael("paper", 532, 500),
 attrs = {
  fill: "#0B0",
 stroke: "#fff",
  "stroke-width": 3,
 cursor: "pointer"
 },
 paths = [
 {id: 'btn_1', p:"M 180,130 L 340,130, L 392,212, L 128,212 z"},
 {id: 'btn_2', p:"M 128,212 L 392,212, L 435,280, L 85,280 z"}
 ],
 current,
 max,
 i;
 
 for (i = 0, max = paths.length; i < max; i++) {
 initPath(paths[i].p, attrs, paths[i].id);
 }
 
 function initPath(pathStr, attrs, targetId) {

 var path = R.path(pathStr).attr(attrs),
  txElm = document.getElementById(targetId);
 path.click(function (e) {
 if (current) {
 if (current === txElm) {
 return;
 }
 current.style.display = '';
 }
 current = txElm;
 current.style.display = 'block';
 this.toFront();
 R.safari();
 });
 }
 }​

Integrated Dan Lee's comments and defined a function instead of making a new closure in each loop iteration.