(function(){var C=YAHOO.util.Dom,B=YAHOO.util.Event,A="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.";YAHOO.CSSGridBuilder={init:function(){this.headerStr="YUI: CSS Grid Builder";this.footerStr="Footer is here.";this.headerDefault=this.headerStr;this.footerDefault=this.footerStr;this.type="yui-t7";this.docType="doc";this.rows=[];this.rows[0]=C.get("splitBody0");this.storeCode=false;this.sliderData=false;this.bd=C.get("bd");this.doc=C.get("doc");this.template=C.get("which_grid");B.on(this.template,"change",YAHOO.CSSGridBuilder.changeType,YAHOO.CSSGridBuilder,true);B.on("splitBody0","change",YAHOO.CSSGridBuilder.splitBody,YAHOO.CSSGridBuilder,true);B.on("which_doc","change",YAHOO.CSSGridBuilder.changeDoc,YAHOO.CSSGridBuilder,true);B.on(this.bd,"mouseover",YAHOO.CSSGridBuilder.mouseOver,YAHOO.CSSGridBuilder,true);var I=new YAHOO.widget.Button("setHeader");I.on("click",YAHOO.CSSGridBuilder.setHeader,YAHOO.CSSGridBuilder,true);var H=new YAHOO.widget.Button("setFooter");H.on("click",YAHOO.CSSGridBuilder.setFooter,YAHOO.CSSGridBuilder,true);var F=new YAHOO.widget.Button("show_code");F.on("click",YAHOO.CSSGridBuilder.showCode,YAHOO.CSSGridBuilder,true);var E=new YAHOO.widget.Button("resetBuilder");E.on("click",YAHOO.CSSGridBuilder.reset,YAHOO.CSSGridBuilder,true);var G=new YAHOO.widget.Button("about");G.on("click",YAHOO.CSSGridBuilder.about,YAHOO.CSSGridBuilder,true);var D=new YAHOO.widget.Button("addRow");D.on("click",YAHOO.CSSGridBuilder.addRow,YAHOO.CSSGridBuilder,true);var J=new YAHOO.widget.Button("doc_return");J.on("click",function(K){location.href="http://developer.yahoo.com/yui/grids/";B.stopEvent(K)});this.tooltip=new YAHOO.widget.Tooltip("classPath",{context:"bd",showDelay:500})},about:function(F){var D=new YAHOO.widget.Dialog("showAbout",{close:true,modal:true,visible:true,fixedcenter:true,height:"230px",width:"250px",zindex:9001});D.hideEvent.subscribe(function(){this.destroy()},D,true);D.setHeader("CSS Grid Builder v 0.6");var E="<p>Written by Dav Glass &lt;dav.glass@yahoo.com&gt;</p>";E+='<p><a href="http://blog.davglass.com/" target="_blank">blog.davglass.com</a></p>';E+='<p>The Grids Builder is designed to work with the Yahoo User Interface (YUI)  CSS Grids tools. They are freely available and you can download a copy from their developer site here:<br><a href="http://developer.yahoo.com/yui/grids/" target="_blank">http://developer.yahoo.com/yui/grids</a></p>';E+="<p>Last Updated: YUI Version "+YAHOO.VERSION+"</p>";D.setBody(E);D.setFooter("&nbsp;");D.render(document.body);B.stopEvent(F)},reset:function(E){for(var D=1;D<this.rows.length;D++){if(this.rows[D]){if(C.get("splitBody"+D)){C.get("splitBody"+D).parentNode.parentNode.removeChild(C.get("splitBody"+D).parentNode)}}}this.rows=[];this.rows[0]=C.get("splitBody0");C.get("which_doc").options.selectedIndex=0;C.get("which_grid").options.selectedIndex=0;C.get("splitBody0").options.selectedIndex=0;C.get("hd").innerHTML="<h1>"+this.headerDefault+"</h1>";C.get("ft").innerHTML=this.footerDefault;this.headerStr=this.headerDefault;this.footerStr=this.footerDefault;this.changeDoc();this.changeType();this.splitBody();B.stopEvent(E)},addRow:function(E){var D=C.get("splitBody0").cloneNode(true);D.id="splitBody"+this.rows.length;this.rows[this.rows.length]=D;this.rowCounter++;var F=document.createElement("p");F.innerHTML='Row:<a href="#" class="rowDel" id="gridRowDel'+this.rows.length+'" title="Remove this row">[X]</a><br>';F.appendChild(D);C.get("splitBody0").parentNode.parentNode.appendChild(F);B.on(D,"change",YAHOO.CSSGridBuilder.splitBody,YAHOO.CSSGridBuilder,true);B.on("gridRowDel"+this.rows.length,"click",YAHOO.CSSGridBuilder.delRow,YAHOO.CSSGridBuilder,true);this.splitBody();B.stopEvent(E)},delRow:function(E){var D=B.getTarget(E);var F=D.id.replace("gridRowDel","");C.get("splitBody0").parentNode.parentNode.removeChild(D.parentNode);this.rows[F]=false;this.splitBody();B.stopEvent(E)},changeCustomDoc:function(E){var D=B.getTarget(E);docType=C.get("which_doc").options[C.get("which_doc").selectedIndex].value;B.stopEvent(E)},changeDoc:function(D){this.docType=C.get("which_doc").options[C.get("which_doc").selectedIndex].value;if(this.docType=="custom-doc"){this.showSlider()}else{this.doc.style.width="";this.doc.style.minWidth="";this.sliderData=false;this.doc.id=this.docType;this.doTemplate()}if(D){B.stopEvent(D)}},changeType:function(){this.type=this.template.options[this.template.selectedIndex].value;this.doc.className=this.type;this.doTemplate()},doTemplate:function(F){if(this.storeCode){this.splitBody()}var E="";var G="<p>"+(new Array(4).join(A))+"</p>";var D='<p class="nav">Navigation Pane</p>';if(F){G=A;D="Navigation Pane"}else{if(this.storeCode){G="<!-- YOUR DATA GOES HERE -->";D="<!-- YOUR NAVIGATION GOES HERE -->"}}if(this.bodySplit){if(F){G=this.bodySplit.replace(/\{0\}/g,A)}else{if(this.storeCode){G=this.bodySplit.replace(/\{0\}/g,"\t<!-- YOUR DATA GOES HERE -->\n\t")}else{G=this.bodySplit.replace(/\{0\}/g,"<p>"+A+"</p>")}}}switch(this.type){case"yui-t7":E=G;break;default:E='<div id="yui-main">\n\t<div class="yui-b">'+G+'</div>\n\t</div>\n\t<div class="yui-b">'+D+"</div>\n\t";break}if(this.storeCode){return E}else{this.bd.innerHTML=E}},PixelToEmStyle:function(D,G){var E="";var G=((G)?G.toLowerCase():"width");var F=(D/13);E+=G+":"+(Math.round(F*100)/100)+"em;";E+="*"+G+":"+(Math.round((F*0.9759)*100)/100)+"em;";if((G=="width")||(G=="height")){E+="min-"+G+":"+D+"px;"}return E},getCode:function(F){this.storeCode=true;var D=false;if(this.sliderData){if(this.sliderData.indexOf("px")!=-1){var D="#custom-doc { "+this.PixelToEmStyle(parseInt(this.sliderData))+" margin:auto; text-align:left; }"}else{var D="#custom-doc { width: "+this.sliderData+"; min-width: 250px; }"}}var E='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\n "http://www.w3.org/TR/html4/strict.dtd">\n';E+="<html>\n";E+="<head>\n";E+="   <title>YUI Base Page</title>\n";E+='   <link rel="stylesheet" href="http://yui.yahooapis.com/'+YAHOO.VERSION+'/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">\n';if(D){E+='   <style type="text/css">\n';E+="   "+D+"\n";E+="   </style>\n"}E+="</head>\n";E+="<body>\n";E+='<div id="'+this.docType+'" class="'+this.type+'">\n';E+='   <div id="hd"><h1>'+this.headerStr+"</h1></div>\n";E+='   <div id="bd">\n\t'+this.doTemplate(F)+"\n\t</div>\n";E+='   <div id="ft">'+this.footerStr+"</div>\n";E+="</div>\n";E+="</body>\n";E+="</html>\n";this.storeCode=false;return E},showCode:function(F){var E=this.getCode();var D=new YAHOO.widget.Dialog("showCode",{close:true,draggable:true,modal:true,visible:true,fixedcenter:true,height:"382px",width:"650px",zindex:9001});D.setHeader("CSSGridBuilder Code");D.setBody('<form><textarea name="code" id="codeHolder" class="HTML">'+E+"</textarea></form>");D.setFooter('<input type="checkbox" id="includeLorem" value="1"> <label for="includeLorem">Include Lorem Ipsum text</label>');D.hideEvent.subscribe(function(){this.destroy()},D,true);D.showEvent.subscribe(function(){var G=D.body;window.setTimeout(function(){YAHOO.util.Dom.setStyle(G,"overflow","auto")},50)},D,true);D.render(document.body);B.onAvailable("includeLorem",function(){B.on("includeLorem","click",function(K){var G=C.get("includeLorem");var H=C.get("codeHolder");var J=H.previousSibling;J.parentNode.removeChild(J);var I=this.getCode(G.checked);H.style.visibility="hidden";H.style.display="block";H.value=I;window.setTimeout(function(){dp.SyntaxHighlighter.HighlightAll("code")},5)},this,true)},this,true);dp.SyntaxHighlighter.HighlightAll("code");B.stopEvent(F)},setHeader:function(D){var E=prompt("Set header value to: ",this.headerStr);if(E!=null){this.headerStr=E;C.get("hd").innerHTML="<h1>"+E+"</h1>"}B.stopEvent(D)},setFooter:function(D){var E=prompt("Set footer value to: ",this.footerStr);if(E!=null){this.footerStr=E;C.get("ft").innerHTML=E}B.stopEvent(D)},splitBody:function(){this.bodySplit="";for(var D=0;D<this.rows.length;D++){this.splitBodyTemplate(C.get("splitBody"+D))}if(!this.storeCode){this.doTemplate()}},splitBodyTemplate:function(D){if(D){var E=D.options[D.selectedIndex].value;var F="";switch(E){case"1":F+='<div class="yui-g">\n';F+="{0}";F+="</div>\n";break;case"2":F+='<div class="yui-g">\n';F+='    <div class="yui-u first">\n';F+="{0}";F+="    </div>\n";F+='    <div class="yui-u">\n';F+="{0}";F+="    </div>\n";F+="</div>\n";break;case"3":F+='    <div class="yui-gb">\n';F+='        <div class="yui-u first">\n';F+="{0}";F+="        </div>\n";F+='        <div class="yui-u">\n';F+="{0}";F+="        </div>\n";F+='        <div class="yui-u">\n';F+="{0}";F+="        </div>\n";F+="    </div>\n";break;case"4":F+='<div class="yui-g">\n';F+='    <div class="yui-g first">\n';F+='        <div class="yui-u first">\n';F+="{0}";F+="        </div>\n";F+='        <div class="yui-u">\n';F+="{0}";F+="        </div>\n";F+="    </div>\n";F+='    <div class="yui-g">\n';F+='        <div class="yui-u first">\n';F+="{0}";F+="        </div>\n";F+='        <div class="yui-u">\n';F+="{0}";F+="        </div>\n";F+="    </div>\n";F+="</div>\n";break;case"5":F+='<div class="yui-g">\n';F+='    <div class="yui-u first">\n';F+="{0}";F+="    </div>\n";F+='    <div class="yui-g">\n';F+='        <div class="yui-u first">\n';F+="{0}";F+="        </div>\n";F+='        <div class="yui-u">\n';F+="{0}";F+="        </div>\n";F+="    </div>\n";F+="</div>\n";break;case"6":F+='<div class="yui-g">\n';F+='    <div class="yui-g first">\n';F+='        <div class="yui-u first">\n';F+="{0}";F+="        </div>\n";F+='        <div class="yui-u">\n';F+="{0}";F+="        </div>\n";F+="    </div>\n";F+='    <div class="yui-u">\n';F+="{0}";F+="    </div>\n";F+="</div>\n";break;case"7":F+='<div class="yui-gc">\n';F+='    <div class="yui-u first">\n';F+="{0}";F+="    </div>\n";F+='    <div class="yui-u">\n';F+="{0}";F+="    </div>\n";F+="</div>\n";break;case"8":F+='<div class="yui-gd">\n';F+='    <div class="yui-u first">\n';F+="{0}";F+="    </div>\n";F+='    <div class="yui-u">\n';F+="{0}";F+="    </div>\n";F+="</div>\n";break;case"9":F+='<div class="yui-ge">\n';F+='    <div class="yui-u first">\n';F+="{0}";F+="    </div>\n";F+='    <div class="yui-u">\n';F+="{0}";F+="    </div>\n";F+="</div>\n";break;case"10":F+='<div class="yui-gf">\n';F+='    <div class="yui-u first">\n';F+="{0}";F+="    </div>\n";F+='    <div class="yui-u">\n';F+="{0}";F+="    </div>\n";F+="</div>\n";break}if(!this.storeCode){this.bodySplit+='<div id="gridBuilder'+(this.rows.length-1)+'">'+F+"</div>"}else{this.bodySplit+=F}}},mouseOver:function(E){var G=B.getTarget(E);var F=[];var D=true;while(D){if(G.tagName.toLowerCase()=="body"){D=false;break}if(G.className){F[F.length]=G.className}if(G.parentNode){G=G.parentNode}else{D=false}}this.tooltip.cfg.setProperty("text","body."+document.body.className+" #"+this.docType+": "+F.reverse().join(" : "))},showSlider:function(){var K=function(){G.hide();return false};var E=function(){YAHOO.CSSGridBuilder.sliderData=C.get("sliderValue").value;G.hide()};var H=[{text:"Save",handler:E,isDefault:true},{text:"Cancel",handler:K}];var G=new YAHOO.widget.Dialog("showSlider",{close:true,draggable:true,modal:true,visible:true,fixedcenter:true,width:"275px",zindex:9001,postmethod:"none",buttons:H});G.hideEvent.subscribe(function(){this.destroy()},G,true);G.setHeader("CSSGridBuilder Custom Body Size");var D="<p>Adjust the slider below to adjust your body size or set it manually with the text input. <i>(Be sure to include the % or px in the text input)</i></p>";D+='<form name="customBodyForm" method="POST" action="">';D+='<p>Current Setting: <input type="text" id="sliderValue" value="100%" size="8" onfocus="this.select()" /></p>';D+="<span>Unit: ";D+='<input type="radio" name="movetype" id="moveTypePercent" value="percent" checked> <label for="moveTypePercent">Percent</label>&nbsp;';D+='<input type="radio" name="movetype" id="moveTypePixel" value="pixel"> <label for="moveTypePixel">Pixel</label></span>';D+="</form>";D+='<div id="sliderbg"><div id="sliderthumb"><img src="thumb-n.gif" /></div>';D+="</div>";G.setBody(D);var F=function(N){if(typeof N=="object"){N=I.getValue()}if(C.get("moveTypePercent").checked){var L=Math.round(N/2);C.get("custom-doc").style.width=L+"%";C.get("sliderValue").value=L+"%"}else{var L=Math.round(N/2);var M=Math.round(C.getViewportWidth()*(L/100));C.get("custom-doc").style.width=M+"px";C.get("sliderValue").value=M+"px"}C.get("custom-doc").style.minWidth="250px"};var J=function(){f=C.get("sliderValue").value;if(f.indexOf("%")!=-1){C.get("moveTypePercent").checked=true;f=(parseInt(f)*2)}else{if(f.indexOf("px")!=-1){C.get("moveTypePixel").checked=true;f=(((parseInt(f)/C.getViewportWidth())*100)*2)}else{C.get("sliderValue").value="100%";f=200}}I.setValue(f)};G.render(document.body);var I=YAHOO.widget.Slider.getHorizSlider("sliderbg","sliderthumb",0,200,1);I.setValue(200);I.onChange=F;B.on(["moveTypePercent","moveTypePixel"],"click",F);B.on("sliderValue","blur",J);this.doc.id=this.docType;this.doc.style.width="100%";this.doTemplate()}}})()