@extends('web.layout.app')
@section('css')

@endsection
@section('title','Home Page')
@section('content')


    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item slider-1 active" style="background-image:url(img/slider-1.png);">
                <div class="slider-inset">
                    <div class="slider-box">
                        <div class="col-md-6 col-md-push-3 text-center">
                            <canvas id="canvas" data-aos="fade-up" data-aos-delay="500"></canvas>
                        </div>
                    </div>

                </div>
            </div>
            <div class="item slider-2" style="background-image:url(img/slider-1.png);">
                <div class="slider-inset">
                    <div class="slider-box">
                        <div class="col-md-6 col-md-push-3 text-center" data-aos="fade-up" data-aos-delay="500">
                            <h1>Eloko d’Meir Aneini!</h1>
                            <p>Eloko d’meir aneinu, God of Meir, answer me, has been passed down from father to son for centuries as an utterance that brings good fortune, salvation, and heavenly aid in all circumstances. These words are at the heart of Kolel Chibas Jerusalem, one of the oldest and holiest charity institutions in the world supporting thousands in the Holy Land.</p>

                        </div>

                    </div>

                </div>


            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="sr-only">Next</span>
        </a>
    </div>


@endsection
@section('scripts')
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="js/ChibasAnimacija.js?1482420239325"></script>
<script>
var canvas, stage, exportRoot;
function init() {
    canvas = document.getElementById("canvas");
    handleComplete();
}
function handleComplete() {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    exportRoot = new lib.ChibasAnimacija();
    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot); 
    //Registers the "tick" event listener.
    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);        
    //Code to support hidpi screens and responsive scaling.
    (function(isResp, respDim, isScale, scaleType) {        
        var lastW, lastH, lastS=1;      
        window.addEventListener('resize', resizeCanvas);        
        resizeCanvas();     
        function resizeCanvas() {           
            var w = lib.properties.width, h = lib.properties.height;            
            var iw = window.innerWidth, ih=window.innerHeight;          
            var pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;           
            if(isResp) {                
                if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
                    sRatio = lastS;                
                }               
                else if(!isScale) {                 
                    if(iw<w || ih<h)                        
                        sRatio = Math.min(xRatio, yRatio);              
                }               
                else if(scaleType==1) {                 
                    sRatio = Math.min(xRatio, yRatio);              
                }               
                else if(scaleType==2) {                 
                    sRatio = Math.max(xRatio, yRatio);              
                }           
            }           
            canvas.width = w*pRatio*sRatio;         
            canvas.height = h*pRatio*sRatio;
            canvas.style.width = w*sRatio+'px';         
            canvas.style.height = h*sRatio+'px';
            stage.scaleX = pRatio*sRatio;           
            stage.scaleY = pRatio*sRatio;           
            lastW = iw; lastH = ih; lastS = sRatio;     
        }
    })(false,'both',false,1);   
}
</script>
    <script type="text/javascript">

        $(document).ready(function(e) {
            init();
        });
        $('.carousel').carousel({
            interval: 9000
        }); 

    </script>
@endsection