/*
 * Js loader, looks for html components with the right class
 * and then runs the js object associated with it.
 */

(function(){
       
      var webpageAnimation = function(opts, c){

         var that = {};
         var opts = opts || {};

		 var top= 10;
		 var left= 10;
		 var canvas = document.getElementById("webpageAnimation");
  		 var context = canvas.getContext("2d");
  		 var aniPos = 0;
  		 var text = [55,80,45,50,55,80,30,55,60,73,20,49,53,90,40,10,33,55,44,39,65,45,40,20,50,70,30,20,50,38,40,23,10,55,80,67,25,39,58,73];
  		 var canvasCache = {};
  		 
  		 function getCacheCanvas(id){
  		 	var can = document.createElement('canvas');
			can.width = canvas.width;
			can.height = canvas.height;
			var cnt = can.getContext('2d');
			canvasCache[id] = can;
			return cnt;
  		 }
  		 
  		 
  		 function drawContainers(context){
	  		 if(!canvasCache.drawContainers){
		  		 var context2 = getCacheCanvas('drawContainers');
		  		 context2.save();
		  		 context2.fillStyle = "#fff";
		    	 context2.shadowColor = "#bbbbbb";
		    	 context2.shadowBlur = 7;
		    	 context2.shadowOffsetX = 3;
		    	 context2.shadowOffsetY = 3;
		  		 context2.fillRect(5, 5, 260, 155);
		  		 context2.restore();
		  		 //Draw logo bit
		  		 context2.save();
		  		 context2.fillStyle = "#aaa";
		  		 var leftPos = left + 10;
  				 context2.globalAlpha = 0.5;
	  		     context2.fillRect(leftPos, 18, 55, 18);
	  		     context2.restore();
	  		 }
	  		 
	  		 context.drawImage(canvasCache.drawContainers, 0, 0);
	  		 
	  		 //draw inner rectangle
	  		 /*var grd = context.createRadialGradient(127, 80, 10, 127, 80, 200);
	    	 grd.addColorStop(0, "#2383EA"); // light blue
	    	 grd.addColorStop(1, "#0161B7"); // dark blue
	    	 context.fillStyle = grd;
	  		 context.fillRect(top, left, 250, 145);*/
  		 }
  		 
  		 function ovalShadow(){
  		 	if(!canvasCache.ovalShadow){
	  		 	var context2 = getCacheCanvas('ovalShadow');
	  		 	context2.save(); // save state
			    var centerX = -5;
			    var centerY = 2500;
			    var radius = 130;
			    context2.translate(canvas.width / 2, canvas.height / 2);
			    context2.scale(1, 0.02);
			    context2.beginPath();
			    context2.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
			    context2.restore(); // restore to original stat
			    context2.fillStyle = 'rgba(100, 100, 100,0.1)';
		    	context2.fill();
	    	}
	    	context.drawImage(canvasCache.ovalShadow, 0, 0);
  		 }
  		 
  		 function drawAds(context, highlight){
  		 	if(!canvasCache.drawAds || highlight>42){
	  		 	var context2 = getCacheCanvas('drawAds');
	  		 	context2.save();
	  			context2.fillStyle = "#aaa";
	  			context2.globalAlpha = 0.5;
	  			var height = 5;
	  			var topPos = top + 38;
	  			var leftPos = left + 10;
	  		 	if(highlight>42){
	  				context2.fillStyle = "#4390D5";	
	  			}else{
	  				context2.fillStyle = "#ddd";
	  			}
	  			context2.fillRect(leftPos+207, topPos, 20, 95);
	  		 	context2.fillRect(leftPos+85, 18, 142, 18);
	  		 	context2.restore();
	  		}
	  		context.drawImage(canvasCache.drawAds, 0, 0);
  		 }
  		 
  		 function drawText(context, highlight){
  			context.save();
  			context.fillStyle = "#999";
  			context.globalAlpha = 0.5;
  			var height = 5;
  			var topPos = top + 38;
  			var leftPos = left + 15;
  			var curTop = topPos;
  			var curLeft = leftPos;
  			var maxWidth = 214;
  			var textLoc = text;
  			// Keep drawing text untill be reach 190
  			for(var i = 0; i<textLoc.length; i++){
  				var overrun = (curLeft + textLoc[i]) - maxWidth;
  				if(overrun>0)textLoc[i] = textLoc[i] - overrun;
  				context.save();
  				if(highlight && highlight>=i && (i%3 == 0)){
  					context.fillStyle = "#4390D5";
  				}
  		 		context.fillRect(curLeft, curTop, textLoc[i], height);
  		 		context.restore();
  		 		curLeft = curLeft + textLoc[i] + 5;
  		 		if(curLeft>maxWidth){
  		 			curLeft = leftPos;
  		 			curTop = curTop + 10;
  		 		}
  		 	}
  		 	context.restore();
  		 }
  		 
  		 function drawScreen(context){
  			context.save();
  			context.fillStyle = "#fff";
  			context.globalAlpha = 0.15;
			context.moveTo(145, 5);
     		context.lineTo(170, 160);
     		context.lineTo(270, 160);
     		context.lineTo(270, 5);
     		context.lineTo(145, 5);
     		context.fillStyle = "#ccc";
     		context.fill();
  		 	context.restore();
  		 }

		function draw(context, highlight){
			context.clearRect ( 0 , 0 , 280 , 280 );
			drawContainers(context);
	  		drawText(context,highlight);
	  		drawAds(context, highlight);
	  		drawScreen(context);
	  		ovalShadow();
		}
		
  		draw(context,aniPos);
  		function animate(){
  			draw(context,aniPos);
  			aniPos++;
  			if(aniPos<44){
	  			setTimeout(function(){
	  				animate();
	  			},30);
  			}
  		}
		
	  	setTimeout(function(){
			animate();
		},2000);
		
        return that;
         
      };
      
      window[namespace].webpageAnimation = webpageAnimation;
      
})();