$(document).ready(function() {
 loader(); loader2();
});

var loader = function() {
	var sectorsCount = 20,
	color = "#0269AB",
	width = 5,
	r1 = 25,
	r2 = 50,
	cx = r2 + width,
	cy = r2 + width,
	r = Raphael('loader', r2 * 2 + width * 2, r2 * 2 + width * 2),
	
	sectors = [],
	opacity = [],
	beta = 2 * Math.PI / sectorsCount,
	
	pathParams = {stroke: color, "stroke-width": width, "stroke-linecap": "round"};
	Raphael.getColor.reset();
	for (var i = 0; i < sectorsCount; i++) {
		var alpha = beta * i - Math.PI / 2,
		cos = Math.cos(alpha),
		sin = Math.sin(alpha);
		opacity[i] = i / sectorsCount;
		sectors[i] = r.path([["M", cx + r1 * cos, cy + r1 * sin], ["L", cx + r2 * cos, cy + r2 * sin]]).attr(pathParams);
	}
	var tick;
	(function ticker() {
		opacity.unshift(opacity.pop());
		for (var i = 0; i < sectorsCount; i++) {
			sectors[i].attr("opacity", opacity[i]);
		}
		r.safari();
		tick = setTimeout(ticker, 1000 / sectorsCount);
	})();
	return function () {
		clearTimeout(tick);
		r.remove();
	};
};
	
var	loader2 = function() {
	var sectorsCount = 40,
	color = "#0269AB",
	width = 5,
	r1 = 5,
	r2 = 30,
	cx = r2 + width,
	cy = r2 + width,
	r = Raphael('loader', 100, 60),
	
	sectors = [],
	opacity = [],
	beta = 2 * Math.PI / sectorsCount,
	
	pathParams = {stroke: color, "stroke-width": width, "stroke-linecap": "square"};
	Raphael.getColor.reset();
	for (var i = 0; i < sectorsCount; i++) {
		var alpha = beta * i - Math.PI,
		sin = Math.sin(alpha);
		opacity[i] = 0.5 + (i * sin / sectorsCount);
		sectors[i] = r.path([["M", 7 * (i + 1), r1], ["L", 7 * (i + 1), r2]]).attr(pathParams);
	}
	var tick;
	(function ticker() {
		opacity.unshift(opacity.pop());
		for (var i = 0; i < sectorsCount; i++) {
			sectors[i].attr("opacity", opacity[i]);
		}
		r.safari();
		tick = setTimeout(ticker, 1500 / sectorsCount);
	})();
	return function () {
		clearTimeout(tick);
		r.remove();
	};
}