/**
 * Name: 图片（列表）魔术滚动
 * Description: 图片（列表）采用等差数列方式缩进
 * Author: zhangjunfa
 * Email: zhangjunfa@gmail.com
 * Version: 1.0
 */
(function($) {
	$.fn.magicMove = function(options) {
		var settings = {
			'width' : 200,  // 列表宽度
			'height' : 200, // 列表高度
			'ratio' : 40,   // 等差比
			'speed' : 500,  // 移动速度
			'trans' : 0.6,  // 透明度
			'count' : 7,    // 显示版数
			'liclass' : 'liClickHandle' //列表属性
		};
		return this.each(function() {
			if (options) {
				$.extend(settings, options);
			}
			var id = $(this).attr("id"); // 当前容器ID
			var middleNumber = (settings.count+1)/2-1; // 显示版数中间一版序号
			var len = $("#" + id + " > ul >li").length; // 当前容器下的列表总长度
			var divWidth = 2*(settings.width*(middleNumber+1)+middleNumber*(middleNumber+1)*(-settings.ratio/2))-settings.width-(settings.count-1)*settings.ratio/2+4; // 根据列表、缩进值、显示版数计算容器的宽度
			
			/** 初始化样式 */
			$(this).width(divWidth);
			$(this).height(settings.height+2);
			$("#" + id + " > ul").css("left", (divWidth/2)+"px"); // 当前容器下的ul虚拟成“中轴线”
			$("#" + id + " > ul > li").css({filter:"alpha(opacity="+(settings.trans*100)+")",opacity:settings.trans}); // 列表透明度
			$("#" + id + " > ul > li").each(function(i){ // 为当前容器下的列表添加自定义值
				$(this).attr("number", i);
			});
			/** “画布”中间一版样式 */
			$("#" + id + " > ul > li").eq(middleNumber).css({
				width: settings.width+"px",
				height: settings.height+"px",
				filter: "alpha(opacity=100)",
				opacity: 1,
				"z-index": 100
			});
			/** 遍历列表 */
			$("#" + id + " > ul > li").each(function(i){
				var liw; // 列表宽度
				var lih; // 列表高度
				var lis; // 列表之间缩进距离
				var lim; // 列表距“中轴线”的距离 
				$(this).addClass(settings.liclass); // 为列表添加属性
				if (i>=0 && i<settings.count) { // 列表在“画布”中时
					liw = settings.width-(Math.abs(middleNumber-i))*settings.ratio;
					lih = settings.height-(Math.abs(middleNumber-i))*settings.ratio;
					lis = Math.abs(middleNumber-i)*(settings.ratio/2);
					lim = positionMiddleLine(i, settings.ratio, settings.width, middleNumber);
				} else {
					liw = 0;
					lih = 0;
					lis = Math.abs(middleNumber-settings.count)*(settings.ratio/2);
					lim = positionMiddleLine(settings.count, settings.ratio, settings.width, middleNumber);
				}
				$(this).css({
					width: liw+"px",
					height: lih+"px",
					top: ((settings.height-lih)/2)+"px"
				});
				if (i<middleNumber) { // “画布”左边
					$(this).css({left: "-"+(lim+settings.width/2-lis)+"px"});
				} else { // “画布”右边（含中间一版）
					$(this).css({left: (lim-liw+settings.width/2-lis)+"px", "z-index": 100-i});
				}
				/** 列表点击事件（含动态添加的列表） */
				$("#" + id + " > ul > ." + settings.liclass).live('click', function(){
					var clickNumber; // 点击列表的序号
					var diff; // 点击列表序号与中间列表序号的差值
					var currentNumber; // 当前列表序号
					var currentDiff; // 当前列表序号与中间列表序号的差值
					var zIndex; // 当前列表层级
					var tLeft; // 当前列表的左偏移量
					var liHtmlString = ''; // 要复制的字符串
					$("#" + id + " > ul > li").eq(middleNumber).css({filter:"alpha(opacity="+(settings.trans*100)+")",opacity:settings.trans});
					$(this).css({filter:"alpha(opacity=100)",opacity:1});
					clickNumber = parseInt($(this).attr("number"));
					diff = Math.abs(middleNumber-clickNumber);
					/** “画布”左边 */
					if (clickNumber < middleNumber) {
						for (var k=0; k<diff; k++) {
							var htmlString = $("#" + id + " ul > li").eq(len-(k+1)).html();
							liHtmlString += '<li class="'+settings.liclass+'" style="width:0px;height:0px;top:'+(settings.height/2)+'px;left:-'+(divWidth/2)+'px" number="'+(k-diff)+'">'+htmlString+'</li>';
						}
						$("#" + id + " > ul").prepend(liHtmlString); // 添加列表
						$("#" + id + " > ul > li[number]").each(function(j){
							currentNumber = parseInt($(this).attr("number"));
							currentDiff = middleNumber-currentNumber;
							$(this).attr("number", currentNumber+diff);
							/** 列表在“画布”中时 */
							if (currentNumber>=(0-diff) && currentNumber<settings.count) {
								liw = settings.width-(Math.abs(middleNumber-(currentNumber+diff)))*settings.ratio;
								lih = settings.height-(Math.abs(middleNumber-(currentNumber+diff)))*settings.ratio;
								lis = Math.abs(middleNumber-(currentNumber+diff))*(settings.ratio/2);
								lim = positionMiddleLine((currentNumber+diff),settings.ratio,settings.width,middleNumber);
								if (liw<(settings.width-settings.middleNumber*settings.ratio)) liw = 0;
								if (lih<(settings.height-settings.middleNumber*settings.ratio)) lih = 0;
								if (currentNumber<middleNumber) { // “画布”左边
									zIndex = j+1;
									tLeft = "-"+(lim+(settings.width/2)-lis)+"px";
								} else { // “画布”右边
									zIndex = 100-j;
									tLeft = (lim-liw+(settings.width/2)-lis)+"px";
								}
								/** 列表移动动画效果 */
								if (currentDiff>0 && currentDiff<diff && diff>1) { // 列表过“中轴线”时
									zIndex = 100-j;
									tLeft = (lim-liw+(settings.width/2)-lis)+"px";
									$(this).animate({
										width: settings.width+"px",
										height: settings.height+"px",
										top: "0px",
										left: -(settings.width/2)+"px"
									}, settings.speed*(currentDiff/diff))
									.animate({
										width: liw+"px",
										height: lih+"px",
										top: ((settings.height-lih)/2)+"px",
										left: tLeft,
										"z-index": zIndex
									}, settings.speed*(1-currentDiff/diff));
								} else { // 列表不过“中轴线”时
									if ((currentNumber+diff)==settings.count) {
										var _len = $("#" + id + " > ul > li").length;
										$(this).animate({
											width: liw+"px",
											height: lih+"px",
											top: ((settings.height-lih)/2)+"px",
											left: tLeft,
											"z-index": zIndex
										}, settings.spped, function(){
											$("#" + id + " > ul > li").slice(-diff).remove();
											$("#" + id + " > ul >li[number="  + middleNumber + "]").css("z-index", 999);
										});
									} else {
										$(this).animate({
											width: liw+"px",
											height: lih+"px",
											top: ((settings.height-lih)/2)+"px",
											left: tLeft,
											"z-index": zIndex
										}, settings.spped, function(){
											$("#" + id + " > ul >li[number="  + middleNumber + "]").css("z-index", 999);
										});
									}
								}
							} else {
								$(this).css({
									width: "0px",
									height: "0px",
									top: (settings.height/2)+"px",
									left: (divWidth/2)+"px"
								});
							}
						});
						return false;
					}
					/** “画布”右边 */
					else if (clickNumber > middleNumber) {
						var lastNumber = parseInt($("#" + id + " > ul > li:last").attr("number"));
						for (var k=0; k<diff; k++) {
							var htmlString = $("#" + id + " > ul > li[number="+((lastNumber+1)-len+k)+"]").html();
							liHtmlString += '<li class="'+settings.liclass+'" style="width:0px;height:0px;top:'+(settings.height/2)+'px;left:'+(divWidth/2)+'px" number="'+(lastNumber+k+1)+'">'+htmlString+'</li>';
						}
						$("#" + id + " > ul").append(liHtmlString); // 添加列表
						$("#" + id + " > ul > li[number]").each(function(j){
							currentNumber = parseInt($(this).attr("number"));
							currentDiff = currentNumber-middleNumber;
							$(this).attr("number", currentNumber-diff);
							
							/** 列表在画布中时 */
							if (currentNumber>=0 && currentNumber<settings.count+diff) {
								liw = settings.width-(Math.abs(middleNumber-(currentNumber-diff)))*settings.ratio;
								lih = settings.height-(Math.abs(middleNumber-(currentNumber-diff)))*settings.ratio;
								lis = Math.abs(middleNumber-(currentNumber-diff))*(settings.ratio/2); // 图片之间缩进距离
								lim = positionMiddleLine((currentNumber-diff),settings.ratio,settings.width,middleNumber); //列表距中间的距离
								if (liw<(settings.width-middleNumber*settings.ratio)) liw=0;
								if (lih<(settings.height-middleNumber*settings.ratio)) lih=0;
								if (currentNumber<=middleNumber) { // “画布”左边（含中间模块）
									zIndex = j+1;
									tLeft = "-"+(lim+(settings.width/2)-lis)+"px";
								} else { // “画布”右边
									zIndex = 100-j;
									tLeft = (lim-liw+(settings.width/2)-lis)+"px";
								}
								/** 列表移动动画 */
								if (currentDiff>0 && currentDiff<diff && diff>1) { // 列表过“中轴线”时
									zIndex = j+1;
									tLeft = "-"+(lim+(settings.width/2)-lis)+"px";
									$(this).animate({
										width: settings.width+"px",
										height: settings.height+"px",
										top: "0px",
										left: -(settings.width/2)+"px"
									}, settings.speed*(currentDiff/diff))
									.animate({
										width: liw+"px",
										height: lih+"px",
										top: ((settings.height-lih)/2)+"px",
										left: tLeft,
										"z-index": zIndex
									}, settings.speed*(1-(currentDiff/diff)));
								} else { // 列表不过“中轴线”时
									if ((currentNumber+1)==diff) {
										$(this).animate({
											width: liw+"px",
											height: lih+"px",
											top: ((settings.height-lih)/2)+"px",
											left: tLeft,
											"z-index": zIndex
										}, settings.speed, function(){
											$("#" + id + " > ul > li").slice(0, diff).remove();
										});
									} else {
										$(this).animate({
											width: liw+"px",
											height: lih+"px",
											top: ((settings.height-lih)/2)+"px",
											left: tLeft,
											"z-index": zIndex
										}, settings.speed);
									}
								}
							} else {
								$(this).css({width:"0px",height:"0px",top:(settings.height/2)+"px",left:(divWidth/2)+"px"});
							}
						});
						return false;
					}
				});
			});
		});
		/**
		 * 获取列表距“中轴线”的距离
		 *
		 * @params int a 列表序号
		 * @params int b 等差比
		 * @params int c 最高值
		 * @params int d 中间一版序号
		 */
		function positionMiddleLine(a,b,c,d){
			var diff = Math.abs(d-a); // 计算差值
			var aliw = c-(Math.abs(d-a))*b; // 当前列表宽度
			return ((aliw+c)/2)*(diff+1)-c;
		}
	}
})(jQuery);