var debug = 0;

var canvas;
var windowWidth = 0;
var carNo = 0;

var cars = new Array(
	"1-black.png",
	"1-blue.png",
	"1-red.png",
	"1-white.png",
	"2-blue.png",
	"2-purple.png",
	"2-red.png",
	"2-yellow.png"
);

var carObjs = new Array();

var lane1 = new Array();
var lane2 = new Array();



window.addEventListener("load", function() {
	
	canvas = document.getElementById("canvas");
	windowWidth = window.innerWidth;
	
	buildRoad();
	placeCar();
	
}, false);

window.addEventListener("resize", function() {
	
	windowWidth = window.innerWidth;
	//buildRoad();
	
}, false);


function buildRoad() {
	
	var sideWidth = Math.round((windowWidth-480)/2);
	var sidePanels = Math.ceil(sideWidth/480);
	
	$(canvas).append("<div class='road' style='margin: -242px 0 0 -240px;'></div>");
	
	for (i=1; i<=sidePanels; i++) {
		var marginLeft = -240 - 480*i;
		var marginTop = -242 + 240*i;
		$(canvas).append("<div class='road' style='margin: "+marginTop+"px 0 0 "+marginLeft+"px;'></div>");
	}
	
	for (i=1; i<=sidePanels; i++) {
		var marginLeft = -240 + 480*i;
		var marginTop = -242 - 240*i;
		$(canvas).append("<div class='road' style='margin: "+marginTop+"px 0 0 "+marginLeft+"px;'></div>");
	}
	
}


function placeCar() {
	var thisCarNo = carNo;
	carObjs[thisCarNo] = new car();
	moveCar(thisCarNo);
}

function car() {
	
	var carId = rand(0, cars.length-1);
	var img = cars[carId];
	
	this.speed = rand(1,20);
	this.pause = rand(500,8000);
	
	this.lane = (this.speed < 10) ? 1 : 2;
	this.lane = rand(1,2);
	this.offset = (this.lane == 1) ? -115 : -10;
	this.offset = this.offset + rand(0,30) - 15;
	
	this.currentLeft = this.startLeft = Math.round((windowWidth/2)+100) + this.offset;
	this.currentTop = this.startTop = this.startLeft * -0.5 + this.offset - 120;
	
	this.carNo = carNo;
	carNo++;
	
	var dbNo = (debug) ? this.carNo+"<br>"+this.speed : "";
	
	$(canvas).append(	"<div id='car"+this.carNo+"' class='car' style='margin: "+this.startTop+"px 0 0 "+this.startLeft+"px;'>"+
						"<span style='background-image:url(img/"+img+")'>"+dbNo+"</span></div>");

	setTimeout("placeCar()", this.pause);
	
}
	
function moveCar(carNo) {
	carObjs[carNo].currentLeft = carObjs[carNo].currentLeft-2;
	carObjs[carNo].currentTop = carObjs[carNo].currentTop+1;
	$("#car"+carNo).css({marginLeft: carObjs[carNo].currentLeft, marginTop: carObjs[carNo].currentTop});
	
	lane = (carObjs[carNo].lane == 1) ? lane1 : lane2;
	collisionCheck(carNo, lane);
	lane[carNo] = parseInt(carObjs[carNo].currentLeft);
	
	if ( (windowWidth/2 + carObjs[carNo].currentLeft) < -150 ) {
		removeCar(carNo);
		lane[carNo] = -10000;
	} else {
		setTimeout("moveCar("+carNo+")", carObjs[carNo].speed);
	}
	
	//if(debug) $("#debug").html(lane1.join("<br>"));
}

function removeCar(carNo) {
	$("#car"+carNo).remove();
}

function collisionCheck(carNo, lane) {
	
	var leadingCars = lane.filter(function(x){ return( x < parseInt($("#car"+carNo).css("margin-left")) ) });
	leadingCars.sort(function(a,b){ return( a-b ) });
	lead = leadingCars.pop();
	
	distance = parseInt(lead) - parseInt($("#car"+carNo).css("margin-left"));
	if (distance > -150) {
		carObjs[carNo].speed = 20;
	}
	
	if(debug) $("#car"+carNo+" span").html(distance);
}


function rand(min, max) {
	if( min > max ) return( -1 );
	if( min == max ) return( min )
	var r = parseInt( Math.random() * ( max+1 ) );
	return( r + min <= max ? r + min : r );
}