/**
 * vmc slider v1.0.0 图片轮播插件
 * 维米客网页工作室
 * http://www.vomoc.com/vmc/slider/
 * vomoc@qq.com
 * 2015/06/29
 **/
;
(function($, undefined) {
	var datakey = 'vomoc';
	var ie6 = !-[1, ] && !window.xmlhttprequest;
	var effects = {
		'fade': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			node.item.eq(the.index).css({
				display: 'none',
				zindex: 2
			}).fadein(opts.speed, function() {
				the._aftertransfer();
			});
		}
	};
	//**************************************************************************************************************
	// 插件
	$.fn.vmcslider = function(settings) {
		var run = $.type(settings) === 'string',
			args = [].slice.call(arguments, 1);
		if (!this.length) return;
		return this.each(function() {
			var $element = $(this),
				instance = $element.data(datakey);
			if (run && settings.charat(0) !== '_' && instance) {
				vmcslider.prototype[settings] && vmcslider.prototype[settings].apply(instance, args);
			} else if (!run && !instance) {
				instance = new vmcslider($element, settings);
				instance._init();
				$element.data(datakey, instance);
			}
		});
	};
	//**************************************************************************************************************
	// 效果插件
	$.vmcslidereffects = function() {
		if ($.isplainobject(arguments[0])) {
			effects = $.extend({}, effects, arguments[0]);
		} else {
			effects[arguments[0]] = arguments[1];
		}
	};
	//**************************************************************************************************************
	// 构造函数
	var vmcslider = function($element, settings) {
		var the = this;
		the.options = $.extend({}, the.options, settings);
		the.node = {
			elem: $element
		};
		the.index = 0;
		the.effectindex = 0;
		the.animatestatus = false;
	};
	//**************************************************************************************************************
	// 配置参数
	vmcslider.prototype.options = {
		width: 1280,
		height: 450,
		gridcol: 10,
		gridrow: 5,
		gridvertical: 20,
		gridhorizontal: 10,
		autoplay: true,
		ascending: true,
		effects: ['fade'],
		ie6tidy: false,
		random: false,
		duration: 4000,
		speed: 900
	};
	//**************************************************************************************************************
	// 初始化
	vmcslider.prototype._init = function() {
		var the = this,
			node = the.node,
			opts = the.options;
		the._create();
		the._setsize();
		the._bind();
		node.item.eq(the.index).show();
		node.button.eq(the.index).addclass('vui-button-cur');
		if (true === opts.autoplay) {
			$(window).on('load', function() {
				the.time = settimeout(function() {
					if (true === opts.ascending) {
						the._next();
					} else {
						the._prev();
					}
				}, opts.duration);
			});
		}
	};
	//**************************************************************************************************************
	// 创建
	vmcslider.prototype._create = function() {
		var the = this,
			node = the.node,
			opts = the.options,
			gridwidth, gridheight;
		node.mimic = $('<div class="vui-slider"></div>');
		node.items = $('<div class="vui-items"></div>').appendto(node.mimic);
		node.buttons = $('<div class="vui-buttons"></div>').appendto(node.mimic);
		node.prev = $('<div class="vui-prev"></div>').appendto(node.mimic);
		node.next = $('<div class="vui-next"></div>').appendto(node.mimic);
		node.transfer = $('<div class="vui-transfer"></div>').appendto(node.mimic);
		node.elem.children().each(function() {
			$('<div class="vui-item"></div>').append($(this)).appendto(node.items);
			$('<div class="vui-button"></div>').appendto(node.buttons);
		});
		node.item = node.items.children();
		node.button = node.buttons.children();
		node.elem.replacewith(node.mimic);
		// 创建舞台
		the.stagehtml = ['', '', ''];
		gridwidth = opts.width / opts.gridcol;
		gridheight = opts.height / opts.gridrow;
		for (var i = 0; i < opts.gridcol * opts.gridrow; i++) {
			var top = gridheight * math.floor(i / opts.gridcol);
			var left = gridwidth * (i % opts.gridcol);
			the.stagehtml[0] += '<div style="position:absolute;top:' + top + 'px;left:' + left + 'px;';
			the.stagehtml[0] += 'width:' + gridwidth + 'px;height:' + gridheight + 'px;background-position:-' + left + 'px -' + top + 'px;"></div>';
		}
		gridheight = opts.height / opts.gridhorizontal;
		for (var i = 0; i < opts.gridhorizontal; i++) {
			the.stagehtml[1] += '<div style="position:absolute;top:' + (gridheight * i) + 'px;left:0;';
			the.stagehtml[1] += 'width:' + opts.width + 'px;height:' + gridheight + 'px;background-position:0 -' + (gridheight * i) + 'px;"></div>';
		}
		gridwidth = opts.width / opts.gridvertical;
		for (var i = 0; i < opts.gridvertical; i++) {
			the.stagehtml[2] += '<div style="position:absolute;top:0;left:' + (gridwidth * i) + 'px;';
			the.stagehtml[2] += 'width:' + gridwidth + 'px;height:' + opts.height + 'px;background-position:-' + (gridwidth * i) + 'px 0;"></div>';
		}
	};
	//**************************************************************************************************************
	// 设置尺寸
	vmcslider.prototype._setsize = function() {
		var the = this,
			node = the.node,
			opts = the.options;
		node.mimic.width(opts.width).height(opts.height);
		node.buttons.css({
			left: (opts.width - node.buttons.width()) / 2
		});
	};
	//**************************************************************************************************************
	// 绑定事件
	vmcslider.prototype._bind = function() {
		var the = this,
			node = the.node;
		node.button.on('click', function() {
			if (false === the.animatestatus) {
				cleartimeout(the.time);
				the.index = $(this).index();
				the._play();
			}
		});
		node.prev.add(node.next).hover(function() {
			$(this).addclass('vui-sidebutton-hover');
		}, function() {
			$(this).removeclass('vui-sidebutton-hover');
		}).on('click', function() {
			if (false === the.animatestatus) {
				cleartimeout(the.time);
				if ($(this).hasclass('vui-next')) {
					the._next();
				} else {
					the._prev();
				}
			}
		});
	};
	//**************************************************************************************************************
	// 播放
	vmcslider.prototype._play = function() {
		var the = this,
			node = the.node,
			opts = the.options;
		node.button.eq(the.index).addclass('vui-button-cur').siblings().removeclass('vui-button-cur');
		if (opts.effects.length) {
			the.animatestatus = true;
			node.transfer.children().stop(true);
			effects[the._geteffect()].call(the);
		} else {
			the._aftertransfer();
		}
	};
	//**************************************************************************************************************
	// 转场效果结束
	vmcslider.prototype._aftertransfer = function() {
		var the = this,
			node = the.node,
			opts = the.options;
		node.transfer.hide();
		node.item.css('zindex', 1).eq(the.index).show().siblings().hide();
		the.animatestatus = false;
		if (true === opts.autoplay) {
			the.time = settimeout(function() {
				if (true === opts.ascending) {
					the._next();
				} else {
					the._prev();
				}
			}, opts.duration);
		}
	};
	//**************************************************************************************************************
	// 设置舞台
	vmcslider.prototype._setstage = function(stage) {
		var the = this,
			node = the.node;
		the.url = node.item.eq(the.index).find('img')[0].src;
		node.transfer.html(the.stagehtml[stage]).show().children().css({
			backgroundimage: 'url(' + the.url + ')'
		});
	};
	//**************************************************************************************************************
	// 上一张
	vmcslider.prototype._prev = function() {
		var the = this,
			node = the.node;
		the.index--;
		if (the.index < 0) {
			the.index = node.item.length - 1;
		}
		the._play();
	};
	//**************************************************************************************************************
	// 下一张
	vmcslider.prototype._next = function() {
		var the = this,
			node = the.node;
		the.index++;
		if (the.index >= node.item.length) {
			the.index = 0;
		}
		the._play();
	};
	//**************************************************************************************************************
	// 获取转场效果名称
	vmcslider.prototype._geteffect = function() {
		var the = this,
			opts = the.options;
		if (ie6 && opts.ie6tidy) {
			return 'fade';
		} else {
			var i = 0;
			if (opts.random === true) {
				i = math.floor(opts.effects.length * math.random());
			} else {
				i = the.effectindex;
				the.effectindex++;
				if (the.effectindex >= opts.effects.length) {
					the.effectindex = 0;
				}
			}
			return opts.effects[i];
		}
	};
	//**************************************************************************************************************
	$.vmcslidereffects({
		'fadetopleft': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(0);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var x = i % opts.gridcol;
				var y = math.floor(i / opts.gridcol);
				var delay = ((y + 1) / opts.gridrow + (x + 1) / opts.gridcol) / 2;
				delay = opts.speed / 3 * 2 * delay;
				$(this).delay(delay).animate({
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'fadebottomright': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(0);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var x = i % opts.gridcol;
				var y = math.floor(i / opts.gridcol);
				var delay = 1 - (y / opts.gridrow + x / opts.gridcol) / 2;
				delay = opts.speed / 3 * 2 * delay;
				$(this).delay(delay).animate({
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		},
		'fadeleft': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (i + 1);
				$(this).delay(delay).animate({
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'faderight': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (opts.gridvertical - i);
				$(this).delay(delay).animate({
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		},
		'fadetop': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(1);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridhorizontal * (i + 1);
				$(this).delay(delay).animate({
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'fadebottom': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(1);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridhorizontal * (opts.gridhorizontal - i);
				$(this).delay(delay).animate({
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		},
		'blindstopleft': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(0);
			node.transfer.children().css({
				width: 0,
				height: 0,
				opacity: 0
			}).each(function(i) {
				var x = i % opts.gridcol;
				var y = math.floor(i / opts.gridcol);
				var delay = ((y + 1) / opts.gridrow + (x + 1) / opts.gridcol) / 2;
				delay = opts.speed / 3 * 2 * delay;
				$(this).delay(delay).animate({
					width: opts.width / opts.gridcol,
					height: opts.height / opts.gridrow,
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'blindsbottomright': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(0);
			node.transfer.children().css({
				width: 0,
				height: 0,
				opacity: 0
			}).each(function(i) {
				var x = i % opts.gridcol;
				var y = math.floor(i / opts.gridcol);
				var delay = 1 - (y / opts.gridrow + x / opts.gridcol) / 2;
				delay = opts.speed / 3 * 2 * delay;
				$(this).delay(delay).animate({
					width: opts.width / opts.gridcol,
					height: opts.height / opts.gridrow,
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		},
		'blindsleft': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				width: 0,
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (i + 1);
				$(this).delay(delay).animate({
					width: opts.width / opts.gridvertical,
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'blindsright': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				width: 0,
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (opts.gridvertical - i);
				$(this).delay(delay).animate({
					width: opts.width / opts.gridvertical,
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		},
		'blindstop': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(1);
			node.transfer.children().css({
				height: 0,
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridhorizontal * (i + 1);
				$(this).delay(delay).animate({
					height: opts.height / opts.gridhorizontal,
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'blindsbottom': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(1);
			node.transfer.children().css({
				height: 0,
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridhorizontal * (opts.gridhorizontal - i);
				$(this).delay(delay).animate({
					height: opts.height / opts.gridhorizontal,
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		},
		'mosaic': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			var max = 0;
			var index = 0;
			the._setstage(0);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 2 * math.random();
				if (delay > max) {
					max = delay;
					index = $(this).index();
				}
				$(this).delay(delay).animate({
					opacity: 1
				}, opts.speed / 2, 'linear');
			}).eq(index).queue(function() {
				the._aftertransfer();
			});
		},
		'bomb': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			var max = 0;
			var index = 0;
			var gridwidth = opts.width / opts.gridcol;
			var gridheight = opts.height / opts.gridrow;
			the._setstage(0);
			node.transfer.children().css({
				top: (opts.height - gridheight) / 2,
				left: (opts.width - gridwidth) / 2,
				opacity: 0
			}).each(function(i) {
				var x = i % opts.gridcol;
				var y = math.floor(i / opts.gridcol);
				var top = gridheight * y;
				var left = gridwidth * x;
				var delay = opts.speed / 2 * math.random();
				if (delay > max) {
					max = delay;
					index = $(this).index();
				}
				$(this).delay(delay).animate({
					top: top,
					left: left,
					opacity: 1
				}, opts.speed / 2);
			}).eq(index).queue(function() {
				the._aftertransfer();
			});
		},
		'fumes': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(0);
			node.transfer.children().css({
				width: opts.width / opts.gridcol * 2,
				height: opts.height / opts.gridrow * 2,
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / node.transfer.children().length * (i + 1);
				$(this).delay(delay).animate({
					width: opts.width / opts.gridcol,
					height: opts.height / opts.gridrow,
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'interlaceleft': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (i + 1);
				$(this).css({
					top: i % 2 > 0 ? -opts.height : opts.height
				}).delay(delay).animate({
					top: 0,
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'interlaceright': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (opts.gridvertical - i);
				$(this).css({
					top: i % 2 > 0 ? -opts.height : opts.height
				}).delay(delay).animate({
					top: 0,
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		},
		'curtainleft': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				height: 0,
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (i + 1);
				$(this).delay(delay).animate({
					top: 0,
					height: opts.height,
					opacity: 1
				}, opts.speed / 3);
			}).last().queue(function() {
				the._aftertransfer();
			});
		},
		'curtainright': function() {
			var the = this,
				node = the.node,
				opts = the.options;
			the._setstage(2);
			node.transfer.children().css({
				height: 0,
				opacity: 0
			}).each(function(i) {
				var delay = opts.speed / 3 * 2 / opts.gridvertical * (opts.gridvertical - i);
				$(this).delay(delay).animate({
					top: 0,
					height: opts.height,
					opacity: 1
				}, opts.speed / 3);
			}).first().queue(function() {
				the._aftertransfer();
			});
		}
	});
	//**************************************************************************************************************
})(jquery);