{{> top title="Init on demand, three conditions"}}

	<div class="controls">
		<button type="button" class="destroy">Destroy instance ".hopper-root"</button>
		<button type="button" class="init">Init instance ".hopper-root"</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-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>

		$('.destroy').on('click', function () {
			$('.hopper-root').dochopper('destroy');
		});

		$('.init').on('click', function () {

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

		});

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

	</script>

{{> bottom}}