// var scaler=Scaler('bg'),els=$('#bg').children(),width=100/els.length;

var scaler=Scaler('bg'),els=$('#bg').children(),height=100/els.length;

var float=$('<span />').css({position:'absolute',color:'#fff',zIndex:2});
var div=$('<div/>').css({position:'absolute',left:0,top:0,marginRight:-20,width:'100%'});

// div.width(els.css({float:'left',width:width+'%'}).length+'00%').append(els);

div.height(els.css({float:'left',height:height+'%'}).length+'00%').append(els);


(function(){

	var move=function(e){
			float[0].style.top=(e=e||window.event).clientX+20+'px';
			float[0].style.left=e.clientY+20+'px';
		},
		swap=function(e){
//			var key=e.type=='click'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
//			if(key>36&&key<41)div.animate({left:(scaler(key>38?'+1':'-1').to*-1)+'00%'});	//swap with animation
		}

	// $(window).bind('keydown',swap);
	$('#bg').bind('mousemove',move).bind('click',swap).append(div,float);


	$('.nav').find('a').click(function(){
		div.animate({top:(scaler($(this).attr('rel')-1).to*-1)+'00%'},700);	//swap with animation
	})

})();