{{> top title="Dynamic elements, three instances"}}

	<div class="controls">
		<button type="button" class="destroy" data-instance=".hopper-a">Destroy instance ".hopper-a"</button><br />
		<button type="button" class="destroy" data-instance=".hopper-b">Destroy instance ".hopper-b"</button><br />
		<button type="button" class="destroy" data-instance=".hopper-c">Destroy instance ".hopper-c"</button>
	</div>

	<!--[if lt IE 9]>
		<div class="log">
			<pre><code class="log-content"></code></pre>
			<button type="button" class="log-clear">Clear</button>
		</div>
	<![endif]-->

	<div class="hopper hopper-01 hopper-a">
		<div>
			Div content
			<div>Inner div content</div>
		</div>
		<b><span class="dynamic1">Original content</span></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 hopper-b">
		<b><i>More new content</i></b><br />
		<div data-hop-from="hop3">
			<div><button type="button" class="dynamic2">More content for first content</button></div>
		</div>
	</div>
	<div class="hopper hopper-05 hopper-c">
		<div data-hop-from="hop4">
			And again
		</div>
	</div>

	<script>

		$('.log-clear').on('click', function () {
			$('.log-content').empty();
		});

		$('.hopper-a').on('click', '.dynamic1', function () {
			if ( !+'\v1' ) {
				var data = 'dynamic1 clicked, delegeated';
				$('.log-content').append('<hr />');
				$('.log-content').append(data);
			} else {
				console.log( 'dynamic1 clicked, delegeated' );
			}
		});

		$('.dynamic1').on('click', function () {
			if ( !+'\v1' ) {
				var data = 'dynamic1 clicked';
				$('.log-content').append('<hr />');
				$('.log-content').append(data);
			} else {
				console.log( 'dynamic1 clicked' );
			}
		});

		$('.dynamic2').on('click', function () {
			if ( !+'\v1' ) {
				var data = 'dynamic2 clicked';
				$('.log-content').append('<hr />');
				$('.log-content').append(data);
			} else {
				console.log( 'dynamic2 clicked' );
			}
		});

		$('.destroy').on('click', function () {
			$($(this).data('instance')).dochopper('destroy');
		});

		$('.hopper-a').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!');
				}
			}
		});

		$('.hopper-b').dochopper({
			conditions: [
				{
					into: 'hop4',
					media: 'screen and (min-width:1100px)'
				}
			],
			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!');
				}
			}
		});

		$('.hopper-c').dochopper({
			conditions: [
				{
					into: 'hop2',
					media: 'screen and (min-width:1200px)'
				},
				{
					into: 'hop1',
					media: 'screen and (min-width:1300px)'
				}
			],
			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!');
				}
			}
		});

	</script>

{{> bottom}}