User:Inductiveload/braces.js

/**
* A script to generate braces dynamically.
*
*/


/**
* A handy class to calculate color values.
*
* @version 1.0
* @author Robert Eisele <robert@xarg.org>
* @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
*
*/
(function(){function write(buffer,offs){for(var i=2;i<arguments.length;i++)for(var j=0;j<arguments[i].length;j++)buffer[offs++]=arguments[i].charAt(j)}function byte2(w){return String.fromCharCode(w>>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<this.pix_size;i++){var size,bits;if(i+65535<this.pix_size){size=65535;bits="\x00"}else{size=this.pix_size-(i<<16)-i;bits="\u0001"}write(this.buffer,this.idat_offs+8+2+(i<<16)+(i<<2),bits,byte2lsb(size),byte2lsb(~size))}for(var i=0;i<256;i++){var c=i;for(var j=0;j<8;j++)if(c&1)c=-306674912^c>>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<i+2)e3=64;else e3=(c2&15)<<2|c3>>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)<l);return r};this.getDump=function(){var BASE=65521;var NMAX=5552;var s1=1;var s2=0;var n= NMAX;for(var y=0;y<this.height;y++)for(var x=-1;x<this.width;x++){s1+=this.buffer[this.index(x,y)].charCodeAt(0);s2+=s1;if((n-=1)==0){s1%=BASE;s2%=BASE;n=NMAX}}s1%=BASE;s2%=BASE;write(this.buffer,this.idat_offs+this.idat_size-8,byte4(s2<<16|s1));function crc32(png,offs,size){var crc=-1;for(var i=4;i<size-4;i+=1)crc=_crc32[(crc^png[offs+i].charCodeAt(0))&255]^crc>>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("")}}})();


function construct_brace_div_method(span, orientation){
	
	var braceDiv = $('<div class="brace_container"/>');
	
	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 '<img class="brace_image" src="data:image/png;base64,'+p.getBase64()+'">';
}
	
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;