gistfile1.diff

diff --git a/config.rb b/config.rb
index 7b9f9b3..e8dcf6f 100644
--- a/config.rb
+++ b/config.rb
@@ -24,3 +24,9 @@ configure :build do
   # Or use a different image path
   # set :http_path, "/Content/images/"
 end
+
+helpers do
+  def contact_form_link
+    "http://www.vu.edu.au/node/50415"
+  end
+end
diff --git a/source/images/blue-ajax-loader.gif b/source/images/blue-ajax-loader.gif
new file mode 100644
index 0000000..b192faa
Binary files /dev/null and b/source/images/blue-ajax-loader.gif differ
diff --git a/source/javascripts/main.js b/source/javascripts/main.js
index c15b136..e78fed6 100755
--- a/source/javascripts/main.js
+++ b/source/javascripts/main.js
@@ -2,18 +2,24 @@
 //= require_tree "./main/vendor"
 //= require_tree "./main/plugins"
 
-(function(window, $, Typekit, undefined) {
+(function(window, $, undefined) {
 
     'use strict';
 
     // Fix $.browser on jQuery 1.9.x for legacy IE detection
-    $.browser={};(function(){$.browser.msie=false;
-    $.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)\./)){
-    $.browser.msie=true;$.browser.version=RegExp.$1;}})();
+    $.browser = {};
+    (function(){
+        $.browser.msie = false;
+        $.browser.version = 0;
+        if(navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
+            $.browser.msie = true;
+            $.browser.version = RegExp.$1;
+        }
+    }());
 
     // Typekit
     try{
-        Typekit.load();
+        window.Typekit.load();
     } catch(e) {}
 
     // Setup zoom tour
@@ -21,38 +27,37 @@
 
     // carousel
     var carouselSettings = {
-      'controls': {
-        'item': '●',
-        'prev': '<i class="icon-chevron-left">&nbsp;</i>',
-        'next': '<i class="icon-chevron-right">&nbsp;</i>'
-      },
-      'a11y': {
         'controls': {
-          'item': 'Slide 1',
-          'play': 'Play',
-          'pause': 'Pause'
+            'item': '&#9679;',
+            'prev': '<i class="icon-chevron-left">&nbsp;</i>',
+            'next': '<i class="icon-chevron-right">&nbsp;</i>'
+        },
+        'a11y': {
+            'controls': {
+                'item': 'Slide 1',
+                'play': 'Play',
+                'pause': 'Pause'
+            }
+        },
+        'startIndex': 1,
+        'loop': true,
+        'auto': {
+            'enabled': true,
+            'timeout': 8000,
+            'pauseOnInteract': true
         }
-      },
-      'startIndex': 1,
-      'loop': true,
-      'auto': {
-        'enabled': true,
-        'timeout': 8000,
-        'pauseOnInteract': true
-      }
     };
 
     $('.carousel').slider(carouselSettings).bind('sliderChanged', function(e, newPos, oldPos) {
-      $(this).find('li').eq(newPos - 1).fadeIn(1000, function() {
-        if(this.style && this.style.removeAttribute) {
-          this.style.removeAttribute('filter');
-        }
-        $(this).parent().find('li').eq(oldPos - 1).fadeOut();
-      });
+        $(this).find('li').eq(newPos - 1).fadeIn(1000, function() {
+            if(this.style && this.style.removeAttribute) {
+                this.style.removeAttribute('filter');
+            }
+            $(this).parent().find('li').eq(oldPos - 1).fadeOut();
+        });
     });
 
+    $('.js-contact-form').loadDrupalForm();
     $('.tel span').hidePhone();
 
-
 }(window, jQuery));
-
diff --git a/source/javascripts/main/plugins/jquery.loadDrupalForm.js b/source/javascripts/main/plugins/jquery.loadDrupalForm.js
new file mode 100644
index 0000000..fa4e053
--- /dev/null
+++ b/source/javascripts/main/plugins/jquery.loadDrupalForm.js
@@ -0,0 +1,45 @@
+(function ($, window, document, undefined) {
+
+    'use strict';
+
+    var pluginName = 'loadDrupalForm',
+        defaults = {
+            'loadingClass': 'loading',
+            'selector': '.webform-client-form'
+        };
+
+    function Plugin ( element, options ) {
+        this.element = element;
+        this.$element = $(element);
+        this.settings = $.extend( {}, defaults, options );
+        this._defaults = defaults;
+        this._name = pluginName;
+        this.init();
+    }
+
+    Plugin.prototype = {
+        init: function () {
+            var $el = this.$element;
+            var href = $el.find('a').attr('href');
+            var loadingClass = this.settings.loadingClass;
+            if(href) {
+                $el.addClass(loadingClass)
+                    .load(href + ' ' + this.settings.selector, function() {
+                        $el.hide().removeClass(loadingClass).slideDown();
+                    });
+            }
+        }
+    };
+
+    // A really lightweight plugin wrapper around the constructor,
+    // preventing against multiple instantiations
+    $.fn[pluginName] = function (options) {
+        var _name = 'plugin_' + pluginName;
+        return this.each(function() {
+            if (!$.data(this, _name)) {
+                $.data(this, _name, new Plugin(this, options));
+            }
+        });
+    };
+
+}(jQuery, window, document));
diff --git a/source/sidebar.haml b/source/sidebar.haml
index 1ddacdd..e4acf35 100644
--- a/source/sidebar.haml
+++ b/source/sidebar.haml
@@ -1,15 +1,9 @@
 .subscribe
   %h3 Keep in touch
   %p Enter your details and be the first to know about important Change of Preference information from VU.
-  %form{:action => "http://www.vu.edu.au/", :method => "get"}
-    %label{:for => "frm-first-name"}
-      %input#frm-first-name{:name => "first-name", :type => "text", :placeholder => "First name"}
-    %label{:for => "frm-last-name"}
-      %input#frm-last-name{:name => "last-name", :type => "text", :placeholder => "Last name"}
-    %label{:for => "frm-email"}
-      %input#frm-email{:name => "email", :type => "text", :placeholder => "Your e-mail address"}
-    %p [checkbox] Subscribe to hear about the latest news and events from Victoria University
-    %input.btn-primary.btn{:type => "submit", :value => "Submit"}
+  .js-contact-form
+    %a.btn.btn-primary.nojs{:href => contact_form_link}
+      Sign me up
 
 .talk-to-vu
   %h3 Talk to VU
diff --git a/source/stylesheets/_bootstrap/forms.less b/source/stylesheets/_bootstrap/forms.less
index 06767bd..1c6a6bb 100644
--- a/source/stylesheets/_bootstrap/forms.less
+++ b/source/stylesheets/_bootstrap/forms.less
@@ -77,6 +77,7 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"],
+.webform-input,
 .uneditable-input {
   display: inline-block;
   height: @baseLineHeight;
@@ -116,6 +117,7 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"],
+.webform-input,
 .uneditable-input {
   background-color: @inputBackground;
   border: 1px solid @inputBorder;
diff --git a/source/stylesheets/_form.less b/source/stylesheets/_form.less
new file mode 100644
index 0000000..65742b7
--- /dev/null
+++ b/source/stylesheets/_form.less
@@ -0,0 +1,46 @@
+.js-contact-form.loading {
+  width: 20px;
+  height: 20px;
+  a {
+    display: none;
+  }
+  background: url('/images/blue-ajax-loader.gif') top left no-repeat;
+}
+
+.webform-client-form {
+  margin-bottom: 10px;
+}
+
+#webform-component-first-name, #webform-component-last-name {
+  display: inline-block;
+  margin-right: 16px;
+  input {
+    .webform-input;
+  }
+}
+
+#webform-component-email input {
+  .webform-input;
+}
+
+#webform-component-opt--in input {
+  margin: 0;
+  margin-right: 10px;
+}
+
+.required-fields-description, .honeypot-textfield {
+  display: none;
+}
+
+.form-actions {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  text-align: right;
+}
+
+#edit-submit {
+  .btn;
+  .btn-primary;
+}
diff --git a/source/stylesheets/_sidebar.less b/source/stylesheets/_sidebar.less
index 8401ba2..89fed50 100644
--- a/source/stylesheets/_sidebar.less
+++ b/source/stylesheets/_sidebar.less
@@ -42,4 +42,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/source/stylesheets/main.less b/source/stylesheets/main.less
index 82c625d..0af1a0a 100644
--- a/source/stylesheets/main.less
+++ b/source/stylesheets/main.less
@@ -8,6 +8,7 @@
 @import "_sidebar";
 @import "_tiles";
 @import "_background";
+@import "_form";
 
 .accessibility {
   .hide-text();