$.setupLoader = function() {
	$('.loading').each(function(i) {
		
		var animateArr = $(this).attr('class').split(' '),
			count = 0,
			$ul = $('<ul></ul>'),
			char = String.fromCharCode('8226');
			playLength='17',
			j = i + 1;
		
		$(this).attr('id','loader'+j);
		
		var animateClass = animateArr[1];
		var animateDir = animateArr[1];
		var newHeight = $(this).parent().parent().outerWidth();
		var animateType = animateArr[2];
		
		$(this).css({'height':newHeight,'width':newHeight});
		
		$(this).append($ul);
		var count = $(this).children('ul').children('li').length;
		
		// Draw circle path
		while (count < playLength) {
			var barH = (count + 1) * 1;
			var barW = (count + 1) * 1;
			var barM = (((playLength - count) * 1) - barH) / 2;
			var $li = $('<li>'+ char +'</li>');
			$(this).children('ul').append($li);

			
			radius = 25; //$(this).outerWidth() / 4;
			var angle = (count + 1) * 22.5;
			var fontSize =  $(this).css('fontSize'); // center x offset compensation (top-left register point)
			fontSize = fontSize.replace('px','');
			
			// Circle center position
			var centerX = $(this).outerWidth()/2 - fontSize/2 - 10; // Where is the X center of the circle on our stage
			var centerY = 300; //$(this).outerHeight()/2 - fontSize -10; // Where is the Y center of the circle on our stage'
			
			// Radian Conversion
			var radians= (angle/180) * Math.PI;
			
			// Place the instance on the circle
			var x = Math.round(centerX + Math.cos(radians) * radius);
			var y = Math.round(centerY + Math.sin(radians) * radius);
			
			// Position
			$(this).children('ul').children('li:last').css({'left':x,'top':y});
			
			count++;
			}
			
		// set gray scale colors
		for(var i = 0;i < playLength ; i++) {
			var grays;
			animateDir == 'cw' ? grays = playLength - 2 - i : grays = i - 2;
			grays = grays.toString(16);
			grays = grays.replace('-','');
			grays = '#' + grays + grays + grays;
			$(this).children('ul').children('li').eq(i).css({'color':grays});
			}
		
		});	
	}
	
$.activateLoader = function(loaderID) {
	$('.loading ul').each(function() {
		var playHead = $(this).children('.playhead').length,
	        playLength = $(this).children('li').length,
			animateArr = $(this).parent().attr('class').split(' ')
			newLeft = '',
			newTop = '';
		
		animateClass = animateArr[1];
		var animateDir = animateArr[2];

		// initiate parameters
		if ( playHead == 0) {
			$(this).children(':first').addClass('playhead');
			}
		else {
			if (animateDir == 'ccw') {
				for (var i = playLength; i >-1; i--) {
					//var newTop, newLeft;
					if (i > 0) {
						newTop = $(this).children().eq(i-1).css('top');
						newLeft = $(this).children().eq(i-1).css('left');						
						}
					else {
						newTop = $(this).children().eq(playLength-1).css('top');
						newLeft = $(this).children().eq(playLength-1).css('left');							
						}
					$(this).children().eq(i).css({'top':newTop,'left':newLeft});
					}	
				}
			else {
				for (var i = 0; i < playLength ; i++) {
					//var newTop, newLeft;
					if (i < playLength-1) {
						newTop = $(this).children().eq(i+1).css('top');
						newLeft = $(this).children().eq(i+1).css('left');						
						}
					else {
						newTop = $(this).children().eq(0).css('top');
						newLeft = $(this).children().eq(0).css('left');							
						}
					$(this).children().eq(i).css({'top':newTop,'left':newLeft});
					}
				}									
			}
		});
	}



$(document).ready(function() {
$("a.transition").click(function() {

	//$('#example').children().addClass('init');
	$('body').append('<div class="loading "><p>Initiating'+String.fromCharCode(8230)+'please wait a moment</p></div>');
	
	// Initiate & draw 'stage' for loaders
	$.setupLoader();
	loading = '.loading';
	var initLoad = setInterval("$.activateLoader('"+loading+"')", 15);

	setTimeout(function() {
		$('.loading').fadeOut('slow');
		$('body').children().removeClass('init');
		}, 4000);
	
	setTimeout(function() {
		clearInterval(initLoad);
		$('.loading').remove();
		},4000);

	});

						   })