{{> top title="Basic, namespace"}}

	<div class="hopper hopper-01 hopper-root">
		<b>Original content</b><br />
	</div>
	<div class="hopper hopper-02" data-hop-from="hop1">
		<i>New content</i><br />
	</div>
	<div class="hopper hopper-03" data-hop-from="hop2">
		<u>Newer content</u><br />
	</div>
	<div class="hopper hopper-04" data-hop-from="hop3">
		<b><i>More new content</i></b><br />
	</div>
	<div class="hopper hopper-05 hopper-root-01">
		And again
	</div>

	<script>

		$('.hopper-root').dochopper({
			conditions: [
				{
					into: 'hop3',
					media: 'screen and (min-width:1000px)'
				}
			],
			hop: function ( element, media ) {
				if ( !+'\v1' ) {
					var data = '';
					data += JSON.stringify(element, null, '\t');
					data += JSON.stringify(media, null, '\t');
					$('.log-content').append('<hr />');
					$('.log-content').append(data);
				} else {
					console.log( arguments );
					console.log('Hop!');
				}
			},
			namespace: 'foobar'
		});

	</script>

{{> bottom}}