text: /*
  	Story by Pixelarity
  	pixelarity.com | hello@pixelarity.com
  	License: pixelarity.com/license
  
  	Note: Only needed for demo purposes. Delete for production sites.
  */
  
  (function($) {
  
  	var $window = $(window);
  
  	// Styles.
  		$(
  			'<style>' +
  				'.demo-animate-all:not(.gallery), .demo-animate-all:not(.gallery) *, .demo-animate-all:not(.gallery) *:before, .demo-animate-all:not(.gallery) *:after { transition: all 0.5s ease-in-out; }' +
  				'.demo-controls .property .classes { display: none; }' +
  				'.demo-controls .property[data-requires] { display: none; }' +
  				'.demo-controls .property[data-requires].active { display: inline; }' +
  				'.demo-controls .property .tooltip { position: relative; }' +
  				'.demo-controls .property .tooltip:before { content: \'Click to change!\'; font-size: 0.7rem; position: absolute; bottom: 100%; left: 0; background: #47D3E5; color: #ffffff; line-height: 1; white-space: nowrap; font-weight: bold; border-radius: 0.125rem; padding: 0.325rem 0.425rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
  				'.demo-controls .property .tooltip:after { content: \'\'; position: absolute; bottom: calc(100% - 0.25rem); left: 0.5rem; border-left: solid 0.5rem transparent; border-right: solid 0.5rem transparent; border-top: solid 0.5rem #47D3E5; width: 0.5rem; height: 0.5rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
  				'@keyframes demo-controls-tooltip {' +
  					'0% { opacity: 0; transform: translateY(0); }' +
  					'10% { opacity: 1; transform: translateY(0.125rem); }' +
  					'20% { opacity: 1; transform: translateY(-0.125rem); }' +
  					'30% { opacity: 1; transform: translateY(0.125rem); }' +
  					'40% { opacity: 1; transform: translateY(-0.125rem); }' +
  					'50% { opacity: 1; transform: translateY(0.125rem); }' +
  					'60% { opacity: 1; transform: translateY(0); }' +
  					'90% { opacity: 1; }' +
  					'100% { opacity: 0; }' +
  				'}' +
  			'</style>'
  		).appendTo($('head'));
  
  	// Functions.
  		$.fn.demo_controls = function(styles, userOptions) {
  
  			var $this = $(this),
  				$styleProperty, $stylePropertyClasses,
  				$controls, $x, $y, $z,
  				options,
  				current, i, j, k, s, n, count;
  
  			// No elements?
  				if (this.length == 0)
  					return $this;
  
  			// Multiple elements?
  				if (this.length > 1) {
  
  					for (var i=0; i < this.length; i++)
  						$(this[i]).demo_controls(styles, userOptions);
  
  					return $this;
  
  				}
  
  			// Options.
  				options = $.extend({
  					target: null,
  					palette: true
  				}, userOptions);
  
  			// Controls.
  				if (styles) {
  
  					$controls = $(
  						'<span class="demo-controls">' +
  							'<span class="property" data-name="style">' +
  								'<a href="#" class="title tooltip">style</a>' +
  								'<span class="classes"></span>' + (options.palette ? ', ' : ' ') +
  							'</span>' +
  							(options.palette ?
  								'<span class="property active" data-name="scheme">' +
  									'<a href="#" class="title">scheme</a>' +
  									'<span class="classes">' +
  										'<span data-class="-" class="active">default</span>' +
  										'<span data-class="invert">invert</span>' +
  									'</span>, ' +
  								'</span>' +
  								'<span class="property active" data-name="color">' +
  									'<a href="#" class="title">color</a>' +
  									'<span class="classes">' +
  										'<span data-class="-" class="active">default</span>' +
  										'<span data-class="color1">color1</span>' +
  										'<span data-class="color2">color2</span>' +
  										'<span data-class="color3">color3</span>' +
  										'<span data-class="color4">color4</span>' +
  										'<span data-class="color5">color5</span>' +
  										'<span data-class="color6">color6</span>' +
  										'<span data-class="color7">color7</span>' +
  									'</span>, ' +
  								'</span>'
  							: '') +
  						'</span>'
  					);
  
  				}
  				else {
  
  					$controls = $(
  						'<span class="demo-controls">' +
  							(options.palette ?
  								'<span class="property active" data-name="scheme">' +
  									'<a href="#" class="title">scheme</a>' +
  									'<span class="classes">' +
  										'<span data-class="-" class="active">default</span>' +
  										'<span data-class="invert">invert</span>' +
  									'</span> and ' +
  								'</span>' +
  								'<span class="property active" data-name="color">' +
  									'<a href="#" class="title">color</a>' +
  									'<span class="classes">' +
  										'<span data-class="-" class="active">default</span>' +
  										'<span data-class="color1">color1</span>' +
  										'<span data-class="color2">color2</span>' +
  										'<span data-class="color3">color3</span>' +
  										'<span data-class="color4">color4</span>' +
  										'<span data-class="color5">color5</span>' +
  										'<span data-class="color6">color6</span>' +
  										'<span data-class="color7">color7</span>' +
  									'</span>' +
  								'</span>'
  							: '') +
  						'</span>'
  					);
  
  				}
  
  			// Target.
  				switch (options.target) {
  
  					case 'previous':
  						$this.prev().find('.demo-controls').replaceWith($controls);
  						break;
  
  					default:
  						$this.find('.demo-controls').replaceWith($controls);
  						break;
  
  				}
  
  			// Styles.
  				if (styles) {
  
  					$styleProperty = $controls.find('.property[data-name="style"]');
  					$stylePropertyClasses = $styleProperty.children('.classes');
  
  					for (i in styles) {
  
  						current = false;
  						count = Object.keys(styles[i]).length;
  						n = 1;
  
  						// Add to style property.
  							$x = $('<span data-class="' + i + '">, ' + i + '</span>')
  								.appendTo($stylePropertyClasses);
  
  							if ($this.hasClass(i)) {
  
  								$x.addClass('active');
  								current = true;
  
  							}
  
  						// Step through properties.
  							for (j in styles[i]) {
  
  								$x = $(
  									'<span class="property" data-name="' + j + '" data-requires="' + i + '">' +
  										(n == count ? '<span>and </span>' : '') +
  										'<a href="#" class="title">' + j + '</a>' +
  										'<span class="classes">' +
  										'</span>' + (n < count ? ', ' : '') +
  									'</span>'
  								).appendTo($controls);
  
  								$y = $x.children('.classes');
  
  								if (current)
  									$x.addClass('active');
  
  								for (k in styles[i][j]) {
  
  									$z = $('<span data-class="' + k + '">, ' + styles[i][j][k].replace('*', '') + '</span>')
  										.appendTo($y);
  
  									if (styles[i][j][k].substr(-1, 1) == '*')
  										$z.addClass('default');
  
  									if (current
  									&&	$this.hasClass(k))
  										$z.addClass('active');
  
  								}
  
  								n++;
  
  							}
  
  					}
  
  				}
  
  			// Events.
  				$controls.on('click', 'a', function(event) {
  					event.preventDefault();
  				});
  
  				$controls.on('click', '.property.active', function(event) {
  
  					var $property = $(this);
  					var $classes = $property.find('.classes > *');
  					var $current = $classes.filter('.active');
  					var $next;
  
  					// Determine next.
  						if ($current.length == 0
  						||	$current.index() == $classes.length - 1)
  							$next = $classes.first();
  						else
  							$next = $current.next();
  
  					// Turn on animate all.
  						$this.addClass('demo-animate-all');
  
  					// Deactivate current.
  						$current.removeClass('active');
  						$this.removeClass($current.data('class'));
  
  					// Activate next.
  						$next.addClass('active');
  						$this.addClass($next.data('class'));
  
  					// Turn off animate all.
  						setTimeout(function() {
  							$this.removeClass('demo-animate-all');
  						}, 500);
  
  				});
  
  				$controls.on('click', '.property[data-name="style"]', function(event) {
  
  					var $property = $(this);
  					var $classes = $property.find('.classes > *');
  					var $current = $classes.filter('.active');
  					var $next;
  
  					// Determine next.
  						if ($current.length == 0
  						||	$current.index() == $classes.length - 1)
  							$next = $classes.first();
  						else
  							$next = $current.next();
  
  					// Turn on animate all.
  						$this.addClass('demo-animate-all');
  
  					// Deactivate current.
  						$current.removeClass('active');
  						$this.removeClass($current.data('class'));
  
  						$controls.find('.property[data-requires="' + $current.data('class') + '"]')
  							.removeClass('active');
  
  						$controls.find('.property[data-requires="' + $current.data('class') + '"] > .classes > .active').each(function() {
  
  							$(this).removeClass('active');
  
  							if ($(this).data('class') != '-')
  								$this.removeClass($(this).data('class'));
  
  						});
  
  					// Activate next.
  						$next.addClass('active');
  						$this.addClass($next.data('class'));
  
  						$controls.find('.property[data-requires="' + $next.data('class') + '"]')
  							.addClass('active');
  
  						$controls.find('.property[data-requires="' + $next.data('class') + '"] > .classes > .default').each(function() {
  
  							$(this).addClass('active');
  
  							if ($(this).data('class') != '-')
  								$this.addClass($(this).data('class'));
  
  						});
  
  					// Turn off animate all.
  						setTimeout(function() {
  							$this.removeClass('demo-animate-all');
  						}, 500);
  
  				});
  
  		};
  
  	// Elements.
  
  		// Wrappers.
  			$('.wrapper').demo_controls(null, {
  				palette: true
  			});
  
  		// Banner.
  			$('.banner').demo_controls({
  				style1: {
  					'size': {
  						'-': 'normal',
  						'fullscreen': 'fullscreen*'
  					},
  					'orientation': {
  						'orient-left': 'left*',
  						'orient-right': 'right'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  				style2: {
  					'size': {
  						'-': 'normal',
  						'fullscreen': 'fullscreen*'
  					},
  					'orientation': {
  						'orient-left': 'left',
  						'orient-center': 'center*',
  						'orient-right': 'right'
  					},
  					'content alignment': {
  						'content-align-left': 'left',
  						'content-align-center': 'center*',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  				style3: {
  					'size': {
  						'-': 'normal',
  						'fullscreen': 'fullscreen*'
  					},
  					'orientation': {
  						'orient-left': 'left',
  						'orient-right': 'right*'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  				style4: {
  					'size': {
  						'-': 'normal',
  						'fullscreen': 'fullscreen*'
  					},
  					'phone type': {
  						'iphone': 'iphone*',
  						'android': 'android'
  					},
  					'orientation': {
  						'orient-left': 'left',
  						'orient-right': 'right*'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  				style5: {
  					'size': {
  						'-': 'normal',
  						'fullscreen': 'fullscreen*'
  					},
  					'content alignment': {
  						'content-align-left': 'left',
  						'content-align-center': 'center*',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				}
  			});
  
  		// Spotlight.
  			$('.spotlight').demo_controls({
  				style1: {
  					'orientation': {
  						'orient-left': 'left',
  						'orient-right': 'right*'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left*',
  						'image-position-center': 'center',
  						'image-position-right': 'right'
  					}
  				},
  				style2: {
  					'orientation': {
  						'orient-left': 'left',
  						'orient-right': 'right*'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  				style3: {
  					'phone type': {
  						'iphone': 'iphone*',
  						'android': 'android'
  					},
  					'orientation': {
  						'orient-left': 'left',
  						'orient-right': 'right*'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  				style4: {
  					'size': {
  						'-size': 'normal',
  						'fullscreen': 'fullscreen*',
  						'halfscreen': 'halfscreen'
  					},
  					'orientation': {
  						'orient-left': 'left*',
  						'orient-center': 'center',
  						'orient-right': 'right'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  				style5: {
  					'size': {
  						'-size': 'normal',
  						'fullscreen': 'fullscreen*',
  						'halfscreen': 'halfscreen'
  					},
  					'orientation': {
  						'orient-left': 'left*',
  						'orient-center': 'center',
  						'orient-right': 'right'
  					},
  					'content alignment': {
  						'content-align-left': 'left*',
  						'content-align-center': 'center',
  						'content-align-right': 'right'
  					},
  					'image position': {
  						'image-position-left': 'left',
  						'image-position-center': 'center*',
  						'image-position-right': 'right'
  					}
  				},
  			});
  
  		// Gallery.
  			$('.gallery').demo_controls({
  				style1: {
  					'size': {
  						'small': 'small',
  						'medium': 'medium*',
  						'big': 'big'
  					}
  				},
  				style2: {
  					'size': {
  						'small': 'small',
  						'medium': 'medium*',
  						'big': 'big'
  					}
  				},
  			}, {
  				target: 'previous',
  				palette: false
  			});
  
  		// Items.
  			$('.items').demo_controls({
  				style1: {
  					'size': {
  						'small': 'small',
  						'medium': 'medium*',
  						'big': 'big'
  					}
  				},
  				style2: {
  					'size': {
  						'small': 'small',
  						'medium': 'medium*',
  						'big': 'big'
  					}
  				},
  				style3: {
  					'size': {
  						'small': 'small',
  						'medium': 'medium*',
  						'big': 'big'
  					}
  				}
  			}, {
  				target: 'previous',
  				palette: false
  			});
  
  })(jQuery);