//Array prototype to divide each number of array by the given float in parameter.
Array.prototype.findSpeed= function(time) {
   'use strict';

   //Initializing Variables
   var i=0, len= this.length;
   var speedArray= [];
   //Loop through the arr
   for(i=0; i<len; i++) {
      //Find ith element divided by time
      var el= parseFloat(this[i])/parseFloat(time);
      //Push the el in the speedArray
      speedArray.push(el);
   }
   //return speedArray
   return speedArray;
}

//Array prototype subTractMyself. This function subtract numbers in array with the given number from array given in parameter.
Array.prototype.subTractMyself= function(arr1) {
   'use strict';

   //Initializing Variables
   var i=0, len= this.length;
   var opArray= [];
   //Loop through the arr
   for(i=0; i<len; i++) {
      //Subtract the ith element of both Array
      var el= parseFloat(this[i])-parseFloat(arr1[i]);
      //Push the el in the opArray
      opArray.push(el);
   }
   //return opArray
   return opArray;
}

//Array prototype addMyself. This function add numbers in array with the given numbers from array given in parameter.
Array.prototype.addMyself= function(arr1) {
   'use strict';

   //Initializing Variables
   var i=0, len= this.length;
   var opArray= [];
   //Loop through the arr
   for(i=0; i<len; i++) {
      //Add the ith element of both Array
      var el= parseFloat(this[i])+parseFloat(arr1[i]);
      //Push the el in the opArray
      opArray.push(el);
   }
   //return opArray
   return opArray;
}

//This function creates a gradient color animation to the division background-color property with the given time duration.
//Params:-
// domId :- Id of the dom Element
// initialColorTop :- rgb pattern of starting top gradient color.
// initialColorBottom :- rgb pattern of starting bottom gradient color.
// finalColorTop :- rgb pattern of final top gradient color.
// finalColorBotton :- rgb pattern of final bottom gradient color.
// duration :- duration over which complete animation should happen(in seconds).
function colorAnimationTheDiv(domId, initialColorTop, initalColorBottom, finalColorTop, finalColorBottom, duration) {
   'use strict';

   //Initializing parameters to hold colors form parameters.
   var iColorTop= initialColorTop, iColorBottom= initalColorBottom, fColorTop= finalColorTop, fColorBottom= finalColorBottom;
   //Color the rgb pattern to Java-script Array through regular expressions and storing them in the variables.
   var iColorTopArray= iColorTop.match(/\d+/g), iColorBottomArray= iColorBottom.match(/\d+/g), fColorTopArray= fColorTop.match(/\d+/g), fColorBottomArray= fColorBottom.match(/\d+/g);
   //Find the difference in the values from final to initial rgb values for top and bottom.
   var differenceTopArray= fColorTopArray.subTractMyself(iColorTopArray), differenceBottomArray= fColorBottomArray.subTractMyself(iColorBottomArray);
   //Get expected duration. Multiplied by 25 because setInterval is set at 40. Total number of step over which animation will happen.
   var etaDuration= duration*25;
   //Get speed by which values are to be increased in one step.
   var speedTopArray= differenceTopArray.findSpeed(etaDuration), speedBottomArray= differenceBottomArray.findSpeed(etaDuration);
   //Counter to hold and stop setInterval. If counter is greater than etaDuration stop setInterval.
   var counter=0;
   //Start a setInterval function
   var interVal= setInterval(function() {
      //Linear Gradient Definition
      var linearDefinition = 'linear-gradient(rgba(RED, GREEN, BLUE, OPACITY) 0, rgba(RED2, GREEN2, BLUE2, OPACTIY2))';
      if(counter<=etaDuration) {
         //Add iColorTopArray+ speedTopArray to get new rgb value from that interval.
         iColorTopArray= iColorTopArray.addMyself(speedTopArray);
         //Add iColorBottomArray+ speedBottomArray to get new rgb value from that interval.
         iColorBottomArray= iColorBottomArray.addMyself(speedBottomArray);
         //increase counter
         counter++;
         //Apply background-image css to domElement by replace the colors in linearDefinition string.
         $(domId).css('background-image', linearDefinition.replace(/RED/, Math.ceil(iColorTopArray[0])).replace(/BLUE/, Math.ceil(iColorTopArray[2])).replace(/GREEN/, Math.ceil(iColorTopArray[1])).replace(/RED2/, Math.ceil(iColorBottomArray[0])).replace(/BLUE2/, Math.ceil(iColorBottomArray[2])).replace(/GREEN2/, Math.ceil(iColorBottomArray[1])).replace(/OPACITY/, 1).replace(/OPACTIY2/, 1));
      } else {
         //Apply background-image css to domElement by replace the colors in linearDefinition string from final color array.
         $(domId).css('background-image', linearDefinition.replace(/RED/, Math.ceil(fColorTopArray[0])).replace(/BLUE/, Math.ceil(fColorTopArray[2])).replace(/GREEN/, Math.ceil(fColorTopArray[1])).replace(/RED2/, Math.ceil(fColorBottomArray[0])).replace(/BLUE2/, Math.ceil(fColorBottomArray[2])).replace(/GREEN2/, Math.ceil(fColorBottomArray[1])).replace(/OPACITY/, 1).replace(/OPACTIY2/, 1));
         //Stop the setInterval function
         clearInterval(interVal);
      }
   },40);
}