Dimensions

[pixel-calc.git] / public_html / breakdown.html

diff --git a/public_html/breakdown.html b/public_html/breakdown.html
index 2e3c3c0..cb9689a 100644 (file)
--- a/public_html/breakdown.html
+++ b/public_html/breakdown.html
@@ -28,8 +28,34 @@
                 clear: both;
             }
             
-            td.line-right {
-                border-right: 2px solid black;
+            .sprite td.line-left {
+                border-left: 2px solid transparent;
+            }
+            
+            .sprite td.line-top {
+                border-top: 2px solid transparent;
+            }
+            
+            .sprite.measurements td.line-left {
+                border-left: 2px solid black;
+            }
+            
+            .sprite.measurements td.line-top {
+                border-top: 2px solid black;
+            }
+            
+            .sprite .height {
+                visibility: hidden;
+                padding-left: 5px;
+            }
+            
+            .sprite .width {
+                visibility: hidden;
+                text-align:center;
+            }
+            
+            .sprite.measurements .height, .sprite.measurements .width {
+                visibility: visible;
             }
                         
             /*.sprite {
@@ -91,8 +117,32 @@
         </div>
         
         <script>
-            //$(".sprite").width());
-            $(".measurements tr").append("<td class='line-right'></td>")
+            padSprite = function(sprite) {
+                var height = $(".sprite:first table tr").length;
+                var width = $(".sprite:first table tr:first td").length;
+                
+                $(sprite).find('tr').each(function() {
+                    $(this).append("<td></td>");
+                });
+                
+                $(sprite).find('tr').each(function(){
+                    $(this).find('td').eq(0).before('<td></td>');
+                });
+            
+                for (var i=0; i<$(sprite).find("tr:last td").length; i++) {
+                    var cells = cells ? cells + '<td></td>' : '<tr><td></td>';
+                }
+                cells += "<td></td></tr><tr><td></td><td class=\"line-top width\" colspan=\"" + width + "\"><?php echo $sprite_width_cm; ?></td></tr>";
+                $(sprite).find("tr:last").after(cells);
+                        
+                $(sprite).find("tr:first td:last").after("<td class=\"line-left\ height\" rowspan=\"" + height + "\"><?php echo $sprite_height_cm; ?></td>")
+            };
+            
+            padSprite($(".measurements"));
+            $(".sprite:not(.measurements").each(function() {
+                padSprite(this);
+            });
+            
             var pixelSize = Math.floor($(".sprite:first").width()*0.75 / $(".sprite:first table tr:first td").length);
                         
             $(".sprite td").width(pixelSize);