Raphael onclick

by considerphlebas

HTML

<section><div id="place">
		</div>
    </section>

CSS

body {
    background: #999;
}
section {
    width: 800px;
    height: 800px;
}
#place {
    height: 100%;
    width: 100%;
}

JavaScript

var w = 300;
var h = 300;	
var paper = Raphael("place");
paper.setViewBox(0,0,w,h,true);

	var style = {
		fill: "#555",
		stroke: "#fff",
	 	"stroke-width": 2,
	 	"stroke-linejoin": "round"
	};

	var aus = [];
		aus[1] = paper.path("M24.727,116.5L2.914,79l21.813-37.5h43.627L90.167,79l-21.813,37.5H24.727z").attr(style);
		aus[2] = paper.path("M156.727,116.5L134.914,79l21.813-37.5h43.627L222.167,79l-21.813,37.5H156.727z").attr(style);
		aus[3] = paper.path("M90.727,78.5L68.914,41L90.727,3.5h43.627L156.167,41l-21.813,37.5H90.727z").attr(style);
		aus[4] = paper.path("M90.727,154.5L68.914,117l21.813-37.5h43.627l21.813,37.5l-21.813,37.5H90.727z").attr(style);
	
  for(var i in aus) {

    (function (st) {

    	st.node.state = 0;
    


		st.node.onmouseover = function() {
			st.animate({fill: "#8fbf27", stroke: "#fff"}, 100);
		};
		st.node.onmouseout = function() {
			st.animate({fill: "#555", stroke: "#fff"}, 100);
			if(this.state == 1){
				st.animate({fill: "#fff", stroke: "#fff"}, 100);
			}else {
				st.animate({fill: "#555", stroke: "#fff"}, 100);
			}
		};
		st.node.onclick = function() {
			
			if(this.state == 0) {
				this.state = 1;
				st.animate({fill: "#fff", stroke: "#fff"}, 100);
			}else {
				this.state = 0;
				st.animate({fill: "#555", stroke: "#fff"}, 100);
			}
			
		};

    })(aus[i]);

   }