@extends('layouts.main')
@section('content')

    <div class="experiment-page container">

            <div class="page-header">
                <h1>Experiments!</h1>

                <p class="lead">
                    This is a page for trying shit out. Don't expect it to make any sense.
                </p>
            </div>

        <section class="slidefades hidden-xs">
            <div class="section-heading">
                <h2>Slidefades
                    <small>8-17-2015</small>
                </h2>
                <p class="hidden-xs">Click the button. They slide!  They fade! What more could you want?</p>
            </div>
            <div class="control-area slidefades-control-area">
                <a class="btn btn-block btn-primary centered-button fade-control-button" id="slide-fade-button"
                   href="#">I AM A BUTTON!</a>

                <div class="row">
                    <div class="col-sm-4">
                        <div class="well">
                            <img class="img-responsive" src="//lorempixel.com/320/240/abstract/1" alt=""/>

                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation </p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="well">
                            <img class="img-responsive" src="//lorempixel.com/320/240/abstract/2" alt=""/>

                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation </p>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="well">
                            <img class="img-responsive" src="//lorempixel.com/320/240/abstract/3" alt=""/>

                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3">
                    <hr/>
                </div>
            </div>
        </section>




        <section class="exploding-p-section">
            <div class="section-heading">
                <h2>Exploding Text
                    <small>8-17-2015</small>
                </h2>
                <p>Go ahead. Show this text who's boss. Click the button.</p>
            </div>

            <div class="control-area" id="exploding-paragraph">
                {!!$content!!}
            </div>
            <div class="buttons">
                <a id="button" class="btn btn-danger btn-block centered-button" href="#">Bomb It.</a>
                <a id="button2" class="btn btn-info btn-block centered-button" href="#">Fix It.</a>
            </div>

        </section>

    </div>
    <script>
        jQuery(document).ready(function() {
            //Slidefades
            $('#slide-fade-button').on('click', function(e) {
                e.preventDefault();
                var wells = $('.well', '.slidefades-control-area');
                wells.each(function(index) {
                    $(this).delay(200 * index).queue(function() {
                        $(this).toggleClass('in').dequeue();
                    });
                });
            });


            //Exploding P
            $('#button').on('click', function(e) {
                e.preventDefault();
                var tmp = $('#exploding-paragraph').find('span');
                tmp.each(function() {
                    var xOffset = Math.floor((Math.random() * 1000) + 1);
                    var yOffset = Math.floor((Math.random() * 1000) + 1);
                    var zOffset = Math.floor((Math.random() * 1000) + 1);
                    var rotateAmt = Math.floor((Math.random() * 1000) + 1);

                    if (Math.random() < .5) {
                        xOffset *= -1;
                    }
                    if (Math.random() < .5) {
                        yOffset *= -1;
                    }
                    $(this).css({
//                      'transform': 'translate(' + xOffset + 'px,' + yOffset + 'px) rotate('+rotateAmt+'deg)',
                        'transform': 'translate3d(' + xOffset + 'px,' + yOffset + 'px,' + zOffset + 'px) rotate3d(' + 0 + ',' + yOffset + ',' + zOffset + ',' + rotateAmt + 'deg)',
                        'opacity': '0'
                    });

                });
                $('#button2').css({

                    'display': 'block'
                });
                $(this).css({

                    'display': 'none'
                });
            });
            $('#button2').on('click', function(e) {
                e.preventDefault();
                var tmp = $('#exploding-paragraph').find('span');
                tmp.each(function() {
                    var xOffset = 0;
                    var yOffset = 0;
                    var rotateAmt = 0;
                    $(this).css({
                        'transform': 'translate(' + xOffset + 'px,' + yOffset + 'px) rotate(' + rotateAmt + 'deg)',
                        'opacity': '100'
                    });
                });
                $('#button').css({

                    'display': 'block'
                });
                $(this).css({

                    'display': 'none'
                });
            });
        });
    </script>
@stop