/*
 * Script for animated canvas on the home page
 *
 */

(function() {

  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;

})();



 var canvas = document.getElementById('myCanvas');

 if(canvas)

 {

     var context = canvas.getContext('2d');

     var x = canvas.width / 2;

     var y = canvas.height / 2;

     var radius = 75;

     var endPercent = document.getElementById('skill1').value;

     var curPerc = 0;

     var counterClockwise = false;

     var circ = Math.PI * 2;

     var quart = Math.PI / 2; 

     context.lineWidth = 10;

     context.strokeStyle = '#fff';

     context.shadowOffsetX = 0;

     context.shadowOffsetY = 0;

     context.shadowBlur = 10;

     context.shadowColor = '#656565';





     function animate(current) {

         //console.log("asdfasd");

         context.clearRect(0, 0, canvas.width, canvas.height);

         context.beginPath();

         context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);

         context.stroke();

         curPerc++;

         if (curPerc < endPercent) {

             requestAnimationFrame(function () {

                 animate(curPerc / 100)

             });

         }

     }

    var run = false;

    // My altered code to the original

       jQuery(window).scroll(function() {

        if (!run && isScrolledIntoView('#myCanvas')) {

            animate();

            jQuery('.count').each(function () {

                jQuery(this).prop('Counter',0).animate({

                    Counter: jQuery(this).text()

                }, {

                    duration: 2100,

                    easing: 'swing',

                    step: function (now) {

                        jQuery(this).text(Math.ceil(now));

                    }

                });

            });

            run=true;

        }

    });





    function isScrolledIntoView(elem)

    {

        var docViewTop = jQuery(window).scrollTop();

        var docViewBottom = docViewTop + jQuery(window).height();



        var elemTop = jQuery(elem).offset().top;

        var elemBottom = elemTop + jQuery(elem).height();



        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

    }





 }





 

//canvas 2



(function() {

  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;

})();





 var canvas2 = document.getElementById('canvas-2');

 if(canvas2)

 {

     var context2 = canvas2.getContext('2d');

     var xx = canvas2.width / 2;

     var yy = canvas2.height / 2;

     var radius2 = 75;

     var endPercent2 = document.getElementById('skill2').value;

     var curPerc2 = 0;

     var counterClockwise2 = false;

     var circ2 = Math.PI * 2;

     var quart2 = Math.PI / 2;



     context2.lineWidth = 10;

     context2.strokeStyle = '#fff';

     context2.shadowOffsetX = 0;

     context2.shadowOffsetY = 0;

     context2.shadowBlur = 10;

     context2.shadowColor = '#656565';





     function animate2(current) {

         //console.log("asdfasd");

         context2.clearRect(0, 0, canvas2.width, canvas2.height);

         context2.beginPath();

         context2.arc(xx, yy, radius2, -(quart2), ((circ2) * current) - quart2, false);

         context2.stroke();

         curPerc2++;

         if (curPerc2 < endPercent2) {

             requestAnimationFrame(function () {

                 animate2(curPerc2 / 100)

             });

         }

     }

    var run2 = false;

    // My altered code to the original

       jQuery(window).scroll(function() {

        if (!run2 && isScrolledIntoView('#canvas-2')) {

            animate2();

            run2=true;

        }

    });



 }





//canvas 3



(function() {

  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;

})();





var canvas3 = document.getElementById('canvas-3');

if(canvas3)

{

     var context3 = canvas3.getContext('2d');

     var x3 = canvas3.width / 2;

     var y3 = canvas3.height / 2;

     var radius3 = 75;

     var endPercent3 = document.getElementById('skill3').value;

     var curPerc3 = 0;

     var counterClockwise3 = false;

     var circ3 = Math.PI * 2;

     var quart3 = Math.PI / 2;



     context3.lineWidth = 10;

     context3.strokeStyle = '#fff';

     context3.shadowOffsetX = 0;

     context3.shadowOffsetY = 0;

     context3.shadowBlur = 10;

     context3.shadowColor = '#656565';





     function animate3(current) {

         //console.log("asdfasd");

         context3.clearRect(0, 0, canvas3.width, canvas3.height);

         context3.beginPath();

         context3.arc(x3, y3, radius3, -(quart3), ((circ3) * current) - quart3, false);

         context3.stroke();

         curPerc3++;

         if (curPerc3 < endPercent3) {

             requestAnimationFrame(function () {

                 animate3(curPerc3 / 100)

             });

         }

     }

    var run3 = false;

    // My altered code to the original

       jQuery(window).scroll(function() {

        if (!run3 && isScrolledIntoView('#canvas-3')) {

            animate3();

            run3=true;

        }

    });

}





//canvas 4



(function() {

  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;

})();





var canvas4 = document.getElementById('canvas-4');

if(canvas4)

{

     var context4 = canvas4.getContext('2d');

     var x4 = canvas4.width / 2;

     var y4 = canvas4.height / 2;

     var radius4 = 75;

     var endPercent4 = document.getElementById('skill4').value;

     var curPerc4 = 0;

     var counterClockwise4 = false;

     var circ4 = Math.PI * 2;

     var quart4 = Math.PI / 2;



     context4.lineWidth = 10;

     context4.strokeStyle = '#fff';

     context4.shadowOffsetX = 0;

     context4.shadowOffsetY = 0;

     context4.shadowBlur = 10;

     context4.shadowColor = '#656565';





     function animate4(current) {

         //console.log("asdfasd");

         context4.clearRect(0, 0, canvas4.width, canvas4.height);

         context4.beginPath();

         context4.arc(x4, y4, radius4, -(quart4), ((circ4) * current) - quart4, false);

         context4.stroke();

         curPerc4++;

         if (curPerc4 < endPercent4) {

             requestAnimationFrame(function () {

                 animate4(curPerc4 / 100)

             });

         }

     }

    var run4 = false;

    // My altered code to the original

       jQuery(window).scroll(function() {

        if (!run4 && isScrolledIntoView('#canvas-4')) {

            animate4();

            run4=true;

        }

    });

}