zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/support.html.erb

@@ -0,0 +1,134 @@
+<style type="text/css">
+
+  .row.support { padding: 9px 0; }
+  .row.support:nth-child(2n) { background: #f4f4f4; }
+  
+  .support .win { color: #4ea600; font-weight: bold; }
+  .support .fail { color: #cc0000; font-weight: bold; }
+
+</style>
+
+<div class="row">
+  <div class="large-3 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+
+  <div class="large-9 columns">
+
+    <% @page_title = "Support" %>
+    <h2><%= @page_title %></h2>
+    
+    <h4 class="subheader">Foundation was designed for and tested on numerous browsers and devices. Here's the rundown on what's tested, and what to do if something misbehaves.</h4>
+    
+    <h5>Browser and Device Support</h5>
+    <p>We go to great lengths to ensure that Foundation works as expected on a variety of common browsers and devices. Given how forward-facing Foundation is there are some aesthetic properties which are not supported in older browsers (border radii, box shadows, etc), but the core elements are reliable across the board.</p>
+
+		<div class="row support">
+		  <div class="large-3 small-3 columns"><h5>Browser/OS</h5></div>
+		  <div class="large-3 small-3 columns"><h5>The Grid</h5></div>
+		  <div class="large-3 small-3 columns"><h5>Layout/UI</h5></div>
+		  <div class="large-3 small-3 columns"><h5>JS</h5></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">Chrome</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">Firefox</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">Safari</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">IE10</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">IE9</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">IE8</div>
+		  <div class="large-3 small-3 columns"><span class="fail">&#x2717;</span></div>
+		  <div class="large-3 small-3 columns"><span class="fail">&#x2717;</span></div>
+		  <div class="large-3 small-3 columns"><span class="fail">&#x2717;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">IE7</div>
+		  <div class="large-3 small-3 columns"><span class="fail">&#x2717;</span></div>
+		  <div class="large-3 small-3 columns"><span class="fail">&#x2717;</span></div>
+		  <div class="large-3 small-3 columns"><span class="fail">&#x2717;</span></div>
+		</div>
+
+		<div class="row support">
+		  <div class="large-3 small-3 columns">iOS (iPhone)</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">iOS (iPad)</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">Android 2, 4 (Phone)</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">Android 2, 4 (Tablet)</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">Windows Phone 7+</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+		<div class="row support">
+		  <div class="large-3 small-3 columns">Surface</div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		  <div class="large-3 small-3 columns"><span class="win">&#x2713;</span></div>
+		</div>
+
+    <hr>
+    
+    <h5>Upgrading from Foundation 3.x?</h5>
+    <p>We've written a comprehensive <a href="../migration.php">Migration Guide</a> to help you update your code for an existing or work in progress project.</p>
+    
+    <hr />
+
+    <div class="panel">
+      <h4>Get Answers</h4>
+      <h5 class="subheader">We've outlined some of the most common frequently asked questions so that you can easily find the answer, as well as given you a way to contact us directly with questions, feedback or concerns.</h5>
+      <a class="button" href="faq.php">Read the FAQ or Ask a Question &raquo;</a> <a class="secondary button" href="changelog.php">See the Version Changelog &raquo;</a>
+    </div>
+
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/foundation.gemspec

@@ -4,8 +4,8 @@ require File.expand_path('../lib/foundation/version', __FILE__)
 Gem::Specification.new do |gem|
   gem.authors       = ["ZURB"]
   gem.email         = ["foundation@zurb.com"]
-  gem.description   = %q{ZURB Foundation on SASS/Compass}
-  gem.summary       = %q{ZURB Foundation on SASS/Compass}
+  gem.description   = %q{ZURB Foundation on Sass/Compass}
+  gem.summary       = %q{ZURB Foundation on Sass/Compass}
   gem.homepage      = "http://foundation.zurb.com"
 
   gem.files         = `git ls-files`.split($\)
@@ -15,8 +15,6 @@ Gem::Specification.new do |gem|
   gem.require_paths = ["lib"]
   gem.version       = Foundation::VERSION
 
-  gem.add_dependency "compass", [">= 0.12.2"]
   gem.add_dependency "sass", [">= 3.2.0"]
-  gem.add_dependency "modular-scale", ["= 1.0.6"]
   gem.add_dependency "rake"
 end

data/index.html

@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-
-<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
 <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <head>
@@ -12,9 +10,9 @@
   <title>Welcome to Foundation</title>
 
   <!-- Included CSS Files -->
-  <link rel="stylesheet" href="test/stylesheets/styles.css">
+  <link rel="stylesheet" href="docs/css/foundation.css">
 
-  <script src="vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
+  <script src="js/vendor/custom.modernizr.js"></script>
 
 </head>
 <body>
@@ -22,7 +20,7 @@
   <div class="row">
     <div class="twelve columns">
       <h2>Welcome to Foundation</h2>
-      <p>This is version 3.0.6 released on July 20, 2012.</p>
+      <p>This is version 4.0 released on SOON :).</p>
       <hr />
     </div>
   </div>
@@ -111,23 +109,5 @@
       </ul>
     </div>
   </div>
-
-
-
-  <!-- Included JS Files -->
-  <script src="vendor/assets/javascripts/foundation/jquery.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
-  <script src="vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
-  <script src="vendor/assets/javascripts/foundation/app.js"></script>
-
 </body>
 </html>

data/js/foundation/foundation.alerts.js

@@ -0,0 +1,50 @@
+/*jslint unparam: true, browser: true, indent: 2 */
+
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.alerts = {
+    name : 'alerts',
+
+    version : '4.0.0',
+
+    settings : {
+      speed: 300, // fade out speed
+      callback: function (){}
+    },
+
+    init : function (scope, method, options) {
+      this.scope = scope || this.scope;
+
+      if (typeof method === 'object') {
+        $.extend(true, this.settings, method);
+      }
+
+      if (typeof method != 'string') {
+        if (!this.settings.init) this.events();
+
+        return this.settings.init;
+      } else {
+        return this[method].call(this, options);
+      }
+    },
+
+    events : function () {
+      var self = this;
+
+      $(this.scope).on('click.fndtn.alerts', '[data-alert] a.close', function (e) {
+        e.preventDefault();
+        $(this).closest("[data-alert]").fadeOut(self.speed, function () {
+          $(this).remove();
+          self.settings.callback();
+        });
+      });
+
+      this.settings.init = true;
+    },
+
+    off : function () {
+      $(this.scope).off('.fndtn.alerts');
+    }
+  };
+}(Foundation.zj, this, this.document));

data/js/foundation/foundation.clearing.js

@@ -0,0 +1,478 @@
+/*jslint unparam: true, browser: true, indent: 2 */
+
+;(function ($, window, document, undefined) {
+  'use strict';
+
+  Foundation.libs.clearing = {
+    name : 'clearing',
+
+    version : '4.0.0',
+
+    settings : {
+      templates : {
+        viewing : '<a href="#" class="clearing-close">&times;</a>' +
+          '<div class="visible-img" style="display: none"><img src="//:0">' +
+          '<p class="clearing-caption"></p><a href="#" class="clearing-main-left"><span></span></a>' +
+          '<a href="#" class="clearing-main-right"><span></span></a></div>'
+      },
+
+      // comma delimited list of selectors that, on click, will close clearing,
+      // add 'div.clearing-blackout, div.visible-img' to close on background click
+      close_selectors : '.clearing-close',
+
+      // event initializers and locks
+      init : false,
+      locked : false
+    },
+
+    init : function (scope, method, options) {
+      this.scope = this.scope || scope;
+      Foundation.inherit(this, 'set_data get_data remove_data throttle');
+
+      if (typeof method === 'object') {
+        options = $.extend(true, this.settings, method);
+      }
+
+      if (typeof method != 'string') {
+        $(this.scope).find('ul[data-clearing]').each(function () {
+          var self = Foundation.libs.clearing,
+              $el = $(this),
+              options = options || {},
+              settings = self.get_data($el);
+
+          if (!settings) {
+            options.$parent = $el.parent();
+
+            self.set_data($el, $.extend(true, self.settings, options));
+
+            self.assemble($el.find('li'));
+
+            if (!self.settings.init) {
+              self.events().swipe_events();
+            }
+          }
+        });
+
+        return this.settings.init;
+      } else {
+        // fire method
+        return this[method].call(this, options);
+      }
+    },
+
+    // event binding and initial setup
+
+    events : function () {
+      var self = this;
+
+      $(this.scope)
+        .on('click.fndtn.clearing', 'ul[data-clearing] li',
+          function (e, current, target) {
+            var current = current || $(this),
+                target = target || current,
+                settings = self.get_data(current.parent());
+
+            e.preventDefault();
+            if (!settings) self.init();
+
+            // set current and target to the clicked li if not otherwise defined.
+            self.open($(e.target), current, target);
+            self.update_paddles(target);
+          })
+
+        .on('click.fndtn.clearing', '.clearing-main-right',
+          function (e) { this.nav(e, 'next') }.bind(this))
+        .on('click.fndtn.clearing', '.clearing-main-left',
+          function (e) { this.nav(e, 'prev') }.bind(this))
+        .on('click.fndtn.clearing', this.settings.close_selectors,
+          function (e) { Foundation.libs.clearing.close(e, this) })
+        .on('keydown.fndtn.clearing',
+          function (e) { this.keydown(e) }.bind(this));
+
+      $(window).on('resize.fndtn.clearing',
+        function (e) { this.resize() }.bind(this));
+
+      this.settings.init = true;
+      return this;
+    },
+
+    swipe_events : function () {
+      var self = this;
+
+      $(this.scope)
+        .on('touchstart.fndtn.clearing', '.visible-img', function(e) {
+          var data = {
+                start_page_x: e.touches[0].pageX,
+                start_page_y: e.touches[0].pageY,
+                start_time: (new Date()).getTime(),
+                delta_x: 0,
+                is_scrolling: undefined
+              };
+
+          $(this).data('swipe-transition', data);
+          e.stopPropagation();
+        })
+        .on('touchmove.fndtn.clearing', '.visible-img', function(e) {
+          // Ignore pinch/zoom events
+          if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
+
+          var data = $(this).data('swipe-transition');
+
+          if (typeof data === 'undefined') {
+            data = {};
+          }
+
+          data.delta_x = e.touches[0].pageX - data.start_page_x;
+
+          if ( typeof data.is_scrolling === 'undefined') {
+            data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) );
+          }
+
+          if (!data.is_scrolling && !data.active) {
+            e.preventDefault();
+            var direction = (data.delta_x < 0) ? 'next' : 'prev';
+            data.active = true;
+            self.nav(e, direction);
+          }
+        })
+        .on('touchend.fndtn.clearing', '.visible-img', function(e) {
+          $(this).data('swipe-transition', {});
+          e.stopPropagation();
+        });
+    },
+
+    assemble : function ($li) {
+      var $el = $li.parent(),
+          settings = this.get_data($el),
+          grid = $el.detach(),
+          data = {
+            grid: '<div class="carousel">' + this.outerHTML(grid[0]) + '</div>',
+            viewing: settings.templates.viewing
+          },
+          wrapper = '<div class="clearing-assembled"><div>' + data.viewing +
+            data.grid + '</div></div>';
+
+      return settings.$parent.append(wrapper);
+    },
+
+    // event callbacks
+
+    open : function ($image, current, target) {
+      var root = target.closest('.clearing-assembled'),
+          container = root.find('div').first(),
+          visible_image = container.find('.visible-img'),
+          image = visible_image.find('img').not($image);
+
+      if (!this.locked()) {
+        // set the image to the selected thumbnail
+        image.attr('src', this.load($image));
+
+        this.loaded(image, function () {
+          // toggle the gallery
+          root.addClass('clearing-blackout');
+          container.addClass('clearing-container');
+          visible_image.show();
+          this.fix_height(target)
+            .caption(visible_image.find('.clearing-caption'), $image)
+            .center(image)
+            .shift(current, target, function () {
+              target.siblings().removeClass('visible');
+              target.addClass('visible');
+            });
+        }.bind(this));
+      }
+    },
+
+    close : function (e, el) {
+      e.preventDefault();
+
+      var root = (function (target) {
+            if (/blackout/.test(target.selector)) {
+              return target;
+            } else {
+              return target.closest('.clearing-blackout');
+            }
+          }($(el))), container, visible_image;
+
+      if (el === e.target && root) {
+        container = root.find('div').first(),
+        visible_image = container.find('.visible-img');
+        this.settings.prev_index = 0;
+        root.find('ul[data-clearing]')
+          .attr('style', '').closest('.clearing-blackout')
+          .removeClass('clearing-blackout');
+        container.removeClass('clearing-container');
+        visible_image.hide();
+      }
+
+      return false;
+    },
+
+    keydown : function (e) {
+      var clearing = $('.clearing-blackout').find('ul[data-clearing]');
+
+      if (e.which === 39) this.go(clearing, 'next');
+      if (e.which === 37) this.go(clearing, 'prev');
+      if (e.which === 27) $('a.clearing-close').trigger('click');
+    },
+
+    nav : function (e, direction) {
+      var clearing = $('.clearing-blackout').find('ul[data-clearing]');
+
+      e.preventDefault();
+      this.go(clearing, direction);
+    },
+
+    resize : function () {
+      var image = $('.clearing-blackout .visible-img').find('img');
+
+      if (image.length) {
+        this.center(image);
+      }
+    },
+
+    // visual adjustments
+    fix_height : function (target) {
+      var lis = target.parent().children(),
+          self = this;
+
+      lis.each(function () {
+          var li = $(this),
+              image = li.find('img');
+
+          if (li.height() > self.outerHeight(image)) {
+            li.addClass('fix-height');
+          }
+        })
+        .closest('ul')
+        .width(lis.length * 100 + '%');
+
+      return this;
+    },
+
+    update_paddles : function (target) {
+      var visible_image = target
+        .closest('.carousel')
+        .siblings('.visible-img');
+
+      if (target.next().length) {
+        visible_image
+          .find('.clearing-main-right')
+          .removeClass('disabled');
+      } else {
+        visible_image
+          .find('.clearing-main-right')
+          .addClass('disabled');
+      }
+
+      if (target.prev().length) {
+        visible_image
+          .find('.clearing-main-left')
+          .removeClass('disabled');
+      } else {
+        visible_image
+          .find('.clearing-main-left')
+          .addClass('disabled');
+      }
+    },
+
+    center : function (target) {
+      target.css({
+        marginLeft : -(this.outerWidth(target) / 2),
+        marginTop : -(this.outerHeight(target) / 2)
+      });
+      return this;
+    },
+
+    // image loading and preloading
+
+    load : function ($image) {
+      var href = $image.parent().attr('href');
+
+      this.preload($image);
+
+      if (href) return href;
+      return $image.attr('src');
+    },
+
+    preload : function ($image) {
+      this
+        .img($image.closest('li').next())
+        .img($image.closest('li').prev());
+    },
+
+    loaded : function (image, callback) {
+      // based on jquery.imageready.js
+      // @weblinc, @jsantell, (c) 2012
+
+      function loaded () {
+        callback();
+      }
+
+      function bindLoad () {
+        this.one('load', loaded);
+
+        if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
+          var src = this.attr( 'src' ),
+              param = src.match( /\?/ ) ? '&' : '?';
+
+          param += 'random=' + (new Date()).getTime();
+          this.attr('src', src + param);
+        }
+      }
+
+      if (!image.attr('src')) {
+        loaded();
+        return;
+      }
+
+      if (this.complete || this.readyState === 4) {
+        loaded();
+      } else {
+        bindLoad.call(image);
+      }
+    },
+
+    img : function (img) {
+      if (img.length) {
+        var new_img = new Image(),
+            new_a = img.find('a');
+
+        if (new_a.length) {
+          new_img.src = new_a.attr('href');
+        } else {
+          new_img.src = img.find('img').attr('src');
+        }
+      }
+      return this;
+    },
+
+    // image caption
+
+    caption : function (container, $image) {
+      var caption = $image.data('caption');
+
+      if (caption) {
+        container
+          .text(caption)
+          .show();
+      } else {
+        container
+          .text('')
+          .hide();
+      }
+      return this;
+    },
+
+    // directional methods
+
+    go : function ($ul, direction) {
+      var current = $ul.find('.visible'),
+          target = current[direction]();
+
+      if (target.length) {
+        target
+          .find('img')
+          .trigger('click', [current, target]);
+      }
+    },
+
+    shift : function (current, target, callback) {
+      var clearing = target.parent(),
+          old_index = this.settings.prev_index || target.index(),
+          direction = this.direction(clearing, current, target),
+          left = parseInt(clearing.css('left'), 10),
+          width = this.outerWidth(target),
+          skip_shift;
+
+      // we use jQuery animate instead of CSS transitions because we
+      // need a callback to unlock the next animation
+      if (target.index() !== old_index && !/skip/.test(direction)){
+        if (/left/.test(direction)) {
+          this.lock();
+          clearing.animate({left : left + width}, 300, this.unlock());
+        } else if (/right/.test(direction)) {
+          this.lock();
+          clearing.animate({left : left - width}, 300, this.unlock());
+        }
+      } else if (/skip/.test(direction)) {
+        // the target image is not adjacent to the current image, so
+        // do we scroll right or not
+        skip_shift = target.index() - this.settings.up_count;
+        this.lock();
+
+        if (skip_shift > 0) {
+          clearing.animate({left : -(skip_shift * width)}, 300, this.unlock());
+        } else {
+          clearing.animate({left : 0}, 300, this.unlock());
+        }
+      }
+
+      callback();
+    },
+
+    direction : function ($el, current, target) {
+      var lis = $el.find('li'),
+          li_width = this.outerWidth(lis) + (this.outerWidth(lis) / 4),
+          up_count = Math.floor(this.outerWidth($('.clearing-container')) / li_width) - 1,
+          target_index = lis.index(target),
+          response;
+
+      this.settings.up_count = up_count;
+
+      if (this.adjacent(this.settings.prev_index, target_index)) {
+        if ((target_index > up_count)
+          && target_index > this.settings.prev_index) {
+          response = 'right';
+        } else if ((target_index > up_count - 1)
+          && target_index <= this.settings.prev_index) {
+          response = 'left';
+        } else {
+          response = false;
+        }
+      } else {
+        response = 'skip';
+      }
+
+      this.settings.prev_index = target_index;
+
+      return response;
+    },
+
+    adjacent : function (current_index, target_index) {
+      for (var i = target_index + 1; i >= target_index - 1; i--) {
+        if (i === current_index) return true;
+      }
+      return false;
+    },
+
+    // lock management
+
+    lock : function () {
+      this.settings.locked = true;
+    },
+
+    unlock : function () {
+      this.settings.locked = false;
+    },
+
+    locked : function () {
+      return this.settings.locked;
+    },
+
+    // plugin management/browser quirks
+
+    outerHTML : function (el) {
+      // support FireFox < 11
+      return el.outerHTML || new XMLSerializer().serializeToString(el);
+    },
+
+    off : function () {
+      $(this.scope).off('.fndtn.clearing');
+      $(window).off('.fndtn.clearing');
+      this.remove_data(); // empty settings cache
+      this.settings.init = false;
+    }
+  };
+
+}(Foundation.zj, this, this.document));