var canvEl=null, cv=null, tyreImg = null, tyreImg2 = null;
var bHTML4=false, bTyreReady=false;
var crot=0.025;
var tX=114, tY=114;
var offPos=0.0;
var stepRads = 0.68;
var stage=0;
var mul = 1;
var targetPos=0;
var direction=-1;
var snow=null;
var bAutoRolling=true;

var num0='?', num1=null, num2=null, num3=null;

var rollCount=0;
var loadCount=0;
var bSnow=false;

$(document).ready(function(){
	$("#btnFind").css('width','127px').hide();
	
	// fix screwy positining in IEfucking7
	if ($.browser.msie && parseInt($.browser.version.substr(0,1))<8)
	{
		alert($.browser.version);
		$("div#html4text").css('left', '-235px');
	}
});

function LoadOneTyre()
{
	++loadCount;
	if (loadCount>=2)
	{
		bTyreReady=true;
		rollCount=1;
		Roll();
	}
}

function CanvasInit()
{	
	$("#btnFind").hide().css('margin-left', '130px').css('overflow', 'hidden');
	canvEl = document.getElementById('tyreCanvas');
	if (canvEl!=null && typeof(canvEl)!='undefined')
	{
		tyreImg2 = new Image();
		tyreImg2.onload = LoadOneTyre;
		tyreImg2.src = '/images/tyre_overlay.png';
		
		if ($.browser.msie && $.browser.version.substr(0,1)<9)
		{
			bHTML4 = true;
			return;
		}

		cv = canvEl.getContext('2d');
		if (cv==null)
		{
			bHTML4 = true;
			return;
		}
		snow = new Image();
		snow.src='images/snowflake.png';
		
		if((navigator.userAgent.match(/iPhone/i)) || 
				(navigator.userAgent.match(/iPod/i))) 
			cv.font = "15pt Arial Bold";
		else
			cv.font = "15pt Impact";
		cv.textAlign='center';
		
		tyreImg = new Image();
		tyreImg.onload = LoadOneTyre;
		tyreImg.src = '/images/tyre.png';
	}
	else
	{
		// html 4 version TODO handle html 4
		bHTML4=true;
		$("#btnFind").css('marginLeft','280px').show();
	}
}

function Roll()
{
	if (bHTML4)
		return;
	if (rollCount==0)
	{
		rollCount = 99999;
	}
	
	DrawTyre();

	offPos+= direction * mul * 1.5;
	
	if (rollCount>0)
		crot += 0.023 * mul * direction;
	
	if (direction<0 && offPos<=targetPos)
	{
		offPos = targetPos;
		rollCount=0;
	}
	else if (direction>0 && offPos>=targetPos)
	{
		offPos = targetPos;
		rollCount=0;
	}

	$(canvEl).css('margin-left', offPos+'px');
	if (rollCount>0)
	{
		setTimeout("Roll();", 1000/30);
		if (mul>0.1 && direction<0)
		{
			if (stage!=4)
				mul -= 0.015;
			else
				mul -= 0.0165;
		}
	}
	else
	{
		rollCount=0;
		mul=1;
	}
}

function DrawTyre()
{
	if (bHTML4)
		return;
	cv.clearRect(0,0,452,452);
	
	cv.translate(tX,tY);
	cv.rotate(crot);
	cv.drawImage(tyreImg,-113,-113);
	
	DrawTyreText();
	
	cv.setTransform(1, 0, 0, 1, 0, 0);
	
	cv.translate(tX,tY);
	cv.drawImage(tyreImg2,-113,-113);
	
	cv.setTransform(1, 0, 0, 1, 0, 0);
}

function DrawTyreText()
{	
	if (bHTML4)
		return;
	if (num0==null)
		return;
	cv.fillStyle = 'rgba(0,0,0,0.5)';
	cv.fillText(num0, 0, -81);
	cv.fillStyle = 'rgba(255,255,255,255)';
	cv.fillText(num0, 0, -83);
	
	if (num1!=null)
	{
		cv.rotate(stepRads);
		cv.fillStyle = 'rgba(0,0,0,0.5)';
		cv.fillText(num1, 0, -81);
		cv.fillStyle = 'rgba(255,255,255,255)';
		cv.fillText(num1, 0, -83);
		
		if (num2!=null)
		{
			cv.rotate(stepRads);
			cv.fillStyle = 'rgba(0,0,0,0.5)';
			cv.fillText(num2, 0, -81);
			cv.fillStyle = 'rgba(255,255,255,255)';
			cv.fillText(num2, 0, -83);
			
			if (num3!=null)
			{
				cv.rotate(stepRads);
				cv.fillStyle = 'rgba(0,0,0,0.5)';
				if (bSnow)
				{
					cv.rotate(1.5);
					cv.drawImage(snow,-32-81,-16);
				}
				else
				{
					cv.fillText(num3, 0, -81);
					cv.fillStyle = 'rgba(255,255,255,255)';
					cv.fillText(num3, 0, -83);
				}
			}
		}
	}
}

function TyreFieldSelected2(id)
{
	if (!bAutoRolling)
		return;
	
	TyreFieldSelected(id);
	bAutoRolling=true;
}

function TyreFieldSelected(id)
{
	bAutoRolling=false;
	if (bHTML4)
	{
		var txt = '';
		txt += (($("#width").val()!='' && $("#width").val()!=null)?($("#width").val()):('?'));
		txt += ' / ';
		txt += (($("#profile").val()!='' && $("#profile").val()!=null)?($("#profile").val()):('?'));
		txt += ' / ';
		txt += (($("#rim").val()!='' && $("#rim").val()!=null)?($("#rim").val()):('?'));
		txt += ' / ';
		txt += (($("#speed").val()!='' && $("#speed").val()!=null)?($("#speed").val()):('?'));
		$("#html4text").text(txt);
		
		// reveal button
		if (($("#speed").val()!='' && $("#speed").val()!=null && $("#speed").val()!=0))
		{
			//if ($("#btnFind").css('margin-left')!='280px')
			$("#btnFind").css({width:'127px', marginLeft:'50px'}).fadeIn(1500);
		}
	}
	else
	{
		if (cv==null || $("#"+id).val()=='')
		{
			setTimeout("TyreFieldSelected('"+id+"');", 250);
			return;
		}
		rollCount=0;
		if (id=='width')
		{
			num0 = $("#width").val();
			num1='?';
			num2=null;
			num3=null;
			mul=1;
			if (num0!='' && stage==0)
			{
				targetPos = -45;
				direction = (targetPos < offPos)?(-1):(2);
				Roll();
				stage=1;
			}
			else
			{
				targetPos = -45;
				direction = (targetPos < offPos)?(-1):(2);
				Roll();
				stage=0;
				// hide button if needs be
				if ($("#btnFind").css('margin-left')!='240px')
					$("#btnFind").css('width','127px').show().animate({width: '1px', marginLeft: '240px'}, 1000, 'swing');
			}
		}
		else if (id=='profile')
		{
			num1 = $("#profile").val();
			num2='?';
			num3=null;
			mul=1;
			if (num1!='' && stage==1)
			{
				targetPos = -90;
				direction = (targetPos < offPos)?(-1):(2);
				Roll();
				stage=2;
			}
			else
			{
				targetPos = -90;
				direction = (targetPos < offPos)?(-1):(2);
				Roll();
				stage=1;
				// hide button if needs be
				if ($("#btnFind").css('margin-left')!='240px')
					$("#btnFind").css('width','127px').show().animate({width: '1px', marginLeft: '240px'}, 1000, 'swing');
			}
		}
		else if (id=='rim')
		{
			num2 = $("#rim").val();
			num3='?';
			mul=1;
			if (num2!='' && stage==2)
			{
				targetPos = -135;
				direction = (targetPos < offPos)?(-1):(2);
				Roll();
				stage=3;
			}
			else
			{
				targetPos = -135;
				direction = (targetPos < offPos)?(-1):(2);
				Roll();
				stage=2;
				// hide button if needs be
				if ($("#btnFind").css('margin-left')!='240px')
					$("#btnFind").css('width','127px').show().animate({width: '1px', marginLeft: '240px'}, 1000, 'swing');
			}
		}
		else if (id=='rating')
		{
			num3 = $("#speed").val();
			bSnow=false;
			if (num3=='WINTER')
				bSnow=true;
			else if (num3.toLowerCase()=='remould')
				num3='R';
			else if (num3.toLowerCase()=='commercial')
				num3='C';
			else
			{
				if (num3.length > 1)
					num3 = num3.substring(num3.length-1);
			}
			rollCount = 60;
			if (num3!='' && stage==3)
			{
				targetPos = -210;
				direction = (targetPos < offPos)?(-1):(2);
				mul=1.25;
				Roll();
				stage=4;
			}
			else
			{
				targetPos = -210;
				direction = (targetPos < offPos)?(-1):(2);
				mul=1;
				Roll();
				stage=3;
			}
			
			// reveal button
			if ($("#btnFind").css('margin-left')!='280px')
				$("#btnFind").css('width','1px').show().animate({width: '127px', marginLeft: '280px'}, 1500, 'swing');
		}
	}
}