Javascript-форум - помогите начинающему оптимизироват код

Пытаюсь стащить с google+ кружочки но написать корректно их увелечение и уменьшение не выходит, щас вроде работает пока е начинаешь по ним быстро водить.

делюсь кодом
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"  type="text/javascript"></script>
<script type="text/javascript">

	$(function(){
		$('.HO').find('.wy').css({
			top:$('.HO').height()/2-$('.HO').find('.wy').height()/2,
			left:$('.HO').width()/2-$('.HO').find('.wy').width()/2
		})
		var position = $('.HO').offset();
		position.top=31;
		position.left=31;

		$('.HO').hover(function(){

			$(this).addClass('NO-Ca qD')
			.css({'top':position.top, 'left':position.left});
			$(this).animate({
				'height':182,
				'width':182,
				'top':2,
				'left':2
			},100,function(){
				$(this).removeClass('HO OO');
			})
			.find('.wy').animate({
				'top':182/2-$(this).find('.wy').height()/2,
				'left':182/2-$(this).find('.wy').width()/2+1
			},100)


		 },function(){


			$(this).addClass('HO OO');
			$(this).animate({
				'height':125,
				'width':125,
				'left':position.left,
				'top':position.top
			},100,function(){
				$(this)
				.css({'top':2, 'left':2})
				.removeClass('NO-Ca qD')
			})
			$(this).find('.wy').animate({
				'top':125/2-$(this).find('.wy').height()/2,
				'left':125/2-$(this).find('.wy').width()/2
			},100)
		})

	})

</script>
		<style type="text/css">
.GO {
	position: relative;
	vertical-align: top;
	width: 187px;
	height: 187px;
}
.a-l-k {
    display: inline-block;
    position: relative;
}
.OO {
    background-image: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_closed.png");
}
.HO {
    background-repeat: no-repeat;
    border-radius: 63px 63px 63px 63px;
    height: 125px;
    margin: 31px;
    position: relative;
    vertical-align: top;
    width: 125px;
    z-index: 5;
}
.SS {
    background-image: url("//ssl.gstatic.com/s2/oz/images/sge/glow_only.png");
    background-repeat: no-repeat;
    height: 151px;
    margin: 18px;
    position: absolute;
    top: 0;
    width: 151px;
}
.IS {
    height: 183px;
    left: 0;
    margin: 2px;
    position: absolute;
    top: 0;
    width: 183px;
}
.wy {
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    position: relative;
    text-align: center;
    width: 88px;
}
.wy {
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
}
.Hs {
    display: block;
}
.JO {
    font-size: 16px;
    font-weight: bold;
    margin-top: 4px;
    opacity: 0.5;
}

.NO-Ca {
    background: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_open.png") no-repeat center center;
}
	
.qD {
    background-repeat: no-repeat;
    border-radius: 92px 92px 92px 92px;
    height: 183px;
    margin: 2px;
    position: relative;
    vertical-align: top;
    width: 183px;
    z-index: 2;
}
.MO {
    background-image: url("//ssl.gstatic.com/s2/oz/images/sge/new_circle_closed.png");
}
.LO-Ca {
    background-image: url("//ssl.gstatic.com/s2/oz/images/sge/new_circle_open.png");
}
.qD.sD {
    background-image: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_highlighted.png");
}
.rD.sD {
    background-image: url("//ssl.gstatic.com/s2/oz/images/sge/new_circle_highlighted.png");
}
.uN {
    cursor: url("//ssl.gstatic.com/s2/oz/images/sge/openhand_8_8.cur"), move;
    font-size: 9px;
    padding: 2px;
    position: absolute;
}
.TS {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 30px auto;
    border-radius: 15px 15px 15px 15px;
    cursor: url("//ssl.gstatic.com/s2/oz/images/sge/openhand_8_8.cur"), move;
    height: 30px;
    overflow: hidden;
    position: absolute;
    width: 30px;
}
.aU {
    cursor: url("//ssl.gstatic.com/s2/oz/images/sge/closedhand_8_8.cur"), move;
    position: absolute;
}




		</style>
	</head>
	<body>
		<div class="GO oY a-l-k">
			<div class="HO Qya jia OO" style="width: 125px; height: 125px;">
				<div class="lia"><div class="wy tV" style="left: 18px; top: 47px;">
						<span class="Hs Bw">Друзья</span><div class="JO">0</div>
					</div>
				</div>
				<div class="mia"></div>
			</div>
			<div class="y4 SS" style="display: none;"></div>
			<div class="pY"></div>
			<div class="iia"></div>
			<canvas style="display:none" class="kia IS"></canvas>
		</div>
		<div class="GO oY a-l-k">
			<div class="HO Qya jia OO" style="width: 125px; height: 125px;">
				<div class="lia"><div class="wy tV" style="left: 18px; top: 47px;">
						<span class="Hs Bw">Друзья</span><div class="JO">0</div>
					</div>
				</div>
				<div class="mia"></div>
			</div>
			<div class="y4 SS" style="display: none;"></div>
			<div class="pY"></div>
			<div class="iia"></div>
			<canvas style="display:none" class="kia IS"></canvas>
		</div>
		<div class="GO oY a-l-k">
			<div class="HO Qya jia OO" style="width: 125px; height: 125px;">
				<div class="lia"><div class="wy tV" style="left: 18px; top: 47px;">
						<span class="Hs Bw">Друзья</span><div class="JO">0</div>
					</div>
				</div>
				<div class="mia"></div>
			</div>
			<div class="y4 SS" style="display: none;"></div>
			<div class="pY"></div>
			<div class="iia"></div>
			<canvas style="display:none" class="kia IS"></canvas>
		</div>


	</body>
</html>