<div ng-app="tools" ng-controller="MainCtrl" style="overflow: hidden;">
    <div class="page page-1" hm-swipe="handleSwipe($event)" hm-recognizer-options="swipeOpps">
        <div style="flex: auto"></div>
        <div class="mui--text-display2 page-title margin" style="">
            A call for new tech
        </div>
        <div class="mui--text-headline page-content" style="">
            "...an empowered employee has the right tools for the job..."
        </div>
        <div style="flex: auto"></div>
        <div><button class="mui-btn mui-btn--primary button-down" ng-click="changePage(1)"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></button></div>
    </div>

    <div class="page page-2" hm-swipe="handleSwipe($event)" hm-recognizer-options="swipeOpps">
        <div class="page-wrapper">
        <div><button class="mui-btn mui-btn--primary button-up" ng-click="changePage(-1)"><i class="fa fa-angle-up fa-4x" aria-hidden="true"></i></button></div>
        <div style="flex: auto"></div>
        <div class="mui--text-display2 page-title">
            <div><i class="margin fa fa-question-circle-o fa-3x" aria-hidden="true"></i></div>
            Why upgrade old tech?</div>
        <br/>
        <div class="mui--text-headline page-content;">
            Dated technology is:
            <ul class="mui--text-headline" style="display:table; margin:0 auto;padding-top:1em;font-weight:300;color:white;text-align: -webkit-auto;">
                <li class="margin">Inefficient - waiting for something to happen</li>
                <li class="margin">Frustrating - in the way of getting stuff done</li>
                <li class="margin">Looks Bad - fails when interfacing with clients</li>
            </ul>
        </div>
        <div style="flex: auto"></div>
        <div><button class="mui-btn mui-btn--primary button-down" ng-click="changePage(1)"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></button></div>
        </div>
    </div>

    <div class="page page-3" hm-swipe="handleSwipe($event)" hm-recognizer-options="swipeOpps">
        <div class="page-wrapper">
            <div>
                <button class="mui-btn mui-btn--primary button-up" ng-click="changePage(-1)"><i class="fa fa-angle-up fa-4x" aria-hidden="true"></i></button>
            </div>
                <div style="flex: auto"></div>
            <div class="mui--text-display2 page-title">
                How inefficient?</div>
            <br/>
            <div class="mui--text-headline page-content">
                Technology quickly becomes dated. We have all been there when a computer starts showing its age. Waiting for a page to load, an application to save, a process to finish, or just for something to happen. Waiting is inefficient.
                <br/>
                <br/>
                <b>Inefficiency Use Cases</b>
                <br/>
                <br/>
                <div style="display:flex;flex-direction: row;flex-wrap: wrap;">
                    <button ng-click="showBrowserSpeed = true" ng-show="page === 3" class="mui-btn mui-btn--primary icon-button" style="flex: auto;min-width:180px;min-height:120px;">
                        <div class="mui--text-headline margin">Browsing Speed</div>
                        <i class="fa fa-fast-forward fa-3x" aria-hidden="true"></i>
                    </button>
                    <button ng-click="showReliability = true" ng-show="page === 3" class="mui-btn mui-btn--primary icon-button" style="flex: auto;min-width:180px;min-height:120px;">
                        <div class="mui--text-headline margin">Reliability</div>
                        <i class="fa fa-wrench fa-3x" aria-hidden="true"></i>
                    </button>
                    <button ng-click="showApplicationLoad = true" ng-show="page === 3" class="mui-btn mui-btn--primary icon-button" style="flex: auto;min-width:180px;min-height:120px;">
                        <div class="mui--text-headline margin">Application Load</div>
                        <i class="fa fa-truck fa-3x" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
            <div style="flex: auto"></div>
            <div>
                <button class="mui-btn mui-btn--primary button-down" ng-click="changePage(1)"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></button>
            </div>
        </div>
        <div ng-show="showBrowserSpeed" class="modal">
            <div class="flex-column">
                <div class="flex-row">
                    <div style="flex: auto"></div>
                    <button style="float: right;height: 4em; marign: .5em;margin: .5em;" class="mui-btn mui-btn--primary icon-button basic-button" ng-click="showBrowserSpeed = false"><i class="fa fa-times fa-2x" aria-hidden="true"></i></button>
                </div>
                <div style="flex-grow: .1;"></div>
                <div class="mui--text-display2 margin">Browsing Speed</div>
                <div class="mui--text-headline margin page-content">
                    Everyone uses a browser and as the internet evolves browsers demand more and more from a computer, phone, or tablet. A single Salesforce page can easily take <b>30 to 60 seconds to load</b> on a 4 year old computer. On a modern computer, the same Salesforce page loads in <b>2 to 5 seconds!</b>
                    
                    <div class="margin">
                        Assume the average employee only has to visit
                        <div style="display: inline-block;margin:0;padding:0" class="mui-textfield">
                            <input style="width: 2em;font-size: 1.2em;color: white;" type="number" ng-model="pageLoads" ng-init="pageLoads=10" min="1"/>
                        </div> web pages in a day on Salesforce which each take an average of 
                        <div style="display: inline-block;margin:0;padding:0" class="mui-textfield">
                            <input style="width: 2em;font-size: 1.2em;color: white;" type="number" ng-model="secondsLoad" ng-init="secondsLoad=30"/></div>
                        seconds to load. 
                    </div>
                    <div class="margin">
                        {{pageLoads}} page loads a day with about 261 working days in the year comes to {{(((pageLoads*secondsLoad/60*261)/60 )).toFixed(2)}} hours spent waiting. Which at a $
                        <div style="display: inline-block;margin:0;padding:0" class="mui-textfield">
                            <input style="width: 2em;font-size: 1.2em;color: white;" type="number" ng-model="billrate" ng-init="billrate=120"/></div>
                        / hour billrate comes to <b>${{(((pageLoads*secondsLoad/60*261)/60 * billrate)).toFixed(1)}}</b> a year per employee!
                    </div>
                </div>
                <div style="flex: auto"></div>
            </div>
        </div>
        <div ng-show="showReliability" class="modal">
            <div class="flex-column">
                <div class="flex-row">
                    <div style="flex: auto"></div>
                    <button style="float: right;height: 4em; marign: .5em;margin: .5em;" class="mui-btn mui-btn--primary icon-button basic-button" ng-click="showReliability = false"><i class="fa fa-times fa-2x" aria-hidden="true"></i></button>
                </div>
                <div style="flex-grow: .1;"></div>
                <div class="mui--text-display2 margin">Reliability</div>
                <div class="mui--text-headline margin page-content">
                    You've been there when a browser or app crashes. Work is lost, time is wasted, and things don't get done. These failures are primarily due to a computers age. After the warranty is up most computer components will start to degrade in performance and then fail all together. These failures and degradations result in computers freeze, locking, crashing, etc. While recoverable, much time is lost getting back to the state before the issue occurred. Some crashes can be recovered from quickly while others can take <b>hours or even days</b>.
                    <div class="margin">
                        Assume the average employee has
                        <div style="display: inline-block;margin:0;padding:0" class="mui-textfield">
                            <input style="width: 2em;font-size: 1.2em;color: white;" type="number" ng-model="issues" ng-init="issues=3" min="1"/></div>
                        crashes, freezes, or some other issue a week that takes an average
                        <div style="display: inline-block;margin:0;padding:0" class="mui-textfield">
                            <input style="width: 2em;font-size: 1.2em;color: white;" type="number" ng-model="timeLost" ng-init="timeLost=8" min="1"/></div>
                        minutes to recover from.
                    </div>
                    <div class="margin">
                        {{issues}} problems a week about {{261/5}} working weeks in the year comes to {{((issues*timeLost*(261/5))/60 ).toFixed(2)}} hours spent recovering from needless crashing, freezing, and component failures. With a billrate of $
                        <div style="display: inline-block;margin:0;padding:0" class="mui-textfield">
                            <input style="width: 2em;font-size: 1.2em;color: white;" type="number" ng-model="billrate" ng-init="billrate=120"/></div>
                        / hour it comes to <b>${{(((issues*timeLost*(261/5))/60  * billrate)).toFixed(1)}}</b> a year per employee!
                    </div>
                </div>
                <div style="flex: auto"></div>
            </div>
        </div>
        <div ng-show="showApplicationLoad" class="modal">
            <div class="flex-column">
                <div class="flex-row">
                    <div style="flex: auto"></div>
                    <button style="float: right;height: 4em; marign: .5em;margin: .5em;" class="mui-btn mui-btn--primary icon-button basic-button" ng-click="showApplicationLoad = false"><i class="fa fa-times fa-2x" aria-hidden="true"></i></button>
                </div>
                <div style="flex-grow: .1;"></div>
                <div class="mui--text-display2 margin">Application Load</div>
                <div class="mui--text-headline margin page-content">
                    Applications, browsers, and even operating systems all require more memory and system resources to run soothly. When you start having to close applications to open others you are running in to a memory issue. This is especially problematic for a developer who needs to have many more applications running than the average manager. But both would work much more efficiently with more memory. </div>
                <div style="flex: auto"></div>
            </div>
        </div>
    </div>
 
    <div class="page page-4" hm-swipe="handleSwipe($event)" hm-recognizer-options="swipeOpps">
    <div class="page-wrapper">
        <div><button class="mui-btn mui-btn--primary button-up" ng-click="changePage(-1)"><i class="fa fa-angle-up fa-4x" aria-hidden="true"></i></button></div>
        <div style="flex: auto"></div>
        <div class="mui--text-display2 page-title">
            <div><i class="margin fa fa-frown-o fa-3x" aria-hidden="true"></i></div>
            How frustrating?</div>
        <br/>
        <div class="mui--text-headline page-content">
            A computer crashing, locking, or freezing is frustrating and results in lost work, time, and revenue. Conference phones dropping calls, incombatible ports when trying to connect to a projector, burn in on monitors, etc while less common are still frustrating and prevelant issues with older tech. 
            <br/><br/>
            More importantly, an empowered employee has the right tools for the job with technology helping, not hindering. 
            <br/><br/>
            Frustrated employees are unhappy employees. Unhappy employees look for greener grass.
        </div>
        <div style="flex: auto"></div>
        <div><button class="mui-btn mui-btn--primary button-down" ng-click="changePage(1)"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></button></div>
    </div>
    </div>

    <div class="page page-5" hm-swipe="handleSwipe($event)" hm-recognizer-options="swipeOpps">
        <div class="page-wrapper">
        <div><button class="mui-btn mui-btn--primary button-up" ng-click="changePage(-1)"><i class="fa fa-angle-up fa-4x" aria-hidden="true"></i></button></div>
        <div style="flex: auto"></div>
        <div class="mui--text-display2 page-title">
            <div><i class="margin fa fa-users fa-3x" aria-hidden="true"></i></div>
            How does it look bad?</div>
        <br/>
        <div class="mui--text-headline page-content">
            There is nothing like having a computer crash and refuse to start in the middle of a client presentation. It can be difficult to explain how you are still the <b>best</b> and <b>most capable</b> people for the job when your computer doesn't even start. 
            <br/><br/>
            It is unprofessional and in the way.
        </div>
        <div style="flex: auto"></div>
        <div><button class="mui-btn mui-btn--primary button-down" ng-click="changePage(1)"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></button></div>
        </div>
    </div>

    <div class="page page-6" hm-swipe="handleSwipe($event)" hm-recognizer-options="swipeOpps">
        <div class="page-wrapper">
            <div><button class="mui-btn mui-btn--primary button-up" ng-click="changePage(-1)"><i class="fa fa-angle-up fa-4x" aria-hidden="true"></i></button></div>
            <div style="flex: auto"></div>
            <div class="mui--text-display2 page-title">
                Solution</div>
            <br/>
            <div class="mui--text-headline page-content">
                Laptops are the backbone of today's companies. They are directly involved in almost every aspect of a business. Upgrading a laptop will give the greatest ROI compared to upgrading any other technology. 
                </br></br>
                Current Options
                <div style="display:flex;flex-direction: row;flex-wrap: wrap;justify-content:center;">
                    <button ng-click="showWindows = true" ng-show="page === 6" class="mui-btn mui-btn--primary icon-button" style="flex: 1;min-width:180px;min-height:12em;max-width: 400px">
                        <div class="mui--text-headline margin">Windows</div>
                        <i class="fa fa-windows fa-3x" aria-hidden="true"></i>
                    </button>
                    <button ng-click="showApple = true" ng-show="page === 6" class="mui-btn mui-btn--primary icon-button" style="flex: 1;min-width:180px;min-height:12em;max-width: 400px">
                        <div class="mui--text-headline margin">Apple</div> 
                        <i class="fa fa-apple fa-3x" aria-hidden="true"></i>
                    </button>
                </div>
            </div> 
            <div style="flex: auto"></div>
            <div><button class="mui-btn mui-btn--primary button-down" ng-click="changePage(1)"><i class="fa fa-angle-down fa-4x" aria-hidden="true"></i></button></div>
        </div>
        <div ng-show="showWindows" class="modal">
            <div class="flex-column">
                <div class="flex-row">
                    <div style="flex: auto"></div>
                    <button style="float: right;height: 4em; marign: .5em;margin: .5em;" class="mui-btn mui-btn--primary icon-button basic-button" ng-click="showWindows = false"><i class="fa fa-times fa-2x" aria-hidden="true"></i></button>
                </div>
                <div style="flex-grow: .1;"></div>
                <i class="fa fa-windows fa-3x animated bounceIn" aria-hidden="true"></i>
                <div class="mui--text-display2 margin">
                    Windows Options
                </div>
                <div class="mui--text-headline page-content whiteframe">
                    <div class="flex-row table-options">
                        <div class="flex-column" style="background-color:#5F9EA0">
                            <div class="cell-data cell-header"></div>
                            <div class="cell-data cell-header"><b>Processor</b></div>
                            <div class="cell-data cell-header"><b>Memory</b></div>
                            <div class="cell-data cell-header"><b>Harddrive</b></div>
                            <div class="cell-data cell-header"><b>Display</b></div>
                            <div class="cell-data cell-header"><b>Battery</b></div>
                            <div class="cell-data cell-header"><b>Price</b></div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-column" ng-repeat="item in solutionOptionsWindows" style="height: auto">
                                <div class="cell-data cell-header">{{item.name}}</div>
                                <div class="cell-data">{{item.processor}}</div>
                                <div class="cell-data">{{item.memory}}</div>
                                <div class="cell-data">{{item.harddrive}}</div>
                                <div class="cell-data">{{item.display}}</div>
                                <div class="cell-data">{{item.battery}}</div>
                                <div class="cell-data">{{item.price}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex: auto"></div>
            </div>
        </div>
        <div ng-show="showApple" class="modal">
            <div class="flex-column">
                <div class="flex-row">
                    <div style="flex: auto"></div>
                    <button style="float: right;height: 4em; marign: .5em;margin: .5em;" class="mui-btn mui-btn--primary icon-button basic-button" ng-click="showApple = false"><i class="fa fa-times fa-2x" aria-hidden="true"></i></button>
                </div>
                <div style="flex-grow: .1;"></div>
                <i class="fa fa-apple fa-3x animated bounceIn" aria-hidden="true"></i>
                <div class="mui--text-display2 margin">
                    Apple Options
                </div>
                <div class="mui--text-headline page-content whiteframe">
                    <div class="flex-row table-options">
                        <div class="flex-column" style="background-color:#5F9EA0">
                            <div class="cell-data cell-header"></div>
                            <div class="cell-data cell-header"><b>Processor</b></div>
                            <div class="cell-data cell-header"><b>Memory</b></div>
                            <div class="cell-data cell-header"><b>Harddrive</b></div>
                            <div class="cell-data cell-header"><b>Display</b></div>
                            <div class="cell-data cell-header"><b>Battery</b></div>
                            <div class="cell-data cell-header"><b>Price</b></div>
                        </div>
                        <div class="flex-row">
                            <div class="flex-column" ng-repeat="item in solutionOptionsApple" style="height: auto">
                                <div class="cell-data cell-header">{{item.name}}</div>
                                <div class="cell-data">{{item.processor}}</div>
                                <div class="cell-data">{{item.memory}}</div>
                                <div class="cell-data">{{item.harddrive}}</div>
                                <div class="cell-data">{{item.display}}</div>
                                <div class="cell-data">{{item.battery}}</div>
                                <div class="cell-data">{{item.price}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex: auto"></div>
            </div>
        </div>
    </div>

    <div class="page page-7" hm-swipe="handleSwipe($event)" hm-recognizer-options="swipeOpps">
        <button class="mui-btn mui-btn--primary button-up" ng-click="changePage(-1)"><i class="fa fa-angle-up fa-4x" aria-hidden="true"></i></button>
        <div style="flex: auto"></div>
        <div class="mui--text-display2 page-title"> 
            Author
        </div>
        </br>
        Junier Developer
        <br/> david.gerrells@bluewolfgroup.com
        </br></br>
        <div style="flex: auto"></div>
        <div style="flex: auto"></div>
    </div>
</div>


<link href="//cdn.muicss.com/mui-0.6.0/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="//cdn.muicss.com/mui-0.6.0/js/mui.min.js"></script>
</div>

body {
  overflow:hidden;
}
b {
    font-size: 108%;
}
.margin {
    margin: 0.5em;
}
.whiteframe {
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12);
    background-color: white;
    overflow: auto;
}
.mui--text-display2.page-title {
    color:white;
    font-size:3em;
    font-weight: 300;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    text-transform: uppercase;
}
.mui--text-headline.page-content {
    max-width: 80%;
    margin:auto;
    color:white;
    font-size:2em;
    font-weight: 300;
/*     font-family: 'Lato', Calibri, Arial, sans-serif; */
    font-family: MuseoSans, serif;
}
.page-wrapper {
    display: flex;
    flex-direction:column;
    align-items: center;
    overflow-y: auto;
    height: 100vh;
    width: 100vw;
}
.page-1, .page-2, .page-3, .page-4, .page-5, .page-6, .page-7 { 
    min-width: 100%;
    min-height: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    background-color: #0AC2D2;
    font-size: 100%;
	transform: translate3d(0, 0, 0);
    color:white;
    overflow-y: auto;
    display: flex;
    flex-direction:column;
    align-items: center;
}
.page-2 {
  z-index:-1;
  background-color: #60D7A9;
}
.page-3 {
  z-index:-2;
  background-color: #FDC162;
}
.page-4 {
  z-index:-3;
  background-color: #FD6A62;
}
.page-5 {
  z-index:-4;
  background-color: #7BB7FA;
}
.page-6 {
  z-index:-5;
  background-color: #60D7A9;
}
.page-7 {
  z-index:-6;
  background-color: #0AC2D2;
}

.move-in { 
  animation-name: slideInUp;
  animation-timing-function: ease-out;
  animation-duration: 600ms;
}   
.move-out { 
  animation-name: slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 600ms;
}  
.move-in-down { 
  animation-name: slideInDown;
  animation-timing-function: ease-out;
  animation-duration: 600ms;
}   
.move-out-down { 
  animation-name: slideOutDown;
  animation-timing-function: linear;
  animation-duration: 800ms;
}  
.fa {
  line-height: inherit;
} 
h2 {
  width: 70%;
  margin: auto;
}
.mui-btn.mui-btn--primary {
    opacity: .6;
}
.mui-btn.mui-btn--primary.icon-button {
    opacity: 1;
}
.mui-btn.mui-btn--primary:hover,
.mui-btn.mui-btn--primary:focus {
    opacity: 1;
}
.mui-btn.mui-btn--primary,
.mui-btn.mui-btn--primary:hover,
.mui-btn.mui-btn--primary:focus {
  background-color: inherit;
}
.mui-btn.mui-btn--primary:hover {
    transform: translate3d(0,-10px,0);
}
.mui-btn.mui-btn--primary.basic-button:hover {
    transform: translate3d(0,0,0);
}
.button-up {
    width: 10em;
    height: 3em !important;
    line-height: 3em !important;
    top: 0.5em;
}
.button-down {
    width: 10em;
    height: 3em !important;
    line-height: 3em !important;
    bottom: 0.5em;
}
.mui-btn.mui-btn--primary.button-up:hover {
    transform: translate3d(0,10px,0);
}
.mui-btn.mui-btn--primary.ng-hide-add {
    animation: fadeOutUp 400ms;
}
.mui-btn.mui-btn--primary.ng-hide-remove {
    animation-name: bounceIn;
    animation-duration: 600ms;
}
.mui-btn.mui-btn--primary.ng-hide-remove:nth-child(2) {
    animation-duration: 900ms;
}
.mui-btn.mui-btn--primary.ng-hide-remove:nth-child(3) {
    animation-duration: 1200ms;
}
div {
  transition: all linear 500ms;
}
.fa {
    animation: bounceInDown 1000ms;
}
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow-y: auto;
    z-index: 5;
    opacity: 1;
    background-color: inherit;
}
.flex-column {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex-row {
    display:flex;flex-direction:row;width: 100%;
}
div button.mui-btn.mui-btn--primary {
    margin-top: 1.5em;
}
div button.mui-btn.mui-btn--primary.button-up {
    margin-top: 0;
    margin-bottom: 1.5em;
}
.flex-1 {
    flex: 1 20%;display: flex;font-size: .6em;line-height: 1.2em;
    flex-grow: 1;
    flex-basis: 0;
    margin: 0.5em;
}
.modal.ng-hide-remove {
    animation: zoomIn 400ms;
}
.modal.ng-hide-add {
    animation: zoomOut 500ms;
}
.cell-data {
    font-size: 14px;
    line-height: 14px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(0,0,0,.8);
    padding: 0.5em;
}
.cell-header {
    line-height: 1em;
    background-color: #5F9EA0;
    font-size: .8em;
    color: white;
    width: 100%;
    height: 100%;
}
.table-options {
    height:550px;
    min-width: 700px;
}
@media (max-width: 920px) {
  .mui--text-headline.page-content { 
    max-width: 90%;
  }
}
@media (max-width: 700px) {
  .mui--text-headline.page-content { 
    max-width: 100%;
    margin: .5em;
    font-size: 1.65em;
    line-height: 1em;
  }
}
@media (min-height: 900px) and (orientation: portrait) {
    .button-up, .button-down {
        width: 14em !important;
        height: 6.5em !important;
    }
    .button-up i.fa, .button-down i.fa {
        font-size: 10em;
        line-height: .6em;
    }
    .fa {
       font-size: 5em; 
    }
    .table-options {
        height:800px;
        min-width: 100%;
    }
    .basic-button .fa{
        font-size: 3em;
    }
}

angular
    .module("tools", ["ngAnimate", "hmTouchEvents"])
    .controller("MainCtrl", function($scope) {
        $scope.swipeOpps = {"type":"swipe","directions":"DIRECTION_UP|DIRECTION_DOWN"}
        $scope.handleSwipe = function($event) {
            this.changePage($event.velocity < 0 ? 1 : -1);
        };
        $scope.page = 1;
        $scope.changePage = function(num) {
            if (num > 0 && $scope.page < 7) {
                $scope.page += num;
                $(".page-" + ($scope.page - 1)).removeClass(
                    "move-in move-out move-in-down move-out-down"
                );
                $(".page-" + $scope.page).removeClass(
                    "move-in move-out move-in-down move-out-down"
                );
                $(".page-" + ($scope.page - 1)).addClass("animated move-out");
                $(".page-" + $scope.page).addClass("animated move-in");
            } else if (num < 0 && $scope.page > 1) {
                $(".page-" + ($scope.page - 1)).removeClass(
                    "move-in move-out move-in-down move-out-down"
                );
                $(".page-" + $scope.page).removeClass(
                    "move-in move-out move-in-down move-out-down"
                );
                $(".page-" + ($scope.page - 1)).addClass(
                    "animated move-in-down"
                );
                $(".page-" + $scope.page).addClass("animated move-out-down");
                $scope.page += num;
                console.log($scope.page);
            }
        };
        var lastScrollTop = 0;
        var distance = 0;
        var distanceToChange = 25;
        $scope.solutionOptionsWindows = [
            {
                name: "Razer Blade PRO",
                processor:
                    "Intel® Core™ i7–6700HQ Quad-Core 2.6GHz / 3.5GHz (Base/Turbo)",
                memory: "16GB dual-channel onboard memory (DDR4, 2133MHz)",
                harddrive: "512GB SSD",
                display:
                    '14.0" IGZO QHD+, 16:9 Ratio, 3200x1800, with LED backlight, with capacitive multi-touch',
                battery: "6 hours",
                price: "$2,199.99"
            },
            {
                name: "Dell XPS 15",
                processor:
                    "Intel® Core™ i7–6700HQ Quad Core (6M Cache, up to 3.5 GHz)",
                memory: "8GB DDR4-2133MHz;",
                harddrive: "256GB SSD",
                display: '15.6" FHD (1920 x 1080) InfinityEdge',
                battery: "17 hours",
                price: "$1,549.99"
            },
            {
                name: "Razer Blade",
                processor:
                    "Intel® Core™ i7-6500U Dual-Core Processor 2.5GHz / 3.1GHz (Base/Turbo)",
                memory: "8GB dual-channel onboard memory",
                harddrive: "128GB SSD",
                display:
                    '12.5" IGZO 16:9 Ratio, 2560 x 1440, with LED backlight, capacitive multi-touch',
                battery: "8 hours",
                price: "$999.99"
            },
            {
                name: "ASUS ZenBook",
                processor: "Intel Core i5-6200U 2.3GHz",
                memory: "8GB dual-channel memory",
                harddrive: "256GB SSD",
                display:
                    "13.3 inches IPS LED backlit display, 1920x1080, touch screen",
                battery: "8 hours",
                price: "$795.00"
            }
        ];
        $scope.solutionOptionsApple = [
            {
                name: "MacBook Air",
                processor:
                    "1.6GHz dual-core Intel Core i5 (Turbo Boost up to 2.7GHz)",
                memory: "8GB of 1600MHz LPDDR3",
                harddrive: "256GB SSD",
                display: "13.3-inch (diagonal) LED-backlit glossy 1440 by 900",
                battery: "12 hours",
                price: "$999.00"
            },
            {
                name: "MacBook",
                processor:
                    "1.1GHz dual-core Intel Core m3 processor (Turbo Boost up to 2.2GHz)",
                memory: "8GB of 1866MHz LPDDR3",
                harddrive: "256GB SSD",
                display:
                    "12-inch (diagonal) LED-backlit 2304 by 1440 resolution",
                battery: "10 hours",
                price: "$1,299.00"
            },
            {
                name: "MacBook Pro",
                processor:
                    "2.9GHz dual-core Intel Core i5 processor (Turbo Boost up to 3.3GHz)",
                memory: "8GB of 1866MHz LPDDR3",
                harddrive: "512GB SSD",
                display:
                    "13.3-inch (diagonal) LED-backlit 2560 by 1600 pixels (Retina)",
                battery: "10 hours",
                price: "$1,799.00"
            },
            {
                name: "MacBook Pro",
                processor:
                    "2.5GHz quad-core Intel Core i7 processor (Turbo Boost up to 3.7GHz) ",
                memory: "16GB of 1600MHz DDR3",
                harddrive: "512GB SSD",
                display:
                    "15.4-inch (diagonal) LED-backlit 2880 by 1800 pixels (Retina)",
                battery: "9 hours",
                price: "$2,499.00"
            }
        ].reverse();
        $("body").scroll(function() {
            var st = window.pageYOffset || document.documentElement.scrollTop;

            if (st > lastScrollTop) {
                distance += 1;
                // downscroll code
            } else {
                // upscroll code
                distance -= 1;
            }
            if (distance > distanceToChange) {
                distance = 0;
                $scope.changePage(1);
            }
            if (distance < -distanceToChange) {
                distance = 0;
                $scope.changePage(-1);
            }
            lastScrollTop = st;
        });
    });