$(window).load(function() {

	$(".picchange1").picchange({
		animatetime : 1000,		//背景图片动画切换时间,默认 1000（毫秒）
		imgswitchtime : 5000, 	//背景图片切换间隔时间,默认 5000（毫秒）
		animateeffect : 0,		//效果，默认 0随机，1淡入淡出，2缩小，3放大，4左移，5右移，6上移，7下移，8下入，9上入，10左入，11右入;
		matchingarea: true, 	//图片匹配显示区域，true|false
		button : "thumb" //显示按钮, "num"(默认)数字页码|"thumb"图片按钮|"dot"点
	});

	$(".picchange2").picchange({
		animateeffect : 3,
		button : "num"
	});

	$(".picchange3").picchange({
		animateeffect : 4,
		button : "dot"
	});

	$(".picchange4").picchange({
		animateeffect : 7,
		button : "num"
	});

	$(".picchange5").picchange({
		animateeffect : 0,
		button : "num"
	});
	

});


/* 
picchange 0.94 图片切换
copyright (c) 2014 zhibinpu
date: 2014-12-31
jquery-1.12.4.min.js
*/

(function($) {
	$.fn.picchange = function(options) {
		var defaults = {
			animatetime : 1000,		//背景图片动画切换时间,默认 1000（毫秒）
			imgswitchtime : 5000, 	//背景图片切换间隔时间,默认 5000（毫秒）
			animateeffect : 0,		//效果，默认 0随机，1淡入淡出，2缩小，3放大，4左移，5右移，6上移，7下移，8下入，9上入，10左入，11右入;
			matchingarea: true, 	//图片匹配显示区域，true|false
			button : "dot" //显示按钮, "num"(默认)数字页码|"thumb"图片按钮|"dot"点
		}

		var options = $.extend(defaults, options);

		var $obj = this;
		var animatetime = options.animatetime;
		var imgswitchtime = options.imgswitchtime+animatetime;
		var animateeffect = options.animateeffect;
		var matchingarea = options.matchingarea;
		var myinterval;

		//显示区域
		var showarea = {
			width: $obj.width(),
			height: $obj.height(),
			ratio: $obj.width()/$obj.height()
		}

		//图片列表
		var piclist = {
			$obj: null,
			now: 0,
			next: 1,
			length: 0,
			left:[],
			top:[],
			width:[],
			height:[],
			ratio:[],
			src: [],
			title: [],
			href: []
		}

		//标题
		var title = {
			$obj: null
		}

		//按钮
		var button = {
			$obj: null
		}

		//图片切换效果
		var effect = {
			eade : function(){
				piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", opacity: 0}).animate({opacity: 1}, animatetime);
			},
			zoomin : function(){
				var top = showarea.height/2;
				var left = showarea.width/2;
				piclist.$obj.eq(piclist.now).animate({opacity: 0, width: 0, height: 0, top: top, left: left}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.now).find("img").animate({width: 0, height: 0}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", opacity: 0}).animate({opacity: 1}, animatetime);
			},
			zoomout : function(){
				var p = 0.5;
				var width = piclist.width[piclist.now]*p+piclist.width[piclist.now];
				var height = piclist.height[piclist.now]*p+piclist.height[piclist.now];
				var top = -(height-showarea.height)/2;
				var left = -(width-showarea.width)/2;
				piclist.$obj.eq(piclist.now).animate({opacity: 0, width: width, height: height, top: top, left: left}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.now).find("img").animate({width: width, height: height}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", opacity: 0}).animate({opacity: 1}, animatetime);
			},
			moveleft : function(){
				var left = showarea.width;
				var left1 = piclist.left[piclist.next];
				piclist.$obj.eq(piclist.now).animate({ left: -left}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", left: left}).animate({ left: left1}, animatetime);
			},
			moveright : function(){
				var left = showarea.width;
				var left1 = piclist.width[piclist.next];
				var left2 = piclist.left[piclist.next];
				piclist.$obj.eq(piclist.now).animate({ left: left}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", left: -left1}).animate({ left: left2}, animatetime);
			},
			movetop : function(){
				var top = showarea.height;
				var top1 = piclist.height[piclist.now];
				var top2 = piclist.top[piclist.next];
				piclist.$obj.eq(piclist.now).animate({ top: -top1}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", top: top}).animate({ top: top2}, animatetime);
			},
			movedown : function(){
				var top = showarea.height;
				var top1 = piclist.height[piclist.next];
				var top2 = piclist.top[piclist.next];
				piclist.$obj.eq(piclist.now).animate({ top: top}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", top: -top1}).animate({ top: top2}, animatetime);
			},
			slidedown : function(){
				var top = showarea.height;
				var top1 = piclist.top[piclist.next];
				piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", top: top, opacity: 0}).animate({opacity: 1, top: top1}, animatetime);
			},
			slideup : function(){
				var top = showarea.height;
				var top1 = piclist.height[piclist.next];
				var top2 = piclist.top[piclist.next];
				piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", top: -top1, opacity: 0}).animate({opacity: 1, top: top2 }, animatetime);
			},
			slideleft : function(){
				var left = showarea.width;
				var left1 = piclist.width[piclist.next];
				var left2 = piclist.left[piclist.next];
				piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", left: -left1, opacity: 0}).animate({opacity: 1, left: left2}, animatetime);
			},
			slideright : function(){
				var left = showarea.width;
				var left1 = piclist.left[piclist.next];
				piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish);
				piclist.$obj.eq(piclist.next).css({"display": "block", left: left, opacity: 0}).animate({opacity: 1, left: left1}, animatetime);
			}
		}

		//执行主程序
		main();

		//主程序
		function main() {

			//初始化操作
			loaddata();
			loadpiclist();
			resetpiclistwh();
			setpiclistpos();
			loadtitle();
			loadbutton();

			//显示
			showpic();
			showtitle();
			showbutton();

			if( piclist.length > 1){
				//添加鼠标点击事件
				button.$obj.find("span").bind("click", clickbutton);
				//运行切换效果
				myinterval = setinterval(change, imgswitchtime);
			}

			resize();

		}

		//初始化图片切换数据
		function loaddata() {
			$obj.find("li").each(function() {
				var imgsrc = $(this).find("img").attr("src");
				if( imgsrc != "/" && imgsrc != undefined && imgsrc != ""){
					piclist.width.push($(this).find("img").width());
					piclist.height.push($(this).find("img").height());
					piclist.src.push($(this).find("img").attr("src"));
					piclist.title.push($(this).text());
					piclist.href.push($(this).find("a").attr("href"));
					piclist.ratio.push($(this).find("img").width()/$(this).find("img").height());
					piclist.length ++;
				}
			});
			$obj.empty();
		}

//====================================================图片相关=========================================================

		//载入图片
		function loadpiclist() {
			//写入图片区域
			$obj.append(function() {
				cont = '<div class="picchangepiclist">';
				for (i = 0; i < piclist.length; i++) {
					if(piclist.href[i] == undefined || piclist.href[i] == "#" ){
						cont += '<div><img src="' + piclist.src[i] + '" /></div>';
					}else{
						cont += '<div><a href="' + piclist.href[i] + '"><img src="' + piclist.src[i] + '" /></a></div>';
					}
				}
				cont += '</div>';
				return cont;
			});
			//定义图片列表对象
			piclist.$obj = $obj.find(".picchangepiclist > div");
		}

		//重新设置图片宽高
		function resetpiclistwh(){

			if (matchingarea == true) {

				for(i=0; i<piclist.length; i++){

					if (piclist.ratio[i] > showarea.ratio) {
						piclist.width[i] = showarea.height * piclist.ratio[i];
						piclist.height[i] = showarea.height;
					} else {
						piclist.width[i] = showarea.width;
						piclist.height[i] = showarea.width / piclist.ratio[i];
					}

					piclist.$obj.eq(i).find("img").css({
						"width": parseint(piclist.width[i]),
						"height": parseint(piclist.height[i])
					});
				}

			}
		}

		//设置图片位置
		function setpiclistpos(){

			for(i=0; i<piclist.length; i++){

				piclist.left[i] = parseint( (showarea.width - piclist.width[i]) / 2 );
				piclist.top[i] = parseint( (showarea.height - piclist.height[i]) / 2 );

				piclist.$obj.eq(i).css({
					"left": piclist.left[i],
					"top": piclist.top[i]
				});
			}

		}

		//展示当前图片
		function showpic(){
			piclist.$obj.eq(piclist.now).css("display", "block");
		}

//====================================================标题相关=========================================================

		//载入标题
		function loadtitle () {
			$obj.append('<div class="picchangetitle"></div>');
			title.$obj = $obj.find(".picchangetitle");
		}

		//文字切换效果
		function showtitle(){
			title.$obj.slideup(400, function(){title.$obj.text(piclist.title[piclist.now]);});
			title.$obj.slidedown();
		}

//====================================================按钮相关=========================================================

		//载入按钮
		function loadbutton(){
			if(options.button == "thumb"){
				loadbtnthumb();
			}else if(options.button == "num"){
				loadbtnnum();
			}else if(options.button == "dot"){
				loadbtndot();
			}else{
				alert("button参数错误：num|thumb|dot");
			}
		}

		//载入数字页码按钮
		function loadbtnnum(){
			$obj.append(function(){
				cont = '<div class="picchangebtnnum">';
				for(i=0; i<piclist.length; i++){
					cont += "<span>"+(i+1)+"</span>";
				}
				cont += "</div>";
				return cont;
			});
			button.$obj = $obj.find(".picchangebtnnum");
		}

		//载入页码点
		function loadbtndot(){
			$obj.append(function(){
				cont = '<div class="picchangebtndot">';
				for(i=0; i<piclist.length; i++){
					cont += "<span></span>";
				}
				cont += "</div>";
				return cont;
			});
			button.$obj = $obj.find(".picchangebtndot");
		}

		//载入图片页码按钮
		function loadbtnthumb(){
			$obj.append(function(){
				cont = '<div class="picchangebtnthumb">';
				for(i=0; i<piclist.length; i++){
					cont += "<span><img src='"+ piclist.src[i]+"'/></span>";
				}
				cont += "</div>";
				return cont;
			});
			button.$obj = $obj.find(".picchangebtnthumb");

			setbtnthumbpos();
			setbtnthumb();
		}


		//图片按钮居中
		function setbtnthumbpos(){
			if(options.button == "thumb"){
				var width = button.$obj.width();
				button.$obj.css({
					"left" : (showarea.width - width)/2
				});
			}
		}

		//图片按钮缩略图设置
		function setbtnthumb(){

			var $img = button.$obj.find("img");
			var fratio = button.$obj.find("span").width()/button.$obj.find("span").height();
			var fwidth = button.$obj.find("span").width();
			var fheight = button.$obj.find("span").height();
			var iwidth, iheight;

			//设置按钮图片宽高
			for(i=0; i<$img.length; i++){
				var iwidth = $img.eq(i).width();
				var iheight = $img.eq(i).height();
				var iratio = $img.eq(i).width()/$img.eq(i).height();

				if (iratio > fratio) {
					iwidth = fheight * iratio;
					iheight = fheight;
				} else {
					iwidth = fwidth;
					iheight = fwidth / iratio;
				}

				var ileft = (fwidth - iwidth) / 2 ;
				var itop = (fheight - iheight) / 2 ;

				$img.eq(i).css({
					"width": parseint(iwidth),
					"height": parseint(iheight),
					"left": parseint(ileft),
					"top": parseint(itop)
				});

			}
		}


		//数字按钮切换效果
		function showbutton(){
			button.$obj.find("span").removeclass("current"),
			button.$obj.find("span:eq("+piclist.now+")").addclass("current");
		}

		//动画切换时点击无效
		function lockbutton(){
			button.$obj.find("span").unbind("click");
			settimeout(function(){button.$obj.find("span").bind("click",clickbutton)}, animatetime);
		}

		//鼠标点击按钮效果
		function clickbutton(){
			if( $(this).index() != piclist.now ){
				lockbutton();
				piclist.next = $(this).index();
				clearinterval(myinterval);
				change();
				myinterval = setinterval(change, imgswitchtime);
			}
		}



		
//====================================================其他=========================================================

		//执行切换效果
		function change(){
			lockbutton();
			selecteffect(animateeffect);
			now();
			showtitle();
			showbutton();
		}

		//计算当前图片
		function now(){
			piclist.now = piclist.next;
			if(piclist.length-1>piclist.next){
				piclist.next++;
			}else{
				piclist.next = 0;
			}
		}

		//选择切换效果
		function selecteffect(i){
			var _effect = [''];
			for(var key in effect){  
				_effect.push(key);
			}  
			var _efflength = _effect.length-1;
			if(i == 0 || i > _efflength){
				i = math.ceil(math.random()*_efflength);
			}
			eval("effect."+_effect[i]+"()");



		}

		//动画完成后执行
		function effectfinish(){
			$(this).attr("style" , "");
			resetpiclistwh();
			setpiclistpos();
		}

		//窗口改变大小时
		function resize(){
			$(window).resize(function(){
				showarea.width = $obj.width(),
				showarea.height = $obj.height(),
				showarea.ratio = $obj.width()/$obj.height(),
				resetpiclistwh();
				setpiclistpos();
				setbtnthumbpos();

			});
		}

	}
})(jquery);