$(document).ready(
	function()
	{
		//Creazione dinamica del div per il menu
		$('<div id="circular_menu"></div>').appendTo('body').css({'top':'-1000px','left':'-1000px'}); //Si nasconde solo dopo aver creato il menu, altrimenti i testi non vengono ruotati fino al mouseover!!!
		//$('<div id="circular_menu"></div>').css({'top':'400px','left':'400px'}).appendTo('body'); //Di default e' nascosto!
		
		//Creazione del menu
		var menu = Raphael('circular_menu',$("#circular_menu").width(),$("#circular_menu").height());
		menuCentro = new Array($("#circular_menu").width() / 2,$("#circular_menu").height() / 2);
		
		settori = new Array();
		var links = new Array('News','Prodotti','Servizi','Blog','Portfolio','Società','Contatti','Sitemap');
		urls = new Array('news.php','prodotti.php','servizi.php','blog.php','portfolio.php','societa.php','contatti.php','sitemap.php');
		var linksTextObjs = new Array();
		var step = (2/8)*Math.PI;
		/*debug*/
		//$('<div>step: '+step+' rad</div>').appendTo('body');
		/*debug*/
		
		//Otto link, quindi otto settori
		for(var a=0;a<8;a++)
		{
			//Nota, il raggio e' uguale alla distanza del centro dai bordi perche' disegnamo un cerchio.
			//Nota2: cos() e sin() accettano valori in radianti, mentre il gradiente svg in gradi. Dobbiamo fare la conversione
			var angoloGradiente = (a*step>=0 && a*step<Math.PI) ? 90 : 270;
			
			settori.push(settore(menu,menuCentro[0],menuCentro[1],menuCentro[0],a*step,(a+1)*step,{gradient:angoloGradiente+'-#526c7a-#64a0c1',stroke:'#3b4449','stroke-width':2,'stroke-linejoin':'round'}).mouseover(
				function()
				{
					this.animate({'scale': [1.37, 1.37, menuCentro[0], menuCentro[1]]}, 2000, "elastic");
					return;
				}
			).mouseout(
				function()
				{
					this.animate({'scale': [1, 1, menuCentro[0], menuCentro[1]]}, 2000, "elastic");
					return;
				}
			).click(
				function()
				{
					goToPage(settori.indexOf(this));
					return;
				}
			));
			
			//Mettiamo i testi, ruotati dell'angolo opportuno
			//La posizione dei testi sara' a meta' di ogni settore
			var testoX = menuCentro[0] + (menuCentro[0]*2/3)*Math.cos((2*a + 1)*step/2);
			var testoY = menuCentro[1] + (menuCentro[0]*2/3)*Math.sin((2*a + 1)*step/2);
			var angoloTesto = (a + 1/2)*step*180/Math.PI;
			/*debug*/
			//$('<div>angoloTesto('+a+'): '+angoloTesto+'</div>').appendTo('body');
			/*debug*/
			linksTextObjs.push(menu.text(testoX,testoY,links[a]).attr({'fill': '#FFFFFF', 'stroke': "none", 'opacity': 1, "font-family": 'Ubuntu, Arial, sans-serif', "font-size": "17px",'font-weight':'bold'}));
			//Ripetiamo l'animazione del settore sottostante, altrimenti quando si passa sopra al testo il settore ritorna a dimensioni originali
			var indiceSettore = a;
			linksTextObjs[a].rotate(angoloTesto).mouseover(
				function()
				{
					animateIn(linksTextObjs.indexOf(this));
					this.attr({'cursor':'pointer'});
					return;
				}
			).mouseout(
				function()
				{
					animateOut(linksTextObjs.indexOf(this));
					return;
				}
			).click(
				function()
				{
					goToPage(linksTextObjs.indexOf(this));
					return;
				}
			);
		}
		
		//Disegnamo il cerchio che va sopra l'intersezione dei settori
		var menuCentroCircle = menu.circle(menuCentro[0],menuCentro[1],menuCentro[0]/3).attr({'fill-opacity':1,'gradient':'r#FFA500-#9D6500','stroke':'#3b4449','stroke-width':2});
		//Inseriamo il logo (che vogliamo all'interno del cerchio, quindi avra' dimensioni massime 2/3r)
		
		var bitManWH = menuCentro[0]*2/3;
		var bitManXY = menuCentro[0] - menuCentro[0]/3;
		var bitMan = menu.image('images/bit-man.png',bitManXY,bitManXY,bitManWH,bitManWH);
		
		//Bottone per la chiusura del menu
		//Le coordinate sono relative, in modo da adattarsi ad eventuali cambiamenti del css
		var exitWH = 20;
		var exitX = $("#circular_menu").width() - exitWH - 4; //Il 4 e' per il bordo, cosi' come l'altezza viene impostata a 2 nell'istruzione seguente
		menu.rect(exitX,2,exitWH,exitWH,10).attr({'gradient':'90-#526c7a-#64a0c1','stroke':'#3b4449','stroke-width':2,'cursor':'pointer'}).click(function(){$("#circular_menu").hide();return;});
		//Mettiamo anche la X
		menu.text(exitX+exitWH/2,2+exitWH/2,'X').attr({'font-family':'Ubuntu, Arial, sans-serif','fill':'#FFFFFF','cursor':'pointer','font-size':'16px'}).click(function(){$("#circular_menu").hide();return;});
		
		//Non esiste in jQuery un modo per fare il bind alla pressione del tasto destro del mouse!
		//Bisogna implementarla manualmente
		
		document.oncontextmenu = function() {return false;}; //Prevenzione default action

		$(document).mousedown(function(e)
		{ 
			if(e.button===2) //Click tasto destro
			{
				//Otteniamo la posizione del mouse e facciamo spostare il menu a quelle coordinate prima di mostrarlo.
				//Se dovesse andare fuori dallo schermo lo facciamo apparire al bordo
				
				var menuW = $("#circular_menu").width(); //La prendiamo cosi' in modo da poter effettuare modifiche al CSS senza dover toccare questo script.
				var menuH = $("#circular_menu").height(); //La prendiamo cosi' in modo da poter effettuare modifiche al CSS senza dover toccare questo script.
				var x = e.pageX - menuW/2;
				var y = e.pageY - menuH/2;
				
				if(x + menuW  > $(window).width())
					x -= menuW/2;
				
				irisEffect(x,y);
				 
				return false; //Preveniamo il propagarsi dell'effetto
			} 
			return true; //In caso di altri click facciamo proseguire il bubbling dell'evento
		}); 
		
		return;
	}
);

function settore(canvas, cx, cy, r, angoloInizio, angoloFine, params) 
{
	r = r*2/3; //Imponiamo il raggio pari a 2/3 delle dimensioni del div che lo contiene per avere spazio per l'animazione di estensione
	
	var x1 = cx + r * Math.cos(angoloInizio),
		x2 = cx + r * Math.cos(angoloFine),
		y1 = cy + r * Math.sin(angoloInizio),
		y2 = cy + r * Math.sin(angoloFine);
	//debug
	//$('<div>angoloInizio:'+angoloInizio+' (cos:'+Math.cos(angoloInizio)+', sin:'+Math.sin(angoloInizio)+'), angoloFine:'+angoloFine+' (cos:'+Math.cos(angoloFine)+', sin:'+Math.sin(angoloFine)+'), x1:'+x1+', y1:'+y1+', x2:'+x2+', y2:'+y2+'</div>').appendTo('body');
	//debug
	//return canvas.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(angoloFine - angoloInizio > Math.PI), 0, x2, y2, "z"]).attr(params);
	return canvas.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, 0, 1, x2, y2, "z"]).attr(params);
}

function animateIn(indice)
{
	settori[indice].animate({'scale': [1.37, 1.37, menuCentro[0], menuCentro[1]]}, 2000, "elastic");
	return;
}

function animateOut(indice)
{
	settori[indice].animate({'scale': [1, 1, menuCentro[0], menuCentro[1]]}, 2000, "elastic");
	return;
}

function goToPage(indice)
{
	document.location = urls[indice];
	return;
}

indiceEspanso = 0;

function irisEffect(x,y)
{
	for(a=0;a<8;a++)
		settori[a].animate({'scale': [.8, .8, menuCentro[0], menuCentro[1]]}, 1, "linear");
	
	$("#circular_menu").css({'top':y+'px','left':x+'px'}).show();
	
	for(a=0;a<8;a++)
		setTimeout(expand,a*100);
	
	return;
}

function expand()
{
	//console.log(new Date().toString());
	settori[indiceEspanso].animate({'scale': [1, 1, menuCentro[0], menuCentro[1]]}, 2000, "backOut");
	if(indiceEspanso+1===8)
		indiceEspanso = 0;
	else
		indiceEspanso++;
	return;
}