tcaddy/hpu-sharepoint.css

## hpu-sharepoint.css
/* Hide all like links on IT pages */
form[action^='/admin-services/it'] [id^='likesElement-'],
  form[action^='/administrative-services/information-technology'] [id^='likesElement-'], {
  display: none;
}
/* Hide all 'Email a link' links on IT  pages */
form[action^='/admin-services/it'] li[id*='share'] a[title='Email a link'],
  form[action^='/administrative-services/information-technology'] li[id*='share'] a[title='Email a link'] {
  display: none;
}
/* Hide all ellipsis links on IT Tips and Tricks pages */
form[action^='/admin-services/it/tipsandtricks'] .ms-blog-commandSpace > [id^='commandBar']
  form[action^='/administrative-services/information-technology'] .ms-blog-commandSpace > [id^='commandBar'] {
  display: none;
}

## hpu-sharepoint.js
/*
 * The HPU object which should live in the global scope.
 */
var HPU = window.HPU || {}; // use HPU namespace to hold all our custom stuff
HPU.log_actions = true; // set to true to console log our actions, useful for debugging

/*
 * Begin to merge in Lucus' custom javascript code here
 */
HPU._initialized = false;  // Set to true after initialization.
// An array of HPU methods to execute on initialization.
// Add to this array using HPU.OnInit(object);
HPU._onInit = [];
/*
 * the rest of Lucas' code is in the function below...
 */


window.jQuery(function(){ // jQuery way to run things when page has loaded
  (function ($,undefined) { // wrap our function so we can (safely) use '$' instead of 'jQuery'; redefine undefined as undefined
    HPU.after_load_or_ajax = function() { // things that happen on page load or refresh after Ajax should go in this function
      /*if (!HPU.is_logged_in()) {
        HPU.hide_like_elements();
      }*/
      HPU.modify_empty_list_messages();
      HPU.ellipsify_did_you_know();

      HPU.hide_oit_workshop_meta_info(); // Lucas stuff...
      HPU.run_things_to_extend_HPU(); // Lucas stuff...
      HPU.hide_secondary_command_link(); // Lucas stuff...
      HPU.run_things_for_onInit(); // Lucas stuff...

      // Initialize the HPU object 2nd to last
      HPU.init(); // Lucas stuff...

      // do the force CSS reflow last...
      HPU.force_reflow($("body")[0]);
    };
    HPU.is_logged_in = function() { // function to determine if a user is logged in
      var logged_in = false;
      try {
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        if (web.get_currentUser()) {
          logged_in = true;
        }
      } catch(e) {}
      if (HPU.log_actions) {
        console.log('logged in?: '+(logged_in ? 'Yes' : 'No'));
      }
      return logged_in;
    };
    HPU.hide_like_elements = function() {
      // hides the link links
      var sel = $("[id^='likesElement-']");
      if (sel.length>0) {
        sel.hide();
        if (HPU.log_actions) {
          console.log(sel.length+' like element(s) hidden.');
        }
      }
    }
    HPU.modify_empty_list_messages = function() {
      // change message on IT homepage
      var sel = $('td.ms-vb:contains(There are no items to show in this view of the "OIT Workshops" list.)');
      if (sel.length>0) {
        sel.text('There are currently no workshops scheduled.');
        if (HPU.log_actions) {
          console.log('replaced text of an empty list message');
        }
      }
    }
    HPU.ellipsify_did_you_know = function() {
      // replaces "Did You Know?" with "Did You Know..."

      // This won't work on page load, but if you run it from the
      // console, it will work.  It is because some other javascript is
      // changing the form[action] attribute that we use to know that we are
      // on an IT webpage.
      var sel_string = "form[action^='/admin-services/it'] .hpu-did-you-knows > *:contains(Did You Know?)"+
        ", form[action^='/administrative-services/information-technology'] .hpu-did-you-knows > *:contains(Did You Know?)";
      var sel = $(sel_string);
      if (sel.length===0) {
        // we might still be on an IT webpage, let's check another way
        var sel2_string = "head title:contains(OIT), head title:contains(Information Technology)";
        var sel2 = $(sel2_string);
        if (sel2.length>0) {
          sel_string = ".hpu-did-you-knows > *:contains(Did You Know?)";
          sel = $(sel_string);
        }
      }
      if (sel.length>0) {
        sel.text('Did You Know...');
        if (HPU.log_actions) {
          console.log('replaced question mark with ellipsis in "Did you know" text');
          console.log('this is our select string for ellisification: '+sel_string);
        }
      }
    }
    HPU.force_reflow = function(element) {
      // things that force a reflow: http://stackoverflow.com/a/27637245
      // this solution is based on: http://stackoverflow.com/a/21665117
      if ('offsetHeight' in element) {
        var offset = element.offsetHeight;
        if (HPU.log_actions) {
          console.log('forced a CSS reflow');
        }
      }
    }

    /*
     * begin Lucus' functions...
     */
    HPU.extendHPU = function(object, init, force) {
      // Set default value for force.
      if ( typeof(force) === 'undefined' ) {
        force = false;
      }

      var i;
      // Add each given method/property to this object (HPU).
      for (i in object) {
        if ( force === true || typeof(this[i]) === 'undefined' ) {
          this[i] = object[i];
        }
      }
    }
    HPU.init = function() {
      // Initialization this object and what ever was given to this.onInit to be initialized.
      // Foreach method we need to initialize.
      _.each(_.sortBy(this._onInit, 'priority'), function(onInit, index) {
        this.initOther(onInit);

      }, this);

      this._initialized = true;
    }
    HPU.initOther = function(onInit) {
      // Execute a given method on init.

      // If the given method is a function
      if ( typeof this[onInit.method] === 'function' ) {
        // Execute HPU.fooBar()
        this[onInit.method]();
      } else {
        if ( (typeof(this[onInit.method]) !== 'undefined') && (typeof(this[onInit.method].init) === 'function') ) {
          // Execute HPU.fooBar.init()
          this[onInit.method].init();
        }
      }
    }
    HPU.onInit = function(initParams) {
      // Add methods to be run on init.

      // If we weren't given an object or initParams.method isn't defined.
      if ( typeof(initParams) === 'undefined' || typeof(initParams.method) === 'undefined' ) {
        return false;
      }

      // Default values.
      var defaults = {
        priority: 10
      };

      initParams = _.extend(defaults, initParams);

      // Add to init queu.
      this._onInit.push(initParams);

      // If initialization has already happend go ahead and run it.
      if ( this._initialized === true ) {
        this.initOther(initParams);
      }
    }
    HPU.hide_oit_workshop_meta_info = function() {
      $('#ctl00_ctl45_g_02183396_7966_4c18_8d77_480e45c99d95_ctl00_ctl10_ctl00_InitContentType').closest('td').hide();
    }
    HPU.run_things_to_extend_HPU = function() {
      HPU.extendHPU({
        // Hide recent links in the left side nav.
        hideRecent: function() {
          $(".ms-core-listMenu-item:contains('Recent')").parent().hide();
        }
      });
      HPU.extendHPU({
        // Submit the login form to the TMG.
        formBase: {


          /* - - Methods/properties that need to be supplied. - - */


          // Form action URL.
          // Must be provided when extended.
          // action: null,

          // Form method.
          // Must be provided when extended.
          // method: 'post',

          // Source Form element.
          // Must be provided when extended.
          // el: $('#LoginForm'),

          // DOM events to watch
          // Must be provided when extended.
          // events: [
            // The following entries should be provided to submit the form.
            // ['.misc-input-selector', 'keypress', 'watchForEnter'],
            // ['.submit-button-selector', 'click', 'userSubmit']


            // These would be optional custom events.
            // ['Some Selector', 'Some Event', 'Some Method of your object'],
            // ['.myInput', 'focus', 'myMethod'],
          // ],

          // Fields to submit
          // Must be provided when extended.
          // fields: {
          //  field1: 'A static value',
          //  field2: function() { return "Some value"; },
          //  field3: function() { return $.proxy(this.someMethod, this); },
          // },

          // User fields to validate
          // Must be provided when extended.
          // validate: {
          //  field1: {
          //    el: $('.some-selector'),
          //    errorMsg: 'Please provide field 1.',
          //    required: true,
          //    value: function() { return this.el.val(); },
          //  },
          //  field2: {
          //    el: $('.another-selector'),
          //    errorMsg: 'This field is not required so this message won't be seen.',
          //    required: false,
          //    value: function() { return this.el.val(); }
          //  }
          // },


          /* - - Methods/properties that shouldn't need to be overridden. - - */


          // Error log.
          errors: [],


          // The form element.
          form: $('<form>'),


          // Initialize class.
          init: function() {
            // If the login form isn't present.
            if ( this.el.length === 0 ) {
              return false;
            }

            // Initiate events.
            this.initEvents();
            return true;
          },


          // Initiate events.
          initEvents: function() {
            _.each(this.events, function(event) {
              $(event[0]).on(event[1], $.proxy(this[event[2]], this));
            }, this);
          },


          // Append given input to the form.
          appendInput: function(name, value) {
            if ( typeof value === 'function' ) {
              value = value();
            }

            return $('<input>')
              .attr('type', 'hidden')
              .attr('name', name)
              .val(value)
              .appendTo(this.form);
          },


          // Display an error.
          error: function() {

            // Get error container.
            var div = this.errorContainer();

            // If there are no errors to display
            if ( this.errors.length === 0 ) {
              return false;
            }

            // Foreach error.
            for (var i = 0; i < this.errors.length; i++) {
              $('<p>')
                .html(this.errors[i])
                .appendTo(div);
            }

            // Display errors.
            div.show();

            // Clear errors.
            this.errors = [];

            return true;
          },


          // Get/create/empty the error container.
          errorContainer: function() {
            // Create error div.
            if ( this.el.find('.error').length === 0 ) {
              return $('<div>')
                .addClass('error')
                .css('display', 'none')
                .appendTo(this.el);
            }

            // Get error div.
            else {
              return this.el.find('.error')
                .hide()
                .empty();
            }
          },


          // User submits the form.
          userSubmit: function(event) {

            // Prevent any default form behavior.
            if ( event !== undefined ) {
              event.preventDefault();
            }

            // Validate user input.
            for ( var key in this.validate ) {
              if ( this.validate.hasOwnProperty(key) ) {

                var field = this.validate[key];

                if ( field.required && field.value() === '' ) {
                  this.errors.push(field.errorMsg);
                }

              }
            }

            // If there where errors display them and stop
            if ( this.errors.length > 0 ) {
              this.error();
              return false;
            }

            // Submit the form!
            this.submit();
          },


          // Submit the form.
          submit: function() {

            // Setup the form element.
            this.form
              .attr('action', this.action)
              .attr('method', this.method)
              .css('display', 'none');

            // Add each field to the form.
            for ( var key in this.fields ) {
              if ( this.fields.hasOwnProperty(key) ) {

                // Append input for the field.
                if ( typeof this.fields[key] === 'function' ) {
                  this.appendInput(key, $.proxy(this.fields[key], this));
                } else {
                  this.appendInput(key, this.fields[key]);
                }

              }
            }

            // Append form to the body tag.
            this.form
              .appendTo($('body'))
              .submit();
          },


          // Watch for user to press enter to submit the form
          watchForEnter: function( event ) {

            if ( event.keyCode != keyCodes.enter ) {
              return;
            }

            event.preventDefault();

            this.userSubmit();

            return;
          }

        }

      });
      HPU.extendHPU({
        /*
         * Get the tallest half width ticket's height and set
         * all the set all ticket's height to match.
         */
        setTicketsHeight: function() {

          // For storing the tallest ticket height.
          var tallestTicket = 0;

          // For storing tickets in the current row.
          var ticketRow = $([]);

          $('.ticket.half').height('auto');

          $('.ticket.half').each(function(){
            // Add ticket to current row reference.
            ticketRow = ticketRow.add(this);

            // Get the current ticket height.
            var height = $(this).outerHeight();

            // See if this is the tallest ticket thus far.
            if ( height > tallestTicket )
              tallestTicket = height;

            // If this isn't the last ticket in the row.
            if ( ! $(this).hasClass('last') )
              return;

            // Set all tickets in this row to match the tallest tickets height.
            ticketRow.height(tallestTicket + "px");

            // Reset the tallest ticket.
            tallestTicket = 0;

            // Reset the current row.
            ticketRow = $([]);
          });

          return true;
        },

        initTickets: function() {
          this.setTicketsHeight();

          // TODO: Make this resize work.
          $(window).resize( $.proxy(this.setTicketsHeight(), this) );
        }
      });
      HPU.extendHPU({
        // JS for the global menu on mobile devices.
        globalMobileMenu: {

          $toggle: $('.mobile-menu-toggle-global'),

          $el: $('.main-menu'),

          menuStyle: null,

          // DOM events to watch
          events: [
            ['.mobile-menu-toggle-global', 'click', 'toggle'],
            ['.main-menu .toggle-submenu', 'click', 'toggleSubmenu'],
            [window, 'resize', 'resize']
          ],

          // Initialize class.
          init: function() {
            this.addIcons();
            this.resize();
            this.initEvents();
          },


          // Initiate events.
          initEvents: function() {
            _.each(this.events, function(event) {
              $(event[0]).on(event[1], $.proxy(this[event[2]], this));
            }, this);
          },

          toggle: function() {
            if ( this.$el.is(':visible') ) {
              this.hide();
            } else {
              this.display();
            }
          },

          display: function() {
            this.$el.show();
            this.$toggle.addClass('open');
          },

          hide: function() {
            this.$el.hide();
            this.$toggle.removeClass('open');
          },

          addIcons: function() {
            console.log('globalMobileMenu.addIcons()');
            var links = this.$el.find('a');
            for (var i = 0, n = links.length; i < n; i++) {
              if ( $(links[i]).siblings('ul').length === 0 ) {
                continue;
              }
              this.addIcon( $(links[i]) );
            }
          },

          addIcon: function( $el ) {
            console.log('globalMobileMenu.addIcon()');
            if ( $el.hasClass('selected') ) {
              $el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-open-grey"></span></a>');
            } else {
              $el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-closed-grey"></span></a>');
            }
          },

          toggleSubmenu: function( e ) {
            e.preventDefault();
            var $target = $(e.target);
            var $icon = this.getIcon( $target );
            var $submenu = this.getSubMenu( $target );
            if ( $submenu.is(':visible') ) {
              this.hideSubMenu( $icon, $submenu );
            } else {
              this.displaySubMenu( $icon, $submenu );
            }
          },


          getIcon: function( $el ) {
            if ( $el.hasClass('toggle-submenu') ) {
              return $el.find('.icon');
            }
            return $el;
          },

          getSubMenu: function( $el ) {
            var $submenu = $el.siblings('ul');
            if ( $submenu.length === 0 ) {
              return this.getSubMenu( $el.parent() );
            }
            return $submenu;
          },

          displaySubMenu: function( $icon, $submenu ) {
            $submenu.show();
            $icon
              .removeClass('icons-menu-closed-grey')
              .addClass('icons-menu-open-grey');
          },
          hideSubMenu: function( $icon, $submenu ) {
            $submenu.hide();
            $icon
              .removeClass('icons-menu-open-grey')
              .addClass('icons-menu-closed-grey');
          },

          /*
           * When the window is resized.
           */
          resize: function() {
            // Get the new window size.
            var width = $(window).width();
            var menuStyle;

            // Mobile screen size.
            if ( width < 667 ) {
              menuStyle = 'mobile';
            }

            // All other devices.
            else {
              menuStyle = 'desktop';
            }

            // If menu style didn't change.
            if ( this.menuStyle == menuStyle ) {
              return;
            }

            // Update current menu style.
            this.menuStyle = menuStyle;
          }

        },

        // JS for collapsible side nav.
        collapsibleSideNav: {

          $toggle: $('.mobile-menu-toggle-sidenav'),

          $el: $('.sideNav-menu'),

          // DOM events to watch
          events: [
            ['.mobile-menu-toggle-sidenav', 'click', 'toggle'],
            ['.sideNav .toggle-submenu', 'click', 'toggleSubmenu'],
            [window, 'resize', 'resize']
          ],

          // Initialize class.
          init: function() {
            // Initiate events.
            this.displayActive();
            this.addIcons();
            this.initEvents();
            this.resize();
          },


          displayActive: function() {
            var $submenus = this.$el.find('ul ul');
            for (var i = 0, n = $submenus.length; i < n; i++) {
              if ( $( $submenus[i] ).find('li.selected').length > 0 ) {
                $($submenus[i]).siblings('a').addClass('selected');
                $($submenus[i]).parent().addClass('selected');
              }
            };
            // var $submenus = this.$el.find('ul ul');
            // for (var i = 0, n = $submenus.length; i < n; i++) {
            //  if ( $( $submenus[i] ).find('li.selected').length > 0 ) {
            //    this.displaySubMenu(  $($submenus[i]).siblings('.toggle-submenu'), $($submenus[i]) );
            //  }
            // };
          },

          // Initiate events.
          initEvents: function() {
            _.each(this.events, function(event) {
              $(event[0]).on(event[1], $.proxy(this[event[2]], this));
            }, this);
          },

          toggle: function() {
            if ( this.$el.is(':visible') ) {
              this.hide();
            } else {
              this.display();
            }
          },

          toggleSubmenu: function( e ) {
            e.preventDefault();
            var $target = $(e.target);
            var $icon = this.getIcon( $target );
            var $submenu = this.getSubMenu( $target );
            if ( $submenu.is(':visible') ) {
              this.hideSubMenu( $icon, $submenu );
            } else {
              this.displaySubMenu( $icon, $submenu );
            }
          },

          display: function() {
            this.$el.show();
            this.$toggle.addClass('open');
            this.$toggle.children('.icon')
              .removeClass('icons-plus-20')
              .addClass('icons-minus-20');
          },

          hide: function() {
            this.$el.hide();
            this.$toggle.removeClass('open');
            this.$toggle.children('.icon')
              .removeClass('icons-minus-20')
              .addClass('icons-plus-20');
          },

          getIcon: function( $el ) {
            if ( $el.hasClass('toggle-submenu') ) {
              return $el.find('.icon');
            }
            return $el;
          },

          getSubMenu: function( $el ) {
            var $submenu = $el.siblings('ul');
            if ( $submenu.length === 0 ) {
              return this.getSubMenu( $el.parent() );
            }
            return $submenu;
          },

          displaySubMenu: function( $icon, $submenu ) {
            $submenu.show();
            $icon
              .removeClass('icons-menu-closed')
              .addClass('icons-menu-open');
          },
          hideSubMenu: function( $icon, $submenu ) {
            $submenu.hide();
            $icon
              .removeClass('icons-menu-open')
              .addClass('icons-menu-closed');
          },

          addIcons: function() {
            var links = this.$el.find('a');
            for (var i = 0, n = links.length; i < n; i++) {
              if ( $(links[i]).siblings('ul').length === 0 ) {
                continue;
              }
              this.addIcon( $(links[i]) );
            }
          },

          addIcon: function( $el ) {
            if ( $el.hasClass('selected') ) {
              $el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-open"></span></a>');
            } else {
              $el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-closed"></span></a>');
            }
          },

          /*
           * When the window is resized.
           */
          resize: function() {
            // Get the new window size.
            var width = $(window).width();
            var menuStyle;

            // Mobile screen size.
            if ( width < 667 ) {
              this.hide();
            }

            // All other devices.
            else {
              this.display();
            }
          }

        }

      });

    }
    HPU.run_things_for_onInit = function() {
      // Add login form initialization.
      HPU.onInit({
        method: 'hideRecent',
        priority: 0
      });

      // Initialize globalMobileMenu.
      HPU.onInit({
        method: 'globalMobileMenu',
        priority: 0
      });

      // Initialize collapsibleSideNav.
      HPU.onInit({
        method: 'collapsibleSideNav',
        priority: 0
      });

      // Add login form initialization.
      HPU.onInit({
        method: 'initTickets',
        priority: 0
      });
    }
    HPU.hide_secondary_command_link = function() {
      $(".ms-secondaryCommandLink").hide();
    }
    /*
     * end Lucus' functions...
     */

    HPU.after_load_or_ajax(); // run our stuff...
  })(window.jQuery);
});
	/* Hide all like links on IT pages */
	form[action^='/admin-services/it'] [id^='likesElement-'],
	form[action^='/administrative-services/information-technology'] [id^='likesElement-'], {
	display: none;
	}
	/* Hide all 'Email a link' links on IT pages */
	form[action^='/admin-services/it'] li[id*='share'] a[title='Email a link'],
	form[action^='/administrative-services/information-technology'] li[id*='share'] a[title='Email a link'] {
	display: none;
	}
	/* Hide all ellipsis links on IT Tips and Tricks pages */
	form[action^='/admin-services/it/tipsandtricks'] .ms-blog-commandSpace > [id^='commandBar']
	form[action^='/administrative-services/information-technology'] .ms-blog-commandSpace > [id^='commandBar'] {
	display: none;
	}
	/*
	* The HPU object which should live in the global scope.
	*/
	var HPU = window.HPU \|\| {}; // use HPU namespace to hold all our custom stuff
	HPU.log_actions = true; // set to true to console log our actions, useful for debugging

	/*
	* Begin to merge in Lucus' custom javascript code here
	*/
	HPU._initialized = false; // Set to true after initialization.
	// An array of HPU methods to execute on initialization.
	// Add to this array using HPU.OnInit(object);
	HPU._onInit = [];
	/*
	* the rest of Lucas' code is in the function below...
	*/


	window.jQuery(function(){ // jQuery way to run things when page has loaded
	(function ($,undefined) { // wrap our function so we can (safely) use '$' instead of 'jQuery'; redefine undefined as undefined
	HPU.after_load_or_ajax = function() { // things that happen on page load or refresh after Ajax should go in this function
	/*if (!HPU.is_logged_in()) {
	HPU.hide_like_elements();
	}*/
	HPU.modify_empty_list_messages();
	HPU.ellipsify_did_you_know();

	HPU.hide_oit_workshop_meta_info(); // Lucas stuff...
	HPU.run_things_to_extend_HPU(); // Lucas stuff...
	HPU.hide_secondary_command_link(); // Lucas stuff...
	HPU.run_things_for_onInit(); // Lucas stuff...

	// Initialize the HPU object 2nd to last
	HPU.init(); // Lucas stuff...

	// do the force CSS reflow last...
	HPU.force_reflow($("body")[0]);
	};
	HPU.is_logged_in = function() { // function to determine if a user is logged in
	var logged_in = false;
	try {
	var context = new SP.ClientContext.get_current();
	var web = context.get_web();
	if (web.get_currentUser()) {
	logged_in = true;
	}
	} catch(e) {}
	if (HPU.log_actions) {
	console.log('logged in?: '+(logged_in ? 'Yes' : 'No'));
	}
	return logged_in;
	};
	HPU.hide_like_elements = function() {
	// hides the link links
	var sel = $("[id^='likesElement-']");
	if (sel.length>0) {
	sel.hide();
	if (HPU.log_actions) {
	console.log(sel.length+' like element(s) hidden.');
	}
	}
	}
	HPU.modify_empty_list_messages = function() {
	// change message on IT homepage
	var sel = $('td.ms-vb:contains(There are no items to show in this view of the "OIT Workshops" list.)');
	if (sel.length>0) {
	sel.text('There are currently no workshops scheduled.');
	if (HPU.log_actions) {
	console.log('replaced text of an empty list message');
	}
	}
	}
	HPU.ellipsify_did_you_know = function() {
	// replaces "Did You Know?" with "Did You Know..."

	// This won't work on page load, but if you run it from the
	// console, it will work. It is because some other javascript is
	// changing the form[action] attribute that we use to know that we are
	// on an IT webpage.
	var sel_string = "form[action^='/admin-services/it'] .hpu-did-you-knows > *:contains(Did You Know?)"+
	", form[action^='/administrative-services/information-technology'] .hpu-did-you-knows > *:contains(Did You Know?)";
	var sel = $(sel_string);
	if (sel.length===0) {
	// we might still be on an IT webpage, let's check another way
	var sel2_string = "head title:contains(OIT), head title:contains(Information Technology)";
	var sel2 = $(sel2_string);
	if (sel2.length>0) {
	sel_string = ".hpu-did-you-knows > *:contains(Did You Know?)";
	sel = $(sel_string);
	}
	}
	if (sel.length>0) {
	sel.text('Did You Know...');
	if (HPU.log_actions) {
	console.log('replaced question mark with ellipsis in "Did you know" text');
	console.log('this is our select string for ellisification: '+sel_string);
	}
	}
	}
	HPU.force_reflow = function(element) {
	// things that force a reflow: http://stackoverflow.com/a/27637245
	// this solution is based on: http://stackoverflow.com/a/21665117
	if ('offsetHeight' in element) {
	var offset = element.offsetHeight;
	if (HPU.log_actions) {
	console.log('forced a CSS reflow');
	}
	}
	}

	/*
	* begin Lucus' functions...
	*/
	HPU.extendHPU = function(object, init, force) {
	// Set default value for force.
	if ( typeof(force) === 'undefined' ) {
	force = false;
	}

	var i;
	// Add each given method/property to this object (HPU).
	for (i in object) {
	if ( force === true \|\| typeof(this[i]) === 'undefined' ) {
	this[i] = object[i];
	}
	}
	}
	HPU.init = function() {
	// Initialization this object and what ever was given to this.onInit to be initialized.
	// Foreach method we need to initialize.
	_.each(_.sortBy(this._onInit, 'priority'), function(onInit, index) {
	this.initOther(onInit);

	}, this);

	this._initialized = true;
	}
	HPU.initOther = function(onInit) {
	// Execute a given method on init.

	// If the given method is a function
	if ( typeof this[onInit.method] === 'function' ) {
	// Execute HPU.fooBar()
	this[onInit.method]();
	} else {
	if ( (typeof(this[onInit.method]) !== 'undefined') && (typeof(this[onInit.method].init) === 'function') ) {
	// Execute HPU.fooBar.init()
	this[onInit.method].init();
	}
	}
	}
	HPU.onInit = function(initParams) {
	// Add methods to be run on init.

	// If we weren't given an object or initParams.method isn't defined.
	if ( typeof(initParams) === 'undefined' \|\| typeof(initParams.method) === 'undefined' ) {
	return false;
	}

	// Default values.
	var defaults = {
	priority: 10
	};

	initParams = _.extend(defaults, initParams);

	// Add to init queu.
	this._onInit.push(initParams);

	// If initialization has already happend go ahead and run it.
	if ( this._initialized === true ) {
	this.initOther(initParams);
	}
	}
	HPU.hide_oit_workshop_meta_info = function() {
	$('#ctl00_ctl45_g_02183396_7966_4c18_8d77_480e45c99d95_ctl00_ctl10_ctl00_InitContentType').closest('td').hide();
	}
	HPU.run_things_to_extend_HPU = function() {
	HPU.extendHPU({
	// Hide recent links in the left side nav.
	hideRecent: function() {
	$(".ms-core-listMenu-item:contains('Recent')").parent().hide();
	}
	});
	HPU.extendHPU({
	// Submit the login form to the TMG.
	formBase: {


	/* - - Methods/properties that need to be supplied. - - */


	// Form action URL.
	// Must be provided when extended.
	// action: null,

	// Form method.
	// Must be provided when extended.
	// method: 'post',

	// Source Form element.
	// Must be provided when extended.
	// el: $('#LoginForm'),

	// DOM events to watch
	// Must be provided when extended.
	// events: [
	// The following entries should be provided to submit the form.
	// ['.misc-input-selector', 'keypress', 'watchForEnter'],
	// ['.submit-button-selector', 'click', 'userSubmit']


	// These would be optional custom events.
	// ['Some Selector', 'Some Event', 'Some Method of your object'],
	// ['.myInput', 'focus', 'myMethod'],
	// ],

	// Fields to submit
	// Must be provided when extended.
	// fields: {
	// field1: 'A static value',
	// field2: function() { return "Some value"; },
	// field3: function() { return $.proxy(this.someMethod, this); },
	// },

	// User fields to validate
	// Must be provided when extended.
	// validate: {
	// field1: {
	// el: $('.some-selector'),
	// errorMsg: 'Please provide field 1.',
	// required: true,
	// value: function() { return this.el.val(); },
	// },
	// field2: {
	// el: $('.another-selector'),
	// errorMsg: 'This field is not required so this message won't be seen.',
	// required: false,
	// value: function() { return this.el.val(); }
	// }
	// },


	/* - - Methods/properties that shouldn't need to be overridden. - - */


	// Error log.
	errors: [],


	// The form element.
	form: $('<form>'),


	// Initialize class.
	init: function() {
	// If the login form isn't present.
	if ( this.el.length === 0 ) {
	return false;
	}

	// Initiate events.
	this.initEvents();
	return true;
	},


	// Initiate events.
	initEvents: function() {
	_.each(this.events, function(event) {
	$(event[0]).on(event[1], $.proxy(this[event[2]], this));
	}, this);
	},


	// Append given input to the form.
	appendInput: function(name, value) {
	if ( typeof value === 'function' ) {
	value = value();
	}

	return $('<input>')
	.attr('type', 'hidden')
	.attr('name', name)
	.val(value)
	.appendTo(this.form);
	},


	// Display an error.
	error: function() {

	// Get error container.
	var div = this.errorContainer();

	// If there are no errors to display
	if ( this.errors.length === 0 ) {
	return false;
	}

	// Foreach error.
	for (var i = 0; i < this.errors.length; i++) {
	$('<p>')
	.html(this.errors[i])
	.appendTo(div);
	}

	// Display errors.
	div.show();

	// Clear errors.
	this.errors = [];

	return true;
	},


	// Get/create/empty the error container.
	errorContainer: function() {
	// Create error div.
	if ( this.el.find('.error').length === 0 ) {
	return $('<div>')
	.addClass('error')
	.css('display', 'none')
	.appendTo(this.el);
	}

	// Get error div.
	else {
	return this.el.find('.error')
	.hide()
	.empty();
	}
	},


	// User submits the form.
	userSubmit: function(event) {

	// Prevent any default form behavior.
	if ( event !== undefined ) {
	event.preventDefault();
	}

	// Validate user input.
	for ( var key in this.validate ) {
	if ( this.validate.hasOwnProperty(key) ) {

	var field = this.validate[key];

	if ( field.required && field.value() === '' ) {
	this.errors.push(field.errorMsg);
	}

	}
	}

	// If there where errors display them and stop
	if ( this.errors.length > 0 ) {
	this.error();
	return false;
	}

	// Submit the form!
	this.submit();
	},


	// Submit the form.
	submit: function() {

	// Setup the form element.
	this.form
	.attr('action', this.action)
	.attr('method', this.method)
	.css('display', 'none');

	// Add each field to the form.
	for ( var key in this.fields ) {
	if ( this.fields.hasOwnProperty(key) ) {

	// Append input for the field.
	if ( typeof this.fields[key] === 'function' ) {
	this.appendInput(key, $.proxy(this.fields[key], this));
	} else {
	this.appendInput(key, this.fields[key]);
	}

	}
	}

	// Append form to the body tag.
	this.form
	.appendTo($('body'))
	.submit();
	},


	// Watch for user to press enter to submit the form
	watchForEnter: function( event ) {

	if ( event.keyCode != keyCodes.enter ) {
	return;
	}

	event.preventDefault();

	this.userSubmit();

	return;
	}

	}

	});
	HPU.extendHPU({
	/*
	* Get the tallest half width ticket's height and set
	* all the set all ticket's height to match.
	*/
	setTicketsHeight: function() {

	// For storing the tallest ticket height.
	var tallestTicket = 0;

	// For storing tickets in the current row.
	var ticketRow = $([]);

	$('.ticket.half').height('auto');

	$('.ticket.half').each(function(){
	// Add ticket to current row reference.
	ticketRow = ticketRow.add(this);

	// Get the current ticket height.
	var height = $(this).outerHeight();

	// See if this is the tallest ticket thus far.
	if ( height > tallestTicket )
	tallestTicket = height;

	// If this isn't the last ticket in the row.
	if ( ! $(this).hasClass('last') )
	return;

	// Set all tickets in this row to match the tallest tickets height.
	ticketRow.height(tallestTicket + "px");

	// Reset the tallest ticket.
	tallestTicket = 0;

	// Reset the current row.
	ticketRow = $([]);
	});

	return true;
	},

	initTickets: function() {
	this.setTicketsHeight();

	// TODO: Make this resize work.
	$(window).resize( $.proxy(this.setTicketsHeight(), this) );
	}
	});
	HPU.extendHPU({
	// JS for the global menu on mobile devices.
	globalMobileMenu: {

	$toggle: $('.mobile-menu-toggle-global'),

	$el: $('.main-menu'),

	menuStyle: null,

	// DOM events to watch
	events: [
	['.mobile-menu-toggle-global', 'click', 'toggle'],
	['.main-menu .toggle-submenu', 'click', 'toggleSubmenu'],
	[window, 'resize', 'resize']
	],

	// Initialize class.
	init: function() {
	this.addIcons();
	this.resize();
	this.initEvents();
	},


	// Initiate events.
	initEvents: function() {
	_.each(this.events, function(event) {
	$(event[0]).on(event[1], $.proxy(this[event[2]], this));
	}, this);
	},

	toggle: function() {
	if ( this.$el.is(':visible') ) {
	this.hide();
	} else {
	this.display();
	}
	},

	display: function() {
	this.$el.show();
	this.$toggle.addClass('open');
	},

	hide: function() {
	this.$el.hide();
	this.$toggle.removeClass('open');
	},

	addIcons: function() {
	console.log('globalMobileMenu.addIcons()');
	var links = this.$el.find('a');
	for (var i = 0, n = links.length; i < n; i++) {
	if ( $(links[i]).siblings('ul').length === 0 ) {
	continue;
	}
	this.addIcon( $(links[i]) );
	}
	},

	addIcon: function( $el ) {
	console.log('globalMobileMenu.addIcon()');
	if ( $el.hasClass('selected') ) {
	$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-open-grey"></span></a>');
	} else {
	$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-closed-grey"></span></a>');
	}
	},

	toggleSubmenu: function( e ) {
	e.preventDefault();
	var $target = $(e.target);
	var $icon = this.getIcon( $target );
	var $submenu = this.getSubMenu( $target );
	if ( $submenu.is(':visible') ) {
	this.hideSubMenu( $icon, $submenu );
	} else {
	this.displaySubMenu( $icon, $submenu );
	}
	},


	getIcon: function( $el ) {
	if ( $el.hasClass('toggle-submenu') ) {
	return $el.find('.icon');
	}
	return $el;
	},

	getSubMenu: function( $el ) {
	var $submenu = $el.siblings('ul');
	if ( $submenu.length === 0 ) {
	return this.getSubMenu( $el.parent() );
	}
	return $submenu;
	},

	displaySubMenu: function( $icon, $submenu ) {
	$submenu.show();
	$icon
	.removeClass('icons-menu-closed-grey')
	.addClass('icons-menu-open-grey');
	},
	hideSubMenu: function( $icon, $submenu ) {
	$submenu.hide();
	$icon
	.removeClass('icons-menu-open-grey')
	.addClass('icons-menu-closed-grey');
	},

	/*
	* When the window is resized.
	*/
	resize: function() {
	// Get the new window size.
	var width = $(window).width();
	var menuStyle;

	// Mobile screen size.
	if ( width < 667 ) {
	menuStyle = 'mobile';
	}

	// All other devices.
	else {
	menuStyle = 'desktop';
	}

	// If menu style didn't change.
	if ( this.menuStyle == menuStyle ) {
	return;
	}

	// Update current menu style.
	this.menuStyle = menuStyle;
	}

	},

	// JS for collapsible side nav.
	collapsibleSideNav: {

	$toggle: $('.mobile-menu-toggle-sidenav'),

	$el: $('.sideNav-menu'),

	// DOM events to watch
	events: [
	['.mobile-menu-toggle-sidenav', 'click', 'toggle'],
	['.sideNav .toggle-submenu', 'click', 'toggleSubmenu'],
	[window, 'resize', 'resize']
	],

	// Initialize class.
	init: function() {
	// Initiate events.
	this.displayActive();
	this.addIcons();
	this.initEvents();
	this.resize();
	},


	displayActive: function() {
	var $submenus = this.$el.find('ul ul');
	for (var i = 0, n = $submenus.length; i < n; i++) {
	if ( $( $submenus[i] ).find('li.selected').length > 0 ) {
	$($submenus[i]).siblings('a').addClass('selected');
	$($submenus[i]).parent().addClass('selected');
	}
	};
	// var $submenus = this.$el.find('ul ul');
	// for (var i = 0, n = $submenus.length; i < n; i++) {
	// if ( $( $submenus[i] ).find('li.selected').length > 0 ) {
	// this.displaySubMenu( $($submenus[i]).siblings('.toggle-submenu'), $($submenus[i]) );
	// }
	// };
	},

	// Initiate events.
	initEvents: function() {
	_.each(this.events, function(event) {
	$(event[0]).on(event[1], $.proxy(this[event[2]], this));
	}, this);
	},

	toggle: function() {
	if ( this.$el.is(':visible') ) {
	this.hide();
	} else {
	this.display();
	}
	},

	toggleSubmenu: function( e ) {
	e.preventDefault();
	var $target = $(e.target);
	var $icon = this.getIcon( $target );
	var $submenu = this.getSubMenu( $target );
	if ( $submenu.is(':visible') ) {
	this.hideSubMenu( $icon, $submenu );
	} else {
	this.displaySubMenu( $icon, $submenu );
	}
	},

	display: function() {
	this.$el.show();
	this.$toggle.addClass('open');
	this.$toggle.children('.icon')
	.removeClass('icons-plus-20')
	.addClass('icons-minus-20');
	},

	hide: function() {
	this.$el.hide();
	this.$toggle.removeClass('open');
	this.$toggle.children('.icon')
	.removeClass('icons-minus-20')
	.addClass('icons-plus-20');
	},

	getIcon: function( $el ) {
	if ( $el.hasClass('toggle-submenu') ) {
	return $el.find('.icon');
	}
	return $el;
	},

	getSubMenu: function( $el ) {
	var $submenu = $el.siblings('ul');
	if ( $submenu.length === 0 ) {
	return this.getSubMenu( $el.parent() );
	}
	return $submenu;
	},

	displaySubMenu: function( $icon, $submenu ) {
	$submenu.show();
	$icon
	.removeClass('icons-menu-closed')
	.addClass('icons-menu-open');
	},
	hideSubMenu: function( $icon, $submenu ) {
	$submenu.hide();
	$icon
	.removeClass('icons-menu-open')
	.addClass('icons-menu-closed');
	},

	addIcons: function() {
	var links = this.$el.find('a');
	for (var i = 0, n = links.length; i < n; i++) {
	if ( $(links[i]).siblings('ul').length === 0 ) {
	continue;
	}
	this.addIcon( $(links[i]) );
	}
	},

	addIcon: function( $el ) {
	if ( $el.hasClass('selected') ) {
	$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-open"></span></a>');
	} else {
	$el.before('<a class="toggle-submenu"><span class="icon icons-sprite icons-menu-closed"></span></a>');
	}
	},

	/*
	* When the window is resized.
	*/
	resize: function() {
	// Get the new window size.
	var width = $(window).width();
	var menuStyle;

	// Mobile screen size.
	if ( width < 667 ) {
	this.hide();
	}

	// All other devices.
	else {
	this.display();
	}
	}

	}

	});

	}
	HPU.run_things_for_onInit = function() {
	// Add login form initialization.
	HPU.onInit({
	method: 'hideRecent',
	priority: 0
	});

	// Initialize globalMobileMenu.
	HPU.onInit({
	method: 'globalMobileMenu',
	priority: 0
	});

	// Initialize collapsibleSideNav.
	HPU.onInit({
	method: 'collapsibleSideNav',
	priority: 0
	});

	// Add login form initialization.
	HPU.onInit({
	method: 'initTickets',
	priority: 0
	});
	}
	HPU.hide_secondary_command_link = function() {
	$(".ms-secondaryCommandLink").hide();
	}
	/*
	* end Lucus' functions...
	*/

	HPU.after_load_or_ajax(); // run our stuff...
	})(window.jQuery);
	});