1#@!#!123s

32767 1#@!#!123s
: / home5 / rakcha / www / app / js /
Filename : html2canvas.js
back
/*

  html2canvas 0.4.1 <http://html2canvas.hertzen.com>

  Copyright (c) 2013 Niklas von Hertzen



  Released under MIT License

*/



(function(window, document, undefined){



"use strict";



var _html2canvas = {},

previousElement,

computedCSS,

html2canvas;



_html2canvas.Util = {};



_html2canvas.Util.log = function(a) {

  if (_html2canvas.logging && window.console && window.console.log) {

    window.console.log(a);

  }

};



_html2canvas.Util.trimText = (function(isNative){

  return function(input) {

    return isNative ? isNative.apply(input) : ((input || '') + '').replace( /^\s+|\s+$/g , '' );

  };

})(String.prototype.trim);



_html2canvas.Util.asFloat = function(v) {

  return parseFloat(v);

};



(function() {

  // TODO: support all possible length values

  var TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;

  var TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

  _html2canvas.Util.parseTextShadows = function (value) {

    if (!value || value === 'none') {

      return [];

    }



    // find multiple shadow declarations

    var shadows = value.match(TEXT_SHADOW_PROPERTY),

      results = [];

    for (var i = 0; shadows && (i < shadows.length); i++) {

      var s = shadows[i].match(TEXT_SHADOW_VALUES);

      results.push({

        color: s[0],

        offsetX: s[1] ? s[1].replace('px', '') : 0,

        offsetY: s[2] ? s[2].replace('px', '') : 0,

        blur: s[3] ? s[3].replace('px', '') : 0

      });

    }

    return results;

  };

})();





_html2canvas.Util.parseBackgroundImage = function (value) {

    var whitespace = ' \r\n\t',

        method, definition, prefix, prefix_i, block, results = [],

        c, mode = 0, numParen = 0, quote, args;



    var appendResult = function(){

        if(method) {

            if(definition.substr( 0, 1 ) === '"') {

                definition = definition.substr( 1, definition.length - 2 );

            }

            if(definition) {

                args.push(definition);

            }

            if(method.substr( 0, 1 ) === '-' &&

                    (prefix_i = method.indexOf( '-', 1 ) + 1) > 0) {

                prefix = method.substr( 0, prefix_i);

                method = method.substr( prefix_i );

            }

            results.push({

                prefix: prefix,

                method: method.toLowerCase(),

                value: block,

                args: args

            });

        }

        args = []; //for some odd reason, setting .length = 0 didn't work in safari

        method =

            prefix =

            definition =

            block = '';

    };



    appendResult();

    for(var i = 0, ii = value.length; i<ii; i++) {

        c = value[i];

        if(mode === 0 && whitespace.indexOf( c ) > -1){

            continue;

        }

        switch(c) {

            case '"':

                if(!quote) {

                    quote = c;

                }

                else if(quote === c) {

                    quote = null;

                }

                break;



            case '(':

                if(quote) { break; }

                else if(mode === 0) {

                    mode = 1;

                    block += c;

                    continue;

                } else {

                    numParen++;

                }

                break;



            case ')':

                if(quote) { break; }

                else if(mode === 1) {

                    if(numParen === 0) {

                        mode = 0;

                        block += c;

                        appendResult();

                        continue;

                    } else {

                        numParen--;

                    }

                }

                break;



            case ',':

                if(quote) { break; }

                else if(mode === 0) {

                    appendResult();

                    continue;

                }

                else if (mode === 1) {

                    if(numParen === 0 && !method.match(/^url$/i)) {

                        args.push(definition);

                        definition = '';

                        block += c;

                        continue;

                    }

                }

                break;

        }



        block += c;

        if(mode === 0) { method += c; }

        else { definition += c; }

    }

    appendResult();



    return results;

};



_html2canvas.Util.Bounds = function (element) {

  var clientRect, bounds = {};



  if (element.getBoundingClientRect){

    clientRect = element.getBoundingClientRect();



    // TODO add scroll position to bounds, so no scrolling of window necessary

    bounds.top = clientRect.top;

    bounds.bottom = clientRect.bottom || (clientRect.top + clientRect.height);

    bounds.left = clientRect.left;



    bounds.width = element.offsetWidth;

    bounds.height = element.offsetHeight;

  }



  return bounds;

};



// TODO ideally, we'd want everything to go through this function instead of Util.Bounds,

// but would require further work to calculate the correct positions for elements with offsetParents

_html2canvas.Util.OffsetBounds = function (element) {

  var parent = element.offsetParent ? _html2canvas.Util.OffsetBounds(element.offsetParent) : {top: 0, left: 0};



  return {

    top: element.offsetTop + parent.top,

    bottom: element.offsetTop + element.offsetHeight + parent.top,

    left: element.offsetLeft + parent.left,

    width: element.offsetWidth,

    height: element.offsetHeight

  };

};



function toPX(element, attribute, value ) {

    var rsLeft = element.runtimeStyle && element.runtimeStyle[attribute],

        left,

        style = element.style;



    // Check if we are not dealing with pixels, (Opera has issues with this)

    // Ported from jQuery css.js

    // From the awesome hack by Dean Edwards

    // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291



    // If we're not dealing with a regular pixel number

    // but a number that has a weird ending, we need to convert it to pixels



    if ( !/^-?[0-9]+\.?[0-9]*(?:px)?$/i.test( value ) && /^-?\d/.test(value) ) {

        // Remember the original values

        left = style.left;



        // Put in the new values to get a computed value out

        if (rsLeft) {

            element.runtimeStyle.left = element.currentStyle.left;

        }

        style.left = attribute === "fontSize" ? "1em" : (value || 0);

        value = style.pixelLeft + "px";



        // Revert the changed values

        style.left = left;

        if (rsLeft) {

            element.runtimeStyle.left = rsLeft;

        }

    }



    if (!/^(thin|medium|thick)$/i.test(value)) {

        return Math.round(parseFloat(value)) + "px";

    }



    return value;

}



function asInt(val) {

    return parseInt(val, 10);

}



function parseBackgroundSizePosition(value, element, attribute, index) {

    value = (value || '').split(',');

    value = value[index || 0] || value[0] || 'auto';

    value = _html2canvas.Util.trimText(value).split(' ');



    if(attribute === 'backgroundSize' && (!value[0] || value[0].match(/cover|contain|auto/))) {

        //these values will be handled in the parent function

    } else {

        value[0] = (value[0].indexOf( "%" ) === -1) ? toPX(element, attribute + "X", value[0]) : value[0];

        if(value[1] === undefined) {

            if(attribute === 'backgroundSize') {

                value[1] = 'auto';

                return value;

            } else {

                // IE 9 doesn't return double digit always

                value[1] = value[0];

            }

        }

        value[1] = (value[1].indexOf("%") === -1) ? toPX(element, attribute + "Y", value[1]) : value[1];

    }

    return value;

}



_html2canvas.Util.getCSS = function (element, attribute, index) {

    if (previousElement !== element) {

      computedCSS = document.defaultView.getComputedStyle(element, null);

    }



    var value = computedCSS[attribute];



    if (/^background(Size|Position)$/.test(attribute)) {

        return parseBackgroundSizePosition(value, element, attribute, index);

    } else if (/border(Top|Bottom)(Left|Right)Radius/.test(attribute)) {

      var arr = value.split(" ");

      if (arr.length <= 1) {

          arr[1] = arr[0];

      }

      return arr.map(asInt);

    }



  return value;

};



_html2canvas.Util.resizeBounds = function( current_width, current_height, target_width, target_height, stretch_mode ){

  var target_ratio = target_width / target_height,

    current_ratio = current_width / current_height,

    output_width, output_height;



  if(!stretch_mode || stretch_mode === 'auto') {

    output_width = target_width;

    output_height = target_height;

  } else if(target_ratio < current_ratio ^ stretch_mode === 'contain') {

    output_height = target_height;

    output_width = target_height * current_ratio;

  } else {

    output_width = target_width;

    output_height = target_width / current_ratio;

  }



  return {

    width: output_width,

    height: output_height

  };

};



function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroundSize ) {

    var bgposition =  _html2canvas.Util.getCSS( el, prop, imageIndex ) ,

    topPos,

    left,

    percentage,

    val;



    if (bgposition.length === 1){

      val = bgposition[0];



      bgposition = [];



      bgposition[0] = val;

      bgposition[1] = val;

    }



    if (bgposition[0].toString().indexOf("%") !== -1){

      percentage = (parseFloat(bgposition[0])/100);

      left = bounds.width * percentage;

      if(prop !== 'backgroundSize') {

        left -= (backgroundSize || image).width*percentage;

      }

    } else {

      if(prop === 'backgroundSize') {

        if(bgposition[0] === 'auto') {

          left = image.width;

        } else {

          if (/contain|cover/.test(bgposition[0])) {

            var resized = _html2canvas.Util.resizeBounds(image.width, image.height, bounds.width, bounds.height, bgposition[0]);

            left = resized.width;

            topPos = resized.height;

          } else {

            left = parseInt(bgposition[0], 10);

          }

        }

      } else {

        left = parseInt( bgposition[0], 10);

      }

    }





    if(bgposition[1] === 'auto') {

      topPos = left / image.width * image.height;

    } else if (bgposition[1].toString().indexOf("%") !== -1){

      percentage = (parseFloat(bgposition[1])/100);

      topPos =  bounds.height * percentage;

      if(prop !== 'backgroundSize') {

        topPos -= (backgroundSize || image).height * percentage;

      }



    } else {

      topPos = parseInt(bgposition[1],10);

    }



    return [left, topPos];

}



_html2canvas.Util.BackgroundPosition = function( el, bounds, image, imageIndex, backgroundSize ) {

    var result = backgroundBoundsFactory( 'backgroundPosition', el, bounds, image, imageIndex, backgroundSize );

    return { left: result[0], top: result[1] };

};



_html2canvas.Util.BackgroundSize = function( el, bounds, image, imageIndex ) {

    var result = backgroundBoundsFactory( 'backgroundSize', el, bounds, image, imageIndex );

    return { width: result[0], height: result[1] };

};



_html2canvas.Util.Extend = function (options, defaults) {

  for (var key in options) {

    if (options.hasOwnProperty(key)) {

      defaults[key] = options[key];

    }

  }

  return defaults;

};





/*

 * Derived from jQuery.contents()

 * Copyright 2010, John Resig

 * Dual licensed under the MIT or GPL Version 2 licenses.

 * http://jquery.org/license

 */

_html2canvas.Util.Children = function( elem ) {

  var children;

  try {

    children = (elem.nodeName && elem.nodeName.toUpperCase() === "IFRAME") ? elem.contentDocument || elem.contentWindow.document : (function(array) {

      var ret = [];

      if (array !== null) {

        (function(first, second ) {

          var i = first.length,

          j = 0;



          if (typeof second.length === "number") {

            for (var l = second.length; j < l; j++) {

              first[i++] = second[j];

            }

          } else {

            while (second[j] !== undefined) {

              first[i++] = second[j++];

            }

          }



          first.length = i;



          return first;

        })(ret, array);

      }

      return ret;

    })(elem.childNodes);



  } catch (ex) {

    _html2canvas.Util.log("html2canvas.Util.Children failed with exception: " + ex.message);

    children = [];

  }

  return children;

};



_html2canvas.Util.isTransparent = function(backgroundColor) {

  return (backgroundColor === "transparent" || backgroundColor === "rgba(0, 0, 0, 0)");

};

_html2canvas.Util.Font = (function () {



  var fontData = {};



  return function(font, fontSize, doc) {

    if (fontData[font + "-" + fontSize] !== undefined) {

      return fontData[font + "-" + fontSize];

    }



    var container = doc.createElement('div'),

    img = doc.createElement('img'),

    span = doc.createElement('span'),

    sampleText = 'Hidden Text',

    baseline,

    middle,

    metricsObj;



    container.style.visibility = "hidden";

    container.style.fontFamily = font;

    container.style.fontSize = fontSize;

    container.style.margin = 0;

    container.style.padding = 0;



    doc.body.appendChild(container);



    // http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever (handtinywhite.gif)

    img.src = "data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACwAAAAAAQABAAACAkQBADs=";

    img.width = 1;

    img.height = 1;



    img.style.margin = 0;

    img.style.padding = 0;

    img.style.verticalAlign = "baseline";



    span.style.fontFamily = font;

    span.style.fontSize = fontSize;

    span.style.margin = 0;

    span.style.padding = 0;



    span.appendChild(doc.createTextNode(sampleText));

    container.appendChild(span);

    container.appendChild(img);

    baseline = (img.offsetTop - span.offsetTop) + 1;



    container.removeChild(span);

    container.appendChild(doc.createTextNode(sampleText));



    container.style.lineHeight = "normal";

    img.style.verticalAlign = "super";



    middle = (img.offsetTop-container.offsetTop) + 1;

    metricsObj = {

      baseline: baseline,

      lineWidth: 1,

      middle: middle

    };



    fontData[font + "-" + fontSize] = metricsObj;



    doc.body.removeChild(container);



    return metricsObj;

  };

})();



(function(){

  var Util = _html2canvas.Util,

    Generate = {};



  _html2canvas.Generate = Generate;



  var reGradients = [

  /^(-webkit-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,

  /^(-o-linear-gradient)\(([a-z\s]+)([\w\d\.\s,%\(\)]+)\)$/,

  /^(-webkit-gradient)\((linear|radial),\s((?:\d{1,3}%?)\s(?:\d{1,3}%?),\s(?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)\-]+)\)$/,

  /^(-moz-linear-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?))([\w\d\.\s,%\(\)]+)\)$/,

  /^(-webkit-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/,

  /^(-moz-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s?([a-z\-]*)([\w\d\.\s,%\(\)]+)\)$/,

  /^(-o-radial-gradient)\(((?:\d{1,3}%?)\s(?:\d{1,3}%?)),\s(\w+)\s([a-z\-]+)([\w\d\.\s,%\(\)]+)\)$/

  ];



  /*

 * TODO: Add IE10 vendor prefix (-ms) support

 * TODO: Add W3C gradient (linear-gradient) support

 * TODO: Add old Webkit -webkit-gradient(radial, ...) support

 * TODO: Maybe some RegExp optimizations are possible ;o)

 */

  Generate.parseGradient = function(css, bounds) {

    var gradient, i, len = reGradients.length, m1, stop, m2, m2Len, step, m3, tl,tr,br,bl;



    for(i = 0; i < len; i+=1){

      m1 = css.match(reGradients[i]);

      if(m1) {

        break;

      }

    }



    if(m1) {

      switch(m1[1]) {

        case '-webkit-linear-gradient':

        case '-o-linear-gradient':



          gradient = {

            type: 'linear',

            x0: null,

            y0: null,

            x1: null,

            y1: null,

            colorStops: []

          };



          // get coordinates

          m2 = m1[2].match(/\w+/g);

          if(m2){

            m2Len = m2.length;

            for(i = 0; i < m2Len; i+=1){

              switch(m2[i]) {

                case 'top':

                  gradient.y0 = 0;

                  gradient.y1 = bounds.height;

                  break;



                case 'right':

                  gradient.x0 = bounds.width;

                  gradient.x1 = 0;

                  break;



                case 'bottom':

                  gradient.y0 = bounds.height;

                  gradient.y1 = 0;

                  break;



                case 'left':

                  gradient.x0 = 0;

                  gradient.x1 = bounds.width;

                  break;

              }

            }

          }

          if(gradient.x0 === null && gradient.x1 === null){ // center

            gradient.x0 = gradient.x1 = bounds.width / 2;

          }

          if(gradient.y0 === null && gradient.y1 === null){ // center

            gradient.y0 = gradient.y1 = bounds.height / 2;

          }



          // get colors and stops

          m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);

          if(m2){

            m2Len = m2.length;

            step = 1 / Math.max(m2Len - 1, 1);

            for(i = 0; i < m2Len; i+=1){

              m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);

              if(m3[2]){

                stop = parseFloat(m3[2]);

                if(m3[3] === '%'){

                  stop /= 100;

                } else { // px - stupid opera

                  stop /= bounds.width;

                }

              } else {

                stop = i * step;

              }

              gradient.colorStops.push({

                color: m3[1],

                stop: stop

              });

            }

          }

          break;



        case '-webkit-gradient':



          gradient = {

            type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions

            x0: 0,

            y0: 0,

            x1: 0,

            y1: 0,

            colorStops: []

          };



          // get coordinates

          m2 = m1[3].match(/(\d{1,3})%?\s(\d{1,3})%?,\s(\d{1,3})%?\s(\d{1,3})%?/);

          if(m2){

            gradient.x0 = (m2[1] * bounds.width) / 100;

            gradient.y0 = (m2[2] * bounds.height) / 100;

            gradient.x1 = (m2[3] * bounds.width) / 100;

            gradient.y1 = (m2[4] * bounds.height) / 100;

          }



          // get colors and stops

          m2 = m1[4].match(/((?:from|to|color-stop)\((?:[0-9\.]+,\s)?(?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)\))+/g);

          if(m2){

            m2Len = m2.length;

            for(i = 0; i < m2Len; i+=1){

              m3 = m2[i].match(/(from|to|color-stop)\(([0-9\.]+)?(?:,\s)?((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\)/);

              stop = parseFloat(m3[2]);

              if(m3[1] === 'from') {

                stop = 0.0;

              }

              if(m3[1] === 'to') {

                stop = 1.0;

              }

              gradient.colorStops.push({

                color: m3[3],

                stop: stop

              });

            }

          }

          break;



        case '-moz-linear-gradient':



          gradient = {

            type: 'linear',

            x0: 0,

            y0: 0,

            x1: 0,

            y1: 0,

            colorStops: []

          };



          // get coordinates

          m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);



          // m2[1] == 0%   -> left

          // m2[1] == 50%  -> center

          // m2[1] == 100% -> right



          // m2[2] == 0%   -> top

          // m2[2] == 50%  -> center

          // m2[2] == 100% -> bottom



          if(m2){

            gradient.x0 = (m2[1] * bounds.width) / 100;

            gradient.y0 = (m2[2] * bounds.height) / 100;

            gradient.x1 = bounds.width - gradient.x0;

            gradient.y1 = bounds.height - gradient.y0;

          }



          // get colors and stops

          m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g);

          if(m2){

            m2Len = m2.length;

            step = 1 / Math.max(m2Len - 1, 1);

            for(i = 0; i < m2Len; i+=1){

              m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%)?/);

              if(m3[2]){

                stop = parseFloat(m3[2]);

                if(m3[3]){ // percentage

                  stop /= 100;

                }

              } else {

                stop = i * step;

              }

              gradient.colorStops.push({

                color: m3[1],

                stop: stop

              });

            }

          }

          break;



        case '-webkit-radial-gradient':

        case '-moz-radial-gradient':

        case '-o-radial-gradient':



          gradient = {

            type: 'circle',

            x0: 0,

            y0: 0,

            x1: bounds.width,

            y1: bounds.height,

            cx: 0,

            cy: 0,

            rx: 0,

            ry: 0,

            colorStops: []

          };



          // center

          m2 = m1[2].match(/(\d{1,3})%?\s(\d{1,3})%?/);

          if(m2){

            gradient.cx = (m2[1] * bounds.width) / 100;

            gradient.cy = (m2[2] * bounds.height) / 100;

          }



          // size

          m2 = m1[3].match(/\w+/);

          m3 = m1[4].match(/[a-z\-]*/);

          if(m2 && m3){

            switch(m3[0]){

              case 'farthest-corner':

              case 'cover': // is equivalent to farthest-corner

              case '': // mozilla removes "cover" from definition :(

                tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));

                tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));

                br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));

                bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));

                gradient.rx = gradient.ry = Math.max(tl, tr, br, bl);

                break;

              case 'closest-corner':

                tl = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.cy, 2));

                tr = Math.sqrt(Math.pow(gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));

                br = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.y1 - gradient.cy, 2));

                bl = Math.sqrt(Math.pow(gradient.x1 - gradient.cx, 2) + Math.pow(gradient.cy, 2));

                gradient.rx = gradient.ry = Math.min(tl, tr, br, bl);

                break;

              case 'farthest-side':

                if(m2[0] === 'circle'){

                  gradient.rx = gradient.ry = Math.max(

                    gradient.cx,

                    gradient.cy,

                    gradient.x1 - gradient.cx,

                    gradient.y1 - gradient.cy

                    );

                } else { // ellipse



                  gradient.type = m2[0];



                  gradient.rx = Math.max(

                    gradient.cx,

                    gradient.x1 - gradient.cx

                    );

                  gradient.ry = Math.max(

                    gradient.cy,

                    gradient.y1 - gradient.cy

                    );

                }

                break;

              case 'closest-side':

              case 'contain': // is equivalent to closest-side

                if(m2[0] === 'circle'){

                  gradient.rx = gradient.ry = Math.min(

                    gradient.cx,

                    gradient.cy,

                    gradient.x1 - gradient.cx,

                    gradient.y1 - gradient.cy

                    );

                } else { // ellipse



                  gradient.type = m2[0];



                  gradient.rx = Math.min(

                    gradient.cx,

                    gradient.x1 - gradient.cx

                    );

                  gradient.ry = Math.min(

                    gradient.cy,

                    gradient.y1 - gradient.cy

                    );

                }

                break;



            // TODO: add support for "30px 40px" sizes (webkit only)

            }

          }



          // color stops

          m2 = m1[5].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g);

          if(m2){

            m2Len = m2.length;

            step = 1 / Math.max(m2Len - 1, 1);

            for(i = 0; i < m2Len; i+=1){

              m3 = m2[i].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\))\s*(\d{1,3})?(%|px)?/);

              if(m3[2]){

                stop = parseFloat(m3[2]);

                if(m3[3] === '%'){

                  stop /= 100;

                } else { // px - stupid opera

                  stop /= bounds.width;

                }

              } else {

                stop = i * step;

              }

              gradient.colorStops.push({

                color: m3[1],

                stop: stop

              });

            }

          }

          break;

      }

    }



    return gradient;

  };



  function addScrollStops(grad) {

    return function(colorStop) {

      try {

        grad.addColorStop(colorStop.stop, colorStop.color);

      }

      catch(e) {

        Util.log(['failed to add color stop: ', e, '; tried to add: ', colorStop]);

      }

    };

  }



  Generate.Gradient = function(src, bounds) {

    if(bounds.width === 0 || bounds.height === 0) {

      return;

    }



    var canvas = document.createElement('canvas'),

    ctx = canvas.getContext('2d'),

    gradient, grad;



    canvas.width = bounds.width;

    canvas.height = bounds.height;



    // TODO: add support for multi defined background gradients

    gradient = _html2canvas.Generate.parseGradient(src, bounds);



    if(gradient) {

      switch(gradient.type) {

        case 'linear':

          grad = ctx.createLinearGradient(gradient.x0, gradient.y0, gradient.x1, gradient.y1);

          gradient.colorStops.forEach(addScrollStops(grad));

          ctx.fillStyle = grad;

          ctx.fillRect(0, 0, bounds.width, bounds.height);

          break;



        case 'circle':

          grad = ctx.createRadialGradient(gradient.cx, gradient.cy, 0, gradient.cx, gradient.cy, gradient.rx);

          gradient.colorStops.forEach(addScrollStops(grad));

          ctx.fillStyle = grad;

          ctx.fillRect(0, 0, bounds.width, bounds.height);

          break;



        case 'ellipse':

          var canvasRadial = document.createElement('canvas'),

            ctxRadial = canvasRadial.getContext('2d'),

            ri = Math.max(gradient.rx, gradient.ry),

            di = ri * 2;



          canvasRadial.width = canvasRadial.height = di;



          grad = ctxRadial.createRadialGradient(gradient.rx, gradient.ry, 0, gradient.rx, gradient.ry, ri);

          gradient.colorStops.forEach(addScrollStops(grad));



          ctxRadial.fillStyle = grad;

          ctxRadial.fillRect(0, 0, di, di);



          ctx.fillStyle = gradient.colorStops[gradient.colorStops.length - 1].color;

          ctx.fillRect(0, 0, canvas.width, canvas.height);

          ctx.drawImage(canvasRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry);

          break;

      }

    }



    return canvas;

  };



  Generate.ListAlpha = function(number) {

    var tmp = "",

    modulus;



    do {

      modulus = number % 26;

      tmp = String.fromCharCode((modulus) + 64) + tmp;

      number = number / 26;

    }while((number*26) > 26);



    return tmp;

  };



  Generate.ListRoman = function(number) {

    var romanArray = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"],

    decimal = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],

    roman = "",

    v,

    len = romanArray.length;



    if (number <= 0 || number >= 4000) {

      return number;

    }



    for (v=0; v < len; v+=1) {

      while (number >= decimal[v]) {

        number -= decimal[v];

        roman += romanArray[v];

      }

    }



    return roman;

  };

})();

function h2cRenderContext(width, height) {

  var storage = [];

  return {

    storage: storage,

    width: width,

    height: height,

    clip: function() {

      storage.push({

        type: "function",

        name: "clip",

        'arguments': arguments

      });

    },

    translate: function() {

      storage.push({

        type: "function",

        name: "translate",

        'arguments': arguments

      });

    },

    fill: function() {

      storage.push({

        type: "function",

        name: "fill",

        'arguments': arguments

      });

    },

    save: function() {

      storage.push({

        type: "function",

        name: "save",

        'arguments': arguments

      });

    },

    restore: function() {

      storage.push({

        type: "function",

        name: "restore",

        'arguments': arguments

      });

    },

    fillRect: function () {

      storage.push({

        type: "function",

        name: "fillRect",

        'arguments': arguments

      });

    },

    createPattern: function() {

      storage.push({

        type: "function",

        name: "createPattern",

        'arguments': arguments

      });

    },

    drawShape: function() {



      var shape = [];



      storage.push({

        type: "function",

        name: "drawShape",

        'arguments': shape

      });



      return {

        moveTo: function() {

          shape.push({

            name: "moveTo",

            'arguments': arguments

          });

        },

        lineTo: function() {

          shape.push({

            name: "lineTo",

            'arguments': arguments

          });

        },

        arcTo: function() {

          shape.push({

            name: "arcTo",

            'arguments': arguments

          });

        },

        bezierCurveTo: function() {

          shape.push({

            name: "bezierCurveTo",

            'arguments': arguments

          });

        },

        quadraticCurveTo: function() {

          shape.push({

            name: "quadraticCurveTo",

            'arguments': arguments

          });

        }

      };



    },

    drawImage: function () {

      storage.push({

        type: "function",

        name: "drawImage",

        'arguments': arguments

      });

    },

    fillText: function () {

      storage.push({

        type: "function",

        name: "fillText",

        'arguments': arguments

      });

    },

    setVariable: function (variable, value) {

      storage.push({

        type: "variable",

        name: variable,

        'arguments': value

      });

      return value;

    }

  };

}

_html2canvas.Parse = function (images, options) {

  window.scroll(0,0);



  var element = (( options.elements === undefined ) ? document.body : options.elements[0]), // select body by default

  numDraws = 0,

  doc = element.ownerDocument,

  Util = _html2canvas.Util,

  support = Util.Support(options, doc),

  ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),

  body = doc.body,

  getCSS = Util.getCSS,

  pseudoHide = "___html2canvas___pseudoelement",

  hidePseudoElements = doc.createElement('style');



  hidePseudoElements.innerHTML = '.' + pseudoHide + '-before:before { content: "" !important; display: none !important; }' +

  '.' + pseudoHide + '-after:after { content: "" !important; display: none !important; }';



  body.appendChild(hidePseudoElements);



  images = images || {};



  function documentWidth () {

    return Math.max(

      Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth),

      Math.max(doc.body.offsetWidth, doc.documentElement.offsetWidth),

      Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)

      );

  }



  function documentHeight () {

    return Math.max(

      Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight),

      Math.max(doc.body.offsetHeight, doc.documentElement.offsetHeight),

      Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

      );

  }



  function getCSSInt(element, attribute) {

    var val = parseInt(getCSS(element, attribute), 10);

    return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html

  }



  function renderRect (ctx, x, y, w, h, bgcolor) {

    if (bgcolor !== "transparent"){

      ctx.setVariable("fillStyle", bgcolor);

      ctx.fillRect(x, y, w, h);

      numDraws+=1;

    }

  }



  function capitalize(m, p1, p2) {

    if (m.length > 0) {

      return p1 + p2.toUpperCase();

    }

  }



  function textTransform (text, transform) {

    switch(transform){

      case "lowercase":

        return text.toLowerCase();

      case "capitalize":

        return text.replace( /(^|\s|:|-|\(|\))([a-z])/g, capitalize);

      case "uppercase":

        return text.toUpperCase();

      default:

        return text;

    }

  }



  function noLetterSpacing(letter_spacing) {

    return (/^(normal|none|0px)$/.test(letter_spacing));

  }



  function drawText(currentText, x, y, ctx){

    if (currentText !== null && Util.trimText(currentText).length > 0) {

      ctx.fillText(currentText, x, y);

      numDraws+=1;

    }

  }



  function setTextVariables(ctx, el, text_decoration, color) {

    var align = false,

    bold = getCSS(el, "fontWeight"),

    family = getCSS(el, "fontFamily"),

    size = getCSS(el, "fontSize"),

    shadows = Util.parseTextShadows(getCSS(el, "textShadow"));



    switch(parseInt(bold, 10)){

      case 401:

        bold = "bold";

        break;

      case 400:

        bold = "normal";

        break;

    }



    ctx.setVariable("fillStyle", color);

    ctx.setVariable("font", [getCSS(el, "fontStyle"), getCSS(el, "fontVariant"), bold, size, family].join(" "));

    ctx.setVariable("textAlign", (align) ? "right" : "left");



    if (shadows.length) {

      // TODO: support multiple text shadows

      // apply the first text shadow

      ctx.setVariable("shadowColor", shadows[0].color);

      ctx.setVariable("shadowOffsetX", shadows[0].offsetX);

      ctx.setVariable("shadowOffsetY", shadows[0].offsetY);

      ctx.setVariable("shadowBlur", shadows[0].blur);

    }



    if (text_decoration !== "none"){

      return Util.Font(family, size, doc);

    }

  }



  function renderTextDecoration(ctx, text_decoration, bounds, metrics, color) {

    switch(text_decoration) {

      case "underline":

        // Draws a line at the baseline of the font

        // TODO As some browsers display the line as more than 1px if the font-size is big, need to take that into account both in position and size

        renderRect(ctx, bounds.left, Math.round(bounds.top + metrics.baseline + metrics.lineWidth), bounds.width, 1, color);

        break;

      case "overline":

        renderRect(ctx, bounds.left, Math.round(bounds.top), bounds.width, 1, color);

        break;

      case "line-through":

        // TODO try and find exact position for line-through

        renderRect(ctx, bounds.left, Math.ceil(bounds.top + metrics.middle + metrics.lineWidth), bounds.width, 1, color);

        break;

    }

  }



  function getTextBounds(state, text, textDecoration, isLast, transform) {

    var bounds;

    if (support.rangeBounds && !transform) {

      if (textDecoration !== "none" || Util.trimText(text).length !== 0) {

        bounds = textRangeBounds(text, state.node, state.textOffset);

      }

      state.textOffset += text.length;

    } else if (state.node && typeof state.node.nodeValue === "string" ){

      var newTextNode = (isLast) ? state.node.splitText(text.length) : null;

      bounds = textWrapperBounds(state.node, transform);

      state.node = newTextNode;

    }

    return bounds;

  }



  function textRangeBounds(text, textNode, textOffset) {

    var range = doc.createRange();

    range.setStart(textNode, textOffset);

    range.setEnd(textNode, textOffset + text.length);

    return range.getBoundingClientRect();

  }



  function textWrapperBounds(oldTextNode, transform) {

    var parent = oldTextNode.parentNode,

    wrapElement = doc.createElement('wrapper'),

    backupText = oldTextNode.cloneNode(true);



    wrapElement.appendChild(oldTextNode.cloneNode(true));

    parent.replaceChild(wrapElement, oldTextNode);



    var bounds = transform ? Util.OffsetBounds(wrapElement) : Util.Bounds(wrapElement);

    parent.replaceChild(backupText, wrapElement);

    return bounds;

  }



  function renderText(el, textNode, stack) {

    var ctx = stack.ctx,

    color = getCSS(el, "color"),

    textDecoration = getCSS(el, "textDecoration"),

    textAlign = getCSS(el, "textAlign"),

    metrics,

    textList,

    state = {

      node: textNode,

      textOffset: 0

    };



    if (Util.trimText(textNode.nodeValue).length > 0) {

      textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform"));

      textAlign = textAlign.replace(["-webkit-auto"],["auto"]);



      textList = (!options.letterRendering && /^(left|right|justify|auto)$/.test(textAlign) && noLetterSpacing(getCSS(el, "letterSpacing"))) ?

      textNode.nodeValue.split(/(\b| )/)

      : textNode.nodeValue.split("");



      metrics = setTextVariables(ctx, el, textDecoration, color);



      if (options.chinese) {

        textList.forEach(function(word, index) {

          if (/.*[\u4E00-\u9FA5].*$/.test(word)) {

            word = word.split("");

            word.unshift(index, 1);

            textList.splice.apply(textList, word);

          }

        });

      }



      textList.forEach(function(text, index) {

        var bounds = getTextBounds(state, text, textDecoration, (index < textList.length - 1), stack.transform.matrix);

        if (bounds) {

          drawText(text, bounds.left, bounds.bottom, ctx);

          renderTextDecoration(ctx, textDecoration, bounds, metrics, color);

        }

      });

    }

  }



  function listPosition (element, val) {

    var boundElement = doc.createElement( "boundelement" ),

    originalType,

    bounds;



    boundElement.style.display = "inline";



    originalType = element.style.listStyleType;

    element.style.listStyleType = "none";



    boundElement.appendChild(doc.createTextNode(val));



    element.insertBefore(boundElement, element.firstChild);



    bounds = Util.Bounds(boundElement);

    element.removeChild(boundElement);

    element.style.listStyleType = originalType;

    return bounds;

  }



  function elementIndex(el) {

    var i = -1,

    count = 1,

    childs = el.parentNode.childNodes;



    if (el.parentNode) {

      while(childs[++i] !== el) {

        if (childs[i].nodeType === 1) {

          count++;

        }

      }

      return count;

    } else {

      return -1;

    }

  }



  function listItemText(element, type) {

    var currentIndex = elementIndex(element), text;

    switch(type){

      case "decimal":

        text = currentIndex;

        break;

      case "decimal-leading-zero":

        text = (currentIndex.toString().length === 1) ? currentIndex = "0" + currentIndex.toString() : currentIndex.toString();

        break;

      case "upper-roman":

        text = _html2canvas.Generate.ListRoman( currentIndex );

        break;

      case "lower-roman":

        text = _html2canvas.Generate.ListRoman( currentIndex ).toLowerCase();

        break;

      case "lower-alpha":

        text = _html2canvas.Generate.ListAlpha( currentIndex ).toLowerCase();

        break;

      case "upper-alpha":

        text = _html2canvas.Generate.ListAlpha( currentIndex );

        break;

    }



    return text + ". ";

  }



  function renderListItem(element, stack, elBounds) {

    var x,

    text,

    ctx = stack.ctx,

    type = getCSS(element, "listStyleType"),

    listBounds;



    if (/^(decimal|decimal-leading-zero|upper-alpha|upper-latin|upper-roman|lower-alpha|lower-greek|lower-latin|lower-roman)$/i.test(type)) {

      text = listItemText(element, type);

      listBounds = listPosition(element, text);

      setTextVariables(ctx, element, "none", getCSS(element, "color"));



      if (getCSS(element, "listStylePosition") === "inside") {

        ctx.setVariable("textAlign", "left");

        x = elBounds.left;

      } else {

        return;

      }



      drawText(text, x, listBounds.bottom, ctx);

    }

  }



  function loadImage (src){

    var img = images[src];

    return (img && img.succeeded === true) ? img.img : false;

  }



  function clipBounds(src, dst){

    var x = Math.max(src.left, dst.left),

    y = Math.max(src.top, dst.top),

    x2 = Math.min((src.left + src.width), (dst.left + dst.width)),

    y2 = Math.min((src.top + src.height), (dst.top + dst.height));



    return {

      left:x,

      top:y,

      width:x2-x,

      height:y2-y

    };

  }



  function setZ(element, stack, parentStack){

    var newContext,

    isPositioned = stack.cssPosition !== 'static',

    zIndex = isPositioned ? getCSS(element, 'zIndex') : 'auto',

    opacity = getCSS(element, 'opacity'),

    isFloated = getCSS(element, 'cssFloat') !== 'none';



    // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

    // When a new stacking context should be created:

    // the root element (HTML),

    // positioned (absolutely or relatively) with a z-index value other than "auto",

    // elements with an opacity value less than 1. (See the specification for opacity),

    // on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)



    stack.zIndex = newContext = h2czContext(zIndex);

    newContext.isPositioned = isPositioned;

    newContext.isFloated = isFloated;

    newContext.opacity = opacity;

    newContext.ownStacking = (zIndex !== 'auto' || opacity < 1);



    if (parentStack) {

      parentStack.zIndex.children.push(stack);

    }

  }



  function renderImage(ctx, element, image, bounds, borders) {



    var paddingLeft = getCSSInt(element, 'paddingLeft'),

    paddingTop = getCSSInt(element, 'paddingTop'),

    paddingRight = getCSSInt(element, 'paddingRight'),

    paddingBottom = getCSSInt(element, 'paddingBottom');



    drawImage(

      ctx,

      image,

      0, //sx

      0, //sy

      image.width, //sw

      image.height, //sh

      bounds.left + paddingLeft + borders[3].width, //dx

      bounds.top + paddingTop + borders[0].width, // dy

      bounds.width - (borders[1].width + borders[3].width + paddingLeft + paddingRight), //dw

      bounds.height - (borders[0].width + borders[2].width + paddingTop + paddingBottom) //dh

      );

  }



  function getBorderData(element) {

    return ["Top", "Right", "Bottom", "Left"].map(function(side) {

      return {

        width: getCSSInt(element, 'border' + side + 'Width'),

        color: getCSS(element, 'border' + side + 'Color')

      };

    });

  }



  function getBorderRadiusData(element) {

    return ["TopLeft", "TopRight", "BottomRight", "BottomLeft"].map(function(side) {

      return getCSS(element, 'border' + side + 'Radius');

    });

  }



  var getCurvePoints = (function(kappa) {



    return function(x, y, r1, r2) {

      var ox = (r1) * kappa, // control point offset horizontal

      oy = (r2) * kappa, // control point offset vertical

      xm = x + r1, // x-middle

      ym = y + r2; // y-middle

      return {

        topLeft: bezierCurve({

          x:x,

          y:ym

        }, {

          x:x,

          y:ym - oy

        }, {

          x:xm - ox,

          y:y

        }, {

          x:xm,

          y:y

        }),

        topRight: bezierCurve({

          x:x,

          y:y

        }, {

          x:x + ox,

          y:y

        }, {

          x:xm,

          y:ym - oy

        }, {

          x:xm,

          y:ym

        }),

        bottomRight: bezierCurve({

          x:xm,

          y:y

        }, {

          x:xm,

          y:y + oy

        }, {

          x:x + ox,

          y:ym

        }, {

          x:x,

          y:ym

        }),

        bottomLeft: bezierCurve({

          x:xm,

          y:ym

        }, {

          x:xm - ox,

          y:ym

        }, {

          x:x,

          y:y + oy

        }, {

          x:x,

          y:y

        })

      };

    };

  })(4 * ((Math.sqrt(2) - 1) / 3));



  function bezierCurve(start, startControl, endControl, end) {



    var lerp = function (a, b, t) {

      return {

        x:a.x + (b.x - a.x) * t,

        y:a.y + (b.y - a.y) * t

      };

    };



    return {

      start: start,

      startControl: startControl,

      endControl: endControl,

      end: end,

      subdivide: function(t) {

        var ab = lerp(start, startControl, t),

        bc = lerp(startControl, endControl, t),

        cd = lerp(endControl, end, t),

        abbc = lerp(ab, bc, t),

        bccd = lerp(bc, cd, t),

        dest = lerp(abbc, bccd, t);

        return [bezierCurve(start, ab, abbc, dest), bezierCurve(dest, bccd, cd, end)];

      },

      curveTo: function(borderArgs) {

        borderArgs.push(["bezierCurve", startControl.x, startControl.y, endControl.x, endControl.y, end.x, end.y]);

      },

      curveToReversed: function(borderArgs) {

        borderArgs.push(["bezierCurve", endControl.x, endControl.y, startControl.x, startControl.y, start.x, start.y]);

      }

    };

  }



  function parseCorner(borderArgs, radius1, radius2, corner1, corner2, x, y) {

    if (radius1[0] > 0 || radius1[1] > 0) {

      borderArgs.push(["line", corner1[0].start.x, corner1[0].start.y]);

      corner1[0].curveTo(borderArgs);

      corner1[1].curveTo(borderArgs);

    } else {

      borderArgs.push(["line", x, y]);

    }



    if (radius2[0] > 0 || radius2[1] > 0) {

      borderArgs.push(["line", corner2[0].start.x, corner2[0].start.y]);

    }

  }



  function drawSide(borderData, radius1, radius2, outer1, inner1, outer2, inner2) {

    var borderArgs = [];



    if (radius1[0] > 0 || radius1[1] > 0) {

      borderArgs.push(["line", outer1[1].start.x, outer1[1].start.y]);

      outer1[1].curveTo(borderArgs);

    } else {

      borderArgs.push([ "line", borderData.c1[0], borderData.c1[1]]);

    }



    if (radius2[0] > 0 || radius2[1] > 0) {

      borderArgs.push(["line", outer2[0].start.x, outer2[0].start.y]);

      outer2[0].curveTo(borderArgs);

      borderArgs.push(["line", inner2[0].end.x, inner2[0].end.y]);

      inner2[0].curveToReversed(borderArgs);

    } else {

      borderArgs.push([ "line", borderData.c2[0], borderData.c2[1]]);

      borderArgs.push([ "line", borderData.c3[0], borderData.c3[1]]);

    }



    if (radius1[0] > 0 || radius1[1] > 0) {

      borderArgs.push(["line", inner1[1].end.x, inner1[1].end.y]);

      inner1[1].curveToReversed(borderArgs);

    } else {

      borderArgs.push([ "line", borderData.c4[0], borderData.c4[1]]);

    }



    return borderArgs;

  }



  function calculateCurvePoints(bounds, borderRadius, borders) {



    var x = bounds.left,

    y = bounds.top,

    width = bounds.width,

    height = bounds.height,



    tlh = borderRadius[0][0],

    tlv = borderRadius[0][1],

    trh = borderRadius[1][0],

    trv = borderRadius[1][1],

    brh = borderRadius[2][0],

    brv = borderRadius[2][1],

    blh = borderRadius[3][0],

    blv = borderRadius[3][1],



    topWidth = width - trh,

    rightHeight = height - brv,

    bottomWidth = width - brh,

    leftHeight = height - blv;



    return {

      topLeftOuter: getCurvePoints(

        x,

        y,

        tlh,

        tlv

        ).topLeft.subdivide(0.5),



      topLeftInner: getCurvePoints(

        x + borders[3].width,

        y + borders[0].width,

        Math.max(0, tlh - borders[3].width),

        Math.max(0, tlv - borders[0].width)

        ).topLeft.subdivide(0.5),



      topRightOuter: getCurvePoints(

        x + topWidth,

        y,

        trh,

        trv

        ).topRight.subdivide(0.5),



      topRightInner: getCurvePoints(

        x + Math.min(topWidth, width + borders[3].width),

        y + borders[0].width,

        (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width,

        trv - borders[0].width

        ).topRight.subdivide(0.5),



      bottomRightOuter: getCurvePoints(

        x + bottomWidth,

        y + rightHeight,

        brh,

        brv

        ).bottomRight.subdivide(0.5),



      bottomRightInner: getCurvePoints(

        x + Math.min(bottomWidth, width + borders[3].width),

        y + Math.min(rightHeight, height + borders[0].width),

        Math.max(0, brh - borders[1].width),

        Math.max(0, brv - borders[2].width)

        ).bottomRight.subdivide(0.5),



      bottomLeftOuter: getCurvePoints(

        x,

        y + leftHeight,

        blh,

        blv

        ).bottomLeft.subdivide(0.5),



      bottomLeftInner: getCurvePoints(

        x + borders[3].width,

        y + leftHeight,

        Math.max(0, blh - borders[3].width),

        Math.max(0, blv - borders[2].width)

        ).bottomLeft.subdivide(0.5)

    };

  }



  function getBorderClip(element, borderPoints, borders, radius, bounds) {

    var backgroundClip = getCSS(element, 'backgroundClip'),

    borderArgs = [];



    switch(backgroundClip) {

      case "content-box":

      case "padding-box":

        parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftInner, borderPoints.topRightInner, bounds.left + borders[3].width, bounds.top + borders[0].width);

        parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightInner, borderPoints.bottomRightInner, bounds.left + bounds.width - borders[1].width, bounds.top + borders[0].width);

        parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightInner, borderPoints.bottomLeftInner, bounds.left + bounds.width - borders[1].width, bounds.top + bounds.height - borders[2].width);

        parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftInner, borderPoints.topLeftInner, bounds.left + borders[3].width, bounds.top + bounds.height - borders[2].width);

        break;



      default:

        parseCorner(borderArgs, radius[0], radius[1], borderPoints.topLeftOuter, borderPoints.topRightOuter, bounds.left, bounds.top);

        parseCorner(borderArgs, radius[1], radius[2], borderPoints.topRightOuter, borderPoints.bottomRightOuter, bounds.left + bounds.width, bounds.top);

        parseCorner(borderArgs, radius[2], radius[3], borderPoints.bottomRightOuter, borderPoints.bottomLeftOuter, bounds.left + bounds.width, bounds.top + bounds.height);

        parseCorner(borderArgs, radius[3], radius[0], borderPoints.bottomLeftOuter, borderPoints.topLeftOuter, bounds.left, bounds.top + bounds.height);

        break;

    }



    return borderArgs;

  }



  function parseBorders(element, bounds, borders){

    var x = bounds.left,

    y = bounds.top,

    width = bounds.width,

    height = bounds.height,

    borderSide,

    bx,

    by,

    bw,

    bh,

    borderArgs,

    // http://www.w3.org/TR/css3-background/#the-border-radius

    borderRadius = getBorderRadiusData(element),

    borderPoints = calculateCurvePoints(bounds, borderRadius, borders),

    borderData = {

      clip: getBorderClip(element, borderPoints, borders, borderRadius, bounds),

      borders: []

    };



    for (borderSide = 0; borderSide < 4; borderSide++) {



      if (borders[borderSide].width > 0) {

        bx = x;

        by = y;

        bw = width;

        bh = height - (borders[2].width);



        switch(borderSide) {

          case 0:

            // top border

            bh = borders[0].width;



            borderArgs = drawSide({

              c1: [bx, by],

              c2: [bx + bw, by],

              c3: [bx + bw - borders[1].width, by + bh],

              c4: [bx + borders[3].width, by + bh]

            }, borderRadius[0], borderRadius[1],

            borderPoints.topLeftOuter, borderPoints.topLeftInner, borderPoints.topRightOuter, borderPoints.topRightInner);

            break;

          case 1:

            // right border

            bx = x + width - (borders[1].width);

            bw = borders[1].width;



            borderArgs = drawSide({

              c1: [bx + bw, by],

              c2: [bx + bw, by + bh + borders[2].width],

              c3: [bx, by + bh],

              c4: [bx, by + borders[0].width]

            }, borderRadius[1], borderRadius[2],

            borderPoints.topRightOuter, borderPoints.topRightInner, borderPoints.bottomRightOuter, borderPoints.bottomRightInner);

            break;

          case 2:

            // bottom border

            by = (by + height) - (borders[2].width);

            bh = borders[2].width;



            borderArgs = drawSide({

              c1: [bx + bw, by + bh],

              c2: [bx, by + bh],

              c3: [bx + borders[3].width, by],

              c4: [bx + bw - borders[3].width, by]

            }, borderRadius[2], borderRadius[3],

            borderPoints.bottomRightOuter, borderPoints.bottomRightInner, borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner);

            break;

          case 3:

            // left border

            bw = borders[3].width;



            borderArgs = drawSide({

              c1: [bx, by + bh + borders[2].width],

              c2: [bx, by],

              c3: [bx + bw, by + borders[0].width],

              c4: [bx + bw, by + bh]

            }, borderRadius[3], borderRadius[0],

            borderPoints.bottomLeftOuter, borderPoints.bottomLeftInner, borderPoints.topLeftOuter, borderPoints.topLeftInner);

            break;

        }



        borderData.borders.push({

          args: borderArgs,

          color: borders[borderSide].color

        });



      }

    }



    return borderData;

  }



  function createShape(ctx, args) {

    var shape = ctx.drawShape();

    args.forEach(function(border, index) {

      shape[(index === 0) ? "moveTo" : border[0] + "To" ].apply(null, border.slice(1));

    });

    return shape;

  }



  function renderBorders(ctx, borderArgs, color) {

    if (color !== "transparent") {

      ctx.setVariable( "fillStyle", color);

      createShape(ctx, borderArgs);

      ctx.fill();

      numDraws+=1;

    }

  }



  function renderFormValue (el, bounds, stack){



    var valueWrap = doc.createElement('valuewrap'),

    cssPropertyArray = ['lineHeight','textAlign','fontFamily','color','fontSize','paddingLeft','paddingTop','width','height','border','borderLeftWidth','borderTopWidth'],

    textValue,

    textNode;



    cssPropertyArray.forEach(function(property) {

      try {

        valueWrap.style[property] = getCSS(el, property);

      } catch(e) {

        // Older IE has issues with "border"

        Util.log("html2canvas: Parse: Exception caught in renderFormValue: " + e.message);

      }

    });



    valueWrap.style.borderColor = "black";

    valueWrap.style.borderStyle = "solid";

    valueWrap.style.display = "block";

    valueWrap.style.position = "absolute";



    if (/^(submit|reset|button|text|password)$/.test(el.type) || el.nodeName === "SELECT"){

      valueWrap.style.lineHeight = getCSS(el, "height");

    }



    valueWrap.style.top = bounds.top + "px";

    valueWrap.style.left = bounds.left + "px";



    textValue = (el.nodeName === "SELECT") ? (el.options[el.selectedIndex] || 0).text : el.value;

    if(!textValue) {

      textValue = el.placeholder;

    }



    textNode = doc.createTextNode(textValue);



    valueWrap.appendChild(textNode);

    body.appendChild(valueWrap);



    renderText(el, textNode, stack);

    body.removeChild(valueWrap);

  }



  function drawImage (ctx) {

    ctx.drawImage.apply(ctx, Array.prototype.slice.call(arguments, 1));

    numDraws+=1;

  }



  function getPseudoElement(el, which) {

    var elStyle = window.getComputedStyle(el, which);

    if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content" || elStyle.display === "none") {

      return;

    }

    var content = elStyle.content + '',

    first = content.substr( 0, 1 );

    //strips quotes

    if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) {

      content = content.substr( 1, content.length - 2 );

    }



    var isImage = content.substr( 0, 3 ) === 'url',

    elps = document.createElement( isImage ? 'img' : 'span' );



    elps.className = pseudoHide + "-before " + pseudoHide + "-after";



    Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {

      // Prevent assigning of read only CSS Rules, ex. length, parentRule

      try {

        elps.style[prop] = elStyle[prop];

      } catch (e) {

        Util.log(['Tried to assign readonly property ', prop, 'Error:', e]);

      }

    });



    if(isImage) {

      elps.src = Util.parseBackgroundImage(content)[0].args[0];

    } else {

      elps.innerHTML = content;

    }

    return elps;

  }



  function indexedProperty(property) {

    return (isNaN(window.parseInt(property, 10)));

  }



  function injectPseudoElements(el, stack) {

    var before = getPseudoElement(el, ':before'),

    after = getPseudoElement(el, ':after');

    if(!before && !after) {

      return;

    }



    if(before) {

      el.className += " " + pseudoHide + "-before";

      el.parentNode.insertBefore(before, el);

      parseElement(before, stack, true);

      el.parentNode.removeChild(before);

      el.className = el.className.replace(pseudoHide + "-before", "").trim();

    }



    if (after) {

      el.className += " " + pseudoHide + "-after";

      el.appendChild(after);

      parseElement(after, stack, true);

      el.removeChild(after);

      el.className = el.className.replace(pseudoHide + "-after", "").trim();

    }



  }



  function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) {

    var offsetX = Math.round(bounds.left + backgroundPosition.left),

    offsetY = Math.round(bounds.top + backgroundPosition.top);



    ctx.createPattern(image);

    ctx.translate(offsetX, offsetY);

    ctx.fill();

    ctx.translate(-offsetX, -offsetY);

  }



  function backgroundRepeatShape(ctx, image, backgroundPosition, bounds, left, top, width, height) {

    var args = [];

    args.push(["line", Math.round(left), Math.round(top)]);

    args.push(["line", Math.round(left + width), Math.round(top)]);

    args.push(["line", Math.round(left + width), Math.round(height + top)]);

    args.push(["line", Math.round(left), Math.round(height + top)]);

    createShape(ctx, args);

    ctx.save();

    ctx.clip();

    renderBackgroundRepeat(ctx, image, backgroundPosition, bounds);

    ctx.restore();

  }



  function renderBackgroundColor(ctx, backgroundBounds, bgcolor) {

    renderRect(

      ctx,

      backgroundBounds.left,

      backgroundBounds.top,

      backgroundBounds.width,

      backgroundBounds.height,

      bgcolor

      );

  }



  function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {

    var backgroundSize = Util.BackgroundSize(el, bounds, image, imageIndex),

    backgroundPosition = Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),

    backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(Util.trimText);



    image = resizeImage(image, backgroundSize);



    backgroundRepeat = backgroundRepeat[imageIndex] || backgroundRepeat[0];



    switch (backgroundRepeat) {

      case "repeat-x":

        backgroundRepeatShape(ctx, image, backgroundPosition, bounds,

          bounds.left, bounds.top + backgroundPosition.top, 99999, image.height);

        break;



      case "repeat-y":

        backgroundRepeatShape(ctx, image, backgroundPosition, bounds,

          bounds.left + backgroundPosition.left, bounds.top, image.width, 99999);

        break;



      case "no-repeat":

        backgroundRepeatShape(ctx, image, backgroundPosition, bounds,

          bounds.left + backgroundPosition.left, bounds.top + backgroundPosition.top, image.width, image.height);

        break;



      default:

        renderBackgroundRepeat(ctx, image, backgroundPosition, {

          top: bounds.top,

          left: bounds.left,

          width: image.width,

          height: image.height

        });

        break;

    }

  }



  function renderBackgroundImage(element, bounds, ctx) {

    var backgroundImage = getCSS(element, "backgroundImage"),

    backgroundImages = Util.parseBackgroundImage(backgroundImage),

    image,

    imageIndex = backgroundImages.length;



    while(imageIndex--) {

      backgroundImage = backgroundImages[imageIndex];



      if (!backgroundImage.args || backgroundImage.args.length === 0) {

        continue;

      }



      var key = backgroundImage.method === 'url' ?

      backgroundImage.args[0] :

      backgroundImage.value;



      image = loadImage(key);



      // TODO add support for background-origin

      if (image) {

        renderBackgroundRepeating(element, bounds, ctx, image, imageIndex);

      } else {

        Util.log("html2canvas: Error loading background:", backgroundImage);

      }

    }

  }



  function resizeImage(image, bounds) {

    if(image.width === bounds.width && image.height === bounds.height) {

      return image;

    }



    var ctx, canvas = doc.createElement('canvas');

    canvas.width = bounds.width;

    canvas.height = bounds.height;

    ctx = canvas.getContext("2d");

    drawImage(ctx, image, 0, 0, image.width, image.height, 0, 0, bounds.width, bounds.height );

    return canvas;

  }



  function setOpacity(ctx, element, parentStack) {

    return ctx.setVariable("globalAlpha", getCSS(element, "opacity") * ((parentStack) ? parentStack.opacity : 1));

  }



  function removePx(str) {

    return str.replace("px", "");

  }



  var transformRegExp = /(matrix)\((.+)\)/;



  function getTransform(element, parentStack) {

    var transform = getCSS(element, "transform") || getCSS(element, "-webkit-transform") || getCSS(element, "-moz-transform") || getCSS(element, "-ms-transform") || getCSS(element, "-o-transform");

    var transformOrigin = getCSS(element, "transform-origin") || getCSS(element, "-webkit-transform-origin") || getCSS(element, "-moz-transform-origin") || getCSS(element, "-ms-transform-origin") || getCSS(element, "-o-transform-origin") || "0px 0px";



    transformOrigin = transformOrigin.split(" ").map(removePx).map(Util.asFloat);



    var matrix;

    if (transform && transform !== "none") {

      var match = transform.match(transformRegExp);

      if (match) {

        switch(match[1]) {

          case "matrix":

            matrix = match[2].split(",").map(Util.trimText).map(Util.asFloat);

            break;

        }

      }

    }



    return {

      origin: transformOrigin,

      matrix: matrix

    };

  }



  function createStack(element, parentStack, bounds, transform) {

    var ctx = h2cRenderContext((!parentStack) ? documentWidth() : bounds.width , (!parentStack) ? documentHeight() : bounds.height),

    stack = {

      ctx: ctx,

      opacity: setOpacity(ctx, element, parentStack),

      cssPosition: getCSS(element, "position"),

      borders: getBorderData(element),

      transform: transform,

      clip: (parentStack && parentStack.clip) ? Util.Extend( {}, parentStack.clip ) : null

    };



    setZ(element, stack, parentStack);



    // TODO correct overflow for absolute content residing under a static position

    if (options.useOverflow === true && /(hidden|scroll|auto)/.test(getCSS(element, "overflow")) === true && /(BODY)/i.test(element.nodeName) === false){

      stack.clip = (stack.clip) ? clipBounds(stack.clip, bounds) : bounds;

    }



    return stack;

  }



  function getBackgroundBounds(borders, bounds, clip) {

    var backgroundBounds = {

      left: bounds.left + borders[3].width,

      top: bounds.top + borders[0].width,

      width: bounds.width - (borders[1].width + borders[3].width),

      height: bounds.height - (borders[0].width + borders[2].width)

    };



    if (clip) {

      backgroundBounds = clipBounds(backgroundBounds, clip);

    }



    return backgroundBounds;

  }



  function getBounds(element, transform) {

    var bounds = (transform.matrix) ? Util.OffsetBounds(element) : Util.Bounds(element);

    transform.origin[0] += bounds.left;

    transform.origin[1] += bounds.top;

    return bounds;

  }



  function renderElement(element, parentStack, pseudoElement, ignoreBackground) {

    var transform = getTransform(element, parentStack),

    bounds = getBounds(element, transform),

    image,

    stack = createStack(element, parentStack, bounds, transform),

    borders = stack.borders,

    ctx = stack.ctx,

    backgroundBounds = getBackgroundBounds(borders, bounds, stack.clip),

    borderData = parseBorders(element, bounds, borders),

    backgroundColor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor");





    createShape(ctx, borderData.clip);



    ctx.save();

    ctx.clip();



    if (backgroundBounds.height > 0 && backgroundBounds.width > 0 && !ignoreBackground) {

      renderBackgroundColor(ctx, bounds, backgroundColor);

      renderBackgroundImage(element, backgroundBounds, ctx);

    } else if (ignoreBackground) {

      stack.backgroundColor =  backgroundColor;

    }



    ctx.restore();



    borderData.borders.forEach(function(border) {

      renderBorders(ctx, border.args, border.color);

    });



    if (!pseudoElement) {

      injectPseudoElements(element, stack);

    }



    switch(element.nodeName){

      case "IMG":

        if ((image = loadImage(element.getAttribute('src')))) {

          renderImage(ctx, element, image, bounds, borders);

        } else {

          Util.log("html2canvas: Error loading <img>:" + element.getAttribute('src'));

        }

        break;

      case "INPUT":

        // TODO add all relevant type's, i.e. HTML5 new stuff

        // todo add support for placeholder attribute for browsers which support it

        if (/^(text|url|email|submit|button|reset)$/.test(element.type) && (element.value || element.placeholder || "").length > 0){

          renderFormValue(element, bounds, stack);

        }

        break;

      case "TEXTAREA":

        if ((element.value || element.placeholder || "").length > 0){

          renderFormValue(element, bounds, stack);

        }

        break;

      case "SELECT":

        if ((element.options||element.placeholder || "").length > 0){

          renderFormValue(element, bounds, stack);

        }

        break;

      case "LI":

        renderListItem(element, stack, backgroundBounds);

        break;

      case "CANVAS":

        renderImage(ctx, element, element, bounds, borders);

        break;

    }



    return stack;

  }



  function isElementVisible(element) {

    return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));

  }



  function parseElement (element, stack, pseudoElement) {

    if (isElementVisible(element)) {

      stack = renderElement(element, stack, pseudoElement, false) || stack;

      if (!ignoreElementsRegExp.test(element.nodeName)) {

        parseChildren(element, stack, pseudoElement);

      }

    }

  }



  function parseChildren(element, stack, pseudoElement) {

    Util.Children(element).forEach(function(node) {

      if (node.nodeType === node.ELEMENT_NODE) {

        parseElement(node, stack, pseudoElement);

      } else if (node.nodeType === node.TEXT_NODE) {

        renderText(element, node, stack);

      }

    });

  }



  function init() {

    var background = getCSS(document.documentElement, "backgroundColor"),

      transparentBackground = (Util.isTransparent(background) && element === document.body),

      stack = renderElement(element, null, false, transparentBackground);

    parseChildren(element, stack);



    if (transparentBackground) {

      background = stack.backgroundColor;

    }



    body.removeChild(hidePseudoElements);

    return {

      backgroundColor: background,

      stack: stack

    };

  }



  return init();

};



function h2czContext(zindex) {

  return {

    zindex: zindex,

    children: []

  };

}



_html2canvas.Preload = function( options ) {



  var images = {

    numLoaded: 0,   // also failed are counted here

    numFailed: 0,

    numTotal: 0,

    cleanupDone: false

  },

  pageOrigin,

  Util = _html2canvas.Util,

  methods,

  i,

  count = 0,

  element = options.elements[0] || document.body,

  doc = element.ownerDocument,

  domImages = element.getElementsByTagName('img'), // Fetch images of the present element only

  imgLen = domImages.length,

  link = doc.createElement("a"),

  supportCORS = (function( img ){

    return (img.crossOrigin !== undefined);

  })(new Image()),

  timeoutTimer;



  link.href = window.location.href;

  pageOrigin  = link.protocol + link.host;



  function isSameOrigin(url){

    link.href = url;

    link.href = link.href; // YES, BELIEVE IT OR NOT, that is required for IE9 - http://jsfiddle.net/niklasvh/2e48b/

    var origin = link.protocol + link.host;

    return (origin === pageOrigin);

  }



  function start(){

    Util.log("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");

    if (!images.firstRun && images.numLoaded >= images.numTotal){

      Util.log("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");



      if (typeof options.complete === "function"){

        options.complete(images);

      }



    }

  }



  // TODO modify proxy to serve images with CORS enabled, where available

  function proxyGetImage(url, img, imageObj){

    var callback_name,

    scriptUrl = options.proxy,

    script;



    link.href = url;

    url = link.href; // work around for pages with base href="" set - WARNING: this may change the url



    callback_name = 'html2canvas_' + (count++);

    imageObj.callbackname = callback_name;



    if (scriptUrl.indexOf("?") > -1) {

      scriptUrl += "&";

    } else {

      scriptUrl += "?";

    }

    scriptUrl += 'url=' + encodeURIComponent(url) + '&callback=' + callback_name;

    script = doc.createElement("script");



    window[callback_name] = function(a){

      if (a.substring(0,6) === "error:"){

        imageObj.succeeded = false;

        images.numLoaded++;

        images.numFailed++;

        start();

      } else {

        setImageLoadHandlers(img, imageObj);

        img.src = a;

      }

      window[callback_name] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)

      try {

        delete window[callback_name];  // for all browser that support this

      } catch(ex) {}

      script.parentNode.removeChild(script);

      script = null;

      delete imageObj.script;

      delete imageObj.callbackname;

    };



    script.setAttribute("type", "text/javascript");

    script.setAttribute("src", scriptUrl);

    imageObj.script = script;

    window.document.body.appendChild(script);



  }



  function loadPseudoElement(element, type) {

    var style = window.getComputedStyle(element, type),

    content = style.content;

    if (content.substr(0, 3) === 'url') {

      methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]);

    }

    loadBackgroundImages(style.backgroundImage, element);

  }



  function loadPseudoElementImages(element) {

    loadPseudoElement(element, ":before");

    loadPseudoElement(element, ":after");

  }



  function loadGradientImage(backgroundImage, bounds) {

    var img = _html2canvas.Generate.Gradient(backgroundImage, bounds);



    if (img !== undefined){

      images[backgroundImage] = {

        img: img,

        succeeded: true

      };

      images.numTotal++;

      images.numLoaded++;

      start();

    }

  }



  function invalidBackgrounds(background_image) {

    return (background_image && background_image.method && background_image.args && background_image.args.length > 0 );

  }



  function loadBackgroundImages(background_image, el) {

    var bounds;



    _html2canvas.Util.parseBackgroundImage(background_image).filter(invalidBackgrounds).forEach(function(background_image) {

      if (background_image.method === 'url') {

        methods.loadImage(background_image.args[0]);

      } else if(background_image.method.match(/\-?gradient$/)) {

        if(bounds === undefined) {

          bounds = _html2canvas.Util.Bounds(el);

        }

        loadGradientImage(background_image.value, bounds);

      }

    });

  }



  function getImages (el) {

    var elNodeType = false;



    // Firefox fails with permission denied on pages with iframes

    try {

      Util.Children(el).forEach(getImages);

    }

    catch( e ) {}



    try {

      elNodeType = el.nodeType;

    } catch (ex) {

      elNodeType = false;

      Util.log("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);

    }



    if (elNodeType === 1 || elNodeType === undefined) {

      loadPseudoElementImages(el);

      try {

        loadBackgroundImages(Util.getCSS(el, 'backgroundImage'), el);

      } catch(e) {

        Util.log("html2canvas: failed to get background-image - Exception: " + e.message);

      }

      loadBackgroundImages(el);

    }

  }



  function setImageLoadHandlers(img, imageObj) {

    img.onload = function() {

      if ( imageObj.timer !== undefined ) {

        // CORS succeeded

        window.clearTimeout( imageObj.timer );

      }



      images.numLoaded++;

      imageObj.succeeded = true;

      img.onerror = img.onload = null;

      start();

    };

    img.onerror = function() {

      if (img.crossOrigin === "anonymous") {

        // CORS failed

        window.clearTimeout( imageObj.timer );



        // let's try with proxy instead

        if ( options.proxy ) {

          var src = img.src;

          img = new Image();

          imageObj.img = img;

          img.src = src;



          proxyGetImage( img.src, img, imageObj );

          return;

        }

      }



      images.numLoaded++;

      images.numFailed++;

      imageObj.succeeded = false;

      img.onerror = img.onload = null;

      start();

    };

  }



  methods = {

    loadImage: function( src ) {

      var img, imageObj;

      if ( src && images[src] === undefined ) {

        img = new Image();

        if ( src.match(/data:image\/.*;base64,/i) ) {

          img.src = src.replace(/url\(['"]{0,}|['"]{0,}\)$/ig, '');

          imageObj = images[src] = {

            img: img

          };

          images.numTotal++;

          setImageLoadHandlers(img, imageObj);

        } else if ( isSameOrigin( src ) || options.allowTaint ===  true ) {

          imageObj = images[src] = {

            img: img

          };

          images.numTotal++;

          setImageLoadHandlers(img, imageObj);

          img.src = src;

        } else if ( supportCORS && !options.allowTaint && options.useCORS ) {

          // attempt to load with CORS



          img.crossOrigin = "anonymous";

          imageObj = images[src] = {

            img: img

          };

          images.numTotal++;

          setImageLoadHandlers(img, imageObj);

          img.src = src;

        } else if ( options.proxy ) {

          imageObj = images[src] = {

            img: img

          };

          images.numTotal++;

          proxyGetImage( src, img, imageObj );

        }

      }



    },

    cleanupDOM: function(cause) {

      var img, src;

      if (!images.cleanupDone) {

        if (cause && typeof cause === "string") {

          Util.log("html2canvas: Cleanup because: " + cause);

        } else {

          Util.log("html2canvas: Cleanup after timeout: " + options.timeout + " ms.");

        }



        for (src in images) {

          if (images.hasOwnProperty(src)) {

            img = images[src];

            if (typeof img === "object" && img.callbackname && img.succeeded === undefined) {

              // cancel proxy image request

              window[img.callbackname] = undefined; // to work with IE<9  // NOTE: that the undefined callback property-name still exists on the window object (for IE<9)

              try {

                delete window[img.callbackname];  // for all browser that support this

              } catch(ex) {}

              if (img.script && img.script.parentNode) {

                img.script.setAttribute("src", "about:blank");  // try to cancel running request

                img.script.parentNode.removeChild(img.script);

              }

              images.numLoaded++;

              images.numFailed++;

              Util.log("html2canvas: Cleaned up failed img: '" + src + "' Steps: " + images.numLoaded + " / " + images.numTotal);

            }

          }

        }



        // cancel any pending requests

        if(window.stop !== undefined) {

          window.stop();

        } else if(document.execCommand !== undefined) {

          document.execCommand("Stop", false);

        }

        if (document.close !== undefined) {

          document.close();

        }

        images.cleanupDone = true;

        if (!(cause && typeof cause === "string")) {

          start();

        }

      }

    },



    renderingDone: function() {

      if (timeoutTimer) {

        window.clearTimeout(timeoutTimer);

      }

    }

  };



  if (options.timeout > 0) {

    timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);

  }



  Util.log('html2canvas: Preload starts: finding background-images');

  images.firstRun = true;



  getImages(element);



  Util.log('html2canvas: Preload: Finding images');

  // load <img> images

  for (i = 0; i < imgLen; i+=1){

    methods.loadImage( domImages[i].getAttribute( "src" ) );

  }



  images.firstRun = false;

  Util.log('html2canvas: Preload: Done.');

  if (images.numTotal === images.numLoaded) {

    start();

  }



  return methods;

};



_html2canvas.Renderer = function(parseQueue, options){



  // http://www.w3.org/TR/CSS21/zindex.html

  function createRenderQueue(parseQueue) {

    var queue = [],

    rootContext;



    rootContext = (function buildStackingContext(rootNode) {

      var rootContext = {};

      function insert(context, node, specialParent) {

        var zi = (node.zIndex.zindex === 'auto') ? 0 : Number(node.zIndex.zindex),

        contextForChildren = context, // the stacking context for children

        isPositioned = node.zIndex.isPositioned,

        isFloated = node.zIndex.isFloated,

        stub = {node: node},

        childrenDest = specialParent; // where children without z-index should be pushed into



        if (node.zIndex.ownStacking) {

          // '!' comes before numbers in sorted array

          contextForChildren = stub.context = { '!': [{node:node, children: []}]};

          childrenDest = undefined;

        } else if (isPositioned || isFloated) {

          childrenDest = stub.children = [];

        }



        if (zi === 0 && specialParent) {

          specialParent.push(stub);

        } else {

          if (!context[zi]) { context[zi] = []; }

          context[zi].push(stub);

        }



        node.zIndex.children.forEach(function(childNode) {

          insert(contextForChildren, childNode, childrenDest);

        });

      }

      insert(rootContext, rootNode);

      return rootContext;

    })(parseQueue);



    function sortZ(context) {

      Object.keys(context).sort().forEach(function(zi) {

        var nonPositioned = [],

        floated = [],

        positioned = [],

        list = [];



        // positioned after static

        context[zi].forEach(function(v) {

          if (v.node.zIndex.isPositioned || v.node.zIndex.opacity < 1) {

            // http://www.w3.org/TR/css3-color/#transparency

            // non-positioned element with opactiy < 1 should be stacked as if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.

            positioned.push(v);

          } else if (v.node.zIndex.isFloated) {

            floated.push(v);

          } else {

            nonPositioned.push(v);

          }

        });



        (function walk(arr) {

          arr.forEach(function(v) {

            list.push(v);

            if (v.children) { walk(v.children); }

          });

        })(nonPositioned.concat(floated, positioned));



        list.forEach(function(v) {

          if (v.context) {

            sortZ(v.context);

          } else {

            queue.push(v.node);

          }

        });

      });

    }



    sortZ(rootContext);



    return queue;

  }



  function getRenderer(rendererName) {

    var renderer;



    if (typeof options.renderer === "string" && _html2canvas.Renderer[rendererName] !== undefined) {

      renderer = _html2canvas.Renderer[rendererName](options);

    } else if (typeof rendererName === "function") {

      renderer = rendererName(options);

    } else {

      throw new Error("Unknown renderer");

    }



    if ( typeof renderer !== "function" ) {

      throw new Error("Invalid renderer defined");

    }

    return renderer;

  }



  return getRenderer(options.renderer)(parseQueue, options, document, createRenderQueue(parseQueue.stack), _html2canvas);

};



_html2canvas.Util.Support = function (options, doc) {



  function supportSVGRendering() {

    var img = new Image(),

    canvas = doc.createElement("canvas"),

    ctx = (canvas.getContext === undefined) ? false : canvas.getContext("2d");

    if (ctx === false) {

      return false;

    }

    canvas.width = canvas.height = 10;

    img.src = [

    "data:image/svg+xml,",

    "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>",

    "<foreignObject width='10' height='10'>",

    "<div xmlns='http://www.w3.org/1999/xhtml' style='width:10;height:10;'>",

    "sup",

    "</div>",

    "</foreignObject>",

    "</svg>"

    ].join("");

    try {

      ctx.drawImage(img, 0, 0);

      canvas.toDataURL();

    } catch(e) {

      return false;

    }

    _html2canvas.Util.log('html2canvas: Parse: SVG powered rendering available');

    return true;

  }



  // Test whether we can use ranges to measure bounding boxes

  // Opera doesn't provide valid bounds.height/bottom even though it supports the method.



  function supportRangeBounds() {

    var r, testElement, rangeBounds, rangeHeight, support = false;



    if (doc.createRange) {

      r = doc.createRange();

      if (r.getBoundingClientRect) {

        testElement = doc.createElement('boundtest');

        testElement.style.height = "123px";

        testElement.style.display = "block";

        doc.body.appendChild(testElement);



        r.selectNode(testElement);

        rangeBounds = r.getBoundingClientRect();

        rangeHeight = rangeBounds.height;



        if (rangeHeight === 123) {

          support = true;

        }

        doc.body.removeChild(testElement);

      }

    }



    return support;

  }



  return {

    rangeBounds: supportRangeBounds(),

    svgRendering: options.svgRendering && supportSVGRendering()

  };

};

window.html2canvas = function(elements, opts) {

  elements = (elements.length) ? elements : [elements];

  var queue,

  canvas,

  options = {

    // general

    logging: false,

    elements: elements,

    background: "#fff",



    // preload options

    proxy: null,

    timeout: 0,    // no timeout

    useCORS: false, // try to load images as CORS (where available), before falling back to proxy

    allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true



    // parse options

    svgRendering: false, // use svg powered rendering where available (FF11+)

    ignoreElements: "IFRAME|OBJECT|PARAM",

    useOverflow: true,

    letterRendering: false,

    chinese: false,



    // render options



    width: null,

    height: null,

    taintTest: true, // do a taint test with all images before applying to canvas

    renderer: "Canvas"

  };



  options = _html2canvas.Util.Extend(opts, options);



  _html2canvas.logging = options.logging;

  options.complete = function( images ) {



    if (typeof options.onpreloaded === "function") {

      if ( options.onpreloaded( images ) === false ) {

        return;

      }

    }

    queue = _html2canvas.Parse( images, options );



    if (typeof options.onparsed === "function") {

      if ( options.onparsed( queue ) === false ) {

        return;

      }

    }



    canvas = _html2canvas.Renderer( queue, options );



    if (typeof options.onrendered === "function") {

      options.onrendered( canvas );

    }





  };



  // for pages without images, we still want this to be async, i.e. return methods before executing

  window.setTimeout( function(){

    _html2canvas.Preload( options );

  }, 0 );



  return {

    render: function( queue, opts ) {

      return _html2canvas.Renderer( queue, _html2canvas.Util.Extend(opts, options) );

    },

    parse: function( images, opts ) {

      return _html2canvas.Parse( images, _html2canvas.Util.Extend(opts, options) );

    },

    preload: function( opts ) {

      return _html2canvas.Preload( _html2canvas.Util.Extend(opts, options) );

    },

    log: _html2canvas.Util.log

  };

};



window.html2canvas.log = _html2canvas.Util.log; // for renderers

window.html2canvas.Renderer = {

  Canvas: undefined // We are assuming this will be used

};

_html2canvas.Renderer.Canvas = function(options) {

  options = options || {};



  var doc = document,

  safeImages = [],

  testCanvas = document.createElement("canvas"),

  testctx = testCanvas.getContext("2d"),

  Util = _html2canvas.Util,

  canvas = options.canvas || doc.createElement('canvas');



  function createShape(ctx, args) {

    ctx.beginPath();

    args.forEach(function(arg) {

      ctx[arg.name].apply(ctx, arg['arguments']);

    });

    ctx.closePath();

  }



  function safeImage(item) {

    if (safeImages.indexOf(item['arguments'][0].src ) === -1) {

      testctx.drawImage(item['arguments'][0], 0, 0);

      try {

        testctx.getImageData(0, 0, 1, 1);

      } catch(e) {

        testCanvas = doc.createElement("canvas");

        testctx = testCanvas.getContext("2d");

        return false;

      }

      safeImages.push(item['arguments'][0].src);

    }

    return true;

  }



  function renderItem(ctx, item) {

    switch(item.type){

      case "variable":

        ctx[item.name] = item['arguments'];

        break;

      case "function":

        switch(item.name) {

          case "createPattern":

            if (item['arguments'][0].width > 0 && item['arguments'][0].height > 0) {

              try {

                ctx.fillStyle = ctx.createPattern(item['arguments'][0], "repeat");

              }

              catch(e) {

                Util.log("html2canvas: Renderer: Error creating pattern", e.message);

              }

            }

            break;

          case "drawShape":

            createShape(ctx, item['arguments']);

            break;

          case "drawImage":

            if (item['arguments'][8] > 0 && item['arguments'][7] > 0) {

              if (!options.taintTest || (options.taintTest && safeImage(item))) {

                ctx.drawImage.apply( ctx, item['arguments'] );

              }

            }

            break;

          default:

            ctx[item.name].apply(ctx, item['arguments']);

        }

        break;

    }

  }



  return function(parsedData, options, document, queue, _html2canvas) {

    var ctx = canvas.getContext("2d"),

    newCanvas,

    bounds,

    fstyle,

    zStack = parsedData.stack;



    canvas.width = canvas.style.width =  options.width || zStack.ctx.width;

    canvas.height = canvas.style.height = options.height || zStack.ctx.height;



    fstyle = ctx.fillStyle;

    ctx.fillStyle = (Util.isTransparent(zStack.backgroundColor) && options.background !== undefined) ? options.background : parsedData.backgroundColor;

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = fstyle;



    queue.forEach(function(storageContext) {

      // set common settings for canvas

      ctx.textBaseline = "bottom";

      ctx.save();



      if (storageContext.transform.matrix) {

        ctx.translate(storageContext.transform.origin[0], storageContext.transform.origin[1]);

        ctx.transform.apply(ctx, storageContext.transform.matrix);

        ctx.translate(-storageContext.transform.origin[0], -storageContext.transform.origin[1]);

      }



      if (storageContext.clip){

        ctx.beginPath();

        ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height);

        ctx.clip();

      }



      if (storageContext.ctx.storage) {

        storageContext.ctx.storage.forEach(function(item) {

          renderItem(ctx, item);

        });

      }



      ctx.restore();

    });



    Util.log("html2canvas: Renderer: Canvas renderer done - returning canvas obj");



    if (options.elements.length === 1) {

      if (typeof options.elements[0] === "object" && options.elements[0].nodeName !== "BODY") {

        // crop image to the bounds of selected (single) element

        bounds = _html2canvas.Util.Bounds(options.elements[0]);

        newCanvas = document.createElement('canvas');

        newCanvas.width = Math.ceil(bounds.width);

        newCanvas.height = Math.ceil(bounds.height);

        ctx = newCanvas.getContext("2d");



        ctx.drawImage(canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height);

        canvas = null;

        return newCanvas;

      }

    }



    return canvas;

  };

};

})(window,document);