add section and editing experience improvements

1. Introduced velocity.js for animations
2. Resized section type icons
3. Refactored add section code

app/.jshintrc

@@ -19,7 +19,8 @@
 		"Dropzone",
 		"Sortable",
 		"datetimepicker",
-		"Waypoint"
+		"Waypoint",
+		"velocity"
 	],
 	"browser": true,
 	"boss": true,

app/app/components/document/document-page.js

@@ -18,9 +18,17 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 	sectionService: Ember.inject.service('section'),
 	editMode: false,
 
+	didReceiveAttrs() {
+		let toEdit = this.get('toEdit');
+
+		if (toEdit === this.get('page.id')) {
+			this.send('onEdit');
+		}
+	},
+
 	actions: {
-		onAddBlock(block) {
-			this.attrs.onAddBlock(block);
+		onSavePageAsBlock(block) {
+			this.attrs.onSavePageAsBlock(block);
 		},
 
 		onCopyPage(documentId) {

app/app/components/document/document-view.js

@@ -13,12 +13,22 @@ import Ember from 'ember';
 import NotifierMixin from '../../mixins/notifier';
 import TooltipMixin from '../../mixins/tooltip';
 
+const {
+	computed,
+} = Ember;
+
 export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 	documentService: Ember.inject.service('document'),
 	sectionService: Ember.inject.service('section'),
 	appMeta: Ember.inject.service(),
 	link: Ember.inject.service(),
 
+	newSectionName: '',
+	newSectionNameMissing: computed.empty('newSectionName'),
+	newSectionLocation: '',
+	beforePage: '',
+	toEdit: '',
+
 	didReceiveAttrs() {
 		this.get('sectionService').getSpaceBlocks(this.get('folder.id')).then((blocks) => {
 			this.set('blocks', blocks);
@@ -87,9 +97,36 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 		});
 	},
 
+	addSection(model) {
+		// calculate sequence of page (position in document)
+		let sequence = 0;
+		let beforePage = this.get('beforePage');
+
+		if (is.not.null(beforePage)) {
+			// get any page before the beforePage so we can insert this new section between them
+			let index = _.findIndex(this.get('pages'), function(p) { return p.get('id') === beforePage.get('id'); });
+			let beforeBeforePage = this.get('pages')[index-1];
+
+			if (is.not.undefined(beforeBeforePage)) {
+				sequence = (beforePage.get('sequence') + beforeBeforePage.get('sequence')) / 2;
+			} else {
+				sequence = beforePage.get('sequence') / 2;
+			}
+		}
+
+		model.page.sequence = sequence;
+
+		this.send('onHideSectionWizard');
+
+		const promise = this.get('onInsertSection')(model);
+		promise.then((id) => {
+			this.set('toEdit', id);
+		});
+	},
+
 	actions: {
-		onAddBlock(block) {
-			this.attrs.onAddBlock(block);
+		onSavePageAsBlock(block) {
+			this.attrs.onSavePageAsBlock(block);
 		},
 
 		onCopyPage(pageId, documentId) {
@@ -100,19 +137,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			this.attrs.onMovePage(pageId, documentId);
 		},
 
-		onDeletePage(id, deleteChildren) {
-			let page = this.get('pages').findBy("id", id);
-
-			if (is.undefined(page)) {
-				return;
-			}
-
-			let params = {
-				id: id,
-				title: page.get('title'),
-				children: deleteChildren
-			};
-
+		onDeletePage(params) {
 			this.attrs.onDeletePage(params);
 		},
 
@@ -120,39 +145,104 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			this.attrs.onSavePage(page, meta);
 		},
 
-		///////////////// move to page-wizard ??????????!!!!!!!!!!!!!!!!!!!
+		// Section wizard related
 
 		onShowSectionWizard(page) {
-			if ($("#new-section-wizard").is(':visible') && $("#new-section-wizard").attr('data-page-id') === page.id) {
+			let beforePage = this.get('beforePage');
+
+			if (is.not.null(beforePage) && $("#new-section-wizard").is(':visible') && beforePage.get('id') === page.id) {
 				this.send('onHideSectionWizard');
 				return;
 			}
 
-			$("#new-section-wizard").attr('data-page-id', page.id);
+			this.set('newSectionLocation', page.id);
+			this.set('beforePage', page);
+
 			$("#new-section-wizard").insertAfter(`#add-section-button-${page.id}`);
-			$("#new-section-wizard").fadeIn(100, 'linear', function() {
-			});
+			$("#new-section-wizard").velocity("transition.slideDownIn", {duration: 300, complete:
+				function() {
+					$("#new-section-name").focus();
+				}});
 		},
 
 		onHideSectionWizard() {
-			$("#new-section-wizard").fadeOut(100, 'linear', function() {
-			});
+			this.set('newSectionLocation', '');
+			this.set('beforePage', null);
+			$("#new-section-wizard").velocity("transition.slideUpOut", { duration: 300 });
 		},
 
-		onCancel() {
-			this.attrs.onCancel();
+		onInsertSection(section) {
+			let sectionName = this.get('newSectionName');
+			if (is.empty(sectionName)) {
+				$("#new-section-name").focus();
+				return;
+			}
+
+			let page = {
+				documentId: this.get('document.id'),
+				title: sectionName,
+				level: 1,
+				sequence: 0, // calculated elsewhere
+				body: "",
+				contentType: section.get('contentType'),
+				pageType: section.get('pageType')
+			};
+
+			let meta = {
+				documentId: this.get('document.id'),
+				rawBody: "",
+				config: ""
+			};
+
+			let model = {
+				page: page,
+				meta: meta
+			};
+
+			this.audit.record("added-section-" + page.contentType);
+
+			this.addSection(model);
 		},
 
-		addSection(section) {
-			this.attrs.onAddSection(section);
+		onInsertBlock(block) {
+			let sectionName = this.get('newSectionName');
+			if (is.empty(sectionName)) {
+				$("#new-section-name").focus();
+				return;
+			}
+
+			let page = {
+				documentId: this.get('document.id'),
+				title: `${block.get('title')}`,
+				level: 1,
+				sequence: 0, // calculated elsewhere
+				body: block.get('body'),
+				contentType: block.get('contentType'),
+				pageType: block.get('pageType'),
+				blockId: block.get('id')
+			};
+
+			let meta = {
+				documentId: this.get('document.id'),
+				rawBody: block.get('rawBody'),
+				config: block.get('config'),
+				externalSource: block.get('externalSource')
+			};
+
+			let model = {
+				page: page,
+				meta: meta
+			};
+
+			this.audit.record("added-content-block-" + block.get('contentType'));
+
+			this.addSection(model);
 		},
 
+		// to test
 		onDeleteBlock(id) {
 			this.attrs.onDeleteBlock(id);
 		},
 
-		onInsertBlock(block) {
-			this.attrs.onInsertBlock(block);
-		}
 	}
 });

app/app/components/document/page-heading.js

@@ -100,7 +100,7 @@ export default Ember.Component.extend(TooltipMixin, {
 			this.attrs.onDeletePage(this.get('deleteChildren'));
 		},
 
-		onAddBlock() {
+		onSavePageAsBlock() {
 			let page = this.get('page');
 			let titleElem = '#' + this.get('blockTitleId');
 			let blockTitle = this.get('blockTitle');
@@ -130,7 +130,8 @@ export default Ember.Component.extend(TooltipMixin, {
 					externalSource: pm.get('externalSource')
 				};
 
-				this.attrs.onAddBlock(block);
+				this.attrs.onSavePageAsBlock(block);
+				
 				this.set('menuOpen', false);
 				this.set('blockTitle', '');
 				this.set('blockExcerpt', '');

app/app/pods/document/controller.js

@@ -21,6 +21,8 @@ export default Ember.Controller.extend(NotifierMixin, {
 	pages: [],
 	toggled: false,
 
+	// to test
+	// to test
 	// Jump to the right part of the document.
 	scrollToPage(pageId) {
 		Ember.run.schedule('afterRender', function () {
@@ -45,7 +47,7 @@ export default Ember.Controller.extend(NotifierMixin, {
 	},
 
 	actions: {
-		toggleMenu() {
+		toggleSidebar() {
 			this.set('toggled', !this.get('toggled'));
 		},
 
@@ -60,20 +62,6 @@ export default Ember.Controller.extend(NotifierMixin, {
 			this.showNotification('Saved');
 		},
 
-		gotoPage(pageId) {
-			if (is.null(pageId)) {
-				return;
-			}
-
-			this.scrollToPage(pageId);
-		},
-
-		onAddBlock(block) {
-			this.get('sectionService').addBlock(block).then(() => {
-				this.showNotification("Published");
-			});
-		},
-
 		onCopyPage(pageId, targetDocumentId) {
 			let documentId = this.get('model.document.id');
 			this.get('documentService').copyPage(documentId, pageId, targetDocumentId).then(() => {
@@ -168,6 +156,88 @@ export default Ember.Controller.extend(NotifierMixin, {
 					this.send('onPageLevelChange', pendingChanges);
 				});
 			}
+		},
+
+		onInsertSection(data) {
+			return new Ember.RSVP.Promise((resolve) => {
+				this.get('documentService').addPage(this.get('model.document.id'), data).then((newPage) => {
+					let data = this.get('store').normalize('page', newPage);
+					this.get('store').push(data);
+
+					this.get('documentService').getPages(this.get('model.document.id')).then((pages) => {
+						this.set('model.allPages', pages);
+						this.set('model.pages', pages.filterBy('pageType', 'section'));
+						this.set('model.tabs', pages.filterBy('pageType', 'tab'));
+
+						resolve(newPage.id);
+
+						// this.get('documentService').getPageMeta(this.get('model.document.id'), newPage.id).then(() => {
+						// 	console.log("ready to edit");
+						// 	// this.transitionToRoute('document.edit',
+						// 	// 	this.get('model.folder.id'),
+						// 	// 	this.get('model.folder.slug'),
+						// 	// 	this.get('model.document.id'),
+						// 	// 	this.get('model.document.slug'),
+						// 	// 	newPage.id);
+						// });
+					});
+				});
+			});
+		},
+
+		// to test
+		onPageSequenceChange(changes) {
+			this.get('documentService').changePageSequence(this.get('model.document.id'), changes).then(() => {
+				_.each(changes, (change) => {
+					let pageContent = _.findWhere(this.get('model.pages'), {
+						id: change.pageId
+					});
+
+					if (is.not.undefined(pageContent)) {
+						pageContent.set('sequence', change.sequence);
+					}
+				});
+
+				this.set('model.pages', this.get('model.pages').sortBy('sequence'));
+				this.get('target.router').refresh();
+			});
+		},
+
+		// to test
+		onPageLevelChange(changes) {
+			this.get('documentService').changePageLevel(this.get('model.document.id'), changes).then(() => {
+				_.each(changes, (change) => {
+					let pageContent = _.findWhere(this.get('model.pages'), {
+						id: change.pageId
+					});
+
+					if (is.not.undefined(pageContent)) {
+						pageContent.set('level', change.level);
+					}
+				});
+
+				let pages = this.get('model.pages');
+				pages = pages.sortBy('sequence');
+				this.set('model.pages', []);
+				this.set('model.pages', pages);
+				this.get('target.router').refresh();
+			});
+		},
+
+		// to test
+		gotoPage(pageId) {
+			if (is.null(pageId)) {
+				return;
+			}
+
+			this.scrollToPage(pageId);
+		},
+
+		// to test
+		onSavePageAsBlock(block) {
+			this.get('sectionService').addBlock(block).then(() => {
+				this.showNotification("Published");
+			});
 		}
 	}
 });
@@ -181,42 +251,6 @@ gotoPage(pageId) {
 	this.scrollToPage(pageId);
 },
 
-onPageSequenceChange(changes) {
-	this.get('documentService').changePageSequence(this.get('model.document.id'), changes).then(() => {
-		_.each(changes, (change) => {
-			let pageContent = _.findWhere(this.get('model.pages'), {
-				id: change.pageId
-			});
-
-			if (is.not.undefined(pageContent)) {
-				pageContent.set('sequence', change.sequence);
-			}
-		});
-
-		this.set('model.pages', this.get('model.pages').sortBy('sequence'));
-		this.get('target.router').refresh();
-	});
-},
-
-onPageLevelChange(changes) {
-	this.get('documentService').changePageLevel(this.get('model.document.id'), changes).then(() => {
-		_.each(changes, (change) => {
-			let pageContent = _.findWhere(this.get('model.pages'), {
-				id: change.pageId
-			});
-
-			if (is.not.undefined(pageContent)) {
-				pageContent.set('level', change.level);
-			}
-		});
-
-		let pages = this.get('model.pages');
-		pages = pages.sortBy('sequence');
-		this.set('model.pages', []);
-		this.set('model.pages', pages);
-		this.get('target.router').refresh();
-	});
-},
 
 onSaveTemplate(name, desc) {
 	this.get('templateService').saveAsTemplate(this.get('model.document.id'), name, desc).then(function () {});
@@ -228,50 +262,6 @@ onSaveMeta(doc) {
 	});
 },
 
-onAddSection(section) {
-	this.audit.record("added-section-" + section.get('contentType'));
-
-	let page = {
-		documentId: this.get('model.document.id'),
-		title: `${section.get('title')}`,
-		level: 1,
-		sequence: 0,
-		body: "",
-		contentType: section.get('contentType'),
-		pageType: section.get('pageType')
-	};
-
-	let meta = {
-		documentId: this.get('model.document.id'),
-		rawBody: "",
-		config: ""
-	};
-
-	let model = {
-		page: page,
-		meta: meta
-	};
-
-	this.get('documentService').addPage(this.get('model.document.id'), model).then((newPage) => {
-		let data = this.get('store').normalize('page', newPage);
-		this.get('store').push(data);
-
-		this.get('documentService').getPages(this.get('model.document.id')).then((pages) => {
-			this.set('model.pages', pages.filterBy('pageType', 'section'));
-			this.set('model.tabs', pages.filterBy('pageType', 'tab'));
-
-			this.get('documentService').getPageMeta(this.get('model.document.id'), newPage.id).then(() => {
-				this.transitionToRoute('document.edit',
-					this.get('model.folder.id'),
-					this.get('model.folder.slug'),
-					this.get('model.document.id'),
-					this.get('model.document.slug'),
-					newPage.id);
-			});
-		});
-	});
-},
-
 onInsertBlock(block) {
 	this.audit.record("added-content-block-" + block.get('contentType'));
 

app/app/pods/document/template.hbs

@@ -46,13 +46,13 @@
 			<div class="row">
 				<div class="col-lg-12">
 					{{#if toggled}}
-						<div id="menu-toggle" class="pull-right" {{action 'toggleMenu'}}>
+						<div id="sidebar-toggle" class="pull-right" {{action 'toggleSidebar'}}>
 							<div class="round-button button-black">
 								<i class="material-icons">keyboard_arrow_left</i>
 							</div>
 						</div>
 					{{else}}
-						<div id="menu-toggle" class="pull-right" {{action 'toggleMenu'}}>
+						<div id="sidebar-toggle" class="pull-right" {{action 'toggleSidebar'}}>
 							<div class="round-button button-black">
 								<i class="material-icons">keyboard_arrow_right</i>
 							</div>
@@ -66,8 +66,7 @@
 						</div>
 						{{document/document-heading document=model.document isEditor=model.isEditor onSaveDocument=(action 'onSaveDocument')}}
 						{{document/document-view document=model.document links=model.links allPages=model.allPages tabs=model.tabs pages=model.pages
-							folder=model.folder folders=model.folders sections=model.sections isEditor=model.isEditor onSavePage=(action 'onSavePage')
-							gotoPage=(action 'gotoPage') onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
+							folder=model.folder folders=model.folders sections=model.sections isEditor=model.isEditor onSavePage=(action 'onSavePage') gotoPage=(action 'gotoPage') onInsertSection=(action 'onInsertSection') onSavePageAsBlock=(action 'onSavePageAsBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')}}
 					</div>
 				</div>
 			</div>

app/app/styles/view/document/view.scss

@@ -57,7 +57,6 @@
 .document-view {
 	margin: 0 0 50px 0;
 	max-width: 1200px;
-	@include ease-in();
 
 	.is-a-page {
 		@extend .transition-all;
@@ -88,11 +87,12 @@
 	}
 
 	.start-section {
+		@include ease-in();
+		@extend .no-select;
 		height: 60px;
 		background-color: transparent;
 		position: relative;
 		cursor: pointer;
-		@include ease-in();
 
 		> .start-button {
 			display: none;
@@ -132,7 +132,6 @@
 
 	.new-section-wizard {
 		@include border-radius(2px);
-		@include ease-in();
 		margin: 0 0 30px 0;
 		padding: 30px;
 		border: 1px solid $color-stroke;

app/app/templates/components/document/document-page.hbs

@@ -2,7 +2,7 @@
 	{{#unless editMode}}
 			{{document/page-heading tagName=page.tagName document=document folder=folder page=page isEditor=isEditor
 				onEdit=(action 'onEdit')
-				onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
+				onSavePageAsBlock=(action 'onSavePageAsBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
 			{{section/base-renderer page=page}}
 	{{else}}
 		{{document/document-editor document=document folder=folder page=page meta=meta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}

app/app/templates/components/document/document-view.hbs

@@ -12,8 +12,9 @@
 		{{else}}
 			<div class="section-divider" />
 		{{/if}}
-		{{#document/document-page document=document folder=folder page=page isEditor=isEditor onSavePage=(action 'onSavePage')
-			onAddBlock=(action 'onAddBlock') onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
+		{{#document/document-page document=document folder=folder page=page isEditor=isEditor toEdit=toEdit
+			onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
+			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
 		{{/document/document-page}}
 	{{else}}
 		no sections!
@@ -24,7 +25,7 @@
 
 	<div id="new-section-wizard" class="new-section-wizard">
 		<div class="input-inline input-transparent pull-left width-80">
-			{{focus-input type="text" value=newSectionName class="section-name {{(if hasNameError 'error-inline')}}" placeholder="Name" autocomplete="off"}}
+			{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'section-name error-inline' 'section-name') placeholder="Name" autocomplete="off"}}
 		</div>
 		<div class="round-button-mono pull-right" {{action 'onHideSectionWizard'}}>
 			<i class="material-icons color-gray">close</i>
@@ -34,7 +35,7 @@
 		<div class="list-wrapper">
 			<ul class="preset-list">
 				{{#each sections as |section|}}
-					<li class="item" {{action 'addSection' section}}>
+					<li class="item" {{action 'onInsertSection' section}}>
 						<div class="icon">
 							<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
 						</div>

app/app/templates/components/document/page-heading.hbs

@@ -9,7 +9,7 @@
                 <i class="material-icons color-gray">more_vert</i>
             </div>
 
-			{{#dropdown-menu target=menuTarget position="bottom right" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
+			{{#dropdown-menu target=menuTarget position="top right" open="click" onOpenCallback=(action 'onMenuOpen') onCloseCallback=(action 'onMenuOpen')}}
 				<ul class="menu">
 					<li class="item" id={{copyButtonId}}>Copy</li>
 					<li class="item" id={{moveButtonId}}>Move</li>
@@ -27,7 +27,7 @@
 	                    <label for="{{checkId}}">&nbsp;Delete child pages</label>
 	                </p>
 	            {{/dropdown-dialog}}
-				{{#dropdown-dialog id=publishDialogId target=publishButtonId position="bottom right" button="Publish" color="flat-green" focusOn=blockTitleId onAction=(action 'onAddBlock')}}
+				{{#dropdown-dialog id=publishDialogId target=publishButtonId position="bottom right" button="Publish" color="flat-green" focusOn=blockTitleId onAction=(action 'onSavePageAsBlock')}}
 					<div class="form-header">
 						<div class="tip">
 							<span class="bold">{{folder.name}}:</span> Content Block

app/ember-cli-build.js

@@ -57,6 +57,8 @@ module.exports = function (defaults) {
 	app.import('vendor/datetimepicker.min.js');
 	app.import('vendor/hoverIntent.js');
 	app.import('vendor/waypoints.js');
+	app.import('vendor/velocity.js');
+	app.import('vendor/velocity.ui.js');
 
 	return app.toTree();
 };

app/vendor/velocity.ui.js

@@ -0,0 +1,804 @@
+/**********************
+ Velocity UI Pack
+ **********************/
+
+/* VelocityJS.org UI Pack (5.2.0). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
+
+(function(factory) {
+	"use strict";
+	/* CommonJS module. */
+	if (typeof require === "function" && typeof exports === "object") {
+		module.exports = factory();
+		/* AMD module. */
+	} else if (typeof define === "function" && define.amd) {
+		define(["velocity"], factory);
+		/* Browser globals. */
+	} else {
+		factory();
+	}
+}(function() {
+	"use strict";
+	return function(global, window, document, undefined) {
+
+		/*************
+		 Checks
+		 *************/
+		var Velocity = global.Velocity;
+
+		if (!Velocity || !Velocity.Utilities) {
+			if (window.console) {
+				console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.");
+			}
+			return;
+		}
+		var $ = Velocity.Utilities;
+
+		var velocityVersion = Velocity.version,
+				requiredVersion = {major: 1, minor: 1, patch: 0};
+
+		function greaterSemver(primary, secondary) {
+			var versionInts = [];
+
+			if (!primary || !secondary) {
+				return false;
+			}
+
+			$.each([primary, secondary], function(i, versionObject) {
+				var versionIntsComponents = [];
+
+				$.each(versionObject, function(component, value) {
+					while (value.toString().length < 5) {
+						value = "0" + value;
+					}
+					versionIntsComponents.push(value);
+				});
+
+				versionInts.push(versionIntsComponents.join(""));
+			});
+
+			return (parseFloat(versionInts[0]) > parseFloat(versionInts[1]));
+		}
+
+		if (greaterSemver(requiredVersion, velocityVersion)) {
+			var abortError = "Velocity UI Pack: You need to update Velocity (velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";
+			alert(abortError);
+			throw new Error(abortError);
+		}
+
+		/************************
+		 Effect Registration
+		 ************************/
+
+		/* Note: RegisterUI is a legacy name. */
+		Velocity.RegisterEffect = Velocity.RegisterUI = function(effectName, properties) {
+			/* Animate the expansion/contraction of the elements' parent's height for In/Out effects. */
+			function animateParentHeight(elements, direction, totalDuration, stagger) {
+				var totalHeightDelta = 0,
+						parentNode;
+
+				/* Sum the total height (including padding and margin) of all targeted elements. */
+				$.each(elements.nodeType ? [elements] : elements, function(i, element) {
+					if (stagger) {
+						/* Increase the totalDuration by the successive delay amounts produced by the stagger option. */
+						totalDuration += i * stagger;
+					}
+
+					parentNode = element.parentNode;
+
+					var propertiesToSum = ["height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"];
+
+					/* If box-sizing is border-box, the height already includes padding and margin */
+					if (Velocity.CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() === "border-box") {
+						propertiesToSum = ["height"];
+					}
+
+					$.each(propertiesToSum, function(i, property) {
+						totalHeightDelta += parseFloat(Velocity.CSS.getPropertyValue(element, property));
+					});
+				});
+
+				/* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */
+				Velocity.animate(
+						parentNode,
+						{height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta},
+						{queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1)}
+				);
+			}
+
+			/* Register a custom redirect for each effect. */
+			Velocity.Redirects[effectName] = function(element, redirectOptions, elementsIndex, elementsSize, elements, promiseData, loop) {
+				var finalElement = (elementsIndex === elementsSize - 1),
+						totalDuration = 0;
+
+				loop = loop || properties.loop;
+				if (typeof properties.defaultDuration === "function") {
+					properties.defaultDuration = properties.defaultDuration.call(elements, elements);
+				} else {
+					properties.defaultDuration = parseFloat(properties.defaultDuration);
+				}
+
+				/* Get the total duration used, so we can share it out with everything that doesn't have a duration */
+				for (var callIndex = 0; callIndex < properties.calls.length; callIndex++) {
+					durationPercentage = properties.calls[callIndex][1];
+					if (typeof durationPercentage === "number") {
+						totalDuration += durationPercentage;
+					}
+				}
+				var shareDuration = totalDuration >= 1 ? 0 : properties.calls.length ? (1 - totalDuration) / properties.calls.length : 1;
+
+				/* Iterate through each effect's call array. */
+				for (callIndex = 0; callIndex < properties.calls.length; callIndex++) {
+					var call = properties.calls[callIndex],
+							propertyMap = call[0],
+							redirectDuration = 1000,
+							durationPercentage = call[1],
+							callOptions = call[2] || {},
+							opts = {};
+
+					if (redirectOptions.duration !== undefined) {
+						redirectDuration = redirectOptions.duration;
+					} else if (properties.defaultDuration !== undefined) {
+						redirectDuration = properties.defaultDuration;
+					}
+
+					/* Assign the whitelisted per-call options. */
+					opts.duration = redirectDuration * (typeof durationPercentage === "number" ? durationPercentage : shareDuration);
+					opts.queue = redirectOptions.queue || "";
+					opts.easing = callOptions.easing || "ease";
+					opts.delay = parseFloat(callOptions.delay) || 0;
+					opts.loop = !properties.loop && callOptions.loop;
+					opts._cacheValues = callOptions._cacheValues || true;
+
+					/* Special processing for the first effect call. */
+					if (callIndex === 0) {
+						/* If a delay was passed into the redirect, combine it with the first call's delay. */
+						opts.delay += (parseFloat(redirectOptions.delay) || 0);
+
+						if (elementsIndex === 0) {
+							opts.begin = function() {
+								/* Only trigger a begin callback on the first effect call with the first element in the set. */
+								if (redirectOptions.begin) {
+									redirectOptions.begin.call(elements, elements);
+								}
+
+								var direction = effectName.match(/(In|Out)$/);
+
+								/* Make "in" transitioning elements invisible immediately so that there's no FOUC between now
+								 and the first RAF tick. */
+								if ((direction && direction[0] === "In") && propertyMap.opacity !== undefined) {
+									$.each(elements.nodeType ? [elements] : elements, function(i, element) {
+										Velocity.CSS.setPropertyValue(element, "opacity", 0);
+									});
+								}
+
+								/* Only trigger animateParentHeight() if we're using an In/Out transition. */
+								if (redirectOptions.animateParentHeight && direction) {
+									animateParentHeight(elements, direction[0], redirectDuration + opts.delay, redirectOptions.stagger);
+								}
+							};
+						}
+
+						/* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */
+						if (redirectOptions.display !== null) {
+							if (redirectOptions.display !== undefined && redirectOptions.display !== "none") {
+								opts.display = redirectOptions.display;
+							} else if (/In$/.test(effectName)) {
+								/* Inline elements cannot be subjected to transforms, so we switch them to inline-block. */
+								var defaultDisplay = Velocity.CSS.Values.getDisplayType(element);
+								opts.display = (defaultDisplay === "inline") ? "inline-block" : defaultDisplay;
+							}
+						}
+
+						if (redirectOptions.visibility && redirectOptions.visibility !== "hidden") {
+							opts.visibility = redirectOptions.visibility;
+						}
+					}
+
+					/* Special processing for the last effect call. */
+					if (callIndex === properties.calls.length - 1) {
+						/* Append promise resolving onto the user's redirect callback. */
+						var injectFinalCallbacks = function() {
+							if ((redirectOptions.display === undefined || redirectOptions.display === "none") && /Out$/.test(effectName)) {
+								$.each(elements.nodeType ? [elements] : elements, function(i, element) {
+									Velocity.CSS.setPropertyValue(element, "display", "none");
+								});
+							}
+							if (redirectOptions.complete) {
+								redirectOptions.complete.call(elements, elements);
+							}
+							if (promiseData) {
+								promiseData.resolver(elements || element);
+							}
+						};
+
+						opts.complete = function() {
+							if (loop) {
+								Velocity.Redirects[effectName](element, redirectOptions, elementsIndex, elementsSize, elements, promiseData, loop === true ? true : Math.max(0, loop - 1));
+							}
+							if (properties.reset) {
+								for (var resetProperty in properties.reset) {
+									if (!properties.reset.hasOwnProperty(resetProperty)) {
+										continue;
+									}
+									var resetValue = properties.reset[resetProperty];
+
+									/* Format each non-array value in the reset property map to [ value, value ] so that changes apply
+									 immediately and DOM querying is avoided (via forcefeeding). */
+									/* Note: Don't forcefeed hooks, otherwise their hook roots will be defaulted to their null values. */
+									if (Velocity.CSS.Hooks.registered[resetProperty] === undefined && (typeof resetValue === "string" || typeof resetValue === "number")) {
+										properties.reset[resetProperty] = [properties.reset[resetProperty], properties.reset[resetProperty]];
+									}
+								}
+
+								/* So that the reset values are applied instantly upon the next rAF tick, use a zero duration and parallel queueing. */
+								var resetOptions = {duration: 0, queue: false};
+
+								/* Since the reset option uses up the complete callback, we trigger the user's complete callback at the end of ours. */
+								if (finalElement) {
+									resetOptions.complete = injectFinalCallbacks;
+								}
+
+								Velocity.animate(element, properties.reset, resetOptions);
+								/* Only trigger the user's complete callback on the last effect call with the last element in the set. */
+							} else if (finalElement) {
+								injectFinalCallbacks();
+							}
+						};
+
+						if (redirectOptions.visibility === "hidden") {
+							opts.visibility = redirectOptions.visibility;
+						}
+					}
+
+					Velocity.animate(element, propertyMap, opts);
+				}
+			};
+
+			/* Return the Velocity object so that RegisterUI calls can be chained. */
+			return Velocity;
+		};
+
+		/*********************
+		 Packaged Effects
+		 *********************/
+
+		/* Externalize the packagedEffects data so that they can optionally be modified and re-registered. */
+		/* Support: <=IE8: Callouts will have no effect, and transitions will simply fade in/out. IE9/Android 2.3: Most effects are fully supported, the rest fade in/out. All other browsers: full support. */
+		Velocity.RegisterEffect.packagedEffects =
+				{
+					/* Animate.css */
+					"callout.bounce": {
+						defaultDuration: 550,
+						calls: [
+							[{translateY: -30}, 0.25],
+							[{translateY: 0}, 0.125],
+							[{translateY: -15}, 0.125],
+							[{translateY: 0}, 0.25]
+						]
+					},
+					/* Animate.css */
+					"callout.shake": {
+						defaultDuration: 800,
+						calls: [
+							[{translateX: -11}],
+							[{translateX: 11}],
+							[{translateX: -11}],
+							[{translateX: 11}],
+							[{translateX: -11}],
+							[{translateX: 11}],
+							[{translateX: -11}],
+							[{translateX: 0}]
+						]
+					},
+					/* Animate.css */
+					"callout.flash": {
+						defaultDuration: 1100,
+						calls: [
+							[{opacity: [0, "easeInOutQuad", 1]}],
+							[{opacity: [1, "easeInOutQuad"]}],
+							[{opacity: [0, "easeInOutQuad"]}],
+							[{opacity: [1, "easeInOutQuad"]}]
+						]
+					},
+					/* Animate.css */
+					"callout.pulse": {
+						defaultDuration: 825,
+						calls: [
+							[{scaleX: 1.1, scaleY: 1.1}, 0.50, {easing: "easeInExpo"}],
+							[{scaleX: 1, scaleY: 1}, 0.50]
+						]
+					},
+					/* Animate.css */
+					"callout.swing": {
+						defaultDuration: 950,
+						calls: [
+							[{rotateZ: 15}],
+							[{rotateZ: -10}],
+							[{rotateZ: 5}],
+							[{rotateZ: -5}],
+							[{rotateZ: 0}]
+						]
+					},
+					/* Animate.css */
+					"callout.tada": {
+						defaultDuration: 1000,
+						calls: [
+							[{scaleX: 0.9, scaleY: 0.9, rotateZ: -3}, 0.10],
+							[{scaleX: 1.1, scaleY: 1.1, rotateZ: 3}, 0.10],
+							[{scaleX: 1.1, scaleY: 1.1, rotateZ: -3}, 0.10],
+							["reverse", 0.125],
+							["reverse", 0.125],
+							["reverse", 0.125],
+							["reverse", 0.125],
+							["reverse", 0.125],
+							[{scaleX: 1, scaleY: 1, rotateZ: 0}, 0.20]
+						]
+					},
+					"transition.fadeIn": {
+						defaultDuration: 500,
+						calls: [
+							[{opacity: [1, 0]}]
+						]
+					},
+					"transition.fadeOut": {
+						defaultDuration: 500,
+						calls: [
+							[{opacity: [0, 1]}]
+						]
+					},
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipXIn": {
+						defaultDuration: 700,
+						calls: [
+							[{opacity: [1, 0], transformPerspective: [800, 800], rotateY: [0, -55]}]
+						],
+						reset: {transformPerspective: 0}
+					},
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipXOut": {
+						defaultDuration: 700,
+						calls: [
+							[{opacity: [0, 1], transformPerspective: [800, 800], rotateY: 55}]
+						],
+						reset: {transformPerspective: 0, rotateY: 0}
+					},
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipYIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], transformPerspective: [800, 800], rotateX: [0, -45]}]
+						],
+						reset: {transformPerspective: 0}
+					},
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipYOut": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [0, 1], transformPerspective: [800, 800], rotateX: 25}]
+						],
+						reset: {transformPerspective: 0, rotateX: 0}
+					},
+					/* Animate.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipBounceXIn": {
+						defaultDuration: 900,
+						calls: [
+							[{opacity: [0.725, 0], transformPerspective: [400, 400], rotateY: [-10, 90]}, 0.50],
+							[{opacity: 0.80, rotateY: 10}, 0.25],
+							[{opacity: 1, rotateY: 0}, 0.25]
+						],
+						reset: {transformPerspective: 0}
+					},
+					/* Animate.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipBounceXOut": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [0.9, 1], transformPerspective: [400, 400], rotateY: -10}],
+							[{opacity: 0, rotateY: 90}]
+						],
+						reset: {transformPerspective: 0, rotateY: 0}
+					},
+					/* Animate.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipBounceYIn": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [0.725, 0], transformPerspective: [400, 400], rotateX: [-10, 90]}, 0.50],
+							[{opacity: 0.80, rotateX: 10}, 0.25],
+							[{opacity: 1, rotateX: 0}, 0.25]
+						],
+						reset: {transformPerspective: 0}
+					},
+					/* Animate.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.flipBounceYOut": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [0.9, 1], transformPerspective: [400, 400], rotateX: -15}],
+							[{opacity: 0, rotateX: 90}]
+						],
+						reset: {transformPerspective: 0, rotateX: 0}
+					},
+					/* Magic.css */
+					"transition.swoopIn": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [1, 0], transformOriginX: ["100%", "50%"], transformOriginY: ["100%", "100%"], scaleX: [1, 0], scaleY: [1, 0], translateX: [0, -700], translateZ: 0}]
+						],
+						reset: {transformOriginX: "50%", transformOriginY: "50%"}
+					},
+					/* Magic.css */
+					"transition.swoopOut": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [0, 1], transformOriginX: ["50%", "100%"], transformOriginY: ["100%", "100%"], scaleX: 0, scaleY: 0, translateX: -700, translateZ: 0}]
+						],
+						reset: {transformOriginX: "50%", transformOriginY: "50%", scaleX: 1, scaleY: 1, translateX: 0}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
+					"transition.whirlIn": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [1, 0], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: [1, 0], scaleY: [1, 0], rotateY: [0, 160]}, 1, {easing: "easeInOutSine"}]
+						]
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
+					"transition.whirlOut": {
+						defaultDuration: 750,
+						calls: [
+							[{opacity: [0, "easeInOutQuint", 1], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: 0, scaleY: 0, rotateY: 160}, 1, {easing: "swing"}]
+						],
+						reset: {scaleX: 1, scaleY: 1, rotateY: 0}
+					},
+					"transition.shrinkIn": {
+						defaultDuration: 750,
+						calls: [
+							[{opacity: [1, 0], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: [1, 1.5], scaleY: [1, 1.5], translateZ: 0}]
+						]
+					},
+					"transition.shrinkOut": {
+						defaultDuration: 600,
+						calls: [
+							[{opacity: [0, 1], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: 1.3, scaleY: 1.3, translateZ: 0}]
+						],
+						reset: {scaleX: 1, scaleY: 1}
+					},
+					"transition.expandIn": {
+						defaultDuration: 700,
+						calls: [
+							[{opacity: [1, 0], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: [1, 0.625], scaleY: [1, 0.625], translateZ: 0}]
+						]
+					},
+					"transition.expandOut": {
+						defaultDuration: 700,
+						calls: [
+							[{opacity: [0, 1], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: 0.5, scaleY: 0.5, translateZ: 0}]
+						],
+						reset: {scaleX: 1, scaleY: 1}
+					},
+					/* Animate.css */
+					"transition.bounceIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], scaleX: [1.05, 0.3], scaleY: [1.05, 0.3]}, 0.35],
+							[{scaleX: 0.9, scaleY: 0.9, translateZ: 0}, 0.20],
+							[{scaleX: 1, scaleY: 1}, 0.45]
+						]
+					},
+					/* Animate.css */
+					"transition.bounceOut": {
+						defaultDuration: 800,
+						calls: [
+							[{scaleX: 0.95, scaleY: 0.95}, 0.35],
+							[{scaleX: 1.1, scaleY: 1.1, translateZ: 0}, 0.35],
+							[{opacity: [0, 1], scaleX: 0.3, scaleY: 0.3}, 0.30]
+						],
+						reset: {scaleX: 1, scaleY: 1}
+					},
+					/* Animate.css */
+					"transition.bounceUpIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], translateY: [-30, 1000]}, 0.60, {easing: "easeOutCirc"}],
+							[{translateY: 10}, 0.20],
+							[{translateY: 0}, 0.20]
+						]
+					},
+					/* Animate.css */
+					"transition.bounceUpOut": {
+						defaultDuration: 1000,
+						calls: [
+							[{translateY: 20}, 0.20],
+							[{opacity: [0, "easeInCirc", 1], translateY: -1000}, 0.80]
+						],
+						reset: {translateY: 0}
+					},
+					/* Animate.css */
+					"transition.bounceDownIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], translateY: [30, -1000]}, 0.60, {easing: "easeOutCirc"}],
+							[{translateY: -10}, 0.20],
+							[{translateY: 0}, 0.20]
+						]
+					},
+					/* Animate.css */
+					"transition.bounceDownOut": {
+						defaultDuration: 1000,
+						calls: [
+							[{translateY: -20}, 0.20],
+							[{opacity: [0, "easeInCirc", 1], translateY: 1000}, 0.80]
+						],
+						reset: {translateY: 0}
+					},
+					/* Animate.css */
+					"transition.bounceLeftIn": {
+						defaultDuration: 750,
+						calls: [
+							[{opacity: [1, 0], translateX: [30, -1250]}, 0.60, {easing: "easeOutCirc"}],
+							[{translateX: -10}, 0.20],
+							[{translateX: 0}, 0.20]
+						]
+					},
+					/* Animate.css */
+					"transition.bounceLeftOut": {
+						defaultDuration: 750,
+						calls: [
+							[{translateX: 30}, 0.20],
+							[{opacity: [0, "easeInCirc", 1], translateX: -1250}, 0.80]
+						],
+						reset: {translateX: 0}
+					},
+					/* Animate.css */
+					"transition.bounceRightIn": {
+						defaultDuration: 750,
+						calls: [
+							[{opacity: [1, 0], translateX: [-30, 1250]}, 0.60, {easing: "easeOutCirc"}],
+							[{translateX: 10}, 0.20],
+							[{translateX: 0}, 0.20]
+						]
+					},
+					/* Animate.css */
+					"transition.bounceRightOut": {
+						defaultDuration: 750,
+						calls: [
+							[{translateX: -30}, 0.20],
+							[{opacity: [0, "easeInCirc", 1], translateX: 1250}, 0.80]
+						],
+						reset: {translateX: 0}
+					},
+					"transition.slideUpIn": {
+						defaultDuration: 900,
+						calls: [
+							[{opacity: [1, 0], translateY: [0, 20], translateZ: 0}]
+						]
+					},
+					"transition.slideUpOut": {
+						defaultDuration: 900,
+						calls: [
+							[{opacity: [0, 1], translateY: -20, translateZ: 0}]
+						],
+						reset: {translateY: 0}
+					},
+					"transition.slideDownIn": {
+						defaultDuration: 900,
+						calls: [
+							[{opacity: [1, 0], translateY: [0, -20], translateZ: 0}]
+						]
+					},
+					"transition.slideDownOut": {
+						defaultDuration: 900,
+						calls: [
+							[{opacity: [0, 1], translateY: 20, translateZ: 0}]
+						],
+						reset: {translateY: 0}
+					},
+					"transition.slideLeftIn": {
+						defaultDuration: 1000,
+						calls: [
+							[{opacity: [1, 0], translateX: [0, -20], translateZ: 0}]
+						]
+					},
+					"transition.slideLeftOut": {
+						defaultDuration: 1050,
+						calls: [
+							[{opacity: [0, 1], translateX: -20, translateZ: 0}]
+						],
+						reset: {translateX: 0}
+					},
+					"transition.slideRightIn": {
+						defaultDuration: 1000,
+						calls: [
+							[{opacity: [1, 0], translateX: [0, 20], translateZ: 0}]
+						]
+					},
+					"transition.slideRightOut": {
+						defaultDuration: 1050,
+						calls: [
+							[{opacity: [0, 1], translateX: 20, translateZ: 0}]
+						],
+						reset: {translateX: 0}
+					},
+					"transition.slideUpBigIn": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [1, 0], translateY: [0, 75], translateZ: 0}]
+						]
+					},
+					"transition.slideUpBigOut": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [0, 1], translateY: -75, translateZ: 0}]
+						],
+						reset: {translateY: 0}
+					},
+					"transition.slideDownBigIn": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [1, 0], translateY: [0, -75], translateZ: 0}]
+						]
+					},
+					"transition.slideDownBigOut": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [0, 1], translateY: 75, translateZ: 0}]
+						],
+						reset: {translateY: 0}
+					},
+					"transition.slideLeftBigIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], translateX: [0, -75], translateZ: 0}]
+						]
+					},
+					"transition.slideLeftBigOut": {
+						defaultDuration: 750,
+						calls: [
+							[{opacity: [0, 1], translateX: -75, translateZ: 0}]
+						],
+						reset: {translateX: 0}
+					},
+					"transition.slideRightBigIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], translateX: [0, 75], translateZ: 0}]
+						]
+					},
+					"transition.slideRightBigOut": {
+						defaultDuration: 750,
+						calls: [
+							[{opacity: [0, 1], translateX: 75, translateZ: 0}]
+						],
+						reset: {translateX: 0}
+					},
+					/* Magic.css */
+					"transition.perspectiveUpIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: ["100%", "100%"], rotateX: [0, -180]}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.perspectiveUpOut": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [0, 1], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: ["100%", "100%"], rotateX: -180}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.perspectiveDownIn": {
+						defaultDuration: 800,
+						calls: [
+							[{opacity: [1, 0], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateX: [0, 180]}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.perspectiveDownOut": {
+						defaultDuration: 850,
+						calls: [
+							[{opacity: [0, 1], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateX: 180}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.perspectiveLeftIn": {
+						defaultDuration: 950,
+						calls: [
+							[{opacity: [1, 0], transformPerspective: [2000, 2000], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateY: [0, -180]}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.perspectiveLeftOut": {
+						defaultDuration: 950,
+						calls: [
+							[{opacity: [0, 1], transformPerspective: [2000, 2000], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateY: -180}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.perspectiveRightIn": {
+						defaultDuration: 950,
+						calls: [
+							[{opacity: [1, 0], transformPerspective: [2000, 2000], transformOriginX: ["100%", "100%"], transformOriginY: [0, 0], rotateY: [0, 180]}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"}
+					},
+					/* Magic.css */
+					/* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+					"transition.perspectiveRightOut": {
+						defaultDuration: 950,
+						calls: [
+							[{opacity: [0, 1], transformPerspective: [2000, 2000], transformOriginX: ["100%", "100%"], transformOriginY: [0, 0], rotateY: 180}]
+						],
+						reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0}
+					}
+				};
+
+		/* Register the packaged effects. */
+		for (var effectName in Velocity.RegisterEffect.packagedEffects) {
+			if (Velocity.RegisterEffect.packagedEffects.hasOwnProperty(effectName)) {
+				Velocity.RegisterEffect(effectName, Velocity.RegisterEffect.packagedEffects[effectName]);
+			}
+		}
+
+		/*********************
+		 Sequence Running
+		 **********************/
+
+		/* Note: Sequence calls must use Velocity's single-object arguments syntax. */
+		Velocity.RunSequence = function(originalSequence) {
+			var sequence = $.extend(true, [], originalSequence);
+
+			if (sequence.length > 1) {
+				$.each(sequence.reverse(), function(i, currentCall) {
+					var nextCall = sequence[i + 1];
+
+					if (nextCall) {
+						/* Parallel sequence calls (indicated via sequenceQueue:false) are triggered
+						 in the previous call's begin callback. Otherwise, chained calls are normally triggered
+						 in the previous call's complete callback. */
+						var currentCallOptions = currentCall.o || currentCall.options,
+								nextCallOptions = nextCall.o || nextCall.options;
+
+						var timing = (currentCallOptions && currentCallOptions.sequenceQueue === false) ? "begin" : "complete",
+								callbackOriginal = nextCallOptions && nextCallOptions[timing],
+								options = {};
+
+						options[timing] = function() {
+							var nextCallElements = nextCall.e || nextCall.elements;
+							var elements = nextCallElements.nodeType ? [nextCallElements] : nextCallElements;
+
+							if (callbackOriginal) {
+								callbackOriginal.call(elements, elements);
+							}
+							Velocity(currentCall);
+						};
+
+						if (nextCall.o) {
+							nextCall.o = $.extend({}, nextCallOptions, options);
+						} else {
+							nextCall.options = $.extend({}, nextCallOptions, options);
+						}
+					}
+				});
+
+				sequence.reverse();
+			}
+
+			Velocity(sequence[0]);
+		};
+	}((window.jQuery || window.Zepto || window), window, (window ? window.document : undefined));
+}));