User:Inductiveload/braces.js

/**
 * A script to generate braces dynamically.

/** (function{function write(buffer,offs){for(var i=2;i>8&255,w&255)}function byte4(w){return String.fromCharCode(w>>24&255,w>>16&255,w>>8&255,w&255)}function byte2lsb(w){return String.fromCharCode(w&255,w>>8&255)}window.PNGlib=function(width,height,depth){this.width=width;this.height=height;this.depth=depth;this.pix_size=height*(width+1);this.data_size=2+ this.pix_size+5*Math.floor((65534+this.pix_size)/65535)+4;this.ihdr_offs=0;this.ihdr_size=4+4+13+4;this.plte_offs=this.ihdr_offs+this.ihdr_size;this.plte_size=4+4+3*depth+4;this.trns_offs=this.plte_offs+this.plte_size;this.trns_size=4+4+depth+4;this.idat_offs=this.trns_offs+this.trns_size;this.idat_size=4+4+this.data_size+4;this.iend_offs=this.idat_offs+this.idat_size;this.iend_size=4+4+4;this.buffer_size=this.iend_offs+this.iend_size;this.buffer=new Array;this.palette=new Object;this.pindex=0;var _crc32= new Array;for(var i=0;i<this.buffer_size;i++)this.buffer[i]="\x00";write(this.buffer,this.ihdr_offs,byte4(this.ihdr_size-12),"IHDR",byte4(width),byte4(height),"\u0008\u0003");write(this.buffer,this.plte_offs,byte4(this.plte_size-12),"PLTE");write(this.buffer,this.trns_offs,byte4(this.trns_size-12),"tRNS");write(this.buffer,this.idat_offs,byte4(this.idat_size-12),"IDAT");write(this.buffer,this.iend_offs,byte4(this.iend_size-12),"IEND");var header=8+(7<<4)<<8|3<<6;header+=31-header%31;write(this.buffer, this.idat_offs+8,byte2(header));for(var i=0;(i<<16)-1>1&2147483647;else c=c>>1&2147483647;_crc32[i]=c}this.index=function(x,y){var i=y*(this.width+1)+x+1;var j=this.idat_offs+8+2+5*Math.floor(i/65535+1)+i;return j}; this.color=function(red,green,blue,alpha){alpha=alpha>=0?alpha:255;var color=((alpha<<8|red)<<8|green)<<8|blue;if(typeof this.palette[color]=="undefined"){if(this.pindex==this.depth)return"\x00";var ndx=this.plte_offs+8+3*this.pindex;this.buffer[ndx+0]=String.fromCharCode(red);this.buffer[ndx+1]=String.fromCharCode(green);this.buffer[ndx+2]=String.fromCharCode(blue);this.buffer[this.trns_offs+8+this.pindex]=String.fromCharCode(alpha);this.palette[color]=String.fromCharCode(this.pindex++)}return this.palette[color]}; this.getBase64=function{var s=this.getDump;var ch="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";var c1,c2,c3,e1,e2,e3,e4;var l=s.length;var i=0;var r="";do{c1=s.charCodeAt(i);e1=c1>>2;c2=s.charCodeAt(i+1);e2=(c1&3)<<4|c2>>4;c3=s.charCodeAt(i+2);if(l>6;if(l<i+3)e4=64;else e4=c3&63;r+=ch.charAt(e1)+ch.charAt(e2)+ch.charAt(e3)+ch.charAt(e4)}while((i+=3)>8&16777215;write(png,offs+size-4,byte4(crc^-1))}crc32(this.buffer,this.ihdr_offs,this.ihdr_size);crc32(this.buffer,this.plte_offs,this.plte_size); crc32(this.buffer,this.trns_offs,this.trns_size);crc32(this.buffer,this.idat_offs,this.idat_size);crc32(this.buffer,this.iend_offs,this.iend_size);return"\u0089PNG\r\n\u001a\n"+this.buffer.join("")}}});
 * A handy class to calculate color values.
 * @version 1.0
 * @author Robert Eisele 
 * @copyright Copyright (c) 2010, Robert Eisele
 * @link http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/
 * @license http://www.opensource.org/licenses/bsd-license.php BSD License
 * @license http://www.opensource.org/licenses/bsd-license.php BSD License

function construct_brace_div_method(span, orientation){ var braceDiv = $(''); braceDiv.append('Hello'); $('#bodyContent').append(braceDiv); }

function construct_brace_png_method(span, flip, horiz){ if (span < 36){ span = 36; } else { span += span%2; }	w = horiz?span:25; h = horiz?25:span; var p = new PNGlib(w,h, 256); // construcor takes height, weight and color-depth var background = p.color(0, 0, 0, 0); // set the background transparent var spans_needed = (span - 36) / 2 //spans per side var brace_img_mid = [	[ 29, 0,  0,  0,217,255,255,255,255,255,255,255], [ 73, 0,  0,  0,181,255,255,255,255,255,255,255],							[149,  0,  0,  0,106,255,255,255,255,255,255,255],							[255, 29,  0,  0,  0,217,255,255,255,255,255,255],							[255,217, 29,  0,  0, 29,217,255,255,255,255,255],							[255,255,217,106,  0,  0,  0,106,181,217,255,255],							[255,255,255,255,255,149, 73,  0,  0,  0,  0,  0]];	for (row in brace_img_mid){ brace_img_mid[row]=	[255,255,255,255,255,255,255,255].concat(brace_img_mid[row], [255]); }	var brace_img_span = 255,255,255,255,255,255,255,255,0,0,0,0,255,255,255,255,255,255,255,255,255; var brace_img_top = [	[ 81,146,222,255,255,255,255,255,255,255,255,255,255], [115, 26, 2, 80,194,255,255,255,255,255,255,255,255],							[255,247,142, 20,  0, 63,218,255,255,255,255,255,255],							[255,255,255,231, 64,  0, 10,143,255,255,255,255,255],							[255,255,255,255,252, 87,  0,  0,120,255,255,255,255],							[255,255,255,255,255,249, 59,  0,  0,134,255,255,255],							[255,255,255,255,255,255,212,  3,  0,  3,197,255,255],							[255,255,255,255,255,255,255, 75,  0,  0, 48,254,255],							[255,255,255,255,255,255,255,154,  0,  0,  0,193,255],							[255,255,255,255,255,255,255,203,  0,  0,  0,108,255],							[255,255,255,255,255,255,255,233,  0,  0,  0, 44,255]];

for (row in brace_img_top){ brace_img_top[row]=brace_img_top[row].concat([255,255,255,255,255,255,255,255]); }	var offset = 0; offset = add_array_to_image(p, brace_img_top, offset, false, flip, horiz); for (var i = 0; i < spans_needed; i++){ offset = add_array_to_image(p, brace_img_span, offset, false, flip, horiz); }	offset = add_array_to_image(p, brace_img_mid, offset, false, flip, horiz); offset = add_array_to_image(p, brace_img_mid, offset, true, flip, horiz); for (var i = 0; i < spans_needed; i++){ offset = add_array_to_image(p, brace_img_span, offset, true, flip, horiz); }	offset = add_array_to_image(p, brace_img_top, offset, true, flip, horiz); return ''; } function add_array_to_image(p, array, offset, v_rev, h_rev, horiz){ var h = array.length; w = array[0].length; for (var i = 0; i < h; i++) { ii = v_rev?h-1-i:i; //flipped index for (var j = 0; j < w; j++) { jj = h_rev?w-1-j:j; x = horiz?j:i+offset; //rotate the array? -> interchange x and y				y = horiz?i+offset:j; p.buffer[p.index(y,x)] = p.color(0,0,0,255-array[ii][jj]); //assign into the array }	}	return offset + array.length }

function check_for_braces{ var brace_markers = $('.brace_marker') $('.brace_image').remove for (i =0; i<brace_markers.length; i++){ var marker = brace_markers[i]; var horiz = $(marker).hasClass('brace_horiz') var parent = $(marker).parent; var span = parseInt( horiz?parent.width:parent.height );//:$(marker).parent.height; var image = construct_brace_png_method(span, $(marker).hasClass('brace_flip'), horiz); parent.append(image); } }

$( check_for_braces ); window.onresize=check_for_braces;