// JavaScript Document
var loader = function(imgIds){
  var imgIdArray = imgIds.split(",");

  for(var i=0; i< imgIdArray.length; i++){
    replaceWithCanvas(imgIdArray[i]);
  }
	var update = function(){
            for(var i=0; i < imgs.length; i++){
		drawBus(imgs[i], canvases[i]);
            }
            setTimeout(update, 70 + Math.round( Math.random() * 30));	
	}
    setTimeout(update, 70 + Math.round( Math.random() * 30));	
}

var imgs = [];
var canvases = [];

function replaceWithCanvas(imgId){

	var img = window.document.getElementById(imgId);

  if(img){

	var imgParent = img.parentNode;
	var canvas = window.document.createElement("canvas");
        var canvasId = imgId + "-canvas";
	canvas.setAttribute("id", canvasId);
	canvas.setAttribute("width", img.width);
        canvas.setAttribute("height", img.height);
	imgParent.removeChild(img);
	imgParent.appendChild(canvas);
        imgs[imgs.length] = img;

        fixIE(canvasId);
        canvases[canvases.length] = window.document.getElementById(canvasId);

  }
        
};
function fixIE(canvasId){
  if( typeof G_vmlCanvasManager != 'undefined') {
    G_vmlCanvasManager.initElement( document.getElementById( canvasId ));
  }
}
function drawBus( img, canvas ){
	var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(255, 255, 255)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

	var r1 = Math.round( Math.random() * 15);
	var r2 = Math.round( Math.random() * 15);

	ctx.drawImage(img, 0 + (r1 /2), 0 + (r2 /2), img.width - (r1 / 2), img.height - (r2 / 2), 
		           0, 0, img.width, img.height); 	
};