/*
    This file is part of Video game demo.

    Video game demo is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Video game demo is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Video game demo.  If not, see <http://www.gnu.org/licenses/>.
*/

var w = 3, h = 3;

var program = {
	blank : 0,
	map: [],
	ctx: null,
	canvas: null,
	video:null,
	width: null,
	height: null,
	main: function(){	//Main function: called when the page loads
		this.map[0] = -1;
		for(var i = 1;i<w*h;i++)
			this.map[i] = i;
		this.random();
		this.video = video = document.getElementById("img");
		
		
		
		function init() {
			if(program.ctx)return;
			document.getElementById("loading").style.display = 'none';
			document.getElementById("select").style.display = 'block';
			document.getElementById("canvas").style.display = 'block';
			
			program.vwidth = vwidth = video.videoWidth;
			program.vheight = vheight = video.videoHeight;
			var canvas = program.canvas = document.getElementById("canvas");
			program.ctx = canvas.getContext("2d");
			program.ctx.fillStyle = "rgba(0,0,0,0)";
			program.width = width = canvas.width;
			program.height = height = canvas.height;
			video.play();
		}
		
		if(video.readyState == video.HAVE_ENOUGH_DATA)init();
		else
			video.addEventListener("canplay",init,false);
		
		video.addEventListener("ended", function(){
			video.play(); 
	    }, false);
		
		video.addEventListener("play", function(){program.bucle();}, false);

	},
	random: function(){
		var dir = [-w,1,-1,w];
		for(var i=0;i<600;i++){
			var np = this.blank + dir[Math.round(Math.random()*3)];
			if(this.map[np])this.move(np);
			
		}
	},
	checkWin: function(){
		var ws = "-1"
		for(var i =1;i<w*h;i++)
			ws += "," + i;
		
		if(this.map.join(",") == ws)
			alert("Great!! You did it :D");
		
	},
	relation: function(a,b){
		var ax = a%w;
		var ay = (a-ax)/w;
		var bx = b%w;
		var by = (b-bx)/w;
		return (ax == bx && Math.abs(ay-by) == 1) || (ay == by && Math.abs(ax-bx) == 1)
	},
	onclick: function(event){
		var element = event.target;
		var bo = element.getBoundingClientRect();
		var eX = event.clientX - bo.left;
		var eY = event.clientY - bo.top;
		
		var cw = this.width / w;
		var ch = this.height / h;
		
		var px = Math.floor(eX / cw);
		var py = Math.floor(eY / ch);
		
		//return alert(px + " - " + py);
		
		var piece = py*w + px;
		this.move(piece);
		this.checkWin();

	},
	onchange: function(event){
		w = h = event.target.selectedIndex + 2;
		this.ctx.clearRect(0,0,this.width,this.height);
		this.blank = 0;
		this.map = [-1];
		for(var i = 1;i<w*h;i++)
			this.map[i] = i;
		this.random();
	},
	move: function(piece){
		if(this.relation(piece,this.blank)){
			this.map[this.blank] = this.map[piece];
			this.map[piece] = -1;
			this.blank = piece;
		}	
	},
	bucle: function(){
		this.paint();
		setTimeout(function(){
			program.bucle();
		},100);
	},
	paint: function(){
		var c = this.ctx;
		var v = this.video;
		var vw = this.vwidth / w;
		var vh = this.vheight / h;
		var cw = this.width / w;
		var ch = this.height / h;
		for(var x = 0; x<w; x++)
			for(var y = 0; y<h; y++){
				var n = y*w + x;
				var vn = this.map[n];
				if(vn <0){
					c.clearRect(cw*x, ch*y, cw-2, ch-2);
					continue;
				}
				
				var vx = vn % w;
				var vy = (vn-vx)/w;
				
				try{
					c.drawImage(v, vw*vx, vh*vy, vw, vh,  cw*x, ch*y, cw-2, ch-2 );
				}catch(e){
					return;
				}
				
			}
	}
	
	
};