rewrote z-index ordering logic

src/Core.js

@@ -53,6 +53,7 @@ function html2canvas(el, userOptions) {
     this.needReorder = false;
     this.blockElements = new RegExp("(BR|PARAM)");
     this.pageOrigin = window.location.protocol + window.location.host;
+    this.queue = [];
 
     this.ignoreRe = new RegExp("("+this.ignoreElements+")");
     

src/Draw.js

@@ -13,7 +13,9 @@ html2canvas.prototype.newElement = function(el,parentStack){
     var cssPosition = this.getCSS(el,"position");
     parentStack = parentStack || {};
 
-    var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
+    //var zindex = this.formatZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
+    
+    var zindex = this.setZ(this.getCSS(el,"zIndex"),cssPosition,parentStack.zIndex,el.parentNode);
     
     //console.log(el.nodeName+":"+zindex+":"+this.getCSS(el,"position")+":"+this.numDraws+":"+this.getCSS(el,"z-index"))
     
@@ -26,6 +28,8 @@ html2canvas.prototype.newElement = function(el,parentStack){
         opacity: opacity*parentStack.opacity,
         cssPosition: cssPosition
     };
+    
+    
  
     // TODO correct overflow for absolute content residing under a static position
     if (parentStack.clip){
@@ -45,11 +49,16 @@ html2canvas.prototype.newElement = function(el,parentStack){
 
 
     }   
-       
+     /*  
     var stackLength =  this.contextStacks.push(stack);
         
     var ctx = this.contextStacks[stackLength-1].ctx; 
+*/
 
+    var stackLength =  zindex.children.push(stack);
+        
+    var ctx = zindex.children[stackLength-1].ctx; 
+    
     this.setContextVariable(ctx,"globalAlpha",stack.opacity);  
 
     // draw element borders
@@ -163,8 +172,8 @@ html2canvas.prototype.newElement = function(el,parentStack){
     
          
 
-    return this.contextStacks[stackLength-1];
-
+   // return this.contextStacks[stackLength-1];
+   return zindex.children[stackLength-1];
 			
 				
 }

src/Renderer.js

@@ -260,10 +260,15 @@ html2canvas.prototype.canvasRenderStorage = function(queue,parentctx){
     }
 }
 
+
+
 html2canvas.prototype.canvasRenderer = function(queue){
     var _ = this;
+    this.sortZ(this.zStack);
+    queue = this.queue;
+    //console.log(queue);
 
-    queue = this.sortQueue(queue);
+    //queue = this.sortQueue(queue);
     
     
     

src/Util.js

@@ -121,13 +121,80 @@ html2canvas.prototype.extendObj = function(options,defaults){
     return defaults;           
 }
 
-
+/*
+ *todo remove this function
 html2canvas.prototype.leadingZero = function(num,size){
     
     var s = "000000000" + num;
     return s.substr(s.length-size);    
 }    
+*/
+
+html2canvas.prototype.zContext = function(zindex){
+    return {
+        zindex: zindex,
+        children: []
+    }
     
+}
+
+html2canvas.prototype.setZ = function(zindex,position,parentZ,parentNode){
+    // TODO fix static elements overlapping relative/absolute elements under same stack, if they are defined after them
+    if (!parentZ){
+        this.zStack = new this.zContext(0);
+        return this.zStack;
+    }
+    
+    if (zindex!="auto"){
+        this.needReorder = true;
+        var newContext = new this.zContext(zindex);
+        parentZ.children.push(newContext);
+        
+        return newContext;
+        
+    }else {
+        return parentZ;
+    }
+    
+}
+
+html2canvas.prototype.sortZ = function(zStack){
+    var subStacks = [];
+    var stackValues = [];
+    var _ = this;
+
+    this.each(zStack.children, function(i,stackChild){
+        if (stackChild.children && stackChild.children.length > 0){
+            subStacks.push(stackChild);
+            stackValues.push(stackChild.zindex);
+        }else{         
+            _.queue.push(stackChild);
+        }
+        
+    });
+    
+   
+    
+    stackValues.sort(function(a,b){return a - b});
+    
+    this.each(stackValues, function(i,zValue){
+          for (var s = 0;s<=subStacks.length;s++){
+              if (subStacks[s].zindex == zValue){
+                  var stackChild = subStacks.splice(s,1);
+                  _.sortZ(stackChild[0]);
+                  break;
+                  
+              }
+          }
+
+    });
+ 
+    
+}
+
+/*
+ *todo remove this function
+
 html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
     
     if (!parentZ){
@@ -145,9 +212,9 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
         if (parentPosition!="static" && typeof parentPosition != "undefined"){
             zindex = 0;
         }
-    /*else{
+    else{
             return parentZ;
-        }*/
+        }
     }
     
     var b = this.leadingZero(this.numDraws,9);  
@@ -161,6 +228,9 @@ html2canvas.prototype.formatZ = function(zindex,position,parentZ,parentNode){
     
     
 }
+    */
+    
+    
     
 /*
  * Get element childNodes