var ggl = {
	disObj:null,
	hasTopImg:false,
	topImg:null,
	topColor:'#888888',
	ctx:null,
	mousedown:false,
	callBack:null,
	initBack:null,
	handleEvent:function(e){
		switch(e.type) {
			case "mousedown":
			case "touchstart":
				this.mouseDownEvt(e);
				break;
			case "mousemove":
			case "touchmove":
				this.mouseMoveEvt(e);
				break;
			case "mouseup":
			case "touchend":
				this.mouseUpEvt(e);
				break;
		}
	},
	mouseDownEvt:function(e){
		e.preventDefault();
		this.mousedown=true;
	},
	mouseUpEvt:function(e){
		e.preventDefault();
		this.mousedown=false;
		var data=this.ctx.getImageData(0,0,this.width,this.height).data;
		for(var i=0,j=0;i<data.length;i+=4){
			if(data[i] && data[i+1] && data[i+2] && data[i+3]){
				j++;
			}
		}
		if(j<=this.width*this.height*0.7){
			if(this.callBack!=null) {
				this.callBack();
			}
		}
	},
	mouseMoveEvt:function(e){
		e.preventDefault();
		if(this.mousedown) {
			if(e.changedTouches){
				e=e.changedTouches[e.changedTouches.length-1];
			}
			var local = this.getLocalCoords(this.disObj, e);
			var x = local.x;
			var y = local.y;
			with(this.ctx) {
				beginPath();
				arc(x, y, 20, 0, Math.PI * 2);
				fill();
			}
		}
	},
	getLocalCoords:function(elem, ev) {
		var ox = 0, oy = 0;
		var first;
		var pageX, pageY;
		while (elem != null) {
			ox += elem.offsetLeft;
			oy += elem.offsetTop;
			elem = elem.offsetParent;
		}
		if (ev.hasOwnProperty('changedTouches')) {
			first = ev.changedTouches[0];
			pageX = first.pageX;
			pageY = first.pageY;
		} else {
			pageX = ev.pageX;
			pageY = ev.pageY;
		}
		return {'x': pageX - ox, 'y':pageY-oy};
	},
	setTop:function(){
		if(this.hasTopImg) {
			var pat=this.ctx.createPattern(this.topImg,"repeat");
			this.ctx.fillStyle = pat;
		} else {
			this.ctx.fillStyle = this.topColor;
		}
		this.ctx.fillRect(0, 0, this.width, this.height);
	},
	init:function(o, w, h,c,pic,ifun,cbfun){
		this.callBack = cbfun;
		this.initBack = ifun;
		this.width = w||320;
		this.height = h||160;
		var _this = this;
		if(pic) {
			this.hasTopImg = true;
			this.topImg = new Image();
			this.topImg.addEventListener('load', function(e) {
				_this.toInit(o);
			});
			this.topImg.src = pic;
		} else {
			this.topColor = c||this.topColor;
			this.hasTopImg = false;
			this.toInit(o);
		}
	},
	toInit:function(o) {
		this.disObj = document.createElement('canvas');
		this.disObj.style.backgroundColor='transparent';
		this.disObj.style.position = 'absolute';
		this.disObj.id = 'showRes';
		this.disObj.width = this.width;
		this.disObj.height = this.height;
		this.ctx=this.disObj.getContext('2d');
		this.ctx.fillStyle='transparent';
		this.ctx.fillRect(0, 0, this.width, this.height);
		this.setTop(this.ctx);
		this.ctx.globalCompositeOperation = 'destination-out';
		o.appendChild(this.disObj);
		this.disObj.addEventListener('mousedown', this, false);
		this.disObj.addEventListener('mousemove', this, false);
		this.disObj.addEventListener('mouseup', this, false);
		this.disObj.addEventListener('touchmove', this, false);
		this.disObj.addEventListener('touchend', this, false);
		this.disObj.addEventListener('touchstart', this, false);
		if(this.initBack!=null) {
			this.initBack();
		}
	}
}

ggl.init($('#gglCon').get(0), 300, 180, '', 'images/ggl.jpg',function(){
	
}, function(){
	gglDone();
});
function gglDone() {
	
}