/**
 * @author wsf
 */
//利用html5 canvas 画的常用小图标
;(function(win, $) {
	/**
	 * 公共代码
	 */
	function getCommon(canvasId, width, height) {
		var obj = document.getElementById(canvasId);
		if (obj.nodeName.toLowerCase() != "canvas")
			alert("有元素与此canvas元素id冲突！");
		if (obj == null) {
			_obj = $('<canvas id="' + canvasId + '" width="' + width + '" height="' + height + '"></canvas>')
			_obj.appendTo($("body"));
			obj = _obj[0];
		}
		return obj.getContext('2d');
	}

	var icons = {};
	icons = $.extend(icons, {
		_loading : function() {
			var ctx = getCommon("loading", 100, 100);
			var loadingInterval = null;
			function showLoading() {
				var rotatorAngle = Math.PI * 2.5;
				//弧度
				var step = Math.PI / 6;
				loadingInterval = setInterval(function() {//定时器 定时触发函数
					//取得二第效果
					var radius = 20;
					//全的半径
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					//清除页面
					var lineWidth = 3;
					//线的宽度
					ctx.beginPath();
					//开始画图
					ctx.lineWidth = lineWidth;
					//线的宽度
					ctx.strokeStyle = 'lightblue';
					center = {
						x : canvas.width / 2,
						y : canvas.height / 2
					};
					ctx.arc(center.x, center.y, radius, 0, Math.PI * 2);
					ctx.closePath();
					ctx.stroke();
					ctx.beginPath();
					//开始画弧线
					ctx.strokeStyle = '#587dbf';
					//线条的颜色的颜色
					ctx.arc(center.x, center.y, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
					//语法：arc(定义一个中心点，半径，起始角度，结束角度)
					ctx.stroke();
					//绘制
					rotatorAngle += step;
				}, 50/* 这是延迟多少秒做函数*/)
				//*以上是划一个圈
			};
			/**
			 * 隐藏loading
			 */
			function hideLoading() {
				loadingInterval = null;
				$("#loading").hide();
			}

			_loading();
		},
		search : function(events) {

			/**
			 * 开始画搜索按钮
			 */
			var ctx = getCommon("searchBtnCvs", 30, 30);
			function _drawSearch() {
				//var g1 = ctx.createRadialGradient(15, 15, 13, 15, 10, 6);//颜色渐变
				//g1.addColorStop(0, '#587dbf');
				//g1.addColorStop(0.5, 'lightblue');
				//g1.addColorStop(1, '#eee');
				//ctx.fillStyle = g1;
				ctx.beginPath();
				ctx.arc(15, 15, 10, 0, Math.PI * 2, true);
				ctx.save();
				ctx.moveTo(20, 20);
				//原点
				ctx.lineWidth = 5;
				ctx.lineTo(29, 29);
				ctx.strokeStyle = "#95A3F3";
				ctx.stroke();
				ctx.save();

			}

			if (events) {
				for (var name in events) {
					cvs.bind(name, function() {
						events[name](ctx);
					});
				}
			}
			_drawSearch();
			//调用
		},
		//向上箭头
		arrowUp : function(events) {
			var ctx = getCommon("arrowUp", 30, 30);
			var _arrowUp = function() {
				//画线
				ctx.beginPath();
				ctx.lineWidth = 5;
				ctx.strokeStyle = '#587dbf';
				//线条颜色
				//坐标源点
				ctx.moveTo(11, 25);
				ctx.lineTo(11, 5);
				ctx.fill();
				//充满整个区域
				ctx.stroke();
				ctx.save();

				ctx.moveTo(12, 3);
				//坐标原点
				ctx.lineTo(3, 15);
				ctx.stroke();
				ctx.save();

				ctx.moveTo(10, 3);
				ctx.lineTo(19, 15);
				ctx.stroke();
				ctx.save();

				ctx.closePath();
			}
			if (events) {
				for (var name in events) {
					cvs.bind(name, events[name]);
				}
			}
			_arrowUp();
		},
		//向下箭头
		arrowDown : function(events,callback) {
			var ctx = getCommon("arrowDown", 30, 30);
			function _arrowDown() {
				//画线
				ctx.beginPath();
				ctx.lineWidth = 5;
				ctx.strokeStyle = '#587dbf';
				//线条颜色
				//坐标源点
				ctx.moveTo(11, 0);
				ctx.lineTo(11, 25);
				ctx.fill();
				//充满整个区域
				ctx.stroke();
				ctx.save();

				ctx.moveTo(12, 28);
				var _x1 = Math.floor(12 + 4 * Math.sin(45));
				var _y1 = Math.floor(28 + 4 * Math.cos(45));
				//坐标原点
				ctx.lineTo(3, 15);
				ctx.stroke();
				ctx.save();

				ctx.moveTo(12, 28);
				ctx.lineTo(20, 14);
				ctx.stroke();
				ctx.save();

				ctx.closePath();
			}

			if (events) {
				for (var name in events) {
					cvs.bind(name, events[name]);
				}
			}
			_arrowDown();
		},
		//下拉列表图标
		select : function(callback) {