var cnvW;
var cnvH;

var img;

var cnt;
var phase;
var phase_factor;

var pixelData;

var sinValue	= 0;
var ang			= 0;
var ang_factor	= 0.025;//0.015;
var DOUBLE_PI	= 2*Math.PI;
var SIN_ARRAY;

var angAr;
var grid;
var hn,vn;
var total_grid;
var imgDotCnt;
var canvas;


function preload( path ){
    
    var bodyW = document.body.clientWidth;
    var bodyH = document.body.clientHeight;
    
	var canvas 		= document.getElementById('main_canvas');
	canvas.width	= bodyW;
	canvas.height	= bodyH;

	img		= new Image();
	img.onload = function(){
		init(bodyW,bodyH);
	}
	
	img.src		= path;
}


function init( w,h ){

	var win_asp;
	var img_asp;
	
	phase_factor	= img.width - 1.15;
	hn				= 64;
	vn				= 36;
	win_asp			= h/w;
	img_asp 		= img.height/img.width;

	if(win_asp>img_asp)	grid = Math.floor((h/vn))+1;
	else				grid = Math.floor((w/hn))+1;
	
	total_grid		= hn*vn;
	phase			= 0;
	cnt				= 0;
	cnvW			= Math.floor(w);
	cnvH			= Math.floor(h);
	imgDotCnt		= img.height*img.width;	
	pixelData		= new Array( imgDotCnt );
	angAr			= new Array( total_grid );
	
	
	for(var i=0;i<total_grid;i++)	angAr[i] = (i*DOUBLE_PI*.45)/(total_grid);
	
//	SIN_ARRAY = new Array( Math.floor(DOUBLE_PI*1000) );
//	for(var i=0;i<DOUBLE_PI;i+=0.001){
//		SIN_ARRAY[ Math.floor(i*1000) ] = Math.sin(i);
//	}
	
	canvas = document.getElementById('main_canvas');
	
	if (canvas.getContext){
		var ctx = canvas.getContext('2d');
		ctx.drawImage(img,0 | 0 ,0 | 0 );
		
		var lx = img.width;
		var ly = img.height;
		for(var y = 0; y < ly; y++){
			for(var x = 0; x < lx; x++){
				pixelData[y*lx + x] = getPixel(canvas, x, y, lx, ly);
			}
		}
	}
	
	draw();
	setInterval('draw()',33);
}


function draw(){
	
	var ix,iy;
	var index1,index2;	
  	var r,g,b;
   
   	var pd = pixelData;
	var as = angAr;
    
	if (canvas.getContext){
		var ctx = canvas.getContext('2d');
		ctx.clearRect(0,0,cnvW,cnvH);
		for(i=0;i<hn;i++){
			for(j=0;j<vn;j++){
				
				ix		= Math.floor(img.width*(i/hn));
				iy		= Math.floor(img.height*(j/vn));
				index1	= Math.floor(iy*img.width + ix + phase);

				if(index1>=imgDotCnt)	index1-=imgDotCnt;
				
				index2 = j*hn + i;

				r = Math.floor(pd[index1].R* (.1+.6*((Math.sin(as[index2]+ .05)+1)/2)));
				g = Math.floor(pd[index1].G* (.1+.6*((Math.sin(as[index2]+ 0.00)+1)/2)));
				b = Math.floor(pd[index1].B* (.1+.6*((Math.sin(as[index2]+ .85)+1)/2)));

//				r = Math.floor(pd[index1].R* (.1+.6*(( SIN_ARRAY[ Math.floor((as[index2]+ .05)*1000) ] +1)/2)));
//				g = Math.floor(pd[index1].G* (.1+.6*(( SIN_ARRAY[ Math.floor((as[index2]+ .00)*1000) ] +1)/2)));
//				b = Math.floor(pd[index1].B* (.1+.6*(( SIN_ARRAY[ Math.floor((as[index2]+ .85)*1000) ] +1)/2)));
				
				
				ctx.fillStyle = 'rgb(' + r +',' + g +','+ b + ')';
				ctx.fillRect(i*grid,j*grid,grid-1,grid-1);
			}
		}

		for(var i=0;i<total_grid;i++){
			if(angAr[i]<DOUBLE_PI)	angAr[i] += ang_factor;
			else					angAr[i] -= DOUBLE_PI;
		}

		if(phase<imgDotCnt)     phase += phase_factor;
		else                    phase -= imgDotCnt;
		
	}	
}


function resize(){
	
    var bodyW = document.body.clientWidth;
    var bodyH = document.body.clientHeight;

	canvas.width	= bodyW;
	canvas.height	= bodyH;

	init(bodyW,bodyH);
	
}

function getPixel(srcCanvas, x, y, canvasW, canvasH){
	var imagePixelData = srcCanvas.getContext("2d").getImageData(x, y, 1, 1).data;
	return {R:imagePixelData[0], G:imagePixelData[1], B:imagePixelData[2]};
}