{{> top title="Mixed options and DOM data, four conditions"}}

	<!--[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" data-hop-conditions='[{"into":"hop3","media":"screen and (min-width:900px)"},{"into":"hop1","media":"screen and (min-width:1200px)"}]'>
		<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" data-hop-from="hop4">
		And again
	</div>

	<script>

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

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

	</script>

{{> bottom}}