/*
	函数说明
	changeUser模仿google自定义搜索的搜索结果排序的动态效果，切换用户的信息
	
	实现过程
	获取所有有效元素并创建坐标数组
	点击事件时产生动画效果
	对每个元素的位置进行重排列保证顺序正确
	
	改进
	可以实现Ajax动态获取用户详细资料
*/
$(window).load(function(){
	/*测试用--头像效果*/
	var elem = $('.avatar img');
	var elem100 = $('.avatar100 img');
	var browserVer = browserVersion();
	if ($.browser.msie || $.browser.opera) {
		var invisible = $('#test > li:hidden');
		var invisible100 = $('#demo > li:not(#demo >li:visible)');
		invisible.show();
		invisible100.show();
		selectCornerElems(elem);
		selectCornerElems(elem100,100,100);
		invisible.hide();
		invisible100.hide();
	} else {
		selectCornerElems(elem);
		selectCornerElems(elem100,100,100);
	}
	changeUser('test','demo');
});

function changeUser(elem,main) {
	//初始化
	var num = 5;
	if (elem === null) return false;
	if (main === null) return false;
	var arr = [];
	var oX = 3;
	var oY = 5;
	var x = 0;
	var y = 0;
	var blankX = 70;
	var blankY = 81;
	var level = 0;
	
	var obj = $('#' + elem + "> li");
	var objRe = $('#' + elem + "> li:visible");
	var objMa = $('#' + main + "> li:visible");
	var length = objRe.length; 
	if (length % num == 0) {
		level = length/num;
	} else {
		level = parseInt(length/num) + 1;
	}
	for (var i = 0; i < level; i++) {
		y = oY + blankY*i;
		for (var j = 0; j < num; j++ ) {
			x = oX + blankX*j;
			arr.push([x,y]);
		}
	}
	for (var k = 0; k < length; k++) {
		var id = objRe.get(k).id
		$('#' + id).css({position:'absolute',left:arr[k][0],top:arr[k][1]});
	}

	
	obj.click(function(){
		
		var thisId = $(this).attr('id');
		var ids = thisId.substr(4,1);
		var infoId = objMa.attr("id");
		var infoId = infoId.substr(8,1);
		var elemInfo = "userInfo" + ids;
		var elems = "user" + infoId;
		var top = 120;
		$(this).animate({top:-top,opacity: 0},1000).fadeOut('fast');
		objMa.css({position:'absolute'}).animate({top:top,opacity: 0},1000).fadeOut('fast');
		$('#' + elemInfo).css({position:'relative',top:0,opacity:1,display:'block'});
		objMa = $('#' + elemInfo);
		objNew = $('#' + elem + '>li:not(#' + thisId + ')');
		for (var i = 0; i < objNew.length; i++) {
			var oN = objNew.get(i).id;
			$('#' + oN ).css({position:'absolute'}).animate({left:arr[i][0],top:arr[i][1]});
		}
		$('#'  + elems).animate({opacity:1}).fadeIn('fast');

	});	
}