ActiveOnTouch = Class.create();
ActiveOnTouch.prototype = {
	initialize: function(el) {
		this.element = $(el);
		this.className = 'active';

		this.radius = 100;
		this.top = 0;
		this.left = 0;
		
		var element = this.element;
		while (element.offsetParent) {
			this.top += element.offsetTop;
			this.left += element.offsetLeft;
			element = element.offsetParent;
		}

		this.bottom = this.top + this.element.offsetHeight + this.radius;
		this.right = this.left + this.element.offsetWidth + this.radius;
		this.left = this.left - this.radius;
		this.top = this.top - this.radius;

		if (window.Touch) {
			this.element.addEventListener('touchstart', this, false);
		}
	},
	
	inRadius: function(x, y) {
		return (x > this.left && x < this.right && y > this.top && y < this.bottom);
	},

	handleEvent: function(e) {
		switch(e.type) {
			case 'touchstart': this.onTouchstart(e); break;
			case 'touchmove': this.onTouchmove(e); break;
			case 'touchend': this.onTouchend(e); break;
		}
	},
	
	onTouchstart: function(e) {
		e.preventDefault();	
		
		Element.addClassName(this.element, this.className);	

		this.element.addEventListener('touchmove', this, false);
		this.element.addEventListener('touchend', this, false);
	},

	onTouchmove: function(e) {
		
		if (this.inRadius(e.targetTouches[0].clientX, e.targetTouches[0].clientY)) {
			Element.addClassName(this.element, this.className);	
		} else {
			Element.removeClassName(this.element, this.className);	
		}
		
	},

	onTouchend: function(e) {
		this.element.removeEventListener('touchmove', this, false);
		this.element.removeEventListener('touchend', this, false);
		
		if (Element.hasClassName(this.element, this.className)) {
			var event = document.createEvent('MouseEvents');
			event.initEvent('click', true, true);
			this.element.dispatchEvent(event);
		}
		
		Element.removeClassName(this.element, this.className);	
	}
};


GlowOnTouch = Class.create();
GlowOnTouch.prototype = {
	initialize: function(el) {
		this.element = $(el);

		this.radius = 100;
		this.top = 0;
		this.left = 0;
		
		var element = this.element;
		while (element.offsetParent) {
			this.top += element.offsetTop;
			this.left += element.offsetLeft;
			element = element.offsetParent;
		}

		this.x = parseInt(this.left + (this.element.offsetWidth / 2), 10);
		this.y = parseInt(this.top + (this.element.offsetHeight / 2), 10);
		this.bottom = this.top + this.element.offsetHeight + this.radius;
		this.right = this.left + this.element.offsetWidth + this.radius;
		this.left = this.left - this.radius;
		this.top = this.top - this.radius;
		

		if (window.Touch) {
			this.element.addEventListener('touchstart', this, false);
		}
	},
	
	inRadius: function(x, y) {
		return (x > this.left && x < this.right && y > this.top && y < this.bottom);
	},
	
	createGlow: function(x, y) {
		this.canvas = document.createElement('canvas');
		this.canvas.width = 100;
		this.canvas.height = 100;
		this.canvas.style.left = (x - 50) + 'px';
		this.canvas.style.top = (y - 50) + 'px';
		this.canvas.style.position = 'absolute';
		this.canvas.style.webkitTransitionProperty = 'opacity';
		this.canvas.style.webkitTransitionDuration = '200ms';
		this.canvas.style.pointerEvents = 'none';
		this.canvas.style.zIndex = 100;
		document.body.appendChild(this.canvas);
		
		var context = this.canvas.getContext("2d");
		var gradient = context.createRadialGradient(50,50,0,50,50,50);
		gradient.addColorStop(0, 'rgba(255,255,255,1)');
		gradient.addColorStop(0.8, 'rgba(255,255,255,0.05)');
		gradient.addColorStop(0.9, 'rgba(255,255,255,0)');
		context.fillStyle = gradient;
		context.fillRect(0,0,100,100);	

		this.visible = true;					
	},
	
	hideGlow: function() {
		if (this.visible) {
			this.canvas.style.opacity = 0;
			this.visible = false;
		}
	},
	
	showGlow: function() {
		if (!this.visible) {
			this.canvas.style.opacity = 1;
			this.visible = true;
		}
	},
	
	removeGlow: function() {
		this.canvas.addEventListener('webkitTransitionEnd', function() {
			Element.remove(this.canvas);
		}.bind(this), false);

		if (this.visible) {
			this.canvas.style.opacity = 0;
			this.visible = false;
		}
	},

	handleEvent: function(e) {
		switch(e.type) {
			case 'touchstart': this.onTouchstart(e); break;
			case 'touchmove': this.onTouchmove(e); break;
			case 'touchend': this.onTouchend(e); break;
		}
	},
	
	onTouchstart: function(e) {
		e.preventDefault();	
		
		this.createGlow(this.x, this.y);

		this.element.addEventListener('touchmove', this, false);
		this.element.addEventListener('touchend', this, false);
	},

	onTouchmove: function(e) {
		
		if (this.inRadius(e.targetTouches[0].clientX, e.targetTouches[0].clientY)) {
			this.showGlow();
		} else {
			this.hideGlow();
		}
		
	},

	onTouchend: function(e) {
		this.element.removeEventListener('touchmove', this, false);
		this.element.removeEventListener('touchend', this, false);
		
		if (this.visible) {
			var event = document.createEvent('MouseEvents');
			event.initEvent('click', true, true);
			this.element.dispatchEvent(event);
		}
		
		this.removeGlow();
	}
};