$(function(){
	$("body").on("click", "li.img-4-download", function(event){

		// IE10 or below does not support "btoa" feature
		// IE8 or below does not support canvas
		//if(!Modernizr.atobbtoa || !Modernizr.canvas){
			//alert("I'm Sorry!\nWe detect your broswer doesn't support HTML5 features!\nPlease turn to Chrome or Firefox of the latest version.");
			//return false;
		//}
		
		var imgType = $(this).data("img").toLocaleLowerCase();
		var node = this.parentNode.parentNode.querySelector("svg").cloneNode(true);

		if(imgType === "svg"){
			exportSVG(node);
		}else if(imgType === "png"){
			exportPNG(node);
		}
		
		
		// @argument svg is a normal DOM node
		function svgData(svg){
			var div = document.createElement("div"), html;
			div.appendChild(svg);
			html = div.innerHTML;
			div.remove();

			return "data:image/svg+xml;base64," + btoa(html);
		}

		function exportSVG(node){
			var svg = svgData(node), aLink;

			aLink = document.createElement("a");
			aLink.href = svg;
			aLink.download = "chart.svg";
			document.body.appendChild(aLink);
			aLink.click();

			setTimeout(function(){ aLink.remove(); }, 1000);
		}

		function exportPNG(node){
			var width, height, canvas, img, context, uri, aLink;

			width = node.getAttribute("width");
			height = node.getAttribute("height");
			canvas = document.createElement("canvas");

			$(canvas)
				.attr({width: width, height: height})
				.css({position: "absolute", left: "-99999px", bottom: "-999999px"});
			document.body.appendChild(canvas);
			context = canvas.getContext("2d");
			img = new Image();
			img.src = svgData(node);

			img.onload = function(){
				context.drawImage(img, 0, 0);
				uri = canvas.toDataURL("image/png");

				aLink = document.createElement("a");
				aLink.href = uri;
				aLink.download = "chart.png";
				document.body.appendChild(aLink);
				aLink.click();

				setTimeout(function(){ aLink.remove(); canvas.remove(); }, 1000);
			};
		}
	}); 
})// svg exporting moudular END