User:Sixorish/Abilities/Render.js

/*globals console, document, Image, clearTimeout, setTimeout, window, addOnloadHook*/ var AbilityRenderer = (function {	"use strict";	function Renderer {		this.currFrame = 0;		this.frames = [];	}	Renderer.init = function (setup) {		var renderer = new Renderer;		renderer.container = setup.container;		renderer.canvas = setup.canvas;		renderer.container.appendChild(renderer.canvas);		renderer.load(function  { setup.callback.apply(renderer); });		return renderer;	};	Renderer.prototype.images = [];	Renderer.prototype.fps = 5.00;	Renderer.prototype.src = [		'http://images.wikia.com/tibia/en/images/8/84/SPR87.png'	];	Renderer.prototype.sprites = [		// id    : 16 bits		// src   : 8 bits		// dx    : 1 bit [ 0 = 32px, 1 = 64px ]		// dy    : 1 bit [ 0 = 32px, 1 = 64px ]		// total : 26 bits		{ src: 0, dx: 32, dy: 32, id: 0 },		{ src: 0, dx: 32, dy: 32, id: 1 },		{ src: 0, dx: 32, dy: 32, id: 2 },		{ src: 0, dx: 32, dy: 32, id: 3 },		{ src: 0, dx: 32, dy: 32, id: 4 },		{ src: 0, dx: 32, dy: 32, id: 5 }, { src: 0, dx: 32, dy: 32, id: 6 }, { src: 0, dx: 32, dy: 32, id: 7 }, { src: 0, dx: 32, dy: 32, id: 8 }, { src: 0, dx: 32, dy: 32, id: 9 }, { src: 0, dx: 32, dy: 32, id: 10 }, { src: 0, dx: 32, dy: 32, id: 11 }, { src: 0, dx: 32, dy: 32, id: 12 }, { src: 0, dx: 32, dy: 32, id: 13 }, { src: 0, dx: 32, dy: 32, id: 14 }, { src: 0, dx: 32, dy: 32, id: 15 }, { src: 0, dx: 32, dy: 32, id: 16 }, { src: 0, dx: 32, dy: 32, id: 17 }, { src: 0, dx: 32, dy: 32, id: 18 }, { src: 0, dx: 32, dy: 32, id: 19 }, { src: 0, dx: 32, dy: 32, id: 20 }, { src: 0, dx: 32, dy: 32, id: 21 }, { src: 0, dx: 32, dy: 32, id: 22 }, { src: 0, dx: 32, dy: 32, id: 23 }, { src: 0, dx: 32, dy: 32, id: 24 }, { src: 0, dx: 32, dy: 32, id: 25 }, { src: 0, dx: 32, dy: 32, id: 26 }, { src: 0, dx: 32, dy: 32, id: 27 }, { src: 0, dx: 32, dy: 32, id: 28 }, { src: 0, dx: 32, dy: 32, id: 29 }, { src: 0, dx: 32, dy: 32, id: 30 }, { src: 0, dx: 32, dy: 32, id: 31 }, { src: 0, dx: 32, dy: 32, id: 32 }, { src: 0, dx: 32, dy: 32, id: 33 }, { src: 0, dx: 32, dy: 32, id: 34 }, { src: 0, dx: 32, dy: 32, id: 35 }, { src: 0, dx: 32, dy: 32, id: 36 }, { src: 0, dx: 32, dy: 32, id: 37 }, { src: 0, dx: 32, dy: 32, id: 38 }, { src: 0, dx: 32, dy: 32, id: 39 }, { src: 0, dx: 32, dy: 32, id: 40 }, { src: 0, dx: 32, dy: 32, id: 41 }, { src: 0, dx: 32, dy: 32, id: 42 }, { src: 0, dx: 32, dy: 32, id: 43 }, { src: 0, dx: 32, dy: 32, id: 44 }, { src: 0, dx: 32, dy: 32, id: 45 }, { src: 0, dx: 32, dy: 32, id: 46 }, { src: 0, dx: 32, dy: 32, id: 47 }, { src: 0, dx: 32, dy: 32, id: 48 }, { src: 0, dx: 32, dy: 32, id: 49 }, { src: 0, dx: 32, dy: 32, id: 50 }, { src: 0, dx: 32, dy: 32, id: 51 }, { src: 0, dx: 32, dy: 32, id: 52 }, { src: 0, dx: 32, dy: 32, id: 53 }, { src: 0, dx: 32, dy: 32, id: 54 }, { src: 0, dx: 32, dy: 32, id: 55 }, { src: 0, dx: 32, dy: 32, id: 56 }, { src: 0, dx: 32, dy: 32, id: 57 }, { src: 0, dx: 32, dy: 32, id: 58 }, { src: 0, dx: 32, dy: 32, id: 59 }, { src: 0, dx: 32, dy: 32, id: 60 }, { src: 0, dx: 32, dy: 32, id: 61 }, { src: 0, dx: 32, dy: 32, id: 62 }, { src: 0, dx: 32, dy: 32, id: 63 }, { src: 0, dx: 32, dy: 32, id: 64 }, { src: 0, dx: 32, dy: 32, id: 65 }, { src: 0, dx: 32, dy: 32, id: 66 }, { src: 0, dx: 32, dy: 32, id: 67 }, { src: 0, dx: 32, dy: 32, id: 68 }, { src: 0, dx: 32, dy: 32, id: 69 }, { src: 0, dx: 32, dy: 32, id: 70 }, { src: 0, dx: 32, dy: 32, id: 71 }, { src: 0, dx: 32, dy: 32, id: 72 }, { src: 0, dx: 32, dy: 32, id: 73 }, { src: 0, dx: 32, dy: 32, id: 74 }, { src: 0, dx: 32, dy: 32, id: 75 }, { src: 0, dx: 32, dy: 32, id: 76 }, { src: 0, dx: 32, dy: 32, id: 77 }, { src: 0, dx: 32, dy: 32, id: 78 }, { src: 0, dx: 32, dy: 32, id: 79 }, { src: 0, dx: 32, dy: 32, id: 80 }, { src: 0, dx: 32, dy: 32, id: 81 }, { src: 0, dx: 32, dy: 32, id: 82 }, { src: 0, dx: 32, dy: 32, id: 83 }, { src: 0, dx: 32, dy: 32, id: 84 }, { src: 0, dx: 32, dy: 32, id: 85 }, { src: 0, dx: 32, dy: 32, id: 86 }, { src: 0, dx: 32, dy: 32, id: 87 }, { src: 0, dx: 32, dy: 32, id: 88 }, { src: 0, dx: 32, dy: 32, id: 89 }, { src: 0, dx: 32, dy: 32, id: 90 }, { src: 0, dx: 32, dy: 32, id: 91 }, { src: 0, dx: 32, dy: 32, id: 92 }, { src: 0, dx: 32, dy: 32, id: 93 }, { src: 0, dx: 32, dy: 32, id: 94 }, { src: 0, dx: 32, dy: 32, id: 95 }, { src: 0, dx: 32, dy: 32, id: 96 }, { src: 0, dx: 32, dy: 32, id: 97 }, { src: 0, dx: 32, dy: 32, id: 98 }, { src: 0, dx: 32, dy: 32, id: 99 }, { src: 0, dx: 32, dy: 32, id: 100 }, { src: 0, dx: 32, dy: 32, id: 101 }, { src: 0, dx: 32, dy: 32, id: 102 }, { src: 0, dx: 32, dy: 32, id: 103 }, { src: 0, dx: 32, dy: 32, id: 104 }, { src: 0, dx: 32, dy: 32, id: 105 }, { src: 0, dx: 32, dy: 32, id: 106 }, { src: 0, dx: 32, dy: 32, id: 107 }, { src: 0, dx: 32, dy: 32, id: 108 }, { src: 0, dx: 32, dy: 32, id: 109 }, { src: 0, dx: 32, dy: 32, id: 110 }, { src: 0, dx: 32, dy: 32, id: 111 }, { src: 0, dx: 32, dy: 32, id: 112 }, { src: 0, dx: 32, dy: 32, id: 113 }, { src: 0, dx: 32, dy: 32, id: 114 }, { src: 0, dx: 32, dy: 32, id: 115 }, { src: 0, dx: 32, dy: 32, id: 116 }, { src: 0, dx: 32, dy: 32, id: 117 }, { src: 0, dx: 32, dy: 32, id: 118 }, { src: 0, dx: 32, dy: 32, id: 119 }, { src: 0, dx: 32, dy: 32, id: 120 }, { src: 0, dx: 32, dy: 32, id: 121 }, { src: 0, dx: 32, dy: 32, id: 122 }, { src: 0, dx: 32, dy: 32, id: 123 }, { src: 0, dx: 32, dy: 32, id: 124 }, { src: 0, dx: 32, dy: 32, id: 125 }, { src: 0, dx: 32, dy: 32, id: 126 }, { src: 0, dx: 32, dy: 32, id: 127 }, { src: 0, dx: 32, dy: 32, id: 128 }, { src: 0, dx: 32, dy: 32, id: 129 }, { src: 0, dx: 32, dy: 32, id: 130 }, { src: 0, dx: 32, dy: 32, id: 131 }, { src: 0, dx: 32, dy: 32, id: 132 }, { src: 0, dx: 32, dy: 32, id: 133 }, { src: 0, dx: 32, dy: 32, id: 134 }, { src: 0, dx: 32, dy: 32, id: 135 }, { src: 0, dx: 32, dy: 32, id: 136 }, { src: 0, dx: 32, dy: 32, id: 137 }, { src: 0, dx: 32, dy: 32, id: 138 }, { src: 0, dx: 32, dy: 32, id: 139 }, { src: 0, dx: 32, dy: 32, id: 140 }, { src: 0, dx: 32, dy: 32, id: 141 }, { src: 0, dx: 32, dy: 32, id: 142 }, { src: 0, dx: 32, dy: 32, id: 143 }, { src: 0, dx: 32, dy: 32, id: 144 }, { src: 0, dx: 32, dy: 32, id: 145 }, { src: 0, dx: 32, dy: 32, id: 146 }, { src: 0, dx: 32, dy: 32, id: 147 }, { src: 0, dx: 32, dy: 32, id: 148 }, { src: 0, dx: 32, dy: 32, id: 149 }, { src: 0, dx: 32, dy: 32, id: 150 }, { src: 0, dx: 32, dy: 32, id: 151 }, { src: 0, dx: 32, dy: 32, id: 152 }, { src: 0, dx: 32, dy: 32, id: 153 }, { src: 0, dx: 32, dy: 32, id: 154 }, { src: 0, dx: 32, dy: 32, id: 155 }, { src: 0, dx: 32, dy: 32, id: 156 }, { src: 0, dx: 32, dy: 32, id: 157 }, { src: 0, dx: 32, dy: 32, id: 158 }, { src: 0, dx: 32, dy: 32, id: 159 }, { src: 0, dx: 32, dy: 32, id: 160 }, { src: 0, dx: 32, dy: 32, id: 161 }, { src: 0, dx: 32, dy: 32, id: 162 }, { src: 0, dx: 32, dy: 32, id: 163 }, { src: 0, dx: 32, dy: 32, id: 164 }, { src: 0, dx: 32, dy: 32, id: 165 }, { src: 0, dx: 32, dy: 32, id: 166 }, { src: 0, dx: 32, dy: 32, id: 167 }, { src: 0, dx: 32, dy: 32, id: 168 }, { src: 0, dx: 32, dy: 32, id: 169 }, { src: 0, dx: 32, dy: 32, id: 170 }, { src: 0, dx: 32, dy: 32, id: 171 }, { src: 0, dx: 32, dy: 32, id: 172 }, { src: 0, dx: 32, dy: 32, id: 173 }, { src: 0, dx: 32, dy: 32, id: 174 }, { src: 0, dx: 32, dy: 32, id: 175 }, { src: 0, dx: 32, dy: 32, id: 176 }, { src: 0, dx: 32, dy: 32, id: 177 }, { src: 0, dx: 32, dy: 32, id: 178 }, { src: 0, dx: 32, dy: 32, id: 179 }, { src: 0, dx: 32, dy: 32, id: 180 }, { src: 0, dx: 32, dy: 32, id: 181 }, { src: 0, dx: 32, dy: 32, id: 182 }, { src: 0, dx: 32, dy: 32, id: 183 }, { src: 0, dx: 32, dy: 32, id: 184 }, { src: 0, dx: 32, dy: 32, id: 185 }, { src: 0, dx: 32, dy: 32, id: 186 }, { src: 0, dx: 32, dy: 32, id: 187 }, { src: 0, dx: 32, dy: 32, id: 188 }, { src: 0, dx: 32, dy: 32, id: 189 }, { src: 0, dx: 32, dy: 32, id: 190 }, { src: 0, dx: 32, dy: 32, id: 191 }, { src: 0, dx: 32, dy: 32, id: 192 }, { src: 0, dx: 32, dy: 32, id: 193 }, { src: 0, dx: 32, dy: 32, id: 194 }, { src: 0, dx: 32, dy: 32, id: 195 }, { src: 0, dx: 32, dy: 32, id: 196 }, { src: 0, dx: 32, dy: 32, id: 197 }, { src: 0, dx: 32, dy: 32, id: 198 }, { src: 0, dx: 32, dy: 32, id: 199 }, { src: 0, dx: 32, dy: 32, id: 200 }, { src: 0, dx: 32, dy: 32, id: 201 }, { src: 0, dx: 32, dy: 32, id: 202 }, { src: 0, dx: 32, dy: 32, id: 203 }, { src: 0, dx: 32, dy: 32, id: 204 }, { src: 0, dx: 32, dy: 32, id: 205 }, { src: 0, dx: 32, dy: 32, id: 206 }, { src: 0, dx: 32, dy: 32, id: 207 }, { src: 0, dx: 32, dy: 32, id: 208 }, { src: 0, dx: 32, dy: 32, id: 209 }, { src: 0, dx: 32, dy: 32, id: 210 }, { src: 0, dx: 32, dy: 32, id: 211 }, { src: 0, dx: 32, dy: 32, id: 212 }, { src: 0, dx: 32, dy: 32, id: 213 }, { src: 0, dx: 32, dy: 32, id: 214 }, { src: 0, dx: 32, dy: 32, id: 215 }, { src: 0, dx: 32, dy: 32, id: 216 }, { src: 0, dx: 32, dy: 32, id: 217 }, { src: 0, dx: 32, dy: 32, id: 218 }, { src: 0, dx: 32, dy: 32, id: 219 }, { src: 0, dx: 32, dy: 32, id: 220 } ];	Renderer.prototype.effects = [ { id: 0, name: 'strike', sprites: [ 0, 1, 2, 3 ], speed: [ 0.3, 0.3, 0.3, 0.3 ] }, { id: 1, name: 'water', sprites: [ 4, 5, 6, 7 ], speed: [ 0.3, 0.3, 0.3, 0.3 ] }, { id: 2, name: 'smoke', sprites: [ 8, 9, 10, 11 ], speed: [ 0.3, 0.3, 0.3, 0.3 ] }, { id: 3, name: 'spark', sprites: [ 12, 13, 14 ], speed: [ 0.3, 0.3, 0.3 ] }, { id: 4, name: 'haze', sprites: [ 15, 16, 17 ], speed: [ 0.3, 0.3, 0.3 ] }, { id: 5, name: 'burst', sprites: [ 18, 19, 20, 21, 22, 23 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 6, name: 'explode', sprites: [ 24, 25, 26, 27, 28, 29, 30, 31 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 7, name: 'acid', sprites: [ 32, 33, 34, 35, 36, 37, 38 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 8, name: 'poison', sprites: [ 39, 40, 41, 42, 43, 44, 45 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 9, name: 'exori', sprites: [ 46, 47, 48, 49, 50, 51, 52, 53 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 10, name: 'ball_blue', sprites: [ 54, 55, 56, 57, 58, 59, 60, 61 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 11, name: 'energy', sprites: [ 62, 63, 64, 65, 66, 67 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 12, name: 'sparkle_blue', sprites: [ 68, 69, 70, 71, 72 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 13, name: 'sparkle_red', sprites: [ 73, 74, 75, 76, 77 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 14, name: 'sparkle_green', sprites: [ 78, 79, 80, 81, 82 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 15, name: 'burn', sprites: [ 83, 84, 85, 86 ], speed: [ 0.3, 0.3, 0.3, 0.3 ] }, { id: 16, name: 'strike_green', sprites: [ 87, 88, 89, 90 ], speed: [ 0.3, 0.3, 0.3, 0.3 ] }, { id: 17, name: 'mort', sprites: [ 91, 92, 93, 94, 95, 96, 97, 98 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 18, name: 'music_green', sprites: [ 99, 100, 101, 102, 103 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 19, name: 'music_red', sprites: [ 104, 105, 106, 107, 108 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 20, name: 'poison_cloud', sprites: [ 109, 110, 111, 112 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 21, name: 'music_yellow', sprites: [ 113, 114, 115, 116, 117 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 22, name: 'music_purple', sprites: [ 118, 119, 120, 121, 122 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 23, name: 'music_blue', sprites: [ 123, 124, 125, 126, 127 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 24, name: 'music_white', sprites: [ 128, 129, 130, 131, 132 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 25, name: 'bubble', sprites: [ 133, 134, 135 ], speed: [ 0.3, 0.3, 0.3 ] }, { id: 26, name: 'dice', sprites: [ 133, 134, 135, 136 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 26, name: 'grafiti', sprites: [ 137, 138, 139, 140, 141, 142, 143, 144 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 31, name: 'fireworks_yellow', sprites: [ 145, 146, 147, 148, 149, 150, 151, 152, 153, 154 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 32, name: 'fireworks_red', sprites: [ 155, 156, 157, 158, 159, 160, 161, 162, 163, 164 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 33, name: 'fireworks_blue', sprites: [ 165, 166, 167, 168, 169, 170, 171, 172, 173, 174 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 34, name: 'starry', sprites: [ 175, 176, 177 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 35, name: 'sleepy', sprites: [ 178, 179, 180 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 36, name: 'crush', sprites: [ 181, 182, 183, 184, 185, 186, 187 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 37, name: 'hearts', sprites: [ 188, 189, 190, 191, 192, 193, 194, 195 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 38, name: 'fiery', sprites: [ 196, 197, 198, 199, 200, 201, 202, 203 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 39, name: 'vis', sprites: [ 204, 205, 206, 207, 208, 209, 210, 211 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 40, name: 'curse', sprites: [ 212, 213, 214 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 41, name: 'san', sprites: [ 215, 216, 217, 218, 219 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 42, name: 'avalanche', sprites: [ 220, 221, 222 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] }, { id: 43, name: 'frigo', sprites: [ 223, 234, 235, 236 ], speed: [ 0.3, 0.3, 0.3, 0.3, 0.3 ] } ];	Renderer.prototype.next = function { var next = Math.max((this.currFrame + 1) % this.frames.length); this.currFrame = next; this.render; };	Renderer.prototype.render = function { var frame, x, y, maxx, maxy, ctx, spr; ctx = this.canvas.getContext('2d'); frame = this.frames[this.currFrame]; ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); if (!frame) { return; } for (y = 0, maxy = frame.maxy; y < maxy; y += 1) { for (x = 0, maxx = frame.maxx; x < maxx; x += 1) { spr = frame[y][x]; if (spr !== undefined) { ctx.drawImage(						this.images[this.src[this.sprites[spr].src]],						32 * (spr % 24), 32 * Math.floor(spr / 24),						32, 32,						32 * x, 32 * y,						32, 32					); }			}		}	};	Renderer.prototype.frame = (function {		function Frame {}		Frame.prototype.maxx = 0;		Frame.prototype.maxy = 0;		Frame.prototype.push = Array.prototype.push;		Frame.prototype.slice = Array.prototype.slice;		Frame.prototype.splice = Array.prototype.splice;		Frame.prototype.add = function frame(id, area) {			var x, maxy = area.length, y, maxx = (maxy ? area[0].length : 0), cy;			if (maxx > this.maxx) { this.maxx = maxx; }			if (maxy > this.maxy) { this.maxy = maxy; }			for (y = 0; y < maxy; y += 1) {				cy = this[y] = [];				for (x = 0; x < maxx; x += 1) {					if (area[y][x]) {						cy[x] = id;					}				}			}			return this;		};		return function (id) {			if (this.frames[id] === undefined) {				this.frames[id] = new Frame;			}			return this.frames[id];		};	}); Renderer.prototype.load = (function {		function loadImage(src, callback) {			var i = new Image;			i.src = src;			i.addEventListener('load', callback);			if (i.complete) { callback; }			return i;		}		return function (callback) {			var images = this.images, srcs = this.src, i, len = srcs.length, loaded = 0;			function counter {				loaded += 1;				if (loaded === srcs.length && callback) {					callback;				}			}			for (i = 0; i < len; i += 1) {				images[srcs[i]] = loadImage(srcs[i], counter);			}		};	}); Renderer.prototype.effect = (function {		function arrayPurify(arr1, arr2, def) {			var x, y, maxx = 0, maxy = arr2.length;			for (y = 0; y < maxy; y += 1) {				if (arr2[y] && arr2[y].length > maxx) { maxx = arr2[y].length; }			}			for (y = 0; y < maxy; y += 1) {				arr1[y] = [];				for (x = 0; x < maxx; x += 1) {					arr1[y][x] = (arr2[y] ? (arr2[y][x] || def) : def);				}			}			return arr1;		}		return function (effectID, area) {			var effect = this.effects[effectID], i = 0, len = effect.sprites.length, areaPure = arrayPurify([], area, 0x0);			for (i; i < len; i += 1) {				this.frame(this.currFrame + i + 1).add(effect.sprites[i], areaPure);			}		};	}); Renderer.prototype.fromData = (function {		function findEffectId(effects, name) {			var i, len = effects.length;			for (i = 0; i < len; i += 1) {				if (effects[i].name === name) {					return effects[i].id;				}			}			return -1;		}		function findEffectArea(type, area) {			var symm_X, symm_Y, data, y, x, maxx = 0, maxy = 0, origin_X = 0, origin_Y = 0, ret = [];			symm_X = symm_Y = false;			if (type === 'melee' || type === 'missile') { return []; }			if (type === 'wave' || type === 'beam') { symm_X = true; }			if (type === 'ball') { symm_X = symm_Y = true; }			// Generate based on area, symm_X, symm_Y			data = area.split(':');			maxx = Math.max.apply(null, data);			maxy = data.length;			origin_X = Math.floor(symm_X ? maxx : 1);			origin_Y = Math.floor(symm_Y ? maxy : 1);			for (y = 0; y < maxy; y += 1) {				ret[origin_Y + y] = [];				if (symm_Y) {					ret[origin_Y - y] = ret[origin_Y + y];				}				for (x = 0; x < data[y]; x += 1) {					ret[origin_Y + y][origin_X + x] = 0x1;					if (symm_X) {						ret[origin_Y + y][origin_X - x] = ret[origin_Y + y][origin_X + x];					}				}			}			return ret;		}		return function (ele) {			var type, area, dmg, graphic;			type = ele.getAttribute('data-ability-type');			area = ele.getAttribute('data-ability-area');			dmg = ele.getAttribute('data-ability-dmg');			graphic = ele.getAttribute('data-ability-graphic').split(',')[1];			return {				graphic: findEffectId(this.effects, graphic),				area: findEffectArea(type, area)			};		};	}); Renderer.prototype.autoAdjustDimensions = function { var frames = this.frames, maxf, f, cFrame, dx = 0, dy = 0; for (f = 0, maxf = frames.length; f < maxf; f += 1) { cFrame = frames[f]; if (cFrame) { if (cFrame.maxy && dy < cFrame.maxy) { dy = cFrame.maxy; } if (cFrame.maxx && dx < cFrame.maxx) { dx = cFrame.maxx; } }		}		this.canvas.width = 32 * (dx + 1); this.canvas.height = 32 * (dy + 1); };	Renderer.prototype.reset = function { this.currFrame = 0; this.frames = []; };	Renderer.prototype.stop = function { clearTimeout(this.timer); };	Renderer.prototype.start = function { var fps = this.fps, timeStart = +new Date, timeLast = +new Date, tick = 0, interval = Math.round(1000 * (1 / fps)), timer, callback, ctx = this; callback = function { ctx.next; }; function loop { callback; tick += 1; if (ctx.fps !== fps) { fps = ctx.fps; timeStart = +new Date; tick = 0; interval = Math.round(1000 * (1 / fps)); }			timeLast = +new Date; clearTimeout(ctx.timer); ctx.timer = setTimeout(loop, interval + ((interval * tick) - (timeLast - timeStart))); }		timer = setTimeout(loop, interval); };	return Renderer; }); addOnloadHook(function { "use strict"; if (!document.getElementsByClassName || !document.getElementsByClassName('creature-ability').length) { return; } window.abilityDemo = AbilityRenderer.init({		container: (function { var e = document.getElementById('creature-ability'); if (!e) { e = document.createElement('div'); e.id = 'creature-ability'; document.getElementById('positioned_elements').appendChild(e); }			return e;		}),		canvas: (function { var cvs = document.createElement('canvas'); cvs.height = 32 * 15; cvs.width = 32 * 15; return cvs; }),		callback: function {			var elements = document.getElementsByClassName('creature-ability'), i, len = elements.length, ctx = this;			function display(e) {				var data = ctx.fromData(e.originalTarget);				if (data.graphic === -1) { return; }				ctx.stop;				ctx.reset;				ctx.container.style.display = 'block';				ctx.effect(data.graphic, data.area);				ctx.autoAdjustDimensions;				ctx.start;			}			function hide(e) {				ctx.container.style.display = 'none';			}			for (i = 0; i < len; i += 1) {				elements[i].addEventListener('mousedown', display);			}			ctx.container.addEventListener('mousedown', hide);		}	}); });