var jaxcorePurple = 'rgb(102,74,157)';

var animSettings = {};
for (var i in logoSettings) {
	animSettings[i] = logoSettings[i];
}
animSettings.sizeScale = 0.17;
animSettings.showFont = false;
animSettings.logoXAlign = 'center';
animSettings.bgRGB = [0,0,0];
animSettings.fgRGB = [240,240,240];
animSettings.glowSize = 30;
animSettings.glowSteps = 1;
animSettings.logoThickness = 25;
animSettings.offsetY = 100;


var logos = ['firefox','chrome','ie','opera','tablet','smartphone'];
var logo = {};
for (var i=0;i<logos.length;i++) {
	var n = logos[i];
	var l = logo[n] = new Image();   // Create new img element  
	l.src = n+'.png';
	l.onload = (function() {
		var l = logo[n];
		return function() {
			l.isLoaded = true;
			drawAnim();
		}
	})();
}

run(function() {
	var canvas = document.getElementById('canvasanim');
	if (!canvas || !canvas.getContext) return;
	
	var bc = document.getElementById('breadcrumb');
	bc.className = 'splashanim2';
	drawAnim();
	setTimeout(drawAnim,500);
});

function drawAnim() {
	var canvas = document.getElementById('canvasanim');
	if (!canvas || !canvas.getContext) return;
	
	for (var i=0;i<logos.length;i++) {
		if (!logo[logos[i]].isLoaded) {
			return;
		}
	}
	
	var w = window.innerWidth;
	
	var h = canvas.height;
	canvas.width = w;
	var ctx = canvas.getContext('2d');
	
	
	ctx.fillStyle = 'white';
	ctx.strokeStyle = 'white';
	ctx.lineWidth = 3.5;
	
	drawCloud(ctx,cloud,w/7,h/1.9);
	
	ctx.lineWidth = 1.8; //3.5;
	ctx.lineCap = 'round';
	
	var X = 301/10.7;
	var Y = 187/10.7;
	var R = 187/301;
	
	var wireColor = jaxcorePurple;
	var puffSpot = '#888';
	
		ctx.strokeStyle = wireColor;
		ctx.beginPath();
		ctx.moveTo(w/2-X,h/2-Y);
		ctx.lineTo(w/2-X-(h/2-Y-9.5)/R,9.5);
		ctx.lineTo(cloud.puffs[5].x,9.5);
		ctx.lineTo(cloud.puffs[5].x,cloud.puffs[5].y-(cloud.puffs[5].size/3+5));
		ctx.stroke();
		ctx.closePath();
	ctx.strokeStyle = puffSpot;
	ctx.beginPath(); 
	ctx.arc(cloud.puffs[5].x,cloud.puffs[5].y,cloud.puffs[5].size/3,0,Math.PI*2,true);
	ctx.fillStyle = '#e0e0e0';
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	ctx.fillStyle = '#000';
	ctx.beginPath(); 
	ctx.arc(w/2-X,h/2-Y,5.5,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	ctx.fillStyle = '#fff';
	ctx.beginPath(); 
	ctx.arc(w/2-X,h/2-Y,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	ctx.strokeStyle = wireColor;
		ctx.beginPath();
		ctx.moveTo(w/2,h/2-13.2);
		ctx.lineTo(w/2,h/2-13.2-12);
		ctx.lineTo(w/2-(h/2-13.2-12-2)/R,2);
		ctx.lineTo(cloud.puffs[2].x,2);
		ctx.lineTo(cloud.puffs[2].x,cloud.puffs[2].y-(cloud.puffs[2].size/3+5));
		ctx.stroke();
		ctx.closePath();	
	ctx.strokeStyle = puffSpot;
	ctx.beginPath(); 
	ctx.arc(cloud.puffs[2].x,cloud.puffs[2].y,cloud.puffs[2].size/3,0,Math.PI*2,true);
	ctx.fillStyle = '#e0e0e0';
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	
		ctx.strokeStyle = wireColor;
		ctx.beginPath();
		ctx.moveTo(w/2-X,h/2);
		ctx.lineTo(w/2-X-(h/2-17)/R,17);
		ctx.lineTo(cloud.puffs[7].x,17);
		ctx.lineTo(cloud.puffs[7].x,cloud.puffs[7].y-(cloud.puffs[7].size/3+5));
		ctx.stroke();
		ctx.closePath();
	ctx.strokeStyle = puffSpot;
	ctx.beginPath(); 
	ctx.arc(cloud.puffs[7].x,cloud.puffs[7].y,cloud.puffs[7].size/3,0,Math.PI*2,true);
	ctx.fillStyle = '#e0e0e0';
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	ctx.fillStyle = '#000';
	ctx.beginPath();  
	ctx.arc(w/2-X,h/2,5.5,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(w/2-X,h/2,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	//ctx.strokeStyle = '#fff';
	//ctx.fillStyle = '#fff';
		
	
	
		
	
	
	/*ctx.fillStyle = 'red';
	ctx.beginPath();  
	ctx.arc(w/2,h/2+13.2,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();*/
	var x = w*3.2/4;
	
		ctx.strokeStyle = wireColor;
		ctx.beginPath();
		ctx.moveTo(w/2+X,h/2);
		ctx.lineTo(w/2+X+(h-46-h/2)/R,h-46);
		ctx.lineTo(x-54+17,h-46);
		
		ctx.lineTo(x-54+17,36);
		
		ctx.moveTo(x-5+16,36);
		ctx.lineTo(x-5+16-Math.cos(R)*20,56);
		ctx.lineTo(x-54+17,56);
		
		ctx.moveTo(x+44+16,36);
		ctx.lineTo(x+44+16-Math.cos(R)*27,63);
		ctx.lineTo(x-54+17,63);
		
		ctx.moveTo(x+93+16,36)
		ctx.lineTo(x+93+16-Math.cos(R)*34,70);
		ctx.lineTo(x-54+17,70);
		
		ctx.stroke();
		ctx.closePath();
	ctx.fillStyle = '#000';
	ctx.beginPath();  
	ctx.arc(w/2+X,h/2,5.5,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(w/2+X,h/2,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	ctx.drawImage(logo.chrome,x-54,0);
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(x-54+17,36,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	ctx.drawImage(logo.firefox,x-5,0);
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(x-5+16,36,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	ctx.drawImage(logo.ie,x+44,0);
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(x+44+16,36,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	ctx.drawImage(logo.opera,x+97,3);
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(x+93+16,36,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	
		ctx.strokeStyle = wireColor;
		ctx.beginPath();
		ctx.moveTo(w/2+X,h/2+Y);
		ctx.lineTo(w/2+X+(h-38-h/2-Y)/R,h-38);
		ctx.lineTo(w*0.83+7+Math.cos(R)*(h*2.1/4+27-(h-38)),h-38);
		ctx.lineTo(w*0.83+7,h*2.1/4+27);
		ctx.stroke();
		ctx.closePath();
	ctx.fillStyle = '#000';
	ctx.beginPath();  
	ctx.arc(w/2+X,h/2+Y,5.5,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(w/2+X,h/2+Y,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	ctx.drawImage(logo.smartphone,w*0.83,h*2.1/4);	
	ctx.fillStyle = '#fff';
	ctx.beginPath();  
	ctx.arc(w*0.83+7,h*2.1/4+27,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	
	ctx.strokeStyle = wireColor;
		ctx.beginPath();
		ctx.moveTo(w/2,h/2+13.2);
		ctx.lineTo(w/2,h/2+13.2+12);
		ctx.lineTo(w/2+(h-30-h/2-13.2-12)/R,h-30);
		ctx.lineTo(w*0.9+22+Math.cos(R)*(h*1.6/4+40-(h-30)),h-30);
		ctx.lineTo(w*0.9+22,h*1.6/4+40);
		ctx.stroke();
		ctx.closePath();
		
	ctx.drawImage(logo.tablet,w*0.9,h*1.6/4);
	ctx.fillStyle = '#fff';
	ctx.beginPath();
	ctx.arc(w*0.9+22,h*1.6/4+40,3.8,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	drawJaxcore(ctx,w,h,animSettings);
	
	
	ctx.font = '18px Lucida Grande';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'bottom';
	
	ctx.fillText('mobile web application platform',w/2,h);
	
	
}

function drawImage(ctx,img,x,y) {
	
}

cloud = generateCloud();

function generateCloud() {
	var puffs = [];
	
	var a = 0;
	while (a<Math.PI*2) {
		a += Math.PI/4;
		puffs.push({angle:a,size:20+15*Math.random()});
	}
	
	return {
		width : 40+Math.random()*25,
		height : 25+Math.random()*20,
		puffs : puffs
	};
}

function drawCloud(ctx,cloud,x,y) {
	ctx.strokeStyle = '#fff';
	
	ctx.lineWidth = 0.8;
	ctx.strokeRect(x,y,2,2);
	
	ctx.fillStyle = 'rgb(245,245,245)';
	ctx.beginPath();  
	ctx.arc(x,y,(cloud.height+cloud.width)/2,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
	
	cloud.puffs.forEach(function(puff) {
		var c = 240;
		ctx.fillStyle = 'rgb('+c+','+c+','+c+')';
		
		var cs = cloud.size;
		ctx.beginPath();  
		puff.x = x+cloud.width*Math.cos(puff.angle);
		puff.y = y+cloud.height*Math.sin(puff.angle)
		ctx.arc(puff.x,puff.y,puff.size,0,Math.PI*2,true);
		ctx.fill();
		ctx.closePath();
	});
	
	
}

if (window.addEventListener) window.addEventListener('resize',function() {
	drawAnim();
},true);

if (window.addEvent) {
	alert('hi')
}


//var hslcolor = [0.7228915662650602,0.3593073593073593,0.4529411764705883];