$(document).ready(function () {
    
    
    
    
    
    
    var blurElement = {a:20};


//here you pass the filter to the DOM element
function applyBlur()
{
    TweenMax.set(['#s0-title img'], {webkitFilter:"blur(" + blurElement.a + "px)",filter:"blur(" + blurElement.a + "px)"});  
};
    
    
    t1 = new TimelineMax({});
    
    t1.to($('#s0-left'),1,{opacity:1, left:"10%", ease:Power1.easeOut});
    t1.to($('#s0-producttxt'),1,{opacity:1, ease:Power1.easeOut, });
    t1.to($('#s0-productimg'),1,{opacity:1, ease:Power1.easeOut, delay:-1});
    t1.to($('#s0-title'),1,{css:{opacity:1,filter:"blur(0)"}, ease:Power1.easeOut});
    t1.to(blurElement, 1, {a:0, onUpdate:applyBlur, delay:-1});
    t1.to($('#s0-desc'),1,{opacity:1, ease:Power1.easeOut, delay:-2});
    
    t3 = new TimelineMax({paused:true});
    
    var mq = window.matchMedia( "(max-width: 1440px)" );
    if (mq.matches) {
  t3.fromTo($('#s2-claritifill'), 3, {
                top: "69%",
                left: "45%",
                width: "10%",
                height: "5%",
                opacity:0
            }, {
                top: "57%",
                left: "36%",
                width: "28%",
                height: "7%",
                opacity:0.2,

                ease: Power1.easeOut,
                delay:1
            });
} else {
  t3.fromTo($('#s2-claritifill'), 3, {
                top: "72%",
                left: "41%",
                width: "15%",
                height: "5%",
                opacity:0
            }, {
                top: "59%",
                left: "36%",
                width: "28%",
                height: "10%",
                opacity:0.2,

                ease: Power1.easeOut,
                delay:1
            });
}
            
    t3.fromTo($('#s2-canvas'), 2, {
                bottom: "-100%"
            }, {
                bottom: "0%",
                ease: Power2.easeOut
            });
    
    
    
    
    sunloop = new TweenMax.to($('#s3-sun'), 80, {
        rotation: 360,
        repeat:-1,
        ease:Power0.easeNone
    });
    
    
    
    t4 = new TimelineMax({});
        
    t4.fromTo($('#s3-lens,#s3-shield'),1,{opacity:0},{opacity:1, ease:Power1.easeOut});

    t4.fromTo($('#s3-arrows'), 2, {
        webkitClipPath:'circle(0% at 70% 30%)'
    }, {
        webkitClipPath:'circle(100% at 70% 30%)',
        ease: Power1.easeInOut,
        repeat:-1
    });
    
    $('#s4-btn1').click(function(){
        if($(this).data('state')=='1day'){
            
            if( $('#s4-btn2').data('state')=='toric'){
                $(this).data('state','multifocal');
                $(this).html('<img src="resource/images/multifocal_sm.png"/>');
            }else {
                $(this).data('state','toric');
                $(this).html('<img src="resource/images/toric_sm.png"/>');
            }
            
            s4flushani();
            s4fadeout();
            changep2();
            s4fadein();
            $('#s4-p2').delay('800').fadeTo(300,1);
            $('#s4-l2').delay('1000').fadeTo(300,1);
            
        }
        else if($(this).data('state')=='multifocal'){
            
            if( $('#s4-btn2').data('state')=='toric'){
                $(this).data('state','1day');
                $(this).html('<img src="resource/images/1day.png"/>');
            }else {
                $(this).data('state','toric');
                $(this).html('<img src="resource/images/toric_sm.png"/>');
            }
            
            s4flushani();
            s4fadeout();
            changep1();
            s4fadein();
            $('#s4-p1').delay('800').fadeTo(300,1);
            $('#s4-l1').delay('1000').fadeTo(300,1);
        }
        
        else if($(this).data('state')=='toric'){
            
            if( $('#s4-btn2').data('state')=='multifocal'){
                $(this).data('state','1day');
                $(this).html('<img src="resource/images/1day.png"/>');
            }else {
                $(this).data('state','multifocal');
                $(this).html('<img src="resource/images/multifocal_sm.png"/>');
            }
            
            s4flushani();
            s4fadeout();
            changep3();
            s4fadein();
            $('#s4-p3').delay('800').fadeTo(300,1);
            $('#s4-l3').delay('1000').fadeTo(300,1);
        }
        
        
    });
    
    $('#s4-btn2').click(function(){
        if($(this).data('state')=='1day'){
            
            if( $('#s4-btn1').data('state')=='toric'){
                $(this).data('state','multifocal');
                $(this).html('<img src="resource/images/multifocal_sm.png"/>');
            }else {
                $(this).data('state','toric');
                $(this).html('<img src="resource/images/toric_sm.png"/>');
            }
            
            s4flushani();
            s4fadeout();
            changep2();
            s4fadein();
            $('#s4-p2').delay('800').fadeTo(300,1);
            $('#s4-l2').delay('1000').fadeTo(300,1);
            
        }
        else if($(this).data('state')=='multifocal'){
            
            if( $('#s4-btn1').data('state')=='toric'){
                $(this).data('state','1day');
                $(this).html('<img src="resource/images/1day.png"/>');
            }else {
                $(this).data('state','toric');
                $(this).html('<img src="resource/images/toric_sm.png"/>');
            }
            
            s4flushani();
            s4fadeout();
            changep1();
            s4fadein();
            $('#s4-p1').delay('800').fadeTo(300,1);
            $('#s4-l1').delay('1000').fadeTo(300,1);
        }
        
        else if($(this).data('state')=='toric'){
            
            if( $('#s4-btn1').data('state')=='multifocal'){
                $(this).data('state','1day');
                $(this).html('<img src="resource/images/1day.png"/>');
            }else {
                $(this).data('state','multifocal');
                $(this).html('<img src="resource/images/multifocal_sm.png"/>');
            }
            
            s4flushani();
            s4fadeout();
            changep3();
            s4fadein();
            $('#s4-p3').delay('800').fadeTo(300,1);
            $('#s4-l3').delay('1000').fadeTo(300,1);
        }
        
    });
    
    function s4flushani(){
        $('.s4-pimg').finish();
        $('.s4-limg').finish();
        $('#personname').finish();
        $('#persondesc').finish();
    }
    
    function s4fadeout(){
        $('.s4-pimg').fadeTo(300,0);
        $('.s4-limg').fadeTo(300,0);
        $('#personname').fadeTo(300,0);
        $('#persondesc').fadeTo(300,0);
    }
    
    function s4fadein(){
        $('#personname').delay('800').fadeTo(300,1);
        $('#persondesc').delay('800').fadeTo(300,1);
    }
    
    function changep1 (){
        $('#s4-personname').html('Jason, 45');
        $('#s4-persondesc').html('Suffering from blur vision for both near and far objects');
    }
    function changep2 (){
        $('#s4-personname').html('Emily, 19');
        $('#s4-persondesc').html('Active lifestyle, new to contact lens');
    }
    function changep3 (){
        $('#s4-personname').html('Eric, 25');
        $('#s4-persondesc').html('Suffering from astigmatism');
    }
    
    t5 = new TimelineMax({paused:false, delay:3, repeat:-1, repeatDelay:3});
 
    t5.to($('#s4-p1'),0.5, {opacity:0});
    t5.to($('#s4-personname, #s4-persondesc'),0.5, {opacity:0});
    t5.to($('#s4-p2'),0.3, {opacity:1,onUpdate:changep2});
    t5.to($('#s4-personname, #s4-persondesc'),0.3, {opacity:1});
    t5.to($('#s4-l1'),0.3, {opacity:0, delay:-1});
    t5.to($('#s4-l2'),0.3, {opacity:1 });
    
    t5.to($('#s4-p2'),0.5, {opacity:0, delay:3});
    t5.to($('#s4-personname, #s4-persondesc'),0.5, {opacity:0});
    t5.to($('#s4-p3'),0.3, {opacity:1,onUpdate:changep3});
    t5.to($('#s4-personname, #s4-persondesc'),0.3, {opacity:1});
    t5.to($('#s4-l2'),0.3, {opacity:0, delay:-1}); 
    t5.to($('#s4-l3'),0.3, {opacity:1 });
    
    t5.to($('#s4-p3'),0.5, {opacity:0, delay:3});
    t5.to($('#s4-personname, #s4-persondesc'),0.5, {opacity:0});
    t5.to($('#s4-p1'),0.3, {opacity:1,onUpdate:changep1});
    t5.to($('#s4-personname, #s4-persondesc'),0.3, {opacity:1});
    t5.to($('#s4-l3'),0.3, {opacity:0, delay:-1});
    t5.to($('#s4-l1'),0.3, {opacity:1 });
    
    
    
    
    function cleart7(){
        t6.kill();
        t7.kill();
        $('.s5-coins img').css('opacity','0');
        $('.s5-coins img').css('top','0');
    }
    
    t6 = new TimelineMax({paused:true});
    
    t6.to($("#s5-clariti .c1"),0.3,{top:'100%',rotation:-20, opacity:1});
    
    t6.to($("#s5-clariti .c2"),0.3,{top:'95%',rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c1"),0.1,{rotation:0});
    t6.to($("#s5-clariti .c3"),0.3,{top:'90%',rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c2"),0.1,{rotation:0});
    
    t6.to($("#s5-clariti .c4"),0.2,{top:'85%',rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c3"),0.1,{rotation:0});
    t6.to($("#s5-clariti .c5"),0.2,{top:'80%',rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c4"),0.1,{rotation:0});
    
    t6.to($("#s5-clariti .c6"),0.3,{top:'75%',rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c5"),0.1,{rotation:0});
    t6.to($("#s5-clariti .c7"),0.3,{top:'70%',rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c6"),0.1,{rotation:0});
    
    t6.to($("#s5-clariti .c7"),0.1,{rotation:0});
    
    
    
    t7 = new TimelineMax({paused:true});
    
    t7.to($("#s5-trad .c1"),0.3,{top:'100%',rotation:-20, opacity:1});
    
    t7.to($("#s5-trad .c2"),0.3,{top:'95%',rotation:-20, opacity:1});
    t7.to($("#s5-trad .c1"),0.1,{rotation:0});
    t7.to($("#s5-trad .c3"),0.3,{top:'90%',rotation:-20, opacity:1});
    t7.to($("#s5-trad .c2"),0.1,{rotation:0});
    
    t7.to($("#s5-trad .c4"),0.2,{top:'85%',rotation:-20, opacity:1});
    t7.to($("#s5-trad .c3"),0.1,{rotation:0});
    t7.to($("#s5-trad .c5"),0.2,{top:'80%',rotation:-20, opacity:1});
    t7.to($("#s5-trad .c4"),0.1,{rotation:0});
    
    t7.to($("#s5-trad .c6"),0.3,{top:'75%',rotation:-20, opacity:1});
    t7.to($("#s5-trad .c5"),0.1,{rotation:0});
    t7.to($("#s5-trad .c7"),0.3,{top:'70%',rotation:-20, opacity:1});
    t7.to($("#s5-trad .c6"),0.1,{rotation:0});
    
    t7.to($("#s5-trad .c7"),0.1,{rotation:0});
    

    $('#fullpage').fullpage({
        'verticalCentered': false,
        'css3': true,
        anchors: ['livevivid', 'breathable', 'water', 'uv', 'needs', 'value','specs'],
    menu: '#animenu',
        //lockAnchors: true,
        //'navigation': false,
        //'navigationPosition': 'right',
       // 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
        fixedElements : '.header__wrapper, .main-nav__wrapper ,#menucontainer',
        afterRender: function(){
            /* d7 bugfix */
    $('.fp-slidesContainer > .fp-slides').unwrap();
    $('.fp-slidesContainer > .fp-slidesContainer').unwrap();
    $('.fp-slides > .fp-slides').unwrap();
    
        },
        'afterLoad': function (anchorLink, index) {},
        'onLeave': function (index, nextIndex, direction) {
            if(nextIndex == 1){
                t1.restart();
                $('#s1-bubbles').finish();
            }
            
          //  TweenMax.to($('.tg'), 3, {css:{clip:"rect(0px, 700px, 190px, 1px);"},ease:Power1.easeOut});
            if (nextIndex == 2) {

            $('#s1-bubbles').fadeIn(5000);
            $('.tg').delay(2000).fadeIn(1000);
                $('#s1-3x').delay(3000).fadeIn(3000);
            }
            if (index == 2) {
                $('#s1-bubbles').finish();
                $('.tg').finish();
                $('#s1-3x').finish();
                $('#s1-bubbles').fadeOut(100);
                $('.tg').fadeOut(100);
                $('#s1-3x').fadeOut(100);
            }
            
            if (nextIndex == 3) {

                t3.kill();
                t3.restart();
            }

            if (nextIndex == 4) {
                t4.play(0, true);
            }
                if (nextIndex == 5) {
                $('.s5-coins').fadeOut();
            }

                if (nextIndex == 6) {

                    cleart7();
                    $('.s5-coins').show();
                    t6.play(0, true);
                    t7.play(0, true);
            }
            
            if (nextIndex == 7){
                slideTimeout = setInterval(function () {
                $.fn.fullpage.moveSlideRight();
                }, 5000);
            }
            
            if (index == 7) {
            clearInterval(slideTimeout);
            }
    }
    });

    for (i = 0; i < 40; i++) {
        $('#s1-bubbles').append('<div class="bubble x' + i + '"></div>');

        scale = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
        opacity = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
        xlength = Math.floor(Math.random() * (30 - 3 + 1)) + 3;
        ylength = Math.floor(Math.random() * (9 - 2 + 1)) + 2;
        delay = Math.floor(Math.random() * (12 - 0 + 1)) + 0;

        $('.x' + i).css({
            '-webkit-transform': 'scale(0.' + scale + ')',
            '-moz-transform': 'scale(0.' + scale + ')',
            'transform': 'scale(0.' + scale + ')',
            'opacity': '0.' + opacity,

            '-webkit-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite , sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-moz-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-o-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate'
        });

    }
    
    for (i = 0; i < 10; i++) {
        $('#s1-bubbles').append('<div class="bubbleo2 y' + i + '"><div class="o2txt"></div></div>');

        scale = Math.floor(Math.random() * (9 - 6 + 1)) + 6;
        opacity = Math.floor(Math.random() * (9 - 3 + 1)) + 3;
        xlength = Math.floor(Math.random() * (30 - 3 + 1)) + 3;
        ylength = Math.floor(Math.random() * (9 - 2 + 1)) + 2;
        delay = Math.floor(Math.random() * (12 - 0 + 1)) + 0;

        $('.y' + i).css({
            '-webkit-transform': 'scale(0.' + scale + ')',
            '-moz-transform': 'scale(0.' + scale + ')',
            'transform': 'scale(0.' + scale + ')',
            'opacity': '0.' + opacity,

            '-webkit-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite , sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-moz-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-o-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate'
        });

    }

});




$(document).ready(function () {

    $('#s3-info').click(function () {
        $('#pushtitle').html('What are UVA and UVB rays?');
        $('#pushcontent').html('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat risus ipsum, sit amet pharetra urna mattis eget. In nisl mi, porta vitae ex vel, pretium molestie mi. Pellentesque finibus quam sed metus tristique eleifend. In feugiat id quam vel consectetur. Fusce quis iaculis ex. Donec auctor sapien ex, a commodo ligula varius nec. Quisque ante magna, blandit eu bibendum eget, gravida sed dolor. Sed erat ipsum, lacinia quis dignissim quis, interdum congue purus.');

        $('.pushmenu-push').toggleClass('pushmenu-push-toleft');
        $('.pushmenu-right').toggleClass('pushmenu-open');
    });
    $('#s1-info').click(function () {
        $('#pushtitle').html('What is Silicone Hydrogel?');
        $('#pushcontent').html('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat risus ipsum, sit amet pharetra urna mattis eget. In nisl mi, porta vitae ex vel, pretium molestie mi. Pellentesque finibus quam sed metus tristique eleifend. In feugiat id quam vel consectetur. Fusce quis iaculis ex. Donec auctor sapien ex, a commodo ligula varius nec. Quisque ante magna, blandit eu bibendum eget, gravida sed dolor. Sed erat ipsum, lacinia quis dignissim quis, interdum congue purus.');

        $('.pushmenu-push').toggleClass('pushmenu-push-toleft');
        $('.pushmenu-right').toggleClass('pushmenu-open');
    });


    $('#pushclose').click(function () {
        $('.pushmenu-push').toggleClass('pushmenu-push-toleft');
        $('.pushmenu-right').toggleClass('pushmenu-open');
    })
});



$(document).ready(function () {
    //s2 wave

    var canvas = document.getElementById("s2-canvas");
    var size = {
        width: window.innerWidth,
        height: window.innerHeight
    };

    /*
     * CONFIG
     */

    var options = {
        color: "#dcf0f1",
        waveAmplitude: 50,
        waveRadius: 200,
        waveElasticity: 0.95,
        waveStrength: 0.011,
        waveMouse: 50,
        waveMax: 100,
        waveComeUp: function () {},
        waveRiseSpeed: 15,
        lineWidth: 25,
        waveLength: 100
    };

    /*
     * UTILITIES
     */

    function times(amount, closure) {
        for (var i = 0; i < amount; i++) {
            closure(i);
        }
    }

    function func(name) {
        return function (obj) {
            return obj[name]();
        };
    }


    function rand(min, max) {
        return min + (max - min) * Math.random();
    }

    function bezier(points, context) {

        var a, b, x, y;

        for (var i = 1, length = points.length - 2; i < length; i++) {

            a = points[i];
            b = points[i + 1];

            x = (a.x + b.x) * 0.5;
            y = (a.y + b.y) * 0.5;

            context.quadraticCurveTo(a.x, a.y, x, y);
        }

        a = points[i];
        b = points[i + 1];

        context.quadraticCurveTo(a.x, a.y, b.x, b.y);
    }

    function distance(a, b) {
        var x = b.x - a.x;
        var y = b.y - a.y;

        return Math.sqrt(x * x + y * y);
    }

    function clamp(val, min, max) {
        return val < min ? min : (val > max ? max : val);
    }

    /*
     * GLOBAL CLASSES
     */

    var Mouse = (function () {

        var exports = {
            x: 0,
            y: 0,
            bind: function (canvas) {
                canvas.addEventListener("mousemove", onMouseMove);
                canvas.addEventListener("touchmove", onTouchMove);
            },
            unbind: function (canvas) {
                canvas.removeEventListener("mousemove", onMouseMove);
                canvas.removeEventListener("touchmove", onTouchMove);
            }
        };

        function onMouseMove(event) {
            exports.x = event.pageX;
            exports.y = event.pageY;
        }

        function onTouchMove(event) {
            event.preventDefault();

            exports.x = event.touches[0].pageX;
            exports.y = event.touches[0].pageY;
        }

        return exports;

    })();

    var Stage = {
        width: 1,
        height: 1,
        set: function (values) {
            Stage.width = values.width;
            Stage.height = values.height;
        }
    };

    /*
     * ARCHITECTURE CLASSES
     */

    var Water = function (context) {

        var waves;

        function init() {
            options.waveComeUp = this.start.bind(this);
        }

        this.render = function () {
            context.strokeStyle = options.color;
            context.lineWidth = options.lineWidth;
            context.lineCap = "round";
            context.beginPath();

            waves.forEach(func("render"));

            context.stroke();
        };

        this.setSize = function (width, height) {

            createWaves(height);

            waves.forEach(function (wave) {
                wave.setSize(width, height);
            });

        };

        this.start = function () {
            waves.forEach(func("start"));
        };

        function createWaves(height) {

            waves = [];
            var distance = 50;

            times(height / distance, function (index) {
                waves.push(new Wave(0, index * distance + 10, context, rand(0.08, 0.12) * index));
            });

        }

        init.call(this);

    };

    var Wave = function (originalX, originalY, context, offset) {

        var anchors;
        var width;
        var height;
        var mouseDirection;
        var oldMouse;
        var x;
        var y;

        function init() {
            x = originalX;
            y = originalY;

            anchors = [];
            mouseDirection = {
                x: 0,
                y: 0
            };

            var anchor;
            var current = 0;
            var start = -options.waveAmplitude;
            var target = options.waveAmplitude;
            var delta = offset;
            var step = 0.4;

            times(window.innerWidth / options.waveLength, function () {
                anchor = new Anchor(current, 0, start, target, delta);
                anchor.setOrigin(current + x, y);

                anchors.push(anchor);

                current += 90;
                delta += step;

                if (delta > 1) {
                    times(Math.floor(delta), function () {
                        delta--;
                        start *= -1;
                        target *= -1;
                    });
                }

            });
        }

        this.render = function () {

            update();

            context.save();
            context.translate(x, y);

            context.moveTo(anchors[0].x, anchors[0].y);
            bezier(anchors, context);

            context.restore();
        };

        this.setSize = function (_width, _height) {
            width = _width;
            height = _height;

            var step = _width / (anchors.length - 1);

            anchors.forEach(function (anchor, i) {
                anchor.x = step * i;
                anchor.setOrigin(anchor.x, y);
            });
        };

        this.onAmpChange = function () {
            anchors.forEach(func("onAmpChange"));
        };

        this.start = function () {
            y = height + 300 + originalY * 0.4;
        };

        function update() {
            var targetY = Math.min(y, Mouse.y + originalY);
            y += (targetY - y) / options.waveRiseSpeed;

            updateMouse();

            anchors.forEach(function (anchor) {
                anchor.update(mouseDirection, y);
            });
        }

        function updateMouse() {
            if (!oldMouse) {
                oldMouse = {
                    x: Mouse.x,
                    y: Mouse.y
                };
                return;
            }

            mouseDirection.x = Mouse.x - oldMouse.x;
            mouseDirection.y = Mouse.y - oldMouse.y;

            oldMouse = {
                x: Mouse.x,
                y: Mouse.y
            };
        }

        init.call(this);

    };

    var Anchor = function (x, y, start, target, delta) {

        var spring;
        var motion;
        var origin;

        function init() {
            spring = new Spring();
            motion = new Motion(start, target, delta);
            origin = {};
            this.x = x;
            this.y = y;
        }

        this.update = function (mouseDirection, currentY) {
            origin.y = currentY;

            var factor = getMultiplier();
            var vector = {
                x: mouseDirection.x * factor * options.waveMouse,
                y: mouseDirection.y * factor * options.waveMouse
            };

            if (factor > 0) {
                spring.shoot(vector);
            }

            spring.update();
            motion.update();

            this.y = motion.get() + spring.y;
        };

        this.onAmpChange = function () {
            motion.onAmpChange();
        };

        this.setOrigin = function (x, y) {
            origin.x = x;
            origin.y = y;
        };


        function getMultiplier() {
            var lang = distance(Mouse, origin);
            var radius = options.waveRadius;

            return lang < radius ? 1 - lang / radius : 0;
        }

        init.call(this);

    };

    var Motion = function (start, target, delta) {

        var SPEED = 0.02;
        var half;
        var upper;
        var lower;
        var min;
        var max;

        function init() {
            this.onAmpChange();
        }


        this.setRange = function (a, b) {
            min = a;
            max = b;
        };

        this.update = function () {
            delta += SPEED;

            if (delta > 1) {
                delta = 0;
                start = target;
                target = target < half ? rand(upper, max) : rand(min, lower);
            }
        };

        this.get = function () {
            var factor = (Math.cos((1 + delta) * Math.PI) + 1) / 2;
            return start + factor * (target - start);
        };

        this.onAmpChange = function () {
            min = -options.waveAmplitude;
            max = options.waveAmplitude;
            half = min + (max - min) / 2;
            upper = min + (max - min) * 0.75;
            lower = min + (max - min) * 0.25;
        };


        init.call(this);

    };

    var Spring = function () {

        var px = 0;
        var py = 0;
        var vx = 0;
        var vy = 0;
        var targetX = 0;
        var targetY = 0;
        var timeout;

        function init() {
            this.x = 0;
            this.y = 0;
        }

        this.update = function () {
            vx = targetX - this.x;
            vy = targetY - this.y;
            px = px * options.waveElasticity + vx * options.waveStrength;
            py = py * options.waveElasticity + vy * options.waveStrength;
            this.x += px;
            this.y += py;
        };

        this.shoot = function (vector) {
            targetX = clamp(vector.x, -options.waveMax, options.waveMax);
            targetY = clamp(vector.y, -options.waveMax, options.waveMax);

            clearTimeout(timeout);
            timeout = setTimeout(cancelOffset, 100);
        };

        function cancelOffset() {
            targetX = 0;
            targetY = 0;
        }

        init.call(this);
    };

    var Canvas = function (canvas, size) {

        var context;
        var width, height;
        var animation;

        function init() {

            context = canvas.getContext("2d");

            setTimeout(function () {
                Mouse.bind(canvas);
            }, 1000);

            Stage.set(size);

            animation = new Water(context);

            this.setSize(size.width, size.height);

            animation.start();

            requestAnimationFrame(render);
        }

        function render() {
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect(0, 0, width, height);

            context.save();
            animation.render();
            context.restore();

            requestAnimationFrame(render);
        }

        this.setSize = function (_width, _height) {

            canvas.width = Stage.width = width = _width;
            canvas.height = Stage.height = height = _height;

            animation.setSize(_width, _height);
        };

        init.call(this);
    };

    /*
     * START
     */

    var app = new Canvas(canvas, size);

    window.addEventListener("resize", function () {
        app.setSize(window.innerWidth, window.innerHeight);
    }, false);


});