//
var logoLevel = 1;
var tintImgLevel = 0;
var logoSHonloadCounter = 0;
//

function tintLogo_old(color1,color2,transition){
	if(supports_canvas) {
		logoLevel++;
		var html="<div id='logo"+logoLevel+"'>";
		html+="<div id='logo_sh1'>";
		html += "<canvas id='draw1"+logoLevel+"' width='73' height='73'></canvas></div>";
		html+="<div id='logo_sh2'>";
		html += "<canvas id='draw2"+logoLevel+"' width='73' height='73'></canvas></div>";
		jQuery("#logo").append(html);
		var target = $("#header #logo #logo"+String(logoLevel));
		target.css({opacity:0});
		var logo1 = document.getElementById('draw1'+logoLevel);
		var logo2 = document.getElementById('draw2'+logoLevel);
		// Initaliase a 2-dimensional drawing context
		var x1 = logo1.getContext('2d');
		var width = x1.canvas.width;
		var height = x1.canvas.height;
		//
		var fg1 = new Image();
		fg1.src = 'assets/logo_sh1.png';
		loadstatus = 0;
		var transition = transition;
		
		fg1.onload = function() {
			// create offscreen buffer, 
			var buffer1 = document.createElement('canvas');
			buffer1.width = fg1.width;
			buffer1.height = fg1.height;
			var bx1 = buffer1.getContext('2d');
	
			// fill offscreen buffer with the tint color
			bx1.fillStyle = color1;
			bx1.fillRect(0,0,buffer1.width,buffer1.height);
	
			// destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
			bx1.globalCompositeOperation = "destination-atop";
			bx1.drawImage(fg1,0,0);
	
			// to tint the image, draw it first
			x1.drawImage(fg1,0,0);
	
			//then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
	
			x1.globalAlpha = 1;
			x1.drawImage(buffer1,0,0);
			
			logofade(target,transition);
			
		}
		var x2 = logo2.getContext('2d');
		//width = x2.canvas.width;
		//height = x2.canvas.height;
		//
		var fg2 = new Image();
		fg2.src = 'assets/logo_sh2.png';
		fg2.onload = function() {
			// create offscreen buffer, 
			var buffer2 = document.createElement('canvas');
			buffer2.width = fg2.width;
			buffer2.height = fg2.height;
			var bx2 = buffer2.getContext('2d');
	
			// fill offscreen buffer with the tint color
			bx2.fillStyle = color2;
			bx2.fillRect(0,0,buffer2.width,buffer2.height);
	
			// destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
			bx2.globalCompositeOperation = "destination-atop";
			bx2.drawImage(fg2,0,0);
	
	
			// to tint the image, draw it first
			x2.drawImage(fg2,0,0);
	
			//then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
			x2.globalAlpha = 1;
			x2.drawImage(buffer2,0,0);
			logofade(target,transition);
		}
	}
}
function logofade_old(target,transition){
	loadstatus ++;
	target.css({opacity:0});
	if(loadstatus == 2){
		if(transition>0){
			target.animate({opacity: 1},transition, "easeOutSine", logofadeComplete);
			//target.animate({opacity: 1},{queue:false, duration:500, easing:"easeOutQuad"});
		}else{
			target.css({opacity: 1});
			logofadeComplete();
		}
	}
}
function logofadeComplete_old(){
	var inin = logoLevel-10;
	if(inin < 0){
		inin = 0;
	}
	for(var i=inin;i<(logoLevel);i++){
		$("#header #logo #logo"+String(i)).remove();
		$('#draw1'+String(i)).remove();
		$('#draw2'+String(i)).remove();
	}
}

function tintLogo(color1,color2,transition){
	logoLevel++;
	logoSHonloadCounter = 0;
	var html = "<div id='logo"+logoLevel+"'>";
	html += "<img id='logo_sh1' src='assets/logo_sh1C.png' style='visibility:hidden' onload='tintLogoShape(this,\""+color1+"\","+transition+");' />";
	html += "<img id='logo_sh2' src='assets/logo_sh2C.png' style='visibility:hidden' onload='tintLogoShape(this,\""+color2+"\","+transition+");' />";
	html += "</div>";
	$("#logo").append(html);
	$("#logo #logo"+logoLevel).css({opacity:0});
}

//--TINT-->//
function tintImg(obj, src, w, h, color, transition, complete, arg){
	if(supports_canvas) {
		tintImgLevel++;
		var html = "<canvas id='tintImg"+tintImgLevel+"' width='"+w+"' height='"+h+"'></canvas>";
		jQuery(obj).html(html);
		//
		//tintImgTarget = obj;
		var tintImgComplete = complete;
		var arg = arg;
		var target = $(obj);
		target.css({opacity:0});
		var tint1 = document.getElementById('tintImg'+tintImgLevel);
		// Initaliase a 2-dimensional drawing context
		var x1 = tint1.getContext('2d');
		var width = x1.canvas.width;
		var height = x1.canvas.height;
		//
		var fg1 = new Image();
		fg1.src = src;
		var transition = transition;
		fg1.onload = function() {
			// create offscreen buffer, 
			var buffer1 = document.createElement('canvas');
			buffer1.width = fg1.width;
			buffer1.height = fg1.height;
			var bx1 = buffer1.getContext('2d');
			// fill offscreen buffer with the tint color
			bx1.fillStyle = color;
			bx1.fillRect(0,0,buffer1.width,buffer1.height);
			// destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
			bx1.globalCompositeOperation = "destination-atop";
			bx1.drawImage(fg1,0,0);
			// to tint the image, draw it first
			x1.drawImage(fg1,0,0);
			//then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
			x1.globalAlpha = 1;
			x1.drawImage(buffer1,0,0);
			tintImgFade(target,transition);
		}
	}
	function tintImgFade(target,transition,arg){
	target.css({opacity:0});
	if(transition>0){
		target.animate({opacity:1},transition,"easeOutSine",tintImgFadeComplete);
	}else{
		target.css({opacity: 1});
		tintImgFadeComplete();
	}
	}
	function tintImgFadeComplete(){
		if(tintImgFadeComplete != null){
			if(arg != null){
				tintImgComplete(arg);
			}else{
				tintImgComplete();
			}
		}
	}
}
function tintPNG(target,color){
	var rgb = hexaToRGBpixastic(color);	
	$(target).pixastic("desaturate").pixastic("coloradjust",{red:rgb[0],green:rgb[1],blue:rgb[2]});
}
function tintPNG2(target,color){
	$(target).css({opacity:1});
	var rgb = hexaToRGBpixastic(color);	
	$(target).pixastic("desaturate").pixastic("coloradjust",{red:rgb[0],green:rgb[1],blue:rgb[2]});
}
function tintLogoShape(target,color,transition){
	logoSHonloadCounter++;
	$(target).css({opacity:1,visibility:"visible"});
	var rgb = hexaToRGBpixastic(color);	
	$(target).pixastic("desaturate").pixastic("coloradjust",{red:rgb[0],green:rgb[1],blue:rgb[2]});
	if(logoSHonloadCounter == 2){
		$("#logo #logo"+logoLevel).animate({opacity:1},transition,"jswing",function(){
			$("#logo #logo"+(logoLevel-1)).remove();
			$("#logo #logo"+(logoLevel-2)).remove();
			$("#logo #logo"+(logoLevel-3)).remove();
			$("#logo #logo"+(logoLevel-4)).remove();
		});
	}
}
//<--TINT--//