<div class="jumbotron">
      <div class="container">
        <h2>The Greensock Cards Demo</h2>
        <p>
            <a class="btn btn-primary btn-lg" id="btn-go" role="button">Go</a>
            <a class="btn btn-primary btn-lg" id="btn-reset" role="button">Reset</a>
        </p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-12">
            <div class="card-container-top">
                <div class="card" id="dark-card"></div>
                <div class="card" id="green-card"></div> 
            </div>
            <div class="card-container-bottom">
                <div class="card" id="orange-card"></div>
                <div class="card" id="light-blue-card">
                    <div id="textured-card" class="branded-card"></div>
                </div>
            </div>
        </div>
      </div>

.jumbotron {

  background-color: transparent;
  padding: 10px;
}

.card-container-top {

    text-align: center;
}

.card-container-bottom {

    text-align: center;
    margin-top: -715px;
}

div.card {
    moz-border-radius: 5px;
    border-radius: 5px;
    height: 370px;
    width: 230px;
    margin: 0 auto;
}

.branded-card {
    moz-border-radius: 5px;
    border-radius: 5px;
    background-image: url('http://dankemper.net/greensock/cards/img/cool-card.png');
    width: 100%;
    height: 100%;
    opacity: 0;
}

div.card:after {
    clear: both;
}

#green-card {
    background-color: green;
    left: 55px;
    position: relative;
    top: -420px;
    -webkit-transform: rotate(-10deg);
    -webkit-transform-origin: right top 0;
    transform: rotate(-10deg);
    transform-origin: right top 0;
}

#orange-card {
    background-color: orange;
    position: relative;
    -webkit-transform: rotate(20deg);
    -webkit-transform-origin: right top 0;
    transform: rotate(20deg);
    transform-origin: right top 0;
}

#light-blue-card {
    background-color: lightblue;
    left: -50px;
    position: relative;
    top: -320px;
    -webkit-transform: rotate(33deg);
    -webkit-transform-origin: right top 0;
    transform: rotate(33deg);
    transform-origin: right top 0;
}

#dark-card {
    background-color: lightgray;
    left: 75px;
    position: relative;
    top: -90px;
    -webkit-transform: rotate(-20deg);
    -webkit-transform-origin: right top 0;
    transform: rotate(-20deg);
    transform-origin: right top 0;
    
}

var GsLabs = GsLabs || {};

GsLabs.CardRotation = function (btnSelector, resetBtnSelector) {
     
     GsLabs.CardRotation.btnSelector = btnSelector;
     GsLabs.CardRotation.resetBtnSelector = resetBtnSelector;
     
     this.init(btnSelector, resetBtnSelector);
};

$.extend(GsLabs.CardRotation.prototype, {
        
    init: function(goBtnSelector, resetBtnSelector) {
         
        var self = this;
        
        // create a timeline that calls myFunction() when it completes
        //
        var tl = null;
        
        // disable the reverse button
        //
        $(resetBtnSelector).addClass('disabled');
            
        $(goBtnSelector).click(function () {
            
            tl = new TimelineLite({ onComplete: self.foldComplete, onReverseComplete: self.reverseComplete });
            
            // collect the elements to rotate
            //
            var green = $('#green-card')[0];
            var orange = $('#orange-card')[0];
            var blue = $('#light-blue-card')[0];
            var gray = $('#dark-card')[0];
            var texture = $('#textured-card')[0];
            
            setTimeout(function () {
                
                $('#btn-go').addClass('disabled');
                
            }, 10);
            
            tl.to(gray, 1, { rotation: 0, left: 0, top: 25 }, 0)
              .to(green, 1, { rotation: 0, left: 0, top: -345 }, 0)
              .to(orange, 1, { rotation: 0 }, 0)
              .to(blue, 1, { rotation: 0, left: 0, top: -370 }, 0)
              .to(texture, 1, { opacity: '1.0' }, "begin-push")
              .to([orange, green, gray], 1, { opacity: 0 }, "begin-push")
              .to(blue, 0.75, { top: 370, force3D: true });
        });
        
        $(resetBtnSelector).click(function () {
        
           tl.reverse(0);
           
        });
    },
    
    foldComplete: function () {
        
        $(GsLabs.CardRotation.resetBtnSelector).removeClass('disabled');
    },
    
    reverseComplete: function () {
        
        $(GsLabs.CardRotation.btnSelector).removeClass('disabled');
        $(GsLabs.CardRotation.resetBtnSelector).addClass('disabled');
    }
});

$(function () {
    
    var gsLabs = new GsLabs.CardRotation('#btn-go', '#btn-reset');

});