//		Author: Chrissy Clark(fivefourths@gmail.com)
//		webtypographyforthelonely.com
//
//		Cluster is a smart little function that combines two web technologies:
//      html5 Canvas and SVG. Basically, it uses the awesome getImageData
//      function in canvas to pull the rendered pixel values for a given block
//      of type and then reconstruct that pixel by pixel. Pretty cool, eh?
//
//      call it: 
//
//               cluster.init()
//
//     cluster uses a lot of defaults. I'm not going to explain them to you
//     because I figure it you've made it this far you can figure it out.
//	   Anyways. They are at the bottom. 
var trig;var count;var svg;var cluster={shellac:function(e,l){function h(i){if(e.currentStyle){var m=e.currentStyle[i]}else{if(window.getComputedStyle){var m=document.defaultView.getComputedStyle(e,null).getPropertyValue(i)}}return m}if(l==null){l=new Object();l.font=h("font-family");l.weight=h("font-weight");l.size=parseInt(h("font-size"));l.style=h("font-style");l.color=h("color");l.leading=parseInt(h("line-height"))}var d=document.createElement("canvas");d.setAttribute("class","shellac");d.width=e.clientWidth;d.height=e.clientHeight;e.parentNode.insertBefore(d,e.nextSibling);context=d.getContext("2d");context.fillStyle=l.color;context.font=l.weight+" "+l.style+" "+l.size+"px "+l.font;var j=e.innerHTML;var g=j.split(" ");var c=new Array();var k="";for(var f=0;f<g.length;f++){var b=g[f];var a=context.measureText(k+" "+b).width;if(f==0){k=b}else{if(a<e.clientWidth){k+=(" "+b)}else{c.push(k);k=b}}}c.push(k);for(var f=0;f<c.length;f++){context.fillText(c[f],0,(f*l.leading)+l.size)}return d},getTypeData:function(b){this.width=this.canvas.clientWidth;this.height=this.canvas.clientHeight;var a=this.canvas.getContext("2d");imageData=a.getImageData(0,0,this.width,this.height);p=this.canvas.parentNode;p.removeChild(this.canvas);return imageData},generateShapes:function(){var b=[];for(var d=0;d<this.height;d+=this.density){for(var a=0;a<this.width;a+=this.density){var c=this.imageData.data[((a+(d*this.width))*4)-1];if(c>0){b[a*d]=new this.Node(a,d,this)}}}return b},Node:function(a,h,c){var b=this,g=c.radius;b.el=document.createElementNS("http://www.w3.org/2000/svg",c.shape);b.el.setAttribute("opacity",0);var d=parseInt(Math.random()*c.speed);b.el.setAttribute("cx",0);b.el.setAttribute("cx",a);b.el.setAttribute("cy",h);b.el.setAttribute("r",c.radius);b.el.setAttribute("fill",c.colors[parseInt(Math.random()*4)]);var e=function(){g=g+1;c.root.suspendRedraw(100);b.el.setAttribute("opacity",g);c.root.unsuspendRedrawAll()};var f=window.setTimeout(e,d);c.root.appendChild(b.el);b.grow=function(j,i){var k=document.createElementNS("http://www.w3.org/2000/svg","animateTransform");k.setAttributeNS(null,"attributeName","transform");k.setAttributeNS(null,"type","translate");k.setAttributeNS(null,"to","0,-900");k.setAttributeNS(null,"dur",5);k.setAttributeNS(null,"fill","freeze");k.setAttributeNS(null,"begin","indefinite");k.setAttributeNS(null,"restart","never");b.el.appendChild(k);k.beginElement();var l=document.createElementNS("http://www.w3.org/2000/svg","animate");l.setAttributeNS(null,"attributeName","r");l.setAttributeNS(null,"to","20");l.setAttributeNS(null,"dur",5);l.setAttributeNS(null,"fill","freeze");l.setAttributeNS(null,"begin","indefinite");l.setAttributeNS(null,"restart","never");b.el.appendChild(l);l.beginElement()};this.el.addEventListener("mouseover",function(i){b.grow(c,i)},true);this.el.addEventListener("click",function(i){b.grow(c,i)},true);b.el.x=a;b.el.y=h;return this},init:function(b){var d=this;var b=document.getElementById(b);b.className+=" clustered";d.root=document.createElementNS("http://www.w3.org/2000/svg","svg");d.root.setAttribute("width",b.clientWidth);d.root.setAttribute("height",b.clientHeight);d.root.setAttribute("id","clustered");var a=function(){d.canvas=d.shellac(b);d.imageData=d.getTypeData(b);var c=d.generateShapes();b.appendChild(d.root);b.className+=" active"};window.setTimeout(a,100)},root:null,nodes:[],density:8,radius:3,target:"cluster",shape:"circle",speed:1000,timeout:-700,colors:["#0099FF","#0066CC","#cccccc","#0099FF"]};cluster.init("to_cluster");$(window).load(function(){count=$("svg circle").length;svg=document.getElementById("clustered").getElementsByTagName("circle");trigger(10)});function trigger(d){clearTimeout(trig);var f=Math.floor(Math.random()*(count)+0);var e=Math.floor(Math.random()*(1500)+10);simulateClick(svg[d]);trig=setTimeout("trigger("+f+")",e)}function simulateClick(d){var e;var f=d;if(document.createEvent){e=document.createEvent("MouseEvents");e.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null)}(e)?f.dispatchEvent(e):(f.click&&f.click())};