(function($){
	$(function(){
		var r = Raphael('raphael', '100%', '100%');
		var img = r.image('https://techapi.manulneko.com/files/2014/04/4519098234_f43f010be1_z.jpg', 0, 0, 640, 640);
		
		var mask = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
		mask.setAttribute('id', 'mask');
		
		var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		mask.appendChild(path);
		r.defs.appendChild(mask);
	
		img.node.setAttribute('clip-path', 'url(#mask)');
	
		
		var Circle = function(x, y, rr){
			//this.path = r.path().attr({stroke: '#666', 'stroke-width': 5});
	
			var h = rr/2;
			this.x = x;
			this.y = y;
	
			this.curve = {
				top: [x+h, y, x+rr, y+h, x+rr, y+rr],
				right: [x+rr, y+rr+h, x+h, y+rr*2, x, y+rr*2],
				bottom: [x-h, y+rr*2, x-rr, y+rr+h, x-rr, y+rr],
				left: [x-rr, y+h, x-h, y, x, y]
			};
	
			this.draw();
		};
	
		Circle.prototype.draw = function(){
			var pp = [];
			for(var i in this.curve){
				pp = pp.concat(this.curve[i]);
			}
	
			var p = [
				['M', this.x, this.y],
				['C', pp],
				['Z']
			];
	
			//this.path.attr({path: p});
		
			var pathStr = '';
			for(var i in p){
				pathStr += p[i].join(',');
			}
			pathStr = pathStr.replace('M,', 'M').replace('C,', 'C');
	
			path.setAttribute('d', pathStr);
		};
	
		Circle.prototype.updateTop = function(x, y){
			this.x += x;
			this.y += y;
	
			for(var i = 0; i < 2; i++){
				this.curve.top[i+i*1] += x;
				this.curve.top[i+i*1+1] += y;
			}
	
			for(var i = 1; i < 3; i++){
				this.curve.left[i+i*1] += x;
				this.curve.left[i+i*1+1] += y;
			}
	
			this.draw();
		};
	
		Circle.prototype.updateRight = function(x, y){
			for(var i = 0; i < 2; i++){
				this.curve.right[i+i*1] += x;
				this.curve.right[i+i*1+1] += y;
			}
	
			for(var i = 1; i < 3; i++){
				this.curve.top[i+i*1] += x;
				this.curve.top[i+i*1+1] += y;
			}
	
			this.draw();
		};
	
		Circle.prototype.updateBottom = function(x, y){
			for(var i = 0; i < 2; i++){
				this.curve.bottom[i+i*1] += x;
				this.curve.bottom[i+i*1+1] += y;
			}
	
			for(var i = 1; i < 3; i++){
				this.curve.right[i+i*1] += x;
				this.curve.right[i+i*1+1] += y;
			}
	
			this.draw();
		};
	
		Circle.prototype.updateLeft = function(x, y){
			for(var i = 0; i < 2; i++){
				this.curve.left[i+i*1] += x;
				this.curve.left[i+i*1+1] += y;
			}
	
			for(var i = 1; i < 3; i++){
				this.curve.bottom[i+i*1] += x;
				this.curve.bottom[i+i*1+1] += y;
			}
	
			this.draw();
		};
	
		var c = new Circle(200, 100, 180);
	
	
		var sinCurve = function(){
			this.phase = 0;
			this.speed = Math.random()*10+5;
			this.amp = 1;
		};
	
		sinCurve.prototype.update = function(){
			this.phase += this.speed;
			return Math.sin(this.phase*Math.PI/180)*this.amp;
		};
	
		var ss = [];
		for(var i = 0; i < 4; i++){
			ss[i] = new sinCurve();
		}
	
		setInterval(function(){
			c.updateTop(0, ss[0].update());
			c.updateRight(ss[1].update(), 0);
			c.updateBottom(0, ss[2].update());
			c.updateLeft(ss[3].update(), 0);
		}, 50);
	});
})(jQuery);