/*
 * Animation code from http://www.hesido.com/web/animfunctions.js
 */

function setBgColor( element, color ) {
	element.style.backgroundColor = rgbStr( color[0], color[1], color[2] ); 
}

function fadeBgColor( element, startRGB, endRGB, steps, intervals, powr ) {
  // BG Fader by www.hesido.com
	if( element.bgFadeInt ) {
	  window.clearInterval( element.bgFadeInt );
	}
	var actStep = 0;
	element.bgFadeInt = window.setInterval(
		function() {
			element.style.backgroundColor = rgbStr(
				easeInOut( startRGB[0], endRGB[0], steps, actStep, powr ),
				easeInOut( startRGB[1], endRGB[1], steps, actStep, powr ),
				easeInOut( startRGB[2], endRGB[2], steps, actStep, powr ) );
			actStep++;
			if( actStep > steps ) {
        element.style.backgroundColor = rgbStr( endRGB[0], endRGB[1], endRGB[2] );
        window.clearInterval( element.bgFadeInt );
        element.bgFadeInt = null;
			}
		}, intervals );
}

function rgbStr( red, green, blue ) {
  return "rgb(" + red + "," + green + "," + blue + ")";  
}

function easeInOut( minValue, maxValue, totalSteps, actualStep, powr ) {
  // Generic Animation Step Value Generator By www.hesido.com
	var delta = maxValue - minValue;
	var stepp;
	if( powr == 1 ) {
	  stepp = minValue + ( ( ( 1 / totalSteps ) * actualStep ) * delta );
	} else {
	  stepp = minValue + ( Math.pow( ( ( 1 / totalSteps ) * actualStep ) , powr ) * delta );
	}
	return Math.ceil( stepp )
}

/*
 * Create matrix
 */
function createMatrix( cols, rows, width, height, spacing ) {
  var mainPanel = document.createElement( "div" );
  mainPanel.className = "matrix";
  var x = spacing;
  var y = spacing;
  var n = rows * cols;
  for( var i = 0; i < n; i++ ) {
    var element = document.createElement( "div" );
    element.id = "light-" + i;
    element.className = "light";
    element.style.position = "absolute";
    element.style.left = x + "px";
    element.style.top = y + "px";
    element.style.width = width + "px";
    element.style.height = height + "px";
    mainPanel.appendChild( element );
    if( i % cols < cols - 1 ) {
      x += width + spacing;
    } else {
      x = spacing;
      y += height + spacing;
    }
  }
  mainPanel.style.position ="relative";
  mainPanel.style.overflow = "hidden";
  mainPanel.style.width = ( cols * ( width + spacing ) + spacing ) + "px";
  mainPanel.style.height = ( rows * ( height + spacing ) + spacing ) + "px";
  return mainPanel;
}

function initAnims() {
  var matrix = createMatrix( 5, 4, 120, 80, 20 );
  var container = document.getElementById( "matrixContainer" );
  var offColor = [ 10, 10, 10 ];
  if( container ) {
    container.appendChild( matrix );
    var elements = matrix.getElementsByTagName( "div" );
    var colors = new Array();
    var states = new Array();
    for( var i = 0; i < elements.length; i++ ) {
      setBgColor( elements[ i ], offColor );
      var r = Math.random();
      if( r < 0.25 ) {
        colors[ i ] = [ 143, 206, 0 ]; // green
      } else if( r < 0.5 ) {
        colors[ i ] = [ 0, 114, 134 ]; // blue
      } else if( r < 0.75 ) {
        colors[ i ] = [ 254, 221, 0 ]; // yellow
      } else {
        colors[ i ] = [ 252, 55, 0 ]; // red
      }
      states[ i ] = false;
    }
    var animate = function() {
      for( var i = 0; i < elements.length; i++ ) {
        var change = Math.random() < ( states[ i ] ? 0.3 : 0.1 ) ? true : false;
        if( change ) {
          states[ i ] = !states[ i ];
          if( states[ i ] ) {
            fadeBgColor( elements[ i ], offColor, colors[ i ], 7, 20, 1 );
          } else {
            fadeBgColor( elements[ i ], colors[ i ], offColor, 12, 20, 2 );
          }
        }
      }
    };
    window.setInterval( animate, 1500 );
  }
}

if( document.getElementById && document.getElementsByTagName ) {
  if( window.addEventListener ) {
    window.addEventListener( 'load', initAnims, false );
  } else if( window.attachEvent ) {
    window.attachEvent( 'onload', initAnims );
  }
}