// SVG Graphics drawn using SemiAddict's (www.github.com/semiaddict) branch of Raphael with textpath support

$(document).ready(function(){
	
	var url_ee = "http://www.regeneris.co.uk/services/view/";
	
	//Firefox doesn't currently (v8) support letter spacing attr so we need to adjust position
	var ff = $.browser.mozilla;
	
	//Styles for SVG elements
	if ( $.client.os == 'Windows') {
		var style = {
			"font-family": '"District", helvetica, arial',
			 'font-size': '16px', 
			 stroke:'#434242',
			 'stroke-width': 0	//	windows hates fonts
		}
	} else {
		var style = {
			"font-family": '"District", helvetica, arial',
			 'font-size': '16px', 
			 stroke:'#434242',
			 'stroke-width': 1
		}		
	}
	//rollover text colors
	var textinitial = {
		stroke:'#434242'
	},
	textover = {
		stroke:'#FFF'
	},
	//in-arc text size
	smaller = {
		'font-size': '13px',
		'letter-spacing': '0.1em'
	},
	//initial arc colors
	initial = {
		stroke: 'rgba(203, 203, 204, 1)',
		'stroke-width': 18
	},
	initialtrans = {
		stroke: 'rgba(0, 0, 0, 0)',
		'stroke-width': 18
	},
	initialtransfill = {
		stroke: 'rgba(0, 0, 0, 0)',
		'stroke-width': 18,
		'fill': 'rgba(0, 0, 0, 0)'
	},
	//drop shadow
    glow = {
		width:5,  
		opactiy: 0.5, 
		offsety: 4
    },
	//animation timing
	time = 250;

	//Defines a path string for an arc with center [x,y] and radius from startAngle to endAngle
  	function arc(center, radius, startAngle, endAngle) {
	
		  function toCoords(center, radius, angle) {
		      var radians = (angle/180) * Math.PI;
		      var x = center[0] + Math.cos(radians) * radius;
		      var y = center[1] + Math.sin(radians) * radius;
		      return [x, y];
		  }
		
	      angle = startAngle;
	      coords = toCoords(center, radius, angle);
	      path = "M " + coords[0] + " " + coords[1];
	      while(angle<=endAngle) {
	          coords = toCoords(center, radius, angle);
	          path += " L " + coords[0] + " " + coords[1];
	          angle += 1;
	      }
	      return path;
	  }
	  
	  function priorities(){
		  //draw some paths
		  var priorities = Raphael(document.getElementById('priorities'), 320, 280),
		  over = {stroke:'#13616f'},
		  text = priorities.text(160,140, 'INFORM YOUR\nPRIORITIES').attr(style),
		  inner = priorities.path(arc([160, 140], 70, 0, 360)).attr(initial).attr(over),
		  
		  one =  priorities.path(arc([160, 140], 90, 30, 340)).attr(initial),
		  two = priorities.path(arc([160, 140], 110, 30, 300)).attr(initial), 
		  three = priorities.path(arc([160, 140], 130, 30, 270)).attr(initial);
		  
		  //write some text
		  if(ff){
			var text_one = priorities.textPath(arc([160, 140], 85, 205, 340),'BUSINESS PLANNING & FEASBILITY').attr(style).attr(smaller),
			text_two = priorities.textPath(arc([160, 140], 105, 213, 300),'SET STRATEGIC PRIORITIES').attr(style).attr(smaller),
		    text_three = priorities.textPath(arc([160, 140], 125, 180, 270),'ECONOMIC & SECTOR RESEARCH').attr(style).attr(smaller);
		  }else{
			var text_one = priorities.textPath(arc([160, 140], 85, 185, 340),'BUSINESS PLANNING & FEASBILITY').attr(style).attr(smaller),
		 	text_two = priorities.textPath(arc([160, 140], 105, 200, 300),'SET STRATEGIC PRIORITIES').attr(style).attr(smaller),
		    text_three = priorities.textPath(arc([160, 140], 125, 167, 270),'ECONOMIC & SECTOR RESEARCH').attr(style).attr(smaller);  
		  }
		  
		  //trigger paths
		  var trigger_inner = priorities.path(arc([160, 140], 70, 0, 360)).attr(initialtransfill),
		  trigger_one =  priorities.path(arc([160, 140], 90, 30, 340)).attr(initialtrans),
		  trigger_two = priorities.path(arc([160, 140], 110, 30, 300)).attr(initialtrans), 
		  trigger_three = priorities.path(arc([160, 140], 130, 30, 270)).attr(initialtrans);
		  
		  
		  // Rollovers
		  // Inner
		  trigger_inner.node.onmouseover = function(){  	
			this.style.cursor = 'pointer';
		  }
		  trigger_inner.node.onclick = function(){  	
				$(location).attr('href',url_ee+"inform-your-priorities");

		  }
		  
		  // One
		  trigger_one.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_one.animate(textover,time);
			one.animate(over,time);
		  }
		  trigger_one.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_one.animate(textinitial,time);
			  one.animate(initial, time);
		  }
		  trigger_one.node.onclick = function()
		  {
		  	  $(location).attr('href',url_ee+"inform-your-priorities#s3");
		  }
		  
		  // Two
		  trigger_two.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_two.animate(textover,time);
			two.animate(over,time);
		  }
		  trigger_two.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_two.animate(textinitial,time);
			  two.animate(initial, time);
		  }
		  trigger_two.node.onclick = function()
		  {
		  	  $(location).attr('href',url_ee+"inform-your-priorities#s2");
		  }
		  
		  // Three
		  trigger_three.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_three.animate(textover,time);
			three.animate(over,time);
		  }
		  trigger_three.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_three.animate(textinitial,time);
			  three.animate(initial, time);
		  }
		  trigger_three.node.onclick = function()
		  {
		  	  $(location).attr('href',url_ee+"inform-your-priorities#s1");
		  }
	  }
	
	  function performance(){
		  //draw some paths
		  var performance = Raphael(document.getElementById('performance'), 320, 280),
		  over = {stroke:'#938f32'},
		  text = performance.text(160,140, 'MEASURE YOUR\nPERFORMANCE').attr(style),
		  inner = performance.path(arc([160, 140], 70, 0, 360)).attr(initial).attr(over),  
		  
		  one = performance.path(arc([160, 140], 90, 90, 390)).attr(initial),
		  two = performance.path(arc([160, 140], 110, 90, 350)).attr(initial), 
		  three = performance.path(arc([160, 140], 130, 90, 330)).attr(initial); 
		  
		  // Write some text
		  if(ff){
		  	var text_one = performance.textPath(arc([160, 140], 85, 255, 390),'REVIEW OPERATIONS & DELIVERY').attr(style).attr(smaller),			
			text_two = performance.textPath(arc([160, 140], 105, 232, 350),'EVALUATE PROJECT PERFORMANCE').attr(style).attr(smaller),
		    text_three = performance.textPath(arc([160, 140], 125, 230, 330),'UNDERSTAND PROGRAMME IMPACTS').attr(style).attr(smaller);			
		  }else{
		  	var text_one = performance.textPath(arc([160, 140], 85, 237, 390),'REVIEW OPERATIONS & DELIVERY').attr(style).attr(smaller),			
			text_two = performance.textPath(arc([160, 140], 105, 218, 350),'EVALUATE PROJECT PERFORMANCE').attr(style).attr(smaller),
		    text_three = performance.textPath(arc([160, 140], 125, 220, 330),'UNDERSTAND PROGRAMME IMPACTS').attr(style).attr(smaller); 
		  }
		  
		  //trigger paths
		  var trigger_inner = performance.path(arc([160, 140], 70, 0, 360)).attr(initial).attr(initialtransfill),
		  trigger_one = performance.path(arc([160, 140], 90, 90, 390)).attr(initialtrans),
		  trigger_two = performance.path(arc([160, 140], 110, 90, 350)).attr(initialtrans), 
		  trigger_three = performance.path(arc([160, 140], 130, 90, 330)).attr(initialtrans); 
		  
		  // Rollovers
		  // Inner
		  trigger_inner.node.onmouseover = function(){  	
			this.style.cursor = 'pointer';
		  }
		  trigger_inner.node.onclick = function(){  	
			  $(location).attr('href',url_ee+"measure-performance");
		  }
		  
		  // One
		  trigger_one.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_one.animate(textover,time);
			one.animate(over,time);
		  }
		  trigger_one.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_one.animate(textinitial,time);
			  one.animate(initial, time);
		  }
		  trigger_one.node.onclick = function()
		  {
		  	  $(location).attr('href',url_ee+"measure-performance#s3");
		  }
		  
		  // Two
		  trigger_two.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_two.animate(textover,time);
			two.animate(over,time);
		  }
		  trigger_two.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_two.animate(textinitial,time);
			  two.animate(initial, time);
		  }
		  trigger_two.node.onclick = function()
		  {
		  	  $(location).attr('href',url_ee+"measure-performance#s2");
		  }
		  
		  // Three
		  trigger_three.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_three.animate(textover,time);
			three.animate(over,time);
		  }
		  trigger_three.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_three.animate(textinitial,time);
			  three.animate(initial, time);
		  }
		  trigger_three.node.onclick = function()
		  {
		  	  $(location).attr('href',url_ee+"measure-performance#s1");
		  }
	  }

	  function cases(){
		  //draw some paths
		  var cases = Raphael(document.getElementById('case'), 320, 280),
		  over = {stroke:'#8b2160'},
		  text = cases.text(160,140, 'DEVELOP\nYOUR CASE').attr(style),
		  inner = cases.path(arc([160, 140], 70, 0, 360)).attr(initial).attr(over),
		  
		  one = cases.path(arc([160, 140], 90,  -130, 180)).attr(initial),
		  two = cases.path(arc([160, 140], 110, -130, 130)).attr(initial), 
		  three = cases.path(arc([160, 140], 130, -130, 100)).attr(initial);
		  
		  //write some text
		  if(ff){
		  	var text_one = cases.textPath(arc([160, 140], 85,  -125, 180), "APPRAISE VALUE FOR MONEY").attr(style).attr(smaller),
			text_two = cases.textPath(arc([160, 140], 105, -125, 130), "SECURE INVESTMENT").attr(style).attr(smaller),
		    text_three = cases.textPath(arc([160, 140], 125, -125, 100), "ASSESS NEED & IMPACT").attr(style).attr(smaller);
		  }else{
		  	var text_one = cases.textPath(arc([160, 140], 85,  -125, 180), "APPRAISE VALUE FOR MONEY").attr(style).attr(smaller),
			text_two = cases.textPath(arc([160, 140], 105, -125, 130), "SECURE INVESTMENT").attr(style).attr(smaller),
		    text_three = cases.textPath(arc([160, 140], 125, -125, 100), "ASSESS NEED & IMPACT").attr(style).attr(smaller);
		  }
		  
		  //trigger paths
		  var trigger_inner = cases.path(arc([160, 140], 70, 0, 360)).attr(initial).attr(initialtransfill),
		  trigger_one = cases.path(arc([160, 140], 90,  -130, 180)).attr(initialtrans),
		  trigger_two = cases.path(arc([160, 140], 110, -130, 130)).attr(initialtrans), 
		  trigger_three = cases.path(arc([160, 140], 130, -130, 100)).attr(initialtrans);
		  
		  
		  // Rollovers
		  // Inner
		  trigger_inner.node.onmouseover = function(){  	
			this.style.cursor = 'pointer';
		  }
		  trigger_inner.node.onclick = function(){  	
			  $(location).attr('href',url_ee+"make-assess-your-case");
		  }
		  
		  // One
		  trigger_one.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_one.animate(textover,time);
			one.animate(over,time);
		  }
		  trigger_one.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_one.animate(textinitial,time);
			  one.animate(initial, time);
		  }
		  trigger_one.node.onclick = function()
		  {
		  	$(location).attr('href',url_ee+"make-assess-your-case#s3");
		  }
		  
		  // Two
		  trigger_two.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_two.animate(textover,time);
			two.animate(over,time);
		  }
		  trigger_two.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_two.animate(textinitial,time);
			  two.animate(initial, time);
		  }
		  trigger_two.node.onclick = function()
		  {
		  	$(location).attr('href',url_ee+"make-assess-your-case#s2");
		  }
		  
		  // Three
		  trigger_three.node.onmouseover = function()
		  {
			this.style.cursor = 'pointer'; 
			inner.animate(initial,time);
			text_three.animate(textover,time);
			three.animate(over,time);
		  }
		  trigger_three.node.onmouseout = function()
		  {
			  inner.animate(over,time);
			  text_three.animate(textinitial,time);
			  three.animate(initial, time);
		  }
		  trigger_three.node.onclick = function()
		  {
		  	$(location).attr('href',url_ee+"make-assess-your-case#s1");
		  }
	  }
	
	var msie = $.browser.msie;
	var vers = $.browser.version;
	if ( ( msie && vers < 9 ) )
	{
		
		//	Running IE 8 or below. Use the image maps.
		//	Bind Event Listeners for <area>
		$( 'area' ).hover(
		
			//	Mouseover
			function() {
			
				var cls = $( this ).attr( 'rel' );
				$( this ).parents( '.map' ).addClass( cls  );
				
			},
			
			//	Mouseout
			function() {
			
				var cls = $( this ).attr( 'rel' );
				$( this ).parents( '.map' ).removeClass( cls  );
				$( this ).parents( '.map' ).addClass( 'standby'  );
				
			}
		
		);
		
	} else {
	
		//	Only fire these if running a non-rubbish browser.
		//	Unfortunately IE5,6,7 and 8 support only a stoical vector system called VML which doesn't accurately
		//	render textpath's so you poor, mistrusted souls get an image map instead. But then again you probably
		//	don't mind that, because you live in 1996 and are still listening to Alanis Morisette on your Compact Disk-man.
		priorities();
		performance();
		cases();
	
	}
	  
});