<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src&#x2F;jquery.collision.js</title>
    <link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.5.1&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
    <script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.5.1&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <!-- <h1><img src="..&#x2F;assets/css/logo.png" title=""></h1> -->
                <h1><img src="http://ducksboard.com/wp-content/themes/blog-theme-ducksboard/images/ducksboard.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
            
                <li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
            
                <li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src&#x2F;jquery.collision.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
&#x2F;*
 * jquery.collision
 * https:&#x2F;&#x2F;github.com&#x2F;ducksboard&#x2F;gridster.js
 *
 * Copyright (c) 2012 ducksboard
 * Licensed under the MIT, GPL licenses.
 *&#x2F;

;(function($, window, document, undefined){

    var defaults = {
      colliders_context: document.body,
      on_overlap: function(collider_data){},
      on_overlap_start : function(collider_data){
          &#x2F;&#x2F; console.log(&#x27;the element START being a collider&#x27;, collider_data);
      },
      on_overlap_stop : function(collider_data){
          &#x2F;&#x2F; console.log(&#x27;the element STOP being a collider&#x27;, collider_data);
      }
    };

    &#x2F;**
    * Collision
    *
    * @class Collision
    * @uses Coords
    * @param {HTMLElement} element An Attribute name or object property path
    * @param {String|HTMLElement|Array} colliders An Attribute name or object property path
    * @param {Object} [options] An Attribute name or object property path
    *   @param {Function} [options.on_overlap] An Attribute name or object property path
    *   @param {Function} [options.on_overlap_start] An Attribute name or object property path
    *   @param {Function} [options.on_overlap_stop] An Attribute name or object property path
    * @return {Object} dasdasdadasd
    * @constructor
    *&#x2F;
    function Collision(element, colliders, options) {
      this.options = $.extend(defaults, options);
      this.$element = element;
      this.last_colliders = [];
      this.last_colliders_coords = [];
      if (typeof colliders === &#x27;string&#x27; || colliders instanceof jQuery) {
          this.$colliders = $(colliders,
               this.options.colliders_context).not(this.$element);
      }else{
          this.colliders = $(colliders);
      }

      this.init();
    }

    var fn = Collision.prototype;

    fn.init = function() {
      this.find_collisions();
    };

    fn.overlaps = function(a, b) {
      var x = false;
      var y = false;

      if ((b.x1 &gt;= a.x1 &amp;&amp; b.x1 &lt;= a.x2) ||
          (b.x2 &gt;= a.x1 &amp;&amp; b.x2 &lt;= a.x2) ||
          (a.x1 &gt;= b.x1 &amp;&amp; a.x2 &lt;= b.x2)
      ) { x = true; }

      if ((b.y1 &gt;= a.y1 &amp;&amp; b.y1 &lt;= a.y2) ||
          (b.y2 &gt;= a.y1 &amp;&amp; b.y2 &lt;= a.y2) ||
          (a.y1 &gt;= b.y1 &amp;&amp; a.y2 &lt;= b.y2)
      ) { y = true; }

      return (x &amp;&amp; y);
    };

    fn.detect_overlapping_region = function(a, b){
      var regionX = &#x27;&#x27;;
      var regionY = &#x27;&#x27;;

      if (a.y1 &gt; b.cy &amp;&amp; a.y1 &lt; b.y2) { regionX = &#x27;N&#x27;; }
      if (a.y2 &gt; b.y1 &amp;&amp; a.y2 &lt; b.cy) { regionX = &#x27;S&#x27;; }
      if (a.x1 &gt; b.cx &amp;&amp; a.x1 &lt; b.x2) { regionY = &#x27;W&#x27;; }
      if (a.x2 &gt; b.x1 &amp;&amp; a.x2 &lt; b.cx) { regionY = &#x27;E&#x27;; }

      return (regionX + regionY) || &#x27;C&#x27;;
    };

    fn.calculate_overlapped_area_coords = function(a, b){
      var x1 = Math.max(a.x1, b.x1);
      var y1 = Math.max(a.y1, b.y1);
      var x2 = Math.min(a.x2, b.x2);
      var y2 = Math.min(a.y2, b.y2);

      return $({
          left: x1,
          top: y1,
          width : (x2 - x1),
          height: (y2 - y1)
        }).coords().get();
    };

    fn.calculate_overlapped_area = function(coords){
      return (coords.width * coords.height);
    };

    fn.manage_colliders_start_stop = function(new_colliders_coords, start_callback, stop_callback){
      var last = this.last_colliders_coords;

      for (var i = 0, il = last.length; i &lt; il; i++) {
          if ($.inArray(last[i], new_colliders_coords) === -1) {
              start_callback.call(this, last[i]);
          }
      }

      for (var j = 0, jl = new_colliders_coords.length; j &lt; jl; j++) {
          if ($.inArray(new_colliders_coords[j], last) === -1) {
              stop_callback.call(this, new_colliders_coords[j]);
          }

      }
    };

    fn.find_collisions = function(){
      var self = this;
      var colliders_coords = [];
      var colliders_data = [];
      var $colliders = (this.colliders || this.$colliders);
      var count = $colliders.length;

      while(count--){
        var $collider = self.$colliders ? $($colliders[count]) : $colliders[count];
        var player_coords = self.$element.coords().update().get();
        var $collider_coords_ins = ($collider.isCoords) ?
                $collider.update() : $collider.coords();
        var collider_coords = $collider_coords_ins.get();
        var overlaps = self.overlaps(player_coords, collider_coords);

        if (!overlaps) {
          continue;
        }

        var region = self.detect_overlapping_region(player_coords,
             collider_coords);
        &#x2F;&#x2F;todo: make this if customizable
        if (region === &#x27;C&#x27;){
            var area_coords = self.calculate_overlapped_area_coords(
                 player_coords, collider_coords);
            var area = self.calculate_overlapped_area(area_coords);
            var collider_data = {
                area: area,
                area_coords : area_coords,
                region: region,
                coords: collider_coords,
                player_coords: player_coords,
                el: $collider
            };

            self.options.on_overlap.call(this, collider_data);
            colliders_coords.push($collider_coords_ins);
            colliders_data.push(collider_data);
        }

      }

      this.manage_colliders_start_stop(colliders_coords,
          self.options.on_overlap_stop, self.options.on_overlap_start);

      this.last_colliders_coords = colliders_coords;

      return colliders_data;
    };


    fn.get_closest_colliders = function(){
      var colliders = this.find_collisions();
      var min_area = 100;
      colliders.sort(function(a, b){

          if (a.area &lt;= min_area) {
            return 1;
          }

          &#x2F;* if colliders are being overlapped by the &quot;C&quot; (center) region,
           * we have to set a lower index in the array to which they are placed
           * above in the grid. *&#x2F;
          if (a.region === &#x27;C&#x27; &amp;&amp; b.region === &#x27;C&#x27;) {
            if (a.coords.y1 &lt; b.coords.y1 || a.coords.x1 &lt; b.coords.x1) {
                return - 1;
            }else{
                return 1;
            }
          }

          if (a.area &lt; b.area){
             return 1;
          }

          return 1;
      });
      return colliders;
    };

    &#x2F;&#x2F;jQuery adapter
    $.fn.collision = function(collider, options) {
      return new Collision( this, collider, options );
    };


}(jQuery, window, document));

    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>