function animateHeader() {
    
 if (Modernizr.canvas) {
    var width = 950;   
    var height = 300;  
    var x = 0;
    var intMoonY = 100;
    var intCityAlpha = 0;
    
    var imgBack = new Image();
    var imgCity = new Image();
    var imgMoon = new Image();
    var imgName = new Image();
    
    
    var layer1 = document.getElementById('canvas1');
    var context1 = layer1.getContext('2d');

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

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

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


   
    function init() {
     imgBack.src = "images/blueback.png";
     imgCity.src = "images/skyline.png";
     imgName.src = "images/name.png";
     imgMoon.src = "images/moon.png";
     
    }
    
    function drawBlueSky() {
        context1.clearRect(0,0,width,height);
        context1.drawImage(imgBack,0,0, width, height);
    }
    
    function drawCity() {
        
        var browser = getBrowser();
        if (browser == 'Safari' || browser == 'Chrome') {
         context3.shadowOffsetX = 10;
         context3.shadowOffsetY = 10;
         context3.shadowBlur = 10;
         context3.shadowColor = "#000";
         context3.globalAlpha = 0.01;
         context3.drawImage(imgCity,0,0,width,height);
        }
        
        setInterval(fadeInCityScape,125);
    }   
    
    function fadeInCityScape() {
    
      var blnReadyToMoveInMoon = false;
      
      if (intCityAlpha < 1) {
         intCityAlpha += .25;
         context3.drawImage(imgCity,0,0,width,height);
         context3.globalAlpha = intCityAlpha;
        }
     
      if (intCityAlpha >= 1) {
        blnReadyToMoveInMoon = true;
      }
      
      if (blnReadyToMoveInMoon == true) {
        setTimeout(drawMoon,1000); 
      }

    }
    
    function drawMoon() {
     
      var browser = getBrowser();
      if (browser == 'Safari' || browser == 'Chrome') {
        context2.shadowOffsetX = 5;
        context2.shadowOffsetY = 5;
        context2.shadowBlur = 20;
        context2.shadowColor = "#000";
      }
        
        setInterval(moveTheMoon,100);
    }
    
    function drawName() {
    
      var browser = getBrowser();
      if (browser == 'Safari' || browser == 'Chrome') {
        context4.shadowOffsetX = 5;
        context4.shadowOffsetY = 5;
        context4.shadowBlur = 5;
        context4.shadowColor = "#000";
      }
        context4.drawImage(imgName,500,23,397,140);
      
    }
    
    function drawLayers() {
    
        setTimeout(drawBlueSky,125); //500);
        setTimeout(drawCity,300); //1250);
        //setTimeout(drawMoon,1500); //2800);
        setTimeout(drawName,500); //2500);
    }
     
    function moveTheMoon() {
     
       if (intMoonY > 0) {
         intMoonY -= 5;
         context2.clearRect(0,0,width,height);
         context2.drawImage(imgMoon,0, intMoonY);
        }
    } 
        
    init();
    drawLayers();
 }

}

function getBrowser() {
	
    //var browser = navigator.userAgent;
    //alert(browser);
    
    var browser = navigator.userAgent.toLowerCase();
	var isFirefox = browser.match(/firefox/i) != null;
	var isSafari = browser.match(/safari/i) != null;
	var isChrome = browser.match(/chrome/i) != null;
	var isIE = browser.match(/explorer/i) != null;
	
	if (isFirefox) {
		return 'FireFox'
	} else if (isSafari) {
		return 'Safari';
	} else if (isChrome) {
		return 'Chrome';
	} else if (isIE) {
		return 'Internet Explorer';
	} else {
		return 'Other';
	}
}