[gnome-web-www/wptest] added js and images for friends20

[Christy Eller <czeller src gnome org>]

commit 65547a9bc63016cb7e84092c6fc4bf37a9c35015
Author: czeller <iamchristyeller gmail com>
Date:   Tue Mar 13 13:53:10 2012 -0600

    added js and images for friends20

 theme/images/adopt-inactive.png          |  Bin 0 -> 4397 bytes
 theme/images/adopt-normal.png            |  Bin 0 -> 3854 bytes
 theme/images/art.png                     |  Bin 0 -> 9186 bytes
 theme/images/associate-inactive.png      |  Bin 0 -> 3358 bytes
 theme/images/associate-normal.png        |  Bin 0 -> 2286 bytes
 theme/images/bullet.png                  |  Bin 0 -> 440 bytes
 theme/images/donate-button.png           |  Bin 0 -> 4272 bytes
 theme/images/footer-friends.png          |  Bin 0 -> 10350 bytes
 theme/images/olpc-kids.jpg               |  Bin 0 -> 15945 bytes
 theme/images/philanthropist-inactive.png |  Bin 0 -> 2785 bytes
 theme/images/philanthropist-normal.png   |  Bin 0 -> 2083 bytes
 theme/images/sidebar-background.png      |  Bin 0 -> 818 bytes
 theme/images/sponsor-inactive.png        |  Bin 0 -> 2407 bytes
 theme/images/sponsor-normal.png          |  Bin 0 -> 2220 bytes
 theme/images/waterbrush-body-bg.jpg      |  Bin 0 -> 30633 bytes
 theme/js/loader.js                       |  170 ++++++++++++++++++++++++++++++
 16 files changed, 170 insertions(+), 0 deletions(-)
---
diff --git a/theme/images/adopt-inactive.png b/theme/images/adopt-inactive.png
new file mode 100644
index 0000000..4702f3e
Binary files /dev/null and b/theme/images/adopt-inactive.png differ
diff --git a/theme/images/adopt-normal.png b/theme/images/adopt-normal.png
new file mode 100644
index 0000000..f1136d7
Binary files /dev/null and b/theme/images/adopt-normal.png differ
diff --git a/theme/images/art.png b/theme/images/art.png
new file mode 100644
index 0000000..f5fc590
Binary files /dev/null and b/theme/images/art.png differ
diff --git a/theme/images/associate-inactive.png b/theme/images/associate-inactive.png
new file mode 100644
index 0000000..d9b00ac
Binary files /dev/null and b/theme/images/associate-inactive.png differ
diff --git a/theme/images/associate-normal.png b/theme/images/associate-normal.png
new file mode 100644
index 0000000..8b21009
Binary files /dev/null and b/theme/images/associate-normal.png differ
diff --git a/theme/images/bullet.png b/theme/images/bullet.png
new file mode 100644
index 0000000..0efda8d
Binary files /dev/null and b/theme/images/bullet.png differ
diff --git a/theme/images/donate-button.png b/theme/images/donate-button.png
new file mode 100644
index 0000000..036b94f
Binary files /dev/null and b/theme/images/donate-button.png differ
diff --git a/theme/images/footer-friends.png b/theme/images/footer-friends.png
new file mode 100644
index 0000000..9de705b
Binary files /dev/null and b/theme/images/footer-friends.png differ
diff --git a/theme/images/olpc-kids.jpg b/theme/images/olpc-kids.jpg
new file mode 100644
index 0000000..c90d94c
Binary files /dev/null and b/theme/images/olpc-kids.jpg differ
diff --git a/theme/images/philanthropist-inactive.png b/theme/images/philanthropist-inactive.png
new file mode 100644
index 0000000..1bf7862
Binary files /dev/null and b/theme/images/philanthropist-inactive.png differ
diff --git a/theme/images/philanthropist-normal.png b/theme/images/philanthropist-normal.png
new file mode 100644
index 0000000..3714584
Binary files /dev/null and b/theme/images/philanthropist-normal.png differ
diff --git a/theme/images/sidebar-background.png b/theme/images/sidebar-background.png
new file mode 100644
index 0000000..af5a076
Binary files /dev/null and b/theme/images/sidebar-background.png differ
diff --git a/theme/images/sponsor-inactive.png b/theme/images/sponsor-inactive.png
new file mode 100644
index 0000000..00fd9f2
Binary files /dev/null and b/theme/images/sponsor-inactive.png differ
diff --git a/theme/images/sponsor-normal.png b/theme/images/sponsor-normal.png
new file mode 100644
index 0000000..93101a2
Binary files /dev/null and b/theme/images/sponsor-normal.png differ
diff --git a/theme/images/waterbrush-body-bg.jpg b/theme/images/waterbrush-body-bg.jpg
new file mode 100644
index 0000000..a76e9f4
Binary files /dev/null and b/theme/images/waterbrush-body-bg.jpg differ
diff --git a/theme/js/loader.js b/theme/js/loader.js
new file mode 100644
index 0000000..b6cbedf
--- /dev/null
+++ b/theme/js/loader.js
@@ -0,0 +1,170 @@
+/**
+ * When a box is clicked, the hover functionality should be disabled
+ * so we create a lock, which, once set to true, overrides hover
+ * functionality until the lock is once again set to false
+ */
+var locked = false;
+/**
+ * Additionally, when a box is clicked, we need to know if that box
+ * had already been clicked (so that we could reset the look on everything)
+ */
+var toggled = false;
+
+$(document).ready(function(){
+    /* Hover functionality */
+    $('#boxes > div').hover(function() {
+        /* mouse in */
+
+        // if user has clicked on a box, we don't want hover to frakk things up
+        if (locked) {return false;}
+
+        // make all boxes but this grey
+        $('#boxes > div').not(this).addClass('greyed');
+
+        // save background image url for later restoration
+        $(this).data($(this).attr("id"), $(this).css("background-image"));
+
+        // remove background
+        $(this).css("background-image", "url(none)");
+
+        // show the hover text
+        $(this).children('.active-text').css("visibility", "visible");
+        }, function() {
+        /* mouse out */
+
+        // if user has clicked on a box, we don't want hover to frakk things up
+        if (locked) {return false;}
+
+        // remove grey from all boxes
+        $('#boxes > div').removeClass('greyed');
+
+        // hide the hover text
+        $(this).children('.active-text').css("visibility", "hidden");
+
+        // restore the background image
+        $(this).css("background-image", $(this).data($(this).attr("id")));
+    });
+
+    /* Click functionality */
+    $('#boxes > div').click(function() {
+        if (toggled) {
+            /**
+             * One of the boxes has already received a click, which means that
+             * somewhere there is one green box, and three grey ones.
+             * 
+             * It also means that there is one form showing, as well as a
+             * non-default text
+             */
+            if ($(this).hasClass('greyed')) {
+                /**
+                 * This box was not the previoulsy clicked box, thus we should
+                 * make all the other boxes grey, and otherwise restore them to
+                 * default configuration
+                 *
+                 * Any of the other paragraphs and forms should be hidden
+                 *
+                 * This element should be green, but remove background and
+                 * instead get text
+                 *
+                 * This paragraph/form should be visible
+                 */
+                // for all boxes except this
+                $('#boxes > div').not($(this)).each(function(i) {
+                    // add greyed
+                    $(this).addClass('greyed');
+
+                    // restore background
+                    $(this).css('background-image',
+                                $(this).data($(this).attr('id')));
+
+                    // hide text
+                    $(this).children('.active-text')
+                        .css('visibility', 'hidden');
+                });
+
+                // remove grey from this
+                $(this).removeClass('greyed');
+
+                // save this bakground-image for later restoration
+                $(this).data($(this).attr('id'),
+                             $(this).css('background-image'));
+
+                // remove background from this
+                $(this).css('background-image', 'url(none)');
+
+                // show this text
+                $(this).children('.active-text')
+                    .css('visibility', 'visible');
+                
+                // hide default below paragraph
+                $('p#donation-level').hide();
+
+                $('div#below > form').hide();
+
+                // show this form
+                $('#'+$(this).attr('id')+'-form').show();
+            } else {
+                /**
+                 * This box was the previously clicked one (i.e. something has
+                 * been toggled, and this one is still green, this must be the
+                 * one. The only logical effect is for the "active/toggled" box
+                 * to "untoggle" thus restoring all boxes back to default
+                 * configuration
+                 */
+                // for ALL boxes
+                $('#boxes > div').each(function(i) {
+                    // remove greyed
+                    $(this).removeClass('greyed');
+                });
+
+                // hide text
+                $(this).children('.active-text')
+                    .css('visibility', 'hidden');
+
+                // restore background
+                $(this).css('background-image',
+                            $(this).data($(this).attr('id')));
+
+                // hide all forms
+                $('div#below > form').hide();
+
+                // restore default below paragraph
+                $('p#donation-details').show();
+                
+                toggled = false;
+                locked = false;
+            }
+        } else {
+            /**
+             * We are toggling stuff for the first time, 
+             * all boxes except this one should be greyed, 
+             * default paragraph should be hidden, 
+             * this paragraph/form should be displayed
+             */
+            toggled = true;
+            locked = true;
+
+            // for all boxes except this
+            $('#boxes > div').not($(this)).each(function(i) {
+                // add greyed
+                $(this).addClass('greyed');
+            });
+
+            if ($(this).css('background-image') != 'none') {
+                $(this).data($(this).attr('id'),
+                             $(this).css('background-image'));
+                $(this).css('background-image', 'url(none)');
+            }
+
+            // show this text
+            $(this).children('.active-text')
+                .css('visibility', 'visible');
+
+            // hide default below paragraph
+            $('p#donation-details').hide();
+
+            // show this form
+            $('#'+$(this).attr('id')+'-form').show();
+        }
+    });
+});