function loadCanvas(canvasID,imageURL,alpha)
{
	if(!canvasID.length)
		canvasID = 'canvas';
		
	var context = document.getElementById(canvasID).getContext("2d");
	
	context.globalAlpha = alpha;
	
	var image = new Image();

/*
	image.onload = function() {
		setInterval("fadeAlpha('"+canvasID+"')", 1000 / 50); // 50 FPS
	}
*/	
	var opacity = .08;
	var methodName = function() {
		if(opacity < 1.0) { // Visible threshold
	        
	        opacity *= 1.08;
	        //alert(opacity);
	        
	        if(opacity >= 1.0)
	        {
	        	//alert('done with fading IN');
	        	opacity = 1.0;
	        	clearInterval(self);
	        }
	        context.drawImage(image, 0, 0, image.width, image.height);
	        context.globalAlpha = opacity;
	    }
	    
    }

	image.onload = function() {
		context.drawImage(image, 0, 0, image.width, image.height);
		//alert("fadeAlpha('"+canvasID+"')");
		setInterval(methodName, 1000 / 50); // 50 FPS
	}
	image.src = imageURL;

}
//fadeIn('canvas');

function fadeIn(canvasID)
{
	//alert(canvasID);
	if(!canvasID.length)
		canvasID = 'canvas';
	
	setInterval(fadeAlphaFunction, 1000 / 50); // 50 FPS
}

function fadeAlpha(canvasID)
{
	//alert(canvas);
	var context = document.getElementById(canvasID).getContext("2d");
	
	var opacity = .08;
	
	//var image = context.getImageData(0, 0, 590, 453);
	
	//alert(image.height);
	
	//if(image == null)
		//alert('image undefined');
	
	if(opacity < 1.0) { // Visible threshold
        //context.clearRect(0, 0, image.width, image.height);
        
        //context.fillStyle = "rgb(255,255,255)";
        //context.fillRect(0, 0, image.width, image.height);
        
        //context.drawImage(image, 0, 0, image.width, image.height);
        
        opacity *= 1.8;
        
        if(opacity >= 1.0)
        {
        	alert('done with fading IN');
        	opacity = 1.0;
        	clearInterval(self);
        }
        
        context.globalAlpha = opacity;
    }
}

var TimeToFade = 1000.0;

function fadeDiv(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
 // if(document.getElementById(eid).style.visibility == 'visible') alert('visible');
	//else alert('hidden');
   
   if(document.getElementById(eid).style.opacity == 0)
   {
		//alert('making visible');
    	document.getElementById(eid).style.visibility = 'visible';
   }
  if(element.FadeState == null)
  {
    if(element.style.opacity == null 
        || element.style.opacity == '' 
        || element.style.opacity == '1')
    {
      element.FadeState = -2;
    }
    else
    {
      element.FadeState = 2;
    }
  }
    
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function animateFade(lastTick, eid)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
  
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = ' 
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    
    if(element.style.opacity == 0)
    {
    	//alert('making hidden');
    	element.style.visibility = 'hidden';
    }
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

function fadeOut(canvasID)
{
	if(!canvasID.length)
		canvasID = 'canvas';
	var canvas = document.getElementById(canvasID).getContext("2d");
	
	canvas.globalAlpha = 0;
	
	var image = new Image();
	image.onload = function() {
	    setInterval(fadeImage, 1000 / 50); // 50 FPS
	};
	image.src = "http://www.twin-monolith.com/images/2011/2011-twin-monoliths.png";
	
	
	// Periodical
	var opacity = .01;
	var fadeImage = function() {
	    if(opacity > 0) { // Visible threshold
	        canvas.clearRect(0, 0, image.width, image.height);
	        
	        canvas.fillStyle = "rgb(255,255,255)";
	        canvas.fillRect(0, 0, image.width, image.height);
	        
	        canvas.drawImage(image, 0, 0, image.width, image.height);
	        
	        opacity *= 0.96;
	        
	        if(opacity < 0)
	        	opacity = 0;
	        
	        canvas.globalAlpha = opacity;
	    }
	};
}

function fadeIn2(canvasID)
{
	if(!canvasID.length)
		canvasID = 'canvas';
	var canvas = document.getElementById(canvasID).getContext("2d");	
	
	canvas.globalAlpha = 0;
	
	var image = new Image();
	image.onload = function() {
	    setInterval(fadeImage, 1000 / 50); // 50 FPS
	};
	image.src = "http://www.twin-monolith.com/images/2011/2011-twin-monoliths.png";
	
	// Periodical
	var opacity = .01;
	var fadeImage = function() {
	    if(opacity < 1.0) { // Visible threshold
	        canvas.clearRect(0, 0, image.width, image.height);
	        
	        canvas.fillStyle = "rgb(255,255,255)";
	        canvas.fillRect(0, 0, image.width, image.height);
	        
	        canvas.drawImage(image, 0, 0, image.width, image.height);
	        
	        opacity *= 1.08;
	        
	        if(opacity > 1)
	        	opacity = 1;
	        
	        canvas.globalAlpha = opacity;
	    }
	};
}