gouy 0.0.4

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c38229631cd4ccfd32e78306bd6a9d5a82cf9a4b
+  data.tar.gz: 5353676d4eca170de4930646f1bded6c8e43f784
+SHA512:
+  metadata.gz: 469a86fd048f39aead9c1ba5760cfd18c640657acf3ddcb18016899e631c728cee6427c7f7e63551b7b0c9bf83ffcc0dccb274e31ead1d7a61c2ae0176a7473c
+  data.tar.gz: 45848157884dd60c4e8f3f87169c0b8e991e4e8e5623b250b5c74c39f6847bd9c1dd80115bda96e674a5c8e2469975b67a5c9bdbe4f7a3686ad287dcd10fb72e

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,47 @@
+# gouy jekyll theme
+
+Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes` and your sass in `_sass`. To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "gouy"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: gouy
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install gouy
+## Usage
+
+TODO: Write usage instructions here. Describe your available layouts, includes, and/or sass.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[afroware]/gouy. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_includes/archive.html

@@ -0,0 +1,15 @@
+---
+layout: default
+type: archive
+---
+
+<div class="post-header">
+  <h1 class="post-title-main">{{ page.title }}</h1>
+</div>
+<div class="post-content">
+
+{{ content }}
+</div>
+
+ 
+

data/_includes/callout.html

@@ -0,0 +1 @@
+<div markdown="span" class="bs-callout bs-callout-{{include.type}}">{{include.content}}</div>

data/_includes/custom/getting_started_series.html

@@ -0,0 +1,19 @@
+<div class="seriesContext">
+    <div class="btn-group">
+        <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Getting Started <span class="caret"></span></button>
+        <ol class="dropdown-menu">
+            {% assign pages = site.pages | sort:"weight"  %}
+            {% for p in pages %}
+            {% if p.series == "Getting Started" %}
+            {% if p.url == page.url %}
+            <li class="active"> → {{p.title}}</li>
+            {% else %}
+            <li>
+                <a href="{{p.url | remove: "/"}}">{{p.title}}</a>
+            </li>
+            {% endif %}
+            {% endif %}
+            {% endfor %}
+        </ol>
+    </div>
+</div>

data/_includes/custom/getting_started_series_next.html

@@ -0,0 +1,10 @@
+<p>{% assign series_pages = site.tags.series_acme %}
+    {% for p in pages %}
+    {% if p.series == "Getting Started" %}
+    {% assign nextTopic = page.weight | plus: "1"  %}
+    {% if p.weight == nextTopic  %}
+    <a href="{{p.url | remove: "/"}}"><button type="button" class="btn btn-primary">Next: {{p.title}}</button></a>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+</p>

data/_includes/custom/series_acme.html

@@ -0,0 +1,19 @@
+<div class="seriesContext">
+    <div class="btn-group">
+        <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Series Demo <span class="caret"></span></button>
+        <ol class="dropdown-menu">
+            {% assign pages = site.pages | sort:"weight"  %}
+            {% for p in pages %}
+            {% if p.series == "ACME series" %}
+            {% if p.url == page.url %}
+            <li class="active"> → {{p.weight}}. {{p.title}}</li>
+            {% else %}
+            <li>
+                <a href="{{p.url | remove: "/"}}">{{p.weight}}. {{p.title}}</a>
+            </li>
+            {% endif %}
+            {% endif %}
+            {% endfor %}
+        </ol>
+    </div>
+</div>

data/_includes/custom/series_acme_next.html

@@ -0,0 +1,30 @@
+<div class="seriesContext">
+    <a>
+        {% assign pages = site.pages | sort:"weight"  %}
+        {% for pg in pages %}
+        {% if pg.series == "ACME series" %}
+        {% if pg.weight > page.weight %}
+        <a href="{{pg.url | remove: '/'}}"><button type="button" class="btn btn-primary">Next: {{pg.title}}</button></a>
+        {% break %}
+        {% endif %}
+        {% endif %}
+        {% endfor %}
+    </a>
+    &nbsp;
+    <div class="btn-group">
+        <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Jump to: <span class="caret"></span></button>
+        <ol class="dropdown-menu">
+            {% for pg in pages %}
+            {% if pg.series == "ACME series" %}
+            {% if pg.url == page.url %}
+            <li class="active"> → {{pg.weight}}. {{pg.title}}</li>
+            {% else %}
+            <li>
+                <a href="{{pg.url | remove: '/'}}">{{pg.title}}</a>
+            </li>
+            {% endif %}
+            {% endif %}
+            {% endfor %}
+        </ol>
+    </div>
+</div>

data/_includes/custom/usermap.html

@@ -0,0 +1,14 @@
+
+<div id="userMap">
+<div class="content"><a href="p2_sample1.html"><div class="box box1">Connect to ADB</div></a></div>
+<div class="arrow">→</div>
+<div class="content"><a href="p2_sample2.html"><div class="box box2">Download and Build the Starter Kit</div></a></div>
+<div class="arrow">→</div>
+<div class="content"><a href="p2_sample3.html"><div class="box box3">Take a Tour</div></a></div>
+<div class="arrow">→</div>
+<div class="content"><a href="p2_sample4.html"><div class="box box4">Load Your Widgets</div></a></div>
+<div class="arrow">→</div>
+<div class="content"><a href="p2_sample5.html"><div class="box box5">Query for Something</div></a></div>
+<div class="clearfix"></div>
+
+</div>

data/_includes/custom/usermapcomplex.html

@@ -0,0 +1,91 @@
+<div id="userMap">
+
+    <!-- Button trigger modal -->
+<button type="button" class="btn btn-default btn-lg modalButton1" data-toggle="modal" data-target="#myModal1">Get Started</button>
+
+    <!-- Modal -->
+    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title" id="myModalLabel">Get Started</h4>
+          </div>
+          <div class="modal-body">
+<p>This is just dummy text ... Your first steps should be to get started. You will need to do the following:</p>
+
+    <ul>
+        <li><a href="p2_sample6.html">Sample 6</a></li>
+        <li><a href="p2_sample7.html">Sample 7</a></li>
+        <li><a href="p2_sample8.html">Sample 8</a></li>
+    </ul>
+    <p>If you run into any of these setup issues, you must solve them before you can continue on.</p>
+
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+            <span class="complexArrow">→</span>
+
+            <!-- Button trigger modal -->
+            <button type="button" class="btn btn-default btn-lg modalButton2" data-toggle="modal" data-target="#myModal2">Build your widgets</button>
+            <!-- Modal -->
+            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="myModalLabel">Build your widgets</h4>
+                  </div>
+                  <div class="modal-body">
+                    <p>In this step, you will build the widgets for your system. The widgets form the various components that blah blah blah this is dummy text power the nuclear capabilities of your energy transformer into deep space using wormhole technology and warp drive speeds.</p>
+
+                    <p>In order to configure your widgets, you will need to follow these topics:</p>
+                    <ul>
+                        <li><a href="p2_sample9.html">Sample 9</a></li>
+                        <li><a href="p2_sample10.html">Sample 10</a></li>
+                        <li><a href="p2_sample11.html">Sample 11</a></li>
+                    </ul>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <span class="complexArrow">→</span>
+
+            <!-- Button trigger modal -->
+<button type="button" class="btn btn-default btn-lg modalButton3" data-toggle="modal" data-target="#myModal3">Publish your app</button>
+            <!-- Modal -->
+            <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="myModalLabel">Publish your app</h4>
+                  </div>
+                  <div class="modal-body">
+                    <p>After you've configured all the necessary components to build your space transformer, you need to publish your app. Of course this content is also just dummy text. Pay no particular attention to the content but rather the format and placement of the map.</p>
+                    <p>To publish your app, see the following:
+                        <ul>
+                            <li><a href="p2_sample12.html">Sample 12</a></li>
+                            <li><a href="p2_sample13.html">Sample 13</a></li>
+                            <li><a href="p2_sample14.html">Sample 14</a></li>
+                        </ul>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+<div class="clearfix"></div>
+
+</div>

data/_includes/disqus.html

@@ -0,0 +1,25 @@
+{% if site.disqus_shortname %}
+
+<div id="disqus_thread"></div>
+<script>
+    /**
+     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
+     */
+
+    var disqus_config = function () {
+        this.page.url = "{{site.url}}/{{page.permalink}}";  // Replace PAGE_URL with your page's canonical URL variable
+        this.page.identifier = "{{page.permalink}}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+    };
+
+    (function() {  // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
+        var d = document, s = d.createElement('script');
+
+        s.src = 'https://{{site.disqus_shortname}}.disqus.com/embed.js';  // IMPORTANT: Replace EXAMPLE with your forum shortname!
+
+        s.setAttribute('data-timestamp', +new Date());
+        (d.head || d.body).appendChild(s);
+    })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+{% endif %}

data/_includes/feedback.html

@@ -0,0 +1,13 @@
+<li>
+{% if site.feedback_text %}
+  {% assign feedback_text = site.feedback_text %}
+{% else %}
+  {% assign feedback_text = "Feedback" %}
+{% endif %}
+
+{% if site.feedback_link %}
+  <a class="email" title="Submit feedback" href="{{site.feedback_link}}">{{feedback_text}}</a>
+{% else %}
+  <a class="email" title="Submit feedback" href="#" onclick="javascript:window.location='mailto:{{site.feedback_email}}?subject={{site.feedback_subject_line}} feedback&body=I have some feedback about the {{page.title}} page: ' + window.location.href;"><i class="fa fa-envelope-o"></i> {{feedback_text}}</a>
+{% endif %}
+</li>

data/_includes/footer.html

@@ -0,0 +1,9 @@
+<footer>
+            <div class="row">
+                <div class="col-lg-12 footer">
+               &copy;{{ site.time | date: "%Y"  }} {{site.company_name}}. All rights reserved. <br />
+{% if page.last_updated %}<span>Page last updated:</span> {{page.last_updated}}<br/>{% endif %} Site last generated: {{ site.time | date: "%b %-d, %Y"  }} <br />
+<p><img src="{{ "images/company_logo.png" }}" alt="Company logo"/></p>
+                </div>
+            </div>
+</footer>

data/_includes/google_analytics.html

@@ -0,0 +1,6 @@
+<!-- the google_analytics_id gets auto inserted from the config file -->
+
+{% if site.google_analytics %}
+
+<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','{{site.google_analytics}}','auto');ga('require','displayfeatures');ga('send','pageview');</script>
+{% endif %}

data/_includes/head.html

@@ -0,0 +1,39 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="{% if page.summary %}{{ page.summary | strip_html | strip_newlines | truncate: 160 }}{% endif %}">
+<meta name="keywords" content="{{page.tags}}{% if page.tags %}, {% endif %} {{page.keywords}}">
+<title>{{ page.title }} | {{ site.site_title }}</title>
+<link rel="stylesheet" href="{{ "css/syntax.css" }}">
+
+<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
+<link rel="stylesheet" href="css/modern-business.css">
+<!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+<link rel="stylesheet" href="css/customstyles.css">
+<link rel="stylesheet" href="css/boxshadowproperties.css">
+<!-- most color styles are extracted out to here -->
+<link rel="stylesheet" href="css/theme-blue.css">
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
+<script src="{{ "js/jquery.navgoco.min.js" }}"></script>
+
+
+<!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+<!-- Anchor.js -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/2.0.0/anchor.min.js"></script>
+<script src="{{ "js/toc.js" }}"></script>
+<script src="{{ "js/customscripts.js" }}"></script>
+
+<link rel="shortcut icon" href="{{ "images/favicon.ico"  }}">
+
+<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+<!--[if lt IE 9]>
+<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+<![endif]-->

data/_includes/head_print.html

@@ -0,0 +1,28 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="{% if page.summary %}{{ page.summary | strip_html | strip_newlines | truncate: 160 }}{% endif %}">
+<meta name="keywords" content="{{page.tags}}{% if page.tags %}, {% endif %} {{page.keywords}}">
+<title>{% if page.homepage == true %} {{site.homepage_title}} {% elsif page.title %}{{ page.title }}{% endif %}  | {{ site.site_title }}</title>
+
+
+<link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl | prepend: site.url }}">
+<link rel="stylesheet" href="{{ "/css/font-awesome.min.css" | prepend: site.baseurl | prepend: site.url }}">
+<link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | prepend: site.baseurl | prepend: site.url }}">
+<link rel="stylesheet" href="{{ "/css/modern-business.css" | prepend: site.baseurl | prepend: site.url }}">
+<link rel="stylesheet" href="{{ "/css/customstyles.css" | prepend: site.baseurl | prepend: site.url }}">
+<link rel="stylesheet" href="{{ "/css/theme-blue.css" | prepend: site.baseurl | prepend: site.url }}">
+<link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl | prepend: site.url }}">
+<link rel="stylesheet" href="{{ "/css/printstyles.css" | prepend: site.baseurl }}">
+
+<script>
+    Prince.addScriptFunc("datestamp", function() {
+        return "PDF last generated: {{ site.time | date: '%B %d, %Y' }}";
+    });
+</script>
+
+<script>
+    Prince.addScriptFunc("guideName", function() {
+        return "{{site.print_title}} User Guide";
+    });
+</script>

data/_includes/image.html

@@ -0,0 +1 @@
+<figure>{% if {{include.url}} %}<a class="no_icon" target="_blank" href="{{include.url}}">{% endif %}<img class="docimage" src="images/{{include.file}}" alt="{{include.alt}}" {% if {{include.max-width}} %}style="max-width: {{include.max-width}}px"{% endif %} />{% if {{include.url}} %}</a>{% endif %}{% if {{include.caption}} %}<figcaption>{{include.caption}}</figcaption>{% endif %}</figure>

data/_includes/important.html

@@ -0,0 +1 @@
+<div markdown="span" class="alert alert-warning" role="alert"><i class="fa fa-warning"></i> <b>Important:</b> {{include.content}}</div>

data/_includes/initialize_shuffle.html

@@ -0,0 +1,130 @@
+<script type="text/javascript">
+$(document).ready(function() {
+    $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });
+});
+
+</script>
+<!-- shuffle -->
+<script>
+var shuffleme = (function( $ ) {
+  'use strict';
+
+  var $grid = $('#grid'),
+      $filterOptions = $('.filter-options'),
+      $sizer = $grid.find('.shuffle_sizer'),
+
+  init = function() {
+
+    // None of these need to be executed synchronously
+    setTimeout(function() {
+      listen();
+      setupFilters();
+    }, 100);
+
+    // instantiate the plugin
+    $grid.shuffle({
+      itemSelector: '[class*="col-"]',
+      sizer: $sizer    
+    });
+  },
+
+  // Set up button clicks
+  setupFilters = function() {
+    var $btns = $filterOptions.children();
+    $btns.on('click', function() {
+      var $this = $(this),
+          isActive = $this.hasClass( 'active' ),
+          group = isActive ? 'all' : $this.data('group');
+
+      // Hide current label, show current label in title
+      if ( !isActive ) {
+        $('.filter-options .active').removeClass('active');
+      }
+
+      $this.toggleClass('active');
+
+      // Filter elements
+      $grid.shuffle( 'shuffle', group );
+    });
+
+    $btns = null;
+  },
+
+  // Re layout shuffle when images load. This is only needed
+  // below 768 pixels because the .picture-item height is auto and therefore
+  // the height of the picture-item is dependent on the image
+  // I recommend using imagesloaded to determine when an image is loaded
+  // but that doesn't support IE7
+  listen = function() {
+    var debouncedLayout = $.throttle( 300, function() {
+      $grid.shuffle('update');
+    });
+
+    // Get all images inside shuffle
+    $grid.find('img').each(function() {
+      var proxyImage;
+
+      // Image already loaded
+      if ( this.complete && this.naturalWidth !== undefined ) {
+        return;
+      }
+
+      // If none of the checks above matched, simulate loading on detached element.
+      proxyImage = new Image();
+      $( proxyImage ).on('load', function() {
+        $(this).off('load');
+        debouncedLayout();
+      });
+
+      proxyImage.src = this.src;
+    });
+
+    // Because this method doesn't seem to be perfect.
+    setTimeout(function() {
+      debouncedLayout();
+    }, 500);
+  };      
+
+  return {
+    init: init
+  };
+}( jQuery ));
+
+
+
+$(document).ready(function() {
+  shuffleme.init();
+});
+
+    </script>
+
+    <!-- new attempt-->
+
+    <script>
+    $(document).ready(function() {
+     
+    /* initialize shuffle plugin */
+    var $grid = $('#grid');
+         
+    $grid.shuffle({
+        itemSelector: '.item' // the selector for the items in the grid
+    });
+ 
+});</script>
+
+<script>
+$('#filter a').click(function (e) {
+    e.preventDefault();
+         
+    // set active class
+    $('#filter a').removeClass('active');
+    $(this).addClass('active');
+         
+    // get group name from clicked item
+    var groupName = $(this).attr('data-group');
+         
+    // reshuffle grid
+    $grid.shuffle('shuffle', groupName );
+});</script>
+
+