Javascript-форум - не передаются значения из массива

доброго времени суток!

Не пугайтесь изза количества кода, ниже я опишу где проблема у меня.
Вот всё что есть:

<html>
	<head>
		<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js" type="text/javascript"></script>
	</head>
	<body>

<script>

window.onload = function () {
	var r = Raphael("holder", 800, 600),
	R = 150,
	angleVal = 0,
	drawPath = new Array(),
	rand = 90,
	valArray=[
		["text1",7187, 4960.12, "#33a1e0"],
		["text2",7165, 6074.55, "#34d0e1"],
		["text3",7031, 5075.65, "#34e1c7"],
		["text4",5995, 9319.85, "#34e1ae"],
		["text5", 9035,4699.03, "#d3e134"],
		["text6", 9185, 4291.04, "#e19c34"]];	
	for(c=0,ttl=0;c<valArray.length;c++){			//Вычисляем капитал:
		ttl += valArray[c][2];
	}
	//создаём текстовую переменную
	title = r.text(400, 300, ttl).attr({font: '35px Lucida Grande', fill: '#0b668f', "font-weight": "bold"}).toFront();
	//параметры дуг
	r.customAttributes.arc = function(value, rad, makeAir){
		var alpha = 3.6 * (value/(ttl/100)),
		angle = (360)/ttl*(makeAir),
		a = (rand-angle-alpha) * Math.PI/180,
		b = (rand-angle) * Math.PI/180,
		sx = 400 + rad * Math.cos(b),
		sy = 300 - rad * Math.sin(b),
		x = 400 + rad * Math.cos(a),
		y = 300 - rad * Math.sin(a),
		path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
		return {path: path};
	};
	for(p=0;p<valArray.length;p++){
		// создаём дуги
		drawPath[p] = r.path().attr({arc: [0, 0, 0], "stroke-width": 0, stroke: "#fff"});
		// Передаём в функцию анимированного появления дуги
		updateVal(valArray[p][2], R, angleVal, drawPath[p], valArray[p][3]);
		//Переменная отступа от начала координат
		angleVal = angleVal+valArray[p][2];
	}
	//функция анимирующая появление дуг к назначеным параметрам
	function updateVal(value, rad0, angle0, hand, color) {
		hand.animate({arc: [value, rad0, angle0], 'stroke-width': 90, stroke: color }, 1900, "<>");
	}

	// Анимировать появление к заданным параметрам			
	for(i=0;i<valArray.length;i++){
		drawPath[i].mouseover(function(){						// При наведении анимированно увеличить кнопки
		this.toFront();
		this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
		// При наведении ищменить текст
		title.stop().animate({ opacity: 0 }, 200, "<>", function(){	
			title.attr({ text: "i = "+i }).animate({ opacity: 1 }, 200, "<>");
		});
	});	
	
		drawPath[i].mouseout(function(){						// При отводе курсора анимированно вернуть размеры кнопок
		this.animate({'stroke-width': 90, opacity: .8}, 1000, "elastic");
		title.stop().animate({ opacity: 0 }, 200, '<>', function(){
			title.attr({ text: ttl }).animate({ opacity: 1 }, 200, '<>');
		});
	});
	}	
}

</script>

<div id="holder"></div>
	</body>
</html>

Вот в этом месте я стараюсь чтоб после наведения на любую кнопку, в центре выводилось её число « i », постарался записать это для каждой кнопки через цикл, но в итоге он везде выводит конечное значение i = 6.
(а хотелосьбы чтобы писал и 1, и 2, и 3,.... у каждой своё)

for(i=0;i<valArray.length;i++){
		drawPath[i].mouseover(function(){						// При наведении анимированно увеличить кнопки
		this.toFront();
		this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
		// При наведении ищменить текст
		title.stop().animate({ opacity: 0 }, 200, "<>", function(){	
			title.attr({ text: "i = "+i }).animate({ opacity: 1 }, 200, "<>");
		});
	});	
	
		drawPath[i].mouseout(function(){						// При отводе курсора анимированно вернуть размеры кнопок
		this.animate({'stroke-width': 90, opacity: .8}, 1000, "elastic");
		title.stop().animate({ opacity: 0 }, 200, '<>', function(){
			title.attr({ text: ttl }).animate({ opacity: 1 }, 200, '<>');
		});
	});
	}	
}

я могу для каждой в отдельности прописать это както так (для примера):

drawPath[0].mouseover(function(){	
		this.toFront();
		this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
		title.stop().animate({ opacity: 0 }, 200, "<>", function(){	
			title.attr({ text: "i = "+0 }).animate({ opacity: 1 }, 200, "<>");
		});
	});

drawPath[1].mouseover(function(){	
		this.toFront();
		this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
		title.stop().animate({ opacity: 0 }, 200, "<>", function(){	
			title.attr({ text: "i = "+1 }).animate({ opacity: 1 }, 200, "<>");
		});
	});

drawPath[2].mouseover(function(){	
		this.toFront();
		this.animate({"stroke-width": 120, opacity: .75}, 1000, "elastic");
		title.stop().animate({ opacity: 0 }, 200, "<>", function(){	
			title.attr({ text: "i = "+2 }).animate({ opacity: 1 }, 200, "<>");
		});
	});

.......

но это увеличит количество кода.
как мне это автоматизировать?