$(function(){var b=function(){var e=this.offsetLeft;var d=this;while(d.offsetParent!=null){d=d.offsetParent;e+=d.offsetLeft}return e};function a(d,e){this.setup(d,e)}a.prototype={setup:function(g,f){var j=this.unit=parseInt(g||140);var k=this.gap=parseInt(f||20);var i=j;var e=1;for(var d=true;i>k&&d;){var h=(i-k)/2;if(h==parseInt(h)){i=h;e=e<<1}else{d=false}}this.atomFactor=e;this.atom=i;this.atom4=e>4?((e>>2)*(this.atom+k))-k:this.atom;this.atom4Factor=e>4?4:e},getConfig:function(){var d={unit:this.unit,gap:this.gap,atom:this.atom,atomFactor:this.atomFactor,atom4:this.atom4,atom4Factor:this.atom4Factor};return d},getCSS:function(){var s=this.unit;var q=this.gap;var l=this.atom4;var d=this.atom4Factor;var f=(6*s)+(5*q);var t=[];t.push(".example-grid .col {padding-left: "+q+"px;}");var n=[];n.push(".example-grid .row {margin-left: "+(-q)+"px;}");n.push(".example-grid .content .row {margin-left: "+(-q-6)+"px;}");n.push(".example-grid .row {width: "+(f+q)+"px;}");var r=[];var o=d>=4?1:0.5;for(var k=6;k>0;k--){for(var h=0;h<4;h++){var m=k-(h*0.25);var p=(new String(m)).replace(".","_");if((h%2==1&&d>=4)||(h==2&&d>=2)||h==0){var g=(k*s)+((k-1)*q)-(h*o*(l+q));var e=g+q;t.push(".example-grid .gu"+p+" {width:"+g+"px;}");n.push(".example-grid .gu"+p+" .row {width:"+e+"px;}")}else{t.push(".example-grid .gu"+p+"{display:none;}")}}}if(d==2){r.push(".example-grid .gu0_75 {display:block; width:"+l+"px;}");r.push(".example-grid .gu0_75 .content p {display:none;}");r.push(".example-grid .gu0_5 .content p {display:block;}");r.push(".example-grid .gu0_5 .row {display:none;}");r.push(".example-grid .gu0_75 .row {width:"+(l+q)+"px;}")}return t.join("\n")+"\n\n"+n.join("\n")+"\n\n"+r.join("\n")}};function c(h){var j=this;this.gridUnits=1;var m=this.nodeJQ=$(h);var o=this.overlayJQ=$('<div class="overlay gu1"></div>');this.nodeJQ.append(o);var n=this.visualJQ=$('<div class="visual"></div>');n.css({opacity:0.5});o.append(n);var k=this.labelJQ=$('<div class="label"><div class="content"><p></p></div></div>');var f=this.pLabelJQ=k.find("p");k.css({opacity:0.6});o.append(k);var d=this.styleJQ=$('<style type="text/css"></style>');$("head").append(d);var g=this.gridObj=new a();var e=150;var i=10;this.setup(e,i);var l=false;var p=o[0];m.bind("mousemove",function(u){if(l){return}else{l=true}var t=u.pageX-b.apply(u.currentTarget)-20;var q=j.gridConf;if(t<=q.atom4){j.gridUnits=t<(q.atom4/2)?0:1/q.atom4Factor}else{var s=Math.round((t-q.atom4)/(q.gap+q.atom4))+1;var r=s/q.atom4Factor;j.gridUnits=r>6?6:r}gridClass=(new String(j.gridUnits)).replace(".","_");p.className="overlay gu"+gridClass;j.updateLabel();l=false});$("#btnGenerateGrid").click(function(){var r=parseInt($("#unitWidth").val());var q=parseInt($("#gapWidth").val());j.setup(r,q)})}c.prototype={nodeJQ:null,overlayJQ:null,visualJQ:null,labelJQ:null,pLabelJQ:null,setup:function(e,g){if(isNaN(e)||isNaN(g)){return}this.gridObj.setup(e,g);var f=$('<style type="text/css">'+this.gridObj.getCSS()+"</style>");this.styleJQ.replaceWith(f);this.styleJQ=f;this.gridConf=this.gridObj.getConfig();var d=this.nodeJQ.find(".grid").height();this.visualJQ.css({height:d+"px"});this.updateLabel();this.updateInfoPane()},updateInfoPane:function(){var d=this.gridConf;$("#unitWidth").val(d.unit);$("#gapWidth").val(d.gap)},updateLabel:function(){var e=this.overlayJQ.width();this.pLabelJQ[0].innerHTML=this.gridUnits+" gu<br/>"+e+" px";var d=this.labelJQ.width();if(d>e){this.labelJQ.css({right:"",left:0})}else{this.labelJQ.css({right:0,left:""})}}};new c($("div.example-grid > div.canvas"))});