+ X
+
+
+
+
+|
+
+
+ Backdrop Library+Category +
Theme +
|
+
+
+
+
+
+
+  School  Hospital  Garden 3  Office  City 1  City 2  Bedroom 1  Bedroom 2  Bedroom 3  Kitchen 1  Kitchen 2  Bathroom  City 3  City 4  City 5  City 6  Castle 1  Castle 2  Classroom 1  Classroom 2  Hallway 1  Hallway 2  Garden 1  Garden 2 +
+
+
+ |
+
+
+
+ 
+ 
+
+
+
+ Image tag attributes:
+
+ rel:animated_src - If this url is specified, it's loaded into the player instead of src.
+ This allows a preview frame to be shown until animated gif data is streamed into the canvas
+
+ rel:auto_play - Defaults to 1 if not specified. If set to zero, a call to the play() method is needed
+
+ Constructor options args
+
+ gif Required. The DOM element of an img tag.
+ loop_mode Optional. Setting this to false will force disable looping of the gif.
+ auto_play Optional. Same as the rel:auto_play attribute above, this arg overrides the img tag info.
+ max_width Optional. Scale images over max_width down to max_width. Helpful with mobile.
+ on_end Optional. Add a callback for when the gif reaches the end of a single loop (one iteration). The first argument passed will be the gif HTMLElement.
+ loop_delay Optional. The amount of time to pause (in ms) after each single loop (iteration).
+ draw_while_loading Optional. Determines whether the gif will be drawn to the canvas whilst it is loaded.
+ show_progress_bar Optional. Only applies when draw_while_loading is set to true.
+
+ Instance methods
+
+ // loading
+ load( callback ) Loads the gif specified by the src or rel:animated_src sttributie of the img tag into a canvas element and then calls callback if one is passed
+ load_url( src, callback ) Loads the gif file specified in the src argument into a canvas element and then calls callback if one is passed
+
+ // play controls
+ play - Start playing the gif
+ pause - Stop playing the gif
+ move_to(i) - Move to frame i of the gif
+ move_relative(i) - Move i frames ahead (or behind if i < 0)
+
+ // getters
+ get_canvas The canvas element that the gif is playing in. Handy for assigning event handlers to.
+ get_playing Whether or not the gif is currently playing
+ get_loading Whether or not the gif has finished loading/parsing
+ get_auto_play Whether or not the gif is set to play automatically
+ get_length The number of frames in the gif
+ get_current_frame The index of the currently displayed frame of the gif
+
+ For additional customization (viewport inside iframe) these params may be passed:
+ c_w, c_h - width and height of canvas
+ vp_t, vp_l, vp_ w, vp_h - top, left, width and height of the viewport
+
+ A bonus: few articles to understand what is going on
+ http://enthusiasms.org/post/16976438906
+ http://www.matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
+ http://humpy77.deviantart.com/journal/Frame-Delay-Times-for-Animated-GIFs-214150546
+
+*/
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ define([], factory);
+ } else if (typeof exports === 'object') {
+ module.exports = factory();
+ } else {
+ root.SuperGif = factory();
+ }
+}(this, function () {
+ // Generic functions
+ var bitsToNum = function (ba) {
+ return ba.reduce(function (s, n) {
+ return s * 2 + n;
+ }, 0);
+ };
+
+ var byteToBitArr = function (bite) {
+ var a = [];
+ for (var i = 7; i >= 0; i--) {
+ a.push( !! (bite & (1 << i)));
+ }
+ return a;
+ };
+
+ // Stream
+ /**
+ * @constructor
+ */
+ // Make compiler happy.
+ var Stream = function (data) {
+ this.data = data;
+ this.len = this.data.length;
+ this.pos = 0;
+
+ this.readByte = function () {
+ if (this.pos >= this.data.length) {
+ throw new Error('Attempted to read past end of stream.');
+ }
+ if (data instanceof Uint8Array)
+ return data[this.pos++];
+ else
+ return data.charCodeAt(this.pos++) & 0xFF;
+ };
+
+ this.readBytes = function (n) {
+ var bytes = [];
+ for (var i = 0; i < n; i++) {
+ bytes.push(this.readByte());
+ }
+ return bytes;
+ };
+
+ this.read = function (n) {
+ var s = '';
+ for (var i = 0; i < n; i++) {
+ s += String.fromCharCode(this.readByte());
+ }
+ return s;
+ };
+
+ this.readUnsigned = function () { // Little-endian.
+ var a = this.readBytes(2);
+ return (a[1] << 8) + a[0];
+ };
+ };
+
+ var lzwDecode = function (minCodeSize, data) {
+ // TODO: Now that the GIF parser is a bit different, maybe this should get an array of bytes instead of a String?
+ var pos = 0; // Maybe this streaming thing should be merged with the Stream?
+ var readCode = function (size) {
+ var code = 0;
+ for (var i = 0; i < size; i++) {
+ if (data.charCodeAt(pos >> 3) & (1 << (pos & 7))) {
+ code |= 1 << i;
+ }
+ pos++;
+ }
+ return code;
+ };
+
+ var output = [];
+
+ var clearCode = 1 << minCodeSize;
+ var eoiCode = clearCode + 1;
+
+ var codeSize = minCodeSize + 1;
+
+ var dict = [];
+
+ var clear = function () {
+ dict = [];
+ codeSize = minCodeSize + 1;
+ for (var i = 0; i < clearCode; i++) {
+ dict[i] = [i];
+ }
+ dict[clearCode] = [];
+ dict[eoiCode] = null;
+
+ };
+
+ var code;
+ var last;
+
+ while (true) {
+ last = code;
+ code = readCode(codeSize);
+
+ if (code === clearCode) {
+ clear();
+ continue;
+ }
+ if (code === eoiCode) break;
+
+ if (code < dict.length) {
+ if (last !== clearCode) {
+ dict.push(dict[last].concat(dict[code][0]));
+ }
+ }
+ else {
+ if (code !== dict.length) throw new Error('Invalid LZW code.');
+ dict.push(dict[last].concat(dict[last][0]));
+ }
+ output.push.apply(output, dict[code]);
+
+ if (dict.length === (1 << codeSize) && codeSize < 12) {
+ // If we're at the last code and codeSize is 12, the next code will be a clearCode, and it'll be 12 bits long.
+ codeSize++;
+ }
+ }
+
+ // I don't know if this is technically an error, but some GIFs do it.
+ //if (Math.ceil(pos / 8) !== data.length) throw new Error('Extraneous LZW bytes.');
+ return output;
+ };
+
+
+ // The actual parsing; returns an object with properties.
+ var parseGIF = function (st, handler) {
+ handler || (handler = {});
+
+ // LZW (GIF-specific)
+ var parseCT = function (entries) { // Each entry is 3 bytes, for RGB.
+ var ct = [];
+ for (var i = 0; i < entries; i++) {
+ ct.push(st.readBytes(3));
+ }
+ return ct;
+ };
+
+ var readSubBlocks = function () {
+ var size, data;
+ data = '';
+ do {
+ size = st.readByte();
+ data += st.read(size);
+ } while (size !== 0);
+ return data;
+ };
+
+ var parseHeader = function () {
+ var hdr = {};
+ hdr.sig = st.read(3);
+ hdr.ver = st.read(3);
+ if (hdr.sig !== 'GIF') throw new Error('Not a GIF file.'); // XXX: This should probably be handled more nicely.
+ hdr.width = st.readUnsigned();
+ hdr.height = st.readUnsigned();
+
+ var bits = byteToBitArr(st.readByte());
+ hdr.gctFlag = bits.shift();
+ hdr.colorRes = bitsToNum(bits.splice(0, 3));
+ hdr.sorted = bits.shift();
+ hdr.gctSize = bitsToNum(bits.splice(0, 3));
+
+ hdr.bgColor = st.readByte();
+ hdr.pixelAspectRatio = st.readByte(); // if not 0, aspectRatio = (pixelAspectRatio + 15) / 64
+ if (hdr.gctFlag) {
+ hdr.gct = parseCT(1 << (hdr.gctSize + 1));
+ }
+ handler.hdr && handler.hdr(hdr);
+ };
+
+ var parseExt = function (block) {
+ var parseGCExt = function (block) {
+ var blockSize = st.readByte(); // Always 4
+ var bits = byteToBitArr(st.readByte());
+ block.reserved = bits.splice(0, 3); // Reserved; should be 000.
+ block.disposalMethod = bitsToNum(bits.splice(0, 3));
+ block.userInput = bits.shift();
+ block.transparencyGiven = bits.shift();
+
+ block.delayTime = st.readUnsigned();
+
+ block.transparencyIndex = st.readByte();
+
+ block.terminator = st.readByte();
+
+ handler.gce && handler.gce(block);
+ };
+
+ var parseComExt = function (block) {
+ block.comment = readSubBlocks();
+ handler.com && handler.com(block);
+ };
+
+ var parsePTExt = function (block) {
+ // No one *ever* uses this. If you use it, deal with parsing it yourself.
+ var blockSize = st.readByte(); // Always 12
+ block.ptHeader = st.readBytes(12);
+ block.ptData = readSubBlocks();
+ handler.pte && handler.pte(block);
+ };
+
+ var parseAppExt = function (block) {
+ var parseNetscapeExt = function (block) {
+ var blockSize = st.readByte(); // Always 3
+ block.unknown = st.readByte(); // ??? Always 1? What is this?
+ block.iterations = st.readUnsigned();
+ block.terminator = st.readByte();
+ handler.app && handler.app.NETSCAPE && handler.app.NETSCAPE(block);
+ };
+
+ var parseUnknownAppExt = function (block) {
+ block.appData = readSubBlocks();
+ // FIXME: This won't work if a handler wants to match on any identifier.
+ handler.app && handler.app[block.identifier] && handler.app[block.identifier](block);
+ };
+
+ var blockSize = st.readByte(); // Always 11
+ block.identifier = st.read(8);
+ block.authCode = st.read(3);
+ switch (block.identifier) {
+ case 'NETSCAPE':
+ parseNetscapeExt(block);
+ break;
+ default:
+ parseUnknownAppExt(block);
+ break;
+ }
+ };
+
+ var parseUnknownExt = function (block) {
+ block.data = readSubBlocks();
+ handler.unknown && handler.unknown(block);
+ };
+
+ block.label = st.readByte();
+ switch (block.label) {
+ case 0xF9:
+ block.extType = 'gce';
+ parseGCExt(block);
+ break;
+ case 0xFE:
+ block.extType = 'com';
+ parseComExt(block);
+ break;
+ case 0x01:
+ block.extType = 'pte';
+ parsePTExt(block);
+ break;
+ case 0xFF:
+ block.extType = 'app';
+ parseAppExt(block);
+ break;
+ default:
+ block.extType = 'unknown';
+ parseUnknownExt(block);
+ break;
+ }
+ };
+
+ var parseImg = function (img) {
+ var deinterlace = function (pixels, width) {
+ // Of course this defeats the purpose of interlacing. And it's *probably*
+ // the least efficient way it's ever been implemented. But nevertheless...
+ var newPixels = new Array(pixels.length);
+ var rows = pixels.length / width;
+ var cpRow = function (toRow, fromRow) {
+ var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
+ newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
+ };
+
+ // See appendix E.
+ var offsets = [0, 4, 2, 1];
+ var steps = [8, 8, 4, 2];
+
+ var fromRow = 0;
+ for (var pass = 0; pass < 4; pass++) {
+ for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
+ cpRow(toRow, fromRow)
+ fromRow++;
+ }
+ }
+
+ return newPixels;
+ };
+
+ img.leftPos = st.readUnsigned();
+ img.topPos = st.readUnsigned();
+ img.width = st.readUnsigned();
+ img.height = st.readUnsigned();
+
+ var bits = byteToBitArr(st.readByte());
+ img.lctFlag = bits.shift();
+ img.interlaced = bits.shift();
+ img.sorted = bits.shift();
+ img.reserved = bits.splice(0, 2);
+ img.lctSize = bitsToNum(bits.splice(0, 3));
+
+ if (img.lctFlag) {
+ img.lct = parseCT(1 << (img.lctSize + 1));
+ }
+
+ img.lzwMinCodeSize = st.readByte();
+
+ var lzwData = readSubBlocks();
+
+ img.pixels = lzwDecode(img.lzwMinCodeSize, lzwData);
+
+ if (img.interlaced) { // Move
+ img.pixels = deinterlace(img.pixels, img.width);
+ }
+
+ handler.img && handler.img(img);
+ };
+
+ var parseBlock = function () {
+ var block = {};
+ block.sentinel = st.readByte();
+
+ switch (String.fromCharCode(block.sentinel)) { // For ease of matching
+ case '!':
+ block.type = 'ext';
+ parseExt(block);
+ break;
+ case ',':
+ block.type = 'img';
+ parseImg(block);
+ break;
+ case ';':
+ block.type = 'eof';
+ handler.eof && handler.eof(block);
+ break;
+ default:
+ throw new Error('Unknown block: 0x' + block.sentinel.toString(16)); // TODO: Pad this with a 0.
+ }
+
+ if (block.type !== 'eof') setTimeout(parseBlock, 0);
+ };
+
+ var parse = function () {
+ parseHeader();
+ setTimeout(parseBlock, 0);
+ };
+
+ parse();
+ };
+
+ var SuperGif = function ( opts ) {
+ var options = {
+ //viewport position
+ vp_l: 0,
+ vp_t: 0,
+ vp_w: null,
+ vp_h: null,
+ //canvas sizes
+ c_w: null,
+ c_h: null
+ };
+ for (var i in opts ) { options[i] = opts[i] }
+ if (options.vp_w && options.vp_h) options.is_vp = true;
+
+ var stream;
+ var hdr;
+
+ var loadError = null;
+ var loading = false;
+
+ var transparency = null;
+ var delay = null;
+ var disposalMethod = null;
+ var disposalRestoreFromIdx = null;
+ var lastDisposalMethod = null;
+ var frame = null;
+ var lastImg = null;
+
+ var playing = true;
+ var forward = true;
+
+ var ctx_scaled = false;
+
+ var frames = [];
+ var frameOffsets = []; // elements have .x and .y properties
+
+ var gif = options.gif;
+ if (typeof options.auto_play == 'undefined')
+ options.auto_play = (!gif.getAttribute('rel:auto_play') || gif.getAttribute('rel:auto_play') == '1');
+
+ var onEndListener = (options.hasOwnProperty('on_end') ? options.on_end : null);
+ var loopDelay = (options.hasOwnProperty('loop_delay') ? options.loop_delay : 0);
+ var overrideLoopMode = (options.hasOwnProperty('loop_mode') ? options.loop_mode : 'auto');
+ var drawWhileLoading = (options.hasOwnProperty('draw_while_loading') ? options.draw_while_loading : true);
+ var showProgressBar = drawWhileLoading ? (options.hasOwnProperty('show_progress_bar') ? options.show_progress_bar : true) : false;
+ var progressBarHeight = (options.hasOwnProperty('progressbar_height') ? options.progressbar_height : 25);
+ var progressBarBackgroundColor = (options.hasOwnProperty('progressbar_background_color') ? options.progressbar_background_color : 'rgba(255,255,255,0.4)');
+ var progressBarForegroundColor = (options.hasOwnProperty('progressbar_foreground_color') ? options.progressbar_foreground_color : 'rgba(255,0,22,.8)');
+
+ var clear = function () {
+ transparency = null;
+ delay = null;
+ lastDisposalMethod = disposalMethod;
+ disposalMethod = null;
+ frame = null;
+ };
+
+ // XXX: There's probably a better way to handle catching exceptions when
+ // callbacks are involved.
+ var doParse = function () {
+ try {
+ parseGIF(stream, handler);
+ }
+ catch (err) {
+ doLoadError('parse');
+ }
+ };
+
+ var doText = function (text) {
+ toolbar.innerHTML = text; // innerText? Escaping? Whatever.
+ toolbar.style.visibility = 'visible';
+ };
+
+ var setSizes = function(w, h) {
+ canvas.width = w * get_canvas_scale();
+ canvas.height = h * get_canvas_scale();
+ toolbar.style.minWidth = ( w * get_canvas_scale() ) + 'px';
+
+ tmpCanvas.width = w;
+ tmpCanvas.height = h;
+ tmpCanvas.style.width = w + 'px';
+ tmpCanvas.style.height = h + 'px';
+ tmpCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
+ };
+
+ var setFrameOffset = function(frame, offset) {
+ if (!frameOffsets[frame]) {
+ frameOffsets[frame] = offset;
+ return;
+ }
+ if (typeof offset.x !== 'undefined') {
+ frameOffsets[frame].x = offset.x;
+ }
+ if (typeof offset.y !== 'undefined') {
+ frameOffsets[frame].y = offset.y;
+ }
+ };
+
+ var doShowProgress = function (pos, length, draw) {
+ if (draw && showProgressBar) {
+ var height = progressBarHeight;
+ var left, mid, top, width;
+ if (options.is_vp) {
+ if (!ctx_scaled) {
+ top = (options.vp_t + options.vp_h - height);
+ height = height;
+ left = options.vp_l;
+ mid = left + (pos / length) * options.vp_w;
+ width = canvas.width;
+ } else {
+ top = (options.vp_t + options.vp_h - height) / get_canvas_scale();
+ height = height / get_canvas_scale();
+ left = (options.vp_l / get_canvas_scale() );
+ mid = left + (pos / length) * (options.vp_w / get_canvas_scale());
+ width = canvas.width / get_canvas_scale();
+ }
+ //some debugging, draw rect around viewport
+ if (false) {
+ if (!ctx_scaled) {
+ var l = options.vp_l, t = options.vp_t;
+ var w = options.vp_w, h = options.vp_h;
+ } else {
+ var l = options.vp_l/get_canvas_scale(), t = options.vp_t/get_canvas_scale();
+ var w = options.vp_w/get_canvas_scale(), h = options.vp_h/get_canvas_scale();
+ }
+ ctx.rect(l,t,w,h);
+ ctx.stroke();
+ }
+ }
+ else {
+ top = (canvas.height - height) / (ctx_scaled ? get_canvas_scale() : 1);
+ mid = ((pos / length) * canvas.width) / (ctx_scaled ? get_canvas_scale() : 1);
+ width = canvas.width / (ctx_scaled ? get_canvas_scale() : 1 );
+ height /= ctx_scaled ? get_canvas_scale() : 1;
+ }
+
+ ctx.fillStyle = progressBarBackgroundColor;
+ ctx.fillRect(mid, top, width - mid, height);
+
+ ctx.fillStyle = progressBarForegroundColor;
+ ctx.fillRect(0, top, mid, height);
+ }
+ };
+
+ var doLoadError = function (originOfError) {
+ var drawError = function () {
+ ctx.fillStyle = 'black';
+ ctx.fillRect(0, 0, options.c_w ? options.c_w : hdr.width, options.c_h ? options.c_h : hdr.height);
+ ctx.strokeStyle = 'red';
+ ctx.lineWidth = 3;
+ ctx.moveTo(0, 0);
+ ctx.lineTo(options.c_w ? options.c_w : hdr.width, options.c_h ? options.c_h : hdr.height);
+ ctx.moveTo(0, options.c_h ? options.c_h : hdr.height);
+ ctx.lineTo(options.c_w ? options.c_w : hdr.width, 0);
+ ctx.stroke();
+ };
+
+ loadError = originOfError;
+ hdr = {
+ width: gif.width,
+ height: gif.height
+ }; // Fake header.
+ frames = [];
+ drawError();
+ };
+
+ var doHdr = function (_hdr) {
+ hdr = _hdr;
+ setSizes(hdr.width, hdr.height)
+ };
+
+ var doGCE = function (gce) {
+ pushFrame();
+ clear();
+ transparency = gce.transparencyGiven ? gce.transparencyIndex : null;
+ delay = gce.delayTime;
+ disposalMethod = gce.disposalMethod;
+ // We don't have much to do with the rest of GCE.
+ };
+
+ var pushFrame = function () {
+ if (!frame) return;
+ frames.push({
+ data: frame.getImageData(0, 0, hdr.width, hdr.height),
+ delay: delay
+ });
+ frameOffsets.push({ x: 0, y: 0 });
+ };
+
+ var doImg = function (img) {
+ if (!frame) frame = tmpCanvas.getContext('2d');
+
+ var currIdx = frames.length;
+
+ //ct = color table, gct = global color table
+ var ct = img.lctFlag ? img.lct : hdr.gct; // TODO: What if neither exists?
+
+ /*
+ Disposal method indicates the way in which the graphic is to
+ be treated after being displayed.
+
+ Values : 0 - No disposal specified. The decoder is
+ not required to take any action.
+ 1 - Do not dispose. The graphic is to be left
+ in place.
+ 2 - Restore to background color. The area used by the
+ graphic must be restored to the background color.
+ 3 - Restore to previous. The decoder is required to
+ restore the area overwritten by the graphic with
+ what was there prior to rendering the graphic.
+
+ Importantly, "previous" means the frame state
+ after the last disposal of method 0, 1, or 2.
+ */
+ if (currIdx > 0) {
+ if (lastDisposalMethod === 3) {
+ // Restore to previous
+ // If we disposed every frame including first frame up to this point, then we have
+ // no composited frame to restore to. In this case, restore to background instead.
+ if (disposalRestoreFromIdx !== null) {
+ frame.putImageData(frames[disposalRestoreFromIdx].data, 0, 0);
+ } else {
+ frame.clearRect(lastImg.leftPos, lastImg.topPos, lastImg.width, lastImg.height);
+ }
+ } else {
+ disposalRestoreFromIdx = currIdx - 1;
+ }
+
+ if (lastDisposalMethod === 2) {
+ // Restore to background color
+ // Browser implementations historically restore to transparent; we do the same.
+ // http://www.wizards-toolkit.org/discourse-server/viewtopic.php?f=1&t=21172#p86079
+ frame.clearRect(lastImg.leftPos, lastImg.topPos, lastImg.width, lastImg.height);
+ }
+ }
+ // else, Undefined/Do not dispose.
+ // frame contains final pixel data from the last frame; do nothing
+
+ //Get existing pixels for img region after applying disposal method
+ var imgData = frame.getImageData(img.leftPos, img.topPos, img.width, img.height);
+
+ //apply color table colors
+ img.pixels.forEach(function (pixel, i) {
+ // imgData.data === [R,G,B,A,R,G,B,A,...]
+ if (pixel !== transparency) {
+ imgData.data[i * 4 + 0] = ct[pixel][0];
+ imgData.data[i * 4 + 1] = ct[pixel][1];
+ imgData.data[i * 4 + 2] = ct[pixel][2];
+ imgData.data[i * 4 + 3] = 255; // Opaque.
+ }
+ });
+
+ frame.putImageData(imgData, img.leftPos, img.topPos);
+
+ if (!ctx_scaled) {
+ ctx.scale(get_canvas_scale(),get_canvas_scale());
+ ctx_scaled = true;
+ }
+
+ // We could use the on-page canvas directly, except that we draw a progress
+ // bar for each image chunk (not just the final image).
+ if (drawWhileLoading) {
+ ctx.drawImage(tmpCanvas, 0, 0);
+ drawWhileLoading = options.auto_play;
+ }
+
+ lastImg = img;
+ };
+
+ var player = (function () {
+ var i = -1;
+ var iterationCount = 0;
+
+ var showingInfo = false;
+ var pinned = false;
+
+ /**
+ * Gets the index of the frame "up next".
+ * @returns {number}
+ */
+ var getNextFrameNo = function () {
+ var delta = (forward ? 1 : -1);
+ return (i + delta + frames.length) % frames.length;
+ };
+
+ var stepFrame = function (amount) { // XXX: Name is confusing.
+ i = i + amount;
+
+ putFrame();
+ };
+
+ var step = (function () {
+ var stepping = false;
+
+ var completeLoop = function () {
+ if (onEndListener !== null)
+ onEndListener(gif);
+ iterationCount++;
+
+ if (overrideLoopMode !== false || iterationCount < 0) {
+ doStep();
+ } else {
+ stepping = false;
+ playing = false;
+ }
+ };
+
+ var doStep = function () {
+ stepping = playing;
+ if (!stepping) return;
+
+ stepFrame(1);
+ var delay = frames[i].delay * 10;
+ if (!delay) delay = 100; // FIXME: Should this even default at all? What should it be?
+
+ var nextFrameNo = getNextFrameNo();
+ if (nextFrameNo === 0) {
+ delay += loopDelay;
+ setTimeout(completeLoop, delay);
+ } else {
+ setTimeout(doStep, delay);
+ }
+ };
+
+ return function () {
+ if (!stepping) setTimeout(doStep, 0);
+ };
+ }());
+
+ var putFrame = function () {
+ var offset;
+ i = parseInt(i, 10);
+
+ if (i > frames.length - 1){
+ i = 0;
+ }
+
+ if (i < 0){
+ i = 0;
+ }
+
+ offset = frameOffsets[i];
+
+ tmpCanvas.getContext("2d").putImageData(frames[i].data, offset.x, offset.y);
+ ctx.globalCompositeOperation = "copy";
+ ctx.drawImage(tmpCanvas, 0, 0);
+ };
+
+ var play = function () {
+ playing = true;
+ step();
+ };
+
+ var pause = function () {
+ playing = false;
+ };
+
+
+ return {
+ init: function () {
+ if (loadError) return;
+
+ if ( ! (options.c_w && options.c_h) ) {
+ ctx.scale(get_canvas_scale(),get_canvas_scale());
+ }
+
+ if (options.auto_play) {
+ step();
+ }
+ else {
+ i = 0;
+ putFrame();
+ }
+ },
+ step: step,
+ play: play,
+ pause: pause,
+ playing: playing,
+ move_relative: stepFrame,
+ current_frame: function() { return i; },
+ length: function() { return frames.length },
+ move_to: function ( frame_idx ) {
+ i = frame_idx;
+ putFrame();
+ }
+ }
+ }());
+
+ var doDecodeProgress = function (draw) {
+ doShowProgress(stream.pos, stream.data.length, draw);
+ };
+
+ var doNothing = function () {};
+ /**
+ * @param{boolean=} draw Whether to draw progress bar or not; this is not idempotent because of translucency.
+ * Note that this means that the text will be unsynchronized with the progress bar on non-frames;
+ * but those are typically so small (GCE etc.) that it doesn't really matter. TODO: Do this properly.
+ */
+ var withProgress = function (fn, draw) {
+ return function (block) {
+ fn(block);
+ doDecodeProgress(draw);
+ };
+ };
+
+
+ var handler = {
+ hdr: withProgress(doHdr),
+ gce: withProgress(doGCE),
+ com: withProgress(doNothing),
+ // I guess that's all for now.
+ app: {
+ // TODO: Is there much point in actually supporting iterations?
+ NETSCAPE: withProgress(doNothing)
+ },
+ img: withProgress(doImg, true),
+ eof: function (block) {
+ //toolbar.style.display = '';
+ pushFrame();
+ doDecodeProgress(false);
+ if ( ! (options.c_w && options.c_h) ) {
+ canvas.width = hdr.width * get_canvas_scale();
+ canvas.height = hdr.height * get_canvas_scale();
+ }
+ player.init();
+ loading = false;
+ if (load_callback) {
+ load_callback(gif);
+ }
+
+ }
+ };
+
+ var init = function () {
+ var parent = gif.parentNode;
+
+ var div = document.createElement('div');
+ canvas = document.createElement('canvas');
+ ctx = canvas.getContext('2d');
+ toolbar = document.createElement('div');
+
+ tmpCanvas = document.createElement('canvas');
+
+ div.width = canvas.width = gif.width;
+ div.height = canvas.height = gif.height;
+ toolbar.style.minWidth = gif.width + 'px';
+
+ div.className = 'jsgif';
+ toolbar.className = 'jsgif_toolbar';
+ div.appendChild(canvas);
+ div.appendChild(toolbar);
+ //case where we are doing programatically and not DOM
+ if (parent===null) {
+ gif = div;
+ } else {
+ parent.insertBefore(div, gif);
+ parent.removeChild(gif);
+ }
+ if (options.c_w && options.c_h) setSizes(options.c_w, options.c_h);
+ initialized=true;
+ };
+
+ var get_canvas_scale = function() {
+ var scale;
+ if (options.max_width && hdr && hdr.width > options.max_width) {
+ scale = options.max_width / hdr.width;
+ }
+ else {
+ scale = 1;
+ }
+ return scale;
+ }
+
+ var canvas, ctx, toolbar, tmpCanvas;
+ var initialized = false;
+ var load_callback = false;
+
+ var load_setup = function(callback) {
+ if (loading) return false;
+ if (callback) load_callback = callback;
+ else load_callback = false;
+
+ loading = true;
+ frames = [];
+ clear();
+ disposalRestoreFromIdx = null;
+ lastDisposalMethod = null;
+ frame = null;
+ lastImg = null;
+
+ return true;
+ }
+
+ return {
+ // play controls
+ play: player.play,
+ pause: player.pause,
+ move_relative: player.move_relative,
+ move_to: player.move_to,
+
+ // getters for instance vars
+ get_playing : function() { return playing },
+ get_canvas : function() { return canvas },
+ get_canvas_scale : function() { return get_canvas_scale() },
+ get_loading : function() { return loading },
+ get_auto_play : function() { return options.auto_play },
+ get_length : function() { return player.length() },
+ get_current_frame: function() { return player.current_frame() },
+ load_url: function(src,callback){
+ if (!load_setup(callback)) return;
+
+ var h = new XMLHttpRequest();
+ // new browsers (XMLHttpRequest2-compliant)
+ h.open('GET', src, true);
+
+ if ('overrideMimeType' in h) {
+ h.overrideMimeType('text/plain; charset=x-user-defined');
+ }
+
+ // old browsers (XMLHttpRequest-compliant)
+ else if ('responseType' in h) {
+ h.responseType = 'arraybuffer';
+ }
+
+ // IE9 (Microsoft.XMLHTTP-compliant)
+ else {
+ h.setRequestHeader('Accept-Charset', 'x-user-defined');
+ }
+
+ h.onloadstart = function() {
+ // Wait until connection is opened to replace the gif element with a canvas to avoid a blank img
+ if (!initialized) init();
+ };
+ h.onload = function(e) {
+ if (this.status != 200) {
+ doLoadError('xhr - response');
+ }
+ // emulating response field for IE9
+ if (!('response' in this)) {
+ this.response = new VBArray(this.responseText).toArray().map(String.fromCharCode).join('');
+ }
+ var data = this.response;
+ if (data.toString().indexOf("ArrayBuffer") > 0) {
+ data = new Uint8Array(data);
+ }
+
+ stream = new Stream(data);
+ setTimeout(doParse, 0);
+ };
+ h.onprogress = function (e) {
+ if (e.lengthComputable) doShowProgress(e.loaded, e.total, true);
+ };
+ h.onerror = function() { doLoadError('xhr'); };
+ h.send();
+ },
+ load: function (callback) {
+ this.load_url(gif.getAttribute('rel:animated_src') || gif.src,callback);
+ },
+ load_raw: function(arr, callback) {
+ if (!load_setup(callback)) return;
+ if (!initialized) init();
+ stream = new Stream(arr);
+ setTimeout(doParse, 0);
+ },
+ set_frame_offset: setFrameOffset
+ };
+ };
+
+ return SuperGif;
+}));
+
+
diff --git a/vendor/pixi.min.js b/vendor/pixi.min.js
new file mode 100755
index 0000000..974c549
--- /dev/null
+++ b/vendor/pixi.min.js
@@ -0,0 +1,18 @@
+/**
+ * @license
+ * pixi.js - v2.2.7
+ * Copyright (c) 2012-2014, Mat Groves
+ * http://goodboydigital.com/
+ *
+ * Compiled: 2015-02-25
+ *
+ * pixi.js is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+(function(){var a=this,b=b||{};b.WEBGL_RENDERER=0,b.CANVAS_RENDERER=1,b.VERSION="v2.2.7",b.blendModes={NORMAL:0,ADD:1,MULTIPLY:2,SCREEN:3,OVERLAY:4,DARKEN:5,LIGHTEN:6,COLOR_DODGE:7,COLOR_BURN:8,HARD_LIGHT:9,SOFT_LIGHT:10,DIFFERENCE:11,EXCLUSION:12,HUE:13,SATURATION:14,COLOR:15,LUMINOSITY:16},b.scaleModes={DEFAULT:0,LINEAR:0,NEAREST:1},b._UID=0,"undefined"!=typeof Float32Array?(b.Float32Array=Float32Array,b.Uint16Array=Uint16Array,b.Uint32Array=Uint32Array,b.ArrayBuffer=ArrayBuffer):(b.Float32Array=Array,b.Uint16Array=Array),b.INTERACTION_FREQUENCY=30,b.AUTO_PREVENT_DEFAULT=!0,b.PI_2=2*Math.PI,b.RAD_TO_DEG=180/Math.PI,b.DEG_TO_RAD=Math.PI/180,b.RETINA_PREFIX="@2x",b.dontSayHello=!1,b.defaultRenderOptions={view:null,transparent:!1,antialias:!1,preserveDrawingBuffer:!1,resolution:1,clearBeforeRender:!0,autoResize:!1},b.sayHello=function(a){if(!b.dontSayHello){if(navigator.userAgent.toLowerCase().indexOf("chrome")>-1){var c=["%c %c %c Pixi.js "+b.VERSION+" - "+a+" %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ ","background: #ff66a5","background: #ff66a5","color: #ff66a5; background: #030307;","background: #ff66a5","background: #ffc3dc","background: #ff66a5","color: #ff2424; background: #fff","color: #ff2424; background: #fff","color: #ff2424; background: #fff"];console.log.apply(console,c)}else window.console&&console.log("Pixi.js "+b.VERSION+" - http://www.pixijs.com/");b.dontSayHello=!0}},b.Point=function(a,b){this.x=a||0,this.y=b||0},b.Point.prototype.clone=function(){return new b.Point(this.x,this.y)},b.Point.prototype.set=function(a,b){this.x=a||0,this.y=b||(0!==b?this.x:0)},b.Point.prototype.constructor=b.Point,b.Rectangle=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Rectangle.prototype.clone=function(){return new b.Rectangle(this.x,this.y,this.width,this.height)},b.Rectangle.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=this.x;if(a>=c&&a<=c+this.width){var d=this.y;if(b>=d&&b<=d+this.height)return!0}return!1},b.Rectangle.prototype.constructor=b.Rectangle,b.EmptyRectangle=new b.Rectangle(0,0,0,0),b.Polygon=function(a){if(a instanceof Array||(a=Array.prototype.slice.call(arguments)),a[0]instanceof b.Point){for(var c=[],d=0,e=a.length;e>d;d++)c.push(a[d].x,a[d].y);a=c}this.closed=!0,this.points=a},b.Polygon.prototype.clone=function(){var a=this.points.slice();return new b.Polygon(a)},b.Polygon.prototype.contains=function(a,b){for(var c=!1,d=this.points.length/2,e=0,f=d-1;d>e;f=e++){var g=this.points[2*e],h=this.points[2*e+1],i=this.points[2*f],j=this.points[2*f+1],k=h>b!=j>b&&(i-g)*(b-h)/(j-h)+g>a;k&&(c=!c)}return c},b.Polygon.prototype.constructor=b.Polygon,b.Circle=function(a,b,c){this.x=a||0,this.y=b||0,this.radius=c||0},b.Circle.prototype.clone=function(){return new b.Circle(this.x,this.y,this.radius)},b.Circle.prototype.contains=function(a,b){if(this.radius<=0)return!1;var c=this.x-a,d=this.y-b,e=this.radius*this.radius;return c*=c,d*=d,e>=c+d},b.Circle.prototype.getBounds=function(){return new b.Rectangle(this.x-this.radius,this.y-this.radius,2*this.radius,2*this.radius)},b.Circle.prototype.constructor=b.Circle,b.Ellipse=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Ellipse.prototype.clone=function(){return new b.Ellipse(this.x,this.y,this.width,this.height)},b.Ellipse.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=(a-this.x)/this.width,d=(b-this.y)/this.height;return c*=c,d*=d,1>=c+d},b.Ellipse.prototype.getBounds=function(){return new b.Rectangle(this.x-this.width,this.y-this.height,this.width,this.height)},b.Ellipse.prototype.constructor=b.Ellipse,b.RoundedRectangle=function(a,b,c,d,e){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0,this.radius=e||20},b.RoundedRectangle.prototype.clone=function(){return new b.RoundedRectangle(this.x,this.y,this.width,this.height,this.radius)},b.RoundedRectangle.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=this.x;if(a>=c&&a<=c+this.width){var d=this.y;if(b>=d&&b<=d+this.height)return!0}return!1},b.RoundedRectangle.prototype.constructor=b.RoundedRectangle,b.Matrix=function(){this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0},b.Matrix.prototype.fromArray=function(a){this.a=a[0],this.b=a[1],this.c=a[3],this.d=a[4],this.tx=a[2],this.ty=a[5]},b.Matrix.prototype.toArray=function(a){this.array||(this.array=new b.Float32Array(9));var c=this.array;return a?(c[0]=this.a,c[1]=this.b,c[2]=0,c[3]=this.c,c[4]=this.d,c[5]=0,c[6]=this.tx,c[7]=this.ty,c[8]=1):(c[0]=this.a,c[1]=this.c,c[2]=this.tx,c[3]=this.b,c[4]=this.d,c[5]=this.ty,c[6]=0,c[7]=0,c[8]=1),c},b.Matrix.prototype.apply=function(a,c){return c=c||new b.Point,c.x=this.a*a.x+this.c*a.y+this.tx,c.y=this.b*a.x+this.d*a.y+this.ty,c},b.Matrix.prototype.applyInverse=function(a,c){c=c||new b.Point;var d=1/(this.a*this.d+this.c*-this.b);return c.x=this.d*d*a.x+-this.c*d*a.y+(this.ty*this.c-this.tx*this.d)*d,c.y=this.a*d*a.y+-this.b*d*a.x+(-this.ty*this.a+this.tx*this.b)*d,c},b.Matrix.prototype.translate=function(a,b){return this.tx+=a,this.ty+=b,this},b.Matrix.prototype.scale=function(a,b){return this.a*=a,this.d*=b,this.c*=a,this.b*=b,this.tx*=a,this.ty*=b,this},b.Matrix.prototype.rotate=function(a){var b=Math.cos(a),c=Math.sin(a),d=this.a,e=this.c,f=this.tx;return this.a=d*b-this.b*c,this.b=d*c+this.b*b,this.c=e*b-this.d*c,this.d=e*c+this.d*b,this.tx=f*b-this.ty*c,this.ty=f*c+this.ty*b,this},b.Matrix.prototype.append=function(a){var b=this.a,c=this.b,d=this.c,e=this.d;return this.a=a.a*b+a.b*d,this.b=a.a*c+a.b*e,this.c=a.c*b+a.d*d,this.d=a.c*c+a.d*e,this.tx=a.tx*b+a.ty*d+this.tx,this.ty=a.tx*c+a.ty*e+this.ty,this},b.Matrix.prototype.identity=function(){return this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0,this},b.identityMatrix=new b.Matrix,b.DisplayObject=function(){this.position=new b.Point,this.scale=new b.Point(1,1),this.pivot=new b.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.hitArea=null,this.buttonMode=!1,this.renderable=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this._interactive=!1,this.defaultCursor="pointer",this.worldTransform=new b.Matrix,this._sr=0,this._cr=1,this.filterArea=null,this._bounds=new b.Rectangle(0,0,1,1),this._currentBounds=null,this._mask=null,this._cacheAsBitmap=!1,this._cacheIsDirty=!1},b.DisplayObject.prototype.constructor=b.DisplayObject,Object.defineProperty(b.DisplayObject.prototype,"interactive",{get:function(){return this._interactive},set:function(a){this._interactive=a,this.stage&&(this.stage.dirty=!0)}}),Object.defineProperty(b.DisplayObject.prototype,"worldVisible",{get:function(){var a=this;do{if(!a.visible)return!1;a=a.parent}while(a);return!0}}),Object.defineProperty(b.DisplayObject.prototype,"mask",{get:function(){return this._mask},set:function(a){this._mask&&(this._mask.isMask=!1),this._mask=a,this._mask&&(this._mask.isMask=!0)}}),Object.defineProperty(b.DisplayObject.prototype,"filters",{get:function(){return this._filters},set:function(a){if(a){for(var b=[],c=0;c