function menu(){
	$('#menu>ul>li:not(.active)>ul').css({visibility:'hidden'}).show();

	$('div.menu a.c').each(function(i){
		$(this).css({
			background: 'transparent'
		}).find('canvas').remove();
		var cg = document.createElement('canvas');

		$(cg).css({
			'position': 'absolute',
			'left': '-3px',
			'top': 0
		}).appendTo(this);

		cg.width = $(this).width()+4;
		cg.height = 24;

		if (window.G_vmlCanvasManager) G_vmlCanvasManager.initElement(cg);
		ctx = cg.getContext('2d');
		ctx.save();
		
		var color = $(this).css('color');
		if ($(this).parent().hasClass('active')){
			$('>span', this).css({'color': color});
			ctx.transform(1,0,-0.25,1,0,0);
			ctx.fillStyle = color;
			ctx.fillRect(6, 0, cg.width-6, 24);
			ctx.fillStyle = '#ffffff';
			ctx.fillRect(9, 1, cg.width-10, 22);
			ctx.restore();

			$(this).parent().find('ul>li').each(function(){
				$(this).css({background: 'transparent'});
				$(this).find('canvas').remove();
				var cg = document.createElement('canvas');
				$(cg).css({
					'position': 'absolute',
					'left': 0,
					'top': 0
				}).appendTo(this);

				cg.width = $(this).width();
				cg.height = 21;

				if (window.G_vmlCanvasManager) G_vmlCanvasManager.initElement(cg);
				ctx = cg.getContext('2d');
				ctx.save();
				ctx.transform(1,0,-0.25,1,0,0);
				ctx.fillStyle = color; 
				ctx.fillRect(5.25, 0, cg.width-5.25, 21);
				ctx.restore();
				
			});
		}else{
			ctx.transform(1,0,-0.25,1,0,0);
			ctx.fillStyle = color;
			ctx.fillRect(6, 0, cg.width-6, 24);
			ctx.drawImage(g_image[0],-i*80,0);
			if (window.G_vmlCanvasManager) {
				ctx.fillStyle = '#ffffff';
				ctx.fillRect(cg.width, 0, 6, 24);
			}else{
				ctx.clearRect(cg.width, 0, 6, 24);
				ctx.clearRect(0, 0, 6, 24);
			}
			ctx.restore();

			$(this).parent().find('ul>li').each(function(){
				$(this).css({background: 'transparent'});
				$(this).find('canvas').remove();
				var cg = document.createElement('canvas');
				$(cg).appendTo(this);
				$(cg).css({
					'position': 'absolute',
					'left': 0,
					'top': 0
				});
				cg.width = $(this).width();
				cg.height = 21;
				if (window.G_vmlCanvasManager) G_vmlCanvasManager.initElement(cg);
				ctx = cg.getContext('2d');
				ctx.save();
				ctx.transform(1,0,-0.25,1,0,0);
				ctx.fillStyle = color; 
				ctx.fillRect(5.25, 0, cg.width-5.25, 21);
				ctx.restore();			
			});
			$(this).parent().find('ul').css({visibility:''});
			$(this).parent().find('ul').hide();
		}
	});
}

function hover(){
	$('div.menu a.c').hover(function(){
		if (!$(this).parent().hasClass('active')){
			$(this).find('>span').css({'color': color});
			var cg = $(this).find('canvas').get(0);
			if (window.G_vmlCanvasManager) G_vmlCanvasManager.initElement(cg);
			ctx = cg.getContext('2d');

			ctx.save(); 
			ctx.clearRect(0,0,cg.width,24);
			ctx.transform(1,0,-0.25,1,0,0);
			ctx.fillStyle = $(this).css('color'); 
			ctx.fillRect(6, 0, cg.width-6, 24);
			ctx.fillStyle = '#ffffff';
			ctx.fillRect(9, 1, cg.width-10, 22);
			ctx.restore();				
		}
	},function(){
		if (!$(this).parent().hasClass('active')){
			var i = $('div.menu a.c').index(this);
			$(this).find('>span').css('color','');
			var cg = $(this).find('canvas').get(0);
			if (window.G_vmlCanvasManager) G_vmlCanvasManager.initElement(cg);
			ctx = cg.getContext('2d');

			ctx.save();
			ctx.clearRect(0,0,cg.width,24);
			ctx.transform(1,0,-0.25,1,0,0);
			ctx.fillStyle = $(this).css('color'); 
			ctx.fillRect(6, 0, cg.width-6, 24);
			ctx.drawImage(g_image[0],-i*80,0);

			if (window.G_vmlCanvasManager) {
				ctx.fillStyle = '#ffffff';
				ctx.fillRect(cg.width, 0, 6, 24);
			}else{
				ctx.clearRect(cg.width, 0, 6, 24);
				ctx.clearRect(0, 0, 6, 24);
			}
			ctx.restore();
		}
	});
}
var g_image = $('<img />').load(function(){
	$(window).resize(menu);
	menu();
	//hover();
});
g_image.attr('src','/assets/templates/wj/i/e.png');