From 89d44f08e1e1a44c5d4536020e6e1f01b5f77ecc Mon Sep 17 00:00:00 2001
From: GrahamQuince <graham.quince@frogeducation.com>
Date: Thu, 26 Nov 2015 15:48:25 +0000
Subject: [PATCH 1/5] Site icon as image & Assignment list

Two snippets:

Site icon displays a site's icon as its image

Assignment List lists out the assignments for a student without them
accessing the app
---
 assignments-list/README.md      |   2 +
 assignments-list/snippet.html   | 128 ++++++++++++++++++++++++++++++++
 site-icon-as-image/README.md    |   4 +
 site-icon-as-image/snippet.html |  18 +++++
 4 files changed, 152 insertions(+)
 create mode 100644 assignments-list/README.md
 create mode 100644 assignments-list/snippet.html
 create mode 100644 site-icon-as-image/README.md
 create mode 100644 site-icon-as-image/snippet.html

diff --git a/assignments-list/README.md b/assignments-list/README.md
new file mode 100644
index 0000000..7860605
--- /dev/null
+++ b/assignments-list/README.md
@@ -0,0 +1,2 @@
+This snippet displays a list of open assignments for a student and display them in a table
+
diff --git a/assignments-list/snippet.html b/assignments-list/snippet.html
new file mode 100644
index 0000000..c0014bc
--- /dev/null
+++ b/assignments-list/snippet.html
@@ -0,0 +1,128 @@
+<style>
+.carousel-fade .carousel-inner .item {
+    opacity: 0;
+    -webkit-transition-property: opacity;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    transition-property: opacity;
+}
+.carousel-fade .carousel-inner .active {
+    opacity: 1;
+}
+.carousel-fade .carousel-inner .active.left,
+.carousel-fade .carousel-inner .active.right {
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+}
+.carousel-fade .carousel-inner .next.left,
+.carousel-fade .carousel-inner .prev.right {
+    opacity: 1;
+}
+.carousel-fade .carousel-control {
+    z-index: 2;
+}
+.carousel-inner img {
+    max-width: 100%;
+    height: 300px;
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 300px;
+}
+.carousel-arrow-left,
+.carousel-arrow-right {
+    top: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: 15px;
+    margin-top: -15px;
+}
+.carousel-arrow-right {
+    left: 35%;
+    border-left-color: #FFFFFF;
+}
+.carousel-arrow-left {
+    right: 35%;
+    border-right-color: #FFFFFF;
+}
+</style>
+<div id="Carousel" class="carousel slide carousel-fade col-lg-8 col-offset-2">
+    <ol id="filedrop-slide-show-count" class="carousel-indicators">
+    </ol>
+    <div id="filedrop-slide-show-img" role="listbox" class="carousel-inner">
+    </div>
+    <!-- Left and right controls -->
+    <a class="left carousel-control" href="#Carousel" data-slide="prev">
+        <span class="carousel-arrow-left"></span>
+    </a>
+    <a class="right carousel-control" href="#Carousel" data-slide="next">
+        <span class="carousel-arrow-right"></span>
+    </a>
+</div>
+<!--
+    This section brings back a list of the file names, uncomment if you wish this to be displayed
+
+    <ul id="filelist"></ul>
+-->
+<script type="text/javascript">
+$('.carousel').carousel();
+
+var baseURL = Frog.Utilities.getBaseUrl(),
+    // Change fileDropUuid to the UUID of your file drop widget
+    fileDropUuid = '72C35B492002821AF1922FA01D6943066824AD8CD860E3AD';
+
+Frog.Model
+    .api('filedrop.get', {
+        filedrop: fileDropUuid
+    }).done(function(filesResponse) {
+        var $fileList = $('#filelist'),
+            $slideShowCount = $("#filedrop-slide-show-count"),
+            $slideShowImageContainer = $("#filedrop-slide-show-img"),
+            fileCount = 0;
+
+        filesResponse.data.resources.forEach(function(file, index) {
+            // Check whether the file is one of these filetypes; Want to add more? Add to the array
+            if (['jpg', 'jpeg', 'gif', 'png'].indexOf(file.file.ext.toLowerCase()) > -1) {
+                if ($fileList.length) {
+                    // This only runs when you have uncommented the the HTML code above
+                    // This code adds file names to the ul#filelist
+                    $fileList.append(
+                        $('<li>').text(file.file.name)
+                    );
+                }
+
+                $slideShowCount
+                    .append(
+                        $('<li>')
+                        .attr('data-target', 'Carousel')
+                        .attr('data-slide-to', fileCount)
+                        .addClass(function() {
+                            if (fileCount === 0) {
+                                return 'active';
+                            }
+                        })
+                    );
+
+                $slideShowImageContainer
+                    .append(
+                        $('<div>').addClass('item')
+                        .addClass(function() {
+                            if (fileCount === 0) {
+                                return 'active';
+                            }
+                        })
+                        .append(
+                            $('<img />').addClass('img-responsive')
+                            .attr('src', baseURL + '/app/file/resource/' + file.file.uuid)
+                            .attr('align', 'center')
+                        )
+                    );
+                fileCount++;
+            }
+        });
+    });
+</script>
diff --git a/site-icon-as-image/README.md b/site-icon-as-image/README.md
new file mode 100644
index 0000000..b612f14
--- /dev/null
+++ b/site-icon-as-image/README.md
@@ -0,0 +1,4 @@
+Site Icon as Image
+
++Drop this code into your site in an HTML widget
++As the site loads, it will display the icon
\ No newline at end of file
diff --git a/site-icon-as-image/snippet.html b/site-icon-as-image/snippet.html
new file mode 100644
index 0000000..33c09d6
--- /dev/null
+++ b/site-icon-as-image/snippet.html
@@ -0,0 +1,18 @@
+<div id="siteIcon"></div>
+
+<script>
+  
+var siteLink = (s = $('.ui-dialog.focused').find('.sites_core').data('controllers')) &&
+	(c = s.sites_core) &&
+	c.options.site;
+
+Frog.Model
+	.api('sites.getInfo', {
+		link: siteLink,
+		method: "sites.getInfo"
+	}).done(function(siteResponse) {
+		$('#siteIcon').html("<img src='"+siteResponse.data.icon+"'>");
+});
+
+  
+ </script>

From 15e5073635f974dd9f2b24cc461cc5687e8d8a08 Mon Sep 17 00:00:00 2001
From: GrahamQuince <graham.quince@frogeducation.com>
Date: Mon, 4 Apr 2016 10:02:18 +0100
Subject: [PATCH 2/5] Added correct code for assignments

and improved site icon code based on feedback
---
 assignments-list/snippet.html   | 168 +++++++++-----------------------
 site-icon-as-image/snippet.html |  24 +++--
 2 files changed, 63 insertions(+), 129 deletions(-)

diff --git a/assignments-list/snippet.html b/assignments-list/snippet.html
index c0014bc..18f29f3 100644
--- a/assignments-list/snippet.html
+++ b/assignments-list/snippet.html
@@ -1,128 +1,54 @@
-<style>
-.carousel-fade .carousel-inner .item {
-    opacity: 0;
-    -webkit-transition-property: opacity;
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    transition-property: opacity;
-}
-.carousel-fade .carousel-inner .active {
-    opacity: 1;
-}
-.carousel-fade .carousel-inner .active.left,
-.carousel-fade .carousel-inner .active.right {
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-}
-.carousel-fade .carousel-inner .next.left,
-.carousel-fade .carousel-inner .prev.right {
-    opacity: 1;
-}
-.carousel-fade .carousel-control {
-    z-index: 2;
-}
-.carousel-inner img {
-    max-width: 100%;
-    height: 300px;
-    margin-left: auto;
-    margin-right: auto;
-    min-width: 300px;
-}
-.carousel-arrow-left,
-.carousel-arrow-right {
-    top: 50%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: 15px;
-    margin-top: -15px;
-}
-.carousel-arrow-right {
-    left: 35%;
-    border-left-color: #FFFFFF;
-}
-.carousel-arrow-left {
-    right: 35%;
-    border-right-color: #FFFFFF;
-}
-</style>
-<div id="Carousel" class="carousel slide carousel-fade col-lg-8 col-offset-2">
-    <ol id="filedrop-slide-show-count" class="carousel-indicators">
-    </ol>
-    <div id="filedrop-slide-show-img" role="listbox" class="carousel-inner">
-    </div>
-    <!-- Left and right controls -->
-    <a class="left carousel-control" href="#Carousel" data-slide="prev">
-        <span class="carousel-arrow-left"></span>
-    </a>
-    <a class="right carousel-control" href="#Carousel" data-slide="next">
-        <span class="carousel-arrow-right"></span>
-    </a>
-</div>
-<!--
-    This section brings back a list of the file names, uncomment if you wish this to be displayed
 
-    <ul id="filelist"></ul>
--->
-<script type="text/javascript">
-$('.carousel').carousel();
 
-var baseURL = Frog.Utilities.getBaseUrl(),
-    // Change fileDropUuid to the UUID of your file drop widget
-    fileDropUuid = '72C35B492002821AF1922FA01D6943066824AD8CD860E3AD';
+<script>
+var $assignmentsList = $("<div>", {
+                id: Frog.Utilities.generateSimpleId()
+              }
+    );
+    $assignmentsList.html(
+       '<b>Your open assignments:</b>'+
+       '<table class="table" id="your_assignments">'+
+            '<tr>'+
+            '<th>Subject</th>'+
+            '<th>Title</th>'+
+            '<th>Due Date</th>'+
+            '<th>Instructions</th>'+
+            '</tr>'+
+       '</table>'
+    );
 
-Frog.Model
-    .api('filedrop.get', {
-        filedrop: fileDropUuid
-    }).done(function(filesResponse) {
-        var $fileList = $('#filelist'),
-            $slideShowCount = $("#filedrop-slide-show-count"),
-            $slideShowImageContainer = $("#filedrop-slide-show-img"),
-            fileCount = 0;
 
-        filesResponse.data.resources.forEach(function(file, index) {
-            // Check whether the file is one of these filetypes; Want to add more? Add to the array
-            if (['jpg', 'jpeg', 'gif', 'png'].indexOf(file.file.ext.toLowerCase()) > -1) {
-                if ($fileList.length) {
-                    // This only runs when you have uncommented the the HTML code above
-                    // This code adds file names to the ul#filelist
-                    $fileList.append(
-                        $('<li>').text(file.file.name)
-                    );
-                }
 
-                $slideShowCount
-                    .append(
-                        $('<li>')
-                        .attr('data-target', 'Carousel')
-                        .attr('data-slide-to', fileCount)
-                        .addClass(function() {
-                            if (fileCount === 0) {
-                                return 'active';
-                            }
-                        })
-                    );
+Frog.Model
+    .api('assignmentspupils.getmyassigned', {
+        status: 'open',
+        limit: 5,
+        offset: 0
+    }).done(function(assignmentResponse) {
+        console.log(assignmentResponse.data.assignments);
+        assignmentResponse.data.assignments.forEach(function(work, index) {
 
-                $slideShowImageContainer
-                    .append(
-                        $('<div>').addClass('item')
-                        .addClass(function() {
-                            if (fileCount === 0) {
-                                return 'active';
-                            }
-                        })
-                        .append(
-                            $('<img />').addClass('img-responsive')
-                            .attr('src', baseURL + '/app/file/resource/' + file.file.uuid)
-                            .attr('align', 'center')
+            var dueDate = new Date(work.assignment.end * 1000).toDateString();
+            $assignmentsList
+                .append($(
+                            '<tr>'+
+                            '<td>'+
+                                work.assignment.subject.name+
+                            '</td><td><b>'+
+                                work.assignment.alias+
+                            '</b></td><td>'+
+                                work.assignment.message+
+                            '</td><td>'+
+                                dueDate+
+                            '</td>'+
+                            '</tr>'
                         )
-                    );
-                fileCount++;
-            }
-        });
-    });
-</script>
+                );
+        }
+    );
+
+});
+
+
+arguments[0].append($assignmentsList);
+</script>
\ No newline at end of file
diff --git a/site-icon-as-image/snippet.html b/site-icon-as-image/snippet.html
index 33c09d6..0aeedd9 100644
--- a/site-icon-as-image/snippet.html
+++ b/site-icon-as-image/snippet.html
@@ -1,18 +1,26 @@
-<div id="siteIcon"></div>
-
 <script>
-  
-var siteLink = (s = $('.ui-dialog.focused').find('.sites_core').data('controllers')) &&
-	(c = s.sites_core) &&
-	c.options.site;
+
+var siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers'),
+
+    siteCore = siteImLookingAt.sites_core,
+
+    siteLink = siteImLookingAt &&  
+	           siteCore &&
+	           siteCore.options.site,
+
+	$newDiv = $("<div>", {
+                       id: Frog.Utilities.generateSimpleId()
+                      }
+            );
 
 Frog.Model
 	.api('sites.getInfo', {
 		link: siteLink,
 		method: "sites.getInfo"
 	}).done(function(siteResponse) {
-		$('#siteIcon').html("<img src='"+siteResponse.data.icon+"'>");
+		$newDiv.html("<img src='"+siteResponse.data.icon+"'>");
 });
-
+arguments[0].append($newDiv);
   
  </script>
+

From 286ee3f98e2aafa62ec79763caf95018be6d1088 Mon Sep 17 00:00:00 2001
From: GrahamQuince <graham.quince@frogeducation.com>
Date: Tue, 5 Apr 2016 08:55:15 +0100
Subject: [PATCH 3/5] Updated based on feedback

Site icon is commented, assignments list rewritten for student accessing
latest assignments
---
 assignments-list/snippet.html   | 25 ++++++++++++++-----------
 site-icon-as-image/snippet.html |  6 +++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/assignments-list/snippet.html b/assignments-list/snippet.html
index 18f29f3..c63a929 100644
--- a/assignments-list/snippet.html
+++ b/assignments-list/snippet.html
@@ -15,29 +15,32 @@
             '<th>Instructions</th>'+
             '</tr>'+
        '</table>'
-    );
+    ),
+    user = FrogOS.getUser();
 
 
 
 Frog.Model
-    .api('assignmentspupils.getmyassigned', {
-        status: 'open',
-        limit: 5,
-        offset: 0
+    .api('assignmentreports.getData', {
+        filter: {status:"open"},
+        limit:15,
+        offset:0,
+        options: {child_uuid:user.uuid},
+        report_name:"student.assignments"
     }).done(function(assignmentResponse) {
-        console.log(assignmentResponse.data.assignments);
-        assignmentResponse.data.assignments.forEach(function(work, index) {
+        console.log(assignmentResponse.data);
+        assignmentResponse.data.forEach(function(work, index) {
 
-            var dueDate = new Date(work.assignment.end * 1000).toDateString();
+            var dueDate = moment.unix(work.due_date).format("DD/MM/YY");
             $assignmentsList
                 .append($(
                             '<tr>'+
                             '<td>'+
-                                work.assignment.subject.name+
+                                work.subject_name+
                             '</td><td><b>'+
-                                work.assignment.alias+
+                                work.assignment_name+
                             '</b></td><td>'+
-                                work.assignment.message+
+                                work.instructions+
                             '</td><td>'+
                                 dueDate+
                             '</td>'+
diff --git a/site-icon-as-image/snippet.html b/site-icon-as-image/snippet.html
index 0aeedd9..9efc7f2 100644
--- a/site-icon-as-image/snippet.html
+++ b/site-icon-as-image/snippet.html
@@ -1,5 +1,7 @@
 <script>
 
+// arguments.[0] is the HTML widget your code is sitting in.  Using this, it is possible to identify the site containing the HTML widget
+
 var siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers'),
 
     siteCore = siteImLookingAt.sites_core,
@@ -7,12 +9,14 @@
     siteLink = siteImLookingAt &&  
 	           siteCore &&
 	           siteCore.options.site,
-
+    // This code below uses jQuery to create a DIV and uses one of Frog's utitilies to create a unique ID, allowing jQuery to append to the div, $newDiv.
 	$newDiv = $("<div>", {
                        id: Frog.Utilities.generateSimpleId()
                       }
             );
 
+// Knowing the siteLink from the above, we can using Frog's API sites.getInfo to return the site's icon
+
 Frog.Model
 	.api('sites.getInfo', {
 		link: siteLink,

From a6a2917cabacf2268f415e4e3678f122977625ed Mon Sep 17 00:00:00 2001
From: GrahamQuince <graham.quince@frogeducation.com>
Date: Tue, 5 Apr 2016 15:30:11 +0100
Subject: [PATCH 4/5] Updated to tidy up styling and add comments

---
 assignments-list/snippet.html   | 82 ++++++++++++++++++---------------
 site-icon-as-image/snippet.html | 40 ++++++++--------
 2 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/assignments-list/snippet.html b/assignments-list/snippet.html
index c63a929..397c2a6 100644
--- a/assignments-list/snippet.html
+++ b/assignments-list/snippet.html
@@ -1,57 +1,63 @@
-
-
 <script>
-var $assignmentsList = $("<div>", {
-                id: Frog.Utilities.generateSimpleId()
-              }
-    );
-    $assignmentsList.html(
-       '<b>Your open assignments:</b>'+
-       '<table class="table" id="your_assignments">'+
-            '<tr>'+
+var $assignmentsList, user;
+
+// Create a div, and give it is unqiue ID
+$assignmentsList = $("<div>", {
+        id: Frog.Utilities.generateSimpleId()
+    }
+);
+
+// Add a table to the div
+$assignmentsList.html(
+    '<b>Your open assignments:</b>'+
+    '<table class="table" id="your_assignments">'+
+        '<tr>'+
             '<th>Subject</th>'+
             '<th>Title</th>'+
             '<th>Due Date</th>'+
             '<th>Instructions</th>'+
-            '</tr>'+
-       '</table>'
-    ),
-    user = FrogOS.getUser();
-
+        '</tr>'+
+    '</table>'
+);
 
+// Use Frog's API to get the logged in student
+user = FrogOS.getUser();
 
+// Use Frog's assignmentreports.getData to get 15 assignments for the logged in student.
 Frog.Model
     .api('assignmentreports.getData', {
-        filter: {status:"open"},
-        limit:15,
-        offset:0,
-        options: {child_uuid:user.uuid},
-        report_name:"student.assignments"
+        filter: { status: "open" },
+        limit: 15,
+        offset: 0,
+        options: { child_uuid: user.uuid },
+        report_name: "student.assignments"
     }).done(function(assignmentResponse) {
-        console.log(assignmentResponse.data);
-        assignmentResponse.data.forEach(function(work, index) {
 
+        // Loop through all the responses
+        assignmentResponse.data.forEach(function(work) {
+
+            // Use monment.js to convert the due date timestamp to a human-readable format
             var dueDate = moment.unix(work.due_date).format("DD/MM/YY");
-            $assignmentsList
-                .append($(
-                            '<tr>'+
-                            '<td>'+
-                                work.subject_name+
-                            '</td><td><b>'+
-                                work.assignment_name+
-                            '</b></td><td>'+
-                                work.instructions+
-                            '</td><td>'+
-                                dueDate+
-                            '</td>'+
-                            '</tr>'
-                        )
+
+            // Find the table in the DIV created above and add in the various fields from the API's response as a  new row
+            $assignmentsList.find('tbody')
+                .append(
+                    '<tr>'+
+                         '<td>'+
+                         work.subject_name+
+                         '</td><td><b>'+
+                         work.assignment_name+
+                         '</b></td><td>'+
+                         work.instructions+
+                         '</td><td>'+
+                         dueDate+
+                         '</td>'+
+                    '</tr>'
                 );
         }
     );
-
 });
 
 
 arguments[0].append($assignmentsList);
-</script>
\ No newline at end of file
+</script>
diff --git a/site-icon-as-image/snippet.html b/site-icon-as-image/snippet.html
index 9efc7f2..aeff376 100644
--- a/site-icon-as-image/snippet.html
+++ b/site-icon-as-image/snippet.html
@@ -1,30 +1,28 @@
 <script>
+var siteImLookingAt, siteCore, siteLink, $newDiv;
 
-// arguments.[0] is the HTML widget your code is sitting in.  Using this, it is possible to identify the site containing the HTML widget
+// arguments[0] is the HTML widget your code is sitting in.  Using this, it is possible to identify the site containing the HTML widget
+siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers');
 
-var siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers'),
+siteCore = siteImLookingAt.sites_core;
 
-    siteCore = siteImLookingAt.sites_core,
+siteLink = siteImLookingAt && siteCore && siteCore.options.site;
 
-    siteLink = siteImLookingAt &&  
-	           siteCore &&
-	           siteCore.options.site,
-    // This code below uses jQuery to create a DIV and uses one of Frog's utitilies to create a unique ID, allowing jQuery to append to the div, $newDiv.
-	$newDiv = $("<div>", {
-                       id: Frog.Utilities.generateSimpleId()
-                      }
-            );
-
-// Knowing the siteLink from the above, we can using Frog's API sites.getInfo to return the site's icon
+// This code below uses jQuery to create a DIV and uses one of Frog's utitilies to create a unique ID, allowing jQuery to append to the div, $newDiv.
+$newDiv = $("<div>", {
+        id: Frog.Utilities.generateSimpleId()
+    }
+);
 
+// Knowing the siteLink from the above, we can use Frog's API sites.getInfo to return the site's icon
 Frog.Model
-	.api('sites.getInfo', {
-		link: siteLink,
-		method: "sites.getInfo"
-	}).done(function(siteResponse) {
-		$newDiv.html("<img src='"+siteResponse.data.icon+"'>");
-});
+    .api('sites.getInfo', {
+        link: siteLink,
+        method: "sites.getInfo"
+    }).done(function(siteResponse) {
+        $newDiv.html("<img src='"+siteResponse.data.icon+"'>");
+    });
+
 arguments[0].append($newDiv);
-  
- </script>
 
+</script>

From 3b57584aeadb4b54fad706d6e7373705244466f5 Mon Sep 17 00:00:00 2001
From: GrahamQuince <graham.quince@frogeducation.com>
Date: Thu, 14 Apr 2016 14:53:32 +0100
Subject: [PATCH 5/5] My teachers, tabbed buckets and site shared status

Added some a third snipped based on a school's request
---
 my-teachers/README.md           |  2 +
 my-teachers/snippet.html        | 55 ++++++++++++++++++
 site-shared-status/README.md    |  4 ++
 site-shared-status/snippet.html | 50 +++++++++++++++++
 tabbed-buckets/README.md        |  2 +
 tabbed-buckets/sniipet.html     | 99 +++++++++++++++++++++++++++++++++
 6 files changed, 212 insertions(+)
 create mode 100644 my-teachers/README.md
 create mode 100644 my-teachers/snippet.html
 create mode 100644 site-shared-status/README.md
 create mode 100644 site-shared-status/snippet.html
 create mode 100644 tabbed-buckets/README.md
 create mode 100644 tabbed-buckets/sniipet.html

diff --git a/my-teachers/README.md b/my-teachers/README.md
new file mode 100644
index 0000000..651d7ad
--- /dev/null
+++ b/my-teachers/README.md
@@ -0,0 +1,2 @@
+This snippet displays a list of teachers (technically group leaders) for a logged in user
+
diff --git a/my-teachers/snippet.html b/my-teachers/snippet.html
new file mode 100644
index 0000000..2003478
--- /dev/null
+++ b/my-teachers/snippet.html
@@ -0,0 +1,55 @@
+<script>
+
+var user,$teachersList,myArray;
+
+user = FrogOS.getUser();
+
+$teachersList = $("<div>", {
+    id: Frog.Utilities.generateSimpleId()
+});
+$teachersList.html(
+    '<b>Your teachers:</b>'
+);
+
+myArray=[];
+
+
+/// Get all the groups assoicated with logged in user
+Frog.Model.api('users.getDataInCategory', {
+    user_uuid:user.uuid,
+    /// this uuid does not appear to be required
+    uuid:"67A87F002004C5F7E42DCFF776D54C02662E76BC0F4FCCE2"
+}).done(function(groupResponse) {
+    /// Get the leaders for each group
+    groupResponse.data.groups.forEach(function(grop) {
+            Frog.Model.api('groups.getLeaders', {
+                uuid:grop.uuid
+            }).done(function(leaderResponse) {
+                /// get the user details of each leader
+                Frog.Model.api('users.getOne', {
+                    uuid:leaderResponse.data[0]
+                }).done(function(userResponse) {
+                    ///Only display results with a teacher attached, so profile groups etc... will not be listed
+                    if (userResponse.data.displayname!==undefined && userResponse.data.displayname!==null) {
+                        $teachersList.append(
+                           '<li>'+
+                            grop.name+
+                            ' - '+
+                            userResponse.data.displayname+
+                            '</li>'
+                        );
+                    }
+                });
+
+            });
+       // }
+    });
+});
+
+
+arguments[0].append($teachersList);
+
+
+</script>
+
+
diff --git a/site-shared-status/README.md b/site-shared-status/README.md
new file mode 100644
index 0000000..09c00a5
--- /dev/null
+++ b/site-shared-status/README.md
@@ -0,0 +1,4 @@
+Site shared status
+
++Drop this code into your site in an HTML widget
++As the site loads, it display using a padlock icon whether the site is private or not
\ No newline at end of file
diff --git a/site-shared-status/snippet.html b/site-shared-status/snippet.html
new file mode 100644
index 0000000..4096325
--- /dev/null
+++ b/site-shared-status/snippet.html
@@ -0,0 +1,50 @@
+<script>
+var siteImLookingAt, siteCore, siteLink, $newDiv;
+
+// arguments[0] is the HTML widget your code is sitting in.  Using this, it is possible to identify the site containing the HTML widget
+siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers');
+
+siteCore = siteImLookingAt.sites_core;
+
+siteLink = siteImLookingAt && siteCore && siteCore.options.site;
+
+// This code below uses jQuery to create a DIV and uses one of Frog's utitilies to create a unique ID, allowing jQuery to append to the div, $newDiv.
+$newDiv = $("<div>", {
+        id: Frog.Utilities.generateSimpleId()
+    }
+);
+
+// Knowing the siteLink from the above, we can use Frog's API sites.getInfo to return the site's icon
+Frog.Model
+    .api('share.getList', {
+        target: "CF96C84720025152F781FF7433761F0D75EAEDCC694DC59C"
+    }).done(function(siteResponse) {
+
+        //Create an variable to add a title to the DIV
+        var alt="";
+        // share.getList does not differentiate between public in school and public on the web, if company is defined, the site is not private
+        if (siteResponse.data.company!==undefined && siteResponse.data.company!==null) {
+            $newDiv.addClass(
+                // Use fontawesome to dpecit status
+                "fa fa-unlock-alt fa-3x"
+            );
+            alt += "Site is not private and is shared with:\n";
+        } else {
+            $newDiv.addClass(
+                "fa fa-lock fa-3x"
+            );
+            alt += "Site is private and is visible to:\n";
+        }
+        //Loop through siteResponse.data.user object and return the displayname value
+        for (var key in siteResponse.data.user) {
+            var obj = siteResponse.data.user[key];
+            alt+=obj.identity.displayname+'\n';
+        }
+        // set the alt variable as $newDiv's title
+        $newDiv.attr('title', alt);
+    });
+
+
+arguments[0].append($newDiv);
+
+</script>
\ No newline at end of file
diff --git a/tabbed-buckets/README.md b/tabbed-buckets/README.md
new file mode 100644
index 0000000..061ebb5
--- /dev/null
+++ b/tabbed-buckets/README.md
@@ -0,0 +1,2 @@
+This snippet hides all the buckets (page layout sections) except for the top bucket (bucket 1).  It resets the width of each bucket to 100%, then allows to you switch between buckets using a set of buttons which look like tabs
+
diff --git a/tabbed-buckets/sniipet.html b/tabbed-buckets/sniipet.html
new file mode 100644
index 0000000..21a562d
--- /dev/null
+++ b/tabbed-buckets/sniipet.html
@@ -0,0 +1,99 @@
+<style>
+
+.maxBuckets {
+   width:100% !important;
+    }
+
+.hideBucket{
+   display:none !important;
+}
+.showBucket {
+   display:block !important;
+}
+
+.bucketTabs {
+    float: left;
+}
+
+.bucketTab {
+    display: inline-block;
+    min-width:65px;
+    height:27px;
+    text-align:center;
+    border: 1px solid #cccccc;
+    border-width: 1px 1px 0 1px;
+    border-radius:5px;
+    border-bottom-right-radius:0px;
+    border-bottom-left-radius:0px;
+    margin: 0px;
+    padding: 5px;
+    padding-top:10px;
+    cursor: pointer;
+    min-width: 20px;
+    font-size:10pt;
+/* Gradient background for the tab buttons */
+    background: #0497da; /* Old browsers */
+    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */
+    color:#FFFFFF;
+}
+
+.bucket-Tab.active {
+    background: #FFFFFF;
+    color:#000000;
+}
+</style>
+
+<div class="bucketTabs">
+    <div class="bucketTab active" data-no="2">Bucket 2</div>
+    <div class="bucketTab" data-no="3">Bucket 3</div>
+    <div class="bucketTab" data-no="4">Bucket 4</div>
+    <div class="bucketTab" data-no="5">Bucket 5</div>
+    <div class="bucketTab" data-no="6">Bucket 6</div>
+    <div class="bucketTab" data-no="7">Bucket 7</div>
+</div>
+
+<script>
+
+var $siteImLookingAt = arguments[0].closest('.ui-dialog').find('.sites_core').data('controllers').sites_core,
+    $bucketsArray = {};
+
+    // Add a class called maxBuckets to each bucket, this sets their width to 100%
+    $siteImLookingAt.find('.span1').addClass("maxBuckets");
+    $siteImLookingAt.find('.span2').addClass("maxBuckets");
+    $siteImLookingAt.find('.span3').addClass("maxBuckets");
+    $siteImLookingAt.find('.span4').addClass("maxBuckets");
+    $siteImLookingAt.find('.span5').addClass("maxBuckets");
+    $siteImLookingAt.find('.span6').addClass("maxBuckets");
+    $siteImLookingAt.find('.span7').addClass("maxBuckets");
+    $siteImLookingAt.find('.span8').addClass("maxBuckets");
+    $siteImLookingAt.find('.span9').addClass("maxBuckets");
+    $siteImLookingAt.find('.span10').addClass("maxBuckets");
+    $siteImLookingAt.find('.span11').addClass("maxBuckets");
+    $siteImLookingAt.find('.span12').addClass("maxBuckets");
+
+    // Cycle throuch all tab buttons, adding the showBucket class
+    for (var i=2;i<8;i++) {
+        $siteImLookingAt.find('div[data-order='+i+']').addClass('showBucket');
+    }
+    // hideAllShowOne removes showBucket from each bucket and adds the class hideBucket, except the one passed through by the function call.  The function then removes the active class from the highlighted button and adds it to clicked button.  Finally, it adds showBucket onto the requested bucket
+    hideAllShowOne = function(bucket) {
+        for (var i=2;i<8;i++) {
+            $siteImLookingAt.find('div[data-order='+i+']').removeClass('showBucket');
+            $siteImLookingAt.find('div[data-order='+i+']').addClass('hideBucket');
+        }
+        $siteImLookingAt.find('.bucketTab').removeClass("active"); // remove the active class from all DIVs
+        $siteImLookingAt.find('.bucketTab[data-no=' + bucket + ']').addClass("active"); // add the active class to the selected DIV
+        $siteImLookingAt.find('div[data-order='+bucket+']').addClass('showBucket');
+    };
+
+hideAllShowOne(2);
+
+// Adds a click event to each button
+$siteImLookingAt.find('.notice-tab[data-no]').bind('click', function(ev) {
+    hideAllShowOne($(this).data('no'));
+});
+
+</script>