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