$(function(){
	var showPicModule = $("#showPicModule"),
		picModuleType = showPicModule.data('albumtype');
	if(picModuleType == 3 || picModuleType == 4){
		var bigPic = $("#showbigPic .bigPic"),
			showsmallPic = $("#showsmallPic"),
			smallul = showsmallPic.find("ul"),
			smallli = showsmallPic.find("li"),
			iconLoading = $("#iconLoading"),
			showPicExplain = $("#showPicExplain"),
			movepx = 0;
		bigPic.append('<span class="prev-btn"></span><span class="next-btn"></span>')
		if (picModuleType == 4) {
			smallul.width(parseInt(smallli.length) * (parseInt(smallli.width()) + (parseInt(smallli.css("border-left-width")) * 2) + parseInt(smallli.css("margin-right"))));
		}
		bigPic.on('click', '.prev-btn,.next-btn', function(){
			var $this = $(this);
			var Pic_box_cur = showsmallPic.find('.Pic_box_cur');
			if($this.hasClass('prev-btn')){
				if(Pic_box_cur.prev('.Pic_box').length){
					Pic_box_cur.prev('.Pic_box').click();
				}
			}else{
				if(Pic_box_cur.next('.Pic_box').length){
					Pic_box_cur.next('.Pic_box').click();
				}
			}
		});
		showsmallPic.on({
			click: function(){
				var $this = $(this);
				if($this.hasClass('up') && !$this.data('click')){
					$this.data('click',1);
					if (picModuleType == 3) {
						movepx = parseInt(smallli.height()) + (parseInt(smallli.css("border-left-width")) * 2) + parseInt(smallli.css("margin-bottom"));
						var i = parseInt(smallul.css("margin-top"));
						if (i < 0) {
							smallul.stop(true, true).animate({
								"margin-top": "+=" + movepx
							}, 500, function() {
								$this.removeData('click');
							});
						} else {
							$this.removeData('click');
							//smallul.stop(true,true).css("margin-top",-movepx).animate({"margin-top":0},500);
						}
					} else {
						movepx = parseInt(smallli.width()) + (parseInt(smallli.css("border-left-width")) * 2) + parseInt(smallli.css("margin-right"));
						var i = parseInt(smallul.css("margin-left"));
						if (i < 0) {
							smallul.stop(true, true).animate({
								"margin-left": "+=" + movepx
							}, 500, function() {
								$this.removeData('click');
							});
						} else {
							$this.removeData('click');
							//smallul.stop(true,true).css("margin-left",-movepx).animate({"margin-left":0},500);
						}
					}
				}else if($this.hasClass('down') && !$this.data('click')){
					$this.data('click',1);
					if (picModuleType == 3) {
						movepx = parseInt(smallli.height()) + (parseInt(smallli.css("border-left-width")) * 2) + parseInt(smallli.css("margin-bottom"));
						var i = smallul.height() - showsmallPic.children(".smallPic").height() + parseInt(smallul.css("margin-top"));
						if (i > 0) {
							smallul.stop(true, true).animate({
								"margin-top": "-=" + movepx
							}, 500, function() {
								$this.removeData('click');
							});
						} else {
							$this.removeData('click');
							//smallul.stop(true,true).css("margin-top",-movepx).animate({"margin-top":0},500);
						}
					} else {
						movepx = parseInt(smallli.width()) + (parseInt(smallli.css("border-left-width")) * 2) + parseInt(smallli.css("margin-right"));
						var i = smallul.width() - showsmallPic.children(".smallPic").width() + parseInt(smallul.css("margin-left"));
						if (i > 0) {
							smallul.stop(true, true).animate({
								"margin-left": "-=" + movepx
							}, 500, function() {
								$this.removeData('click');
							});
						} else {
							$this.removeData('click');
							//smallul.stop(true,true).css("margin-left",-movepx).animate({"margin-left":0},500);
						}
					}
				}
			}
		},'.up,.down');
		showsmallPic.on({
			click: function() {
				var lithis = $(this),
					childImg = lithis.find('img'),
					getImgSrc = childImg.attr('data-bigsrc'),
					getImgUrl = childImg.attr('data-url'),
					bigtit = childImg.attr("alt"),
					bigp = lithis.find("p").html(),
					bigPicWidth = bigPic.width(),
					bigPicHeight = picModuleType == 3 ? 400 : 'auto',
					newImg = new Image();
				lithis.addClass("Pic_box_cur").siblings().removeClass("Pic_box_cur");
				newImg.src = getImgSrc;
				bigPic.css({
					'visibility': 'hidden',
					'height': 'auto'
				});
				iconLoading.show();
				newImg.onload = function() {
					if (this.width > bigPicWidth) {
						if(getImgSrc.indexOf('?') !=-1){
							getImgSrc = getImgSrc.substr(0,getImgSrc.indexOf('?')) + '?x-oss-process=image/resize,m_lfit,w_' + bigPicWidth + ',limit_0';
						}else{
							getImgSrc = getImgSrc + '?x-oss-process=image/resize,m_lfit,w_' + bigPicWidth + ',limit_0';
						}
					}
					var newImg2 = new Image();
					newImg2.src = getImgSrc;
					newImg2.onload = function() {
						// bigPic.height(this.height);
						bigPic.find("img").attr("src", getImgSrc);
						showPicExplain.children("h2").html(bigtit);
						showPicExplain.children("p").html(bigp);
						setTimeout(function(){
							bigPic.css({'visibility': 'visible', 'height': Math.max(bigPic.find("img").height(),bigPicHeight)}).find("a").attr("href", getImgUrl);
							iconLoading.hide();
						},100);
					};
				};
			}
		}, '.smallPic li');
		smallli.first().trigger('click');
	}else if(picModuleType == 2){
		showPicModule.find('.pic').each(function(i, dom) {
			var lithis = $(dom),
				childImg = lithis.find('img'),
				getImgSrc = childImg.attr('data-bigsrc'),
				bigPicWidth = lithis.width(),
				newImg = new Image();
			newImg.src = getImgSrc;
			newImg.onload = function() {
				if (this.width > bigPicWidth) {
					if(getImgSrc.indexOf('?') !=-1){
						getImgSrc = getImgSrc.substr(0,getImgSrc.indexOf('?')) + '?x-oss-process=image/resize,m_lfit,w_' + bigPicWidth + ',limit_0';
					}else{
						getImgSrc = getImgSrc + '?x-oss-process=image/resize,m_lfit,w_' + bigPicWidth + ',limit_0'
					}
				}
				var newImg2 = new Image();
				newImg2.src = getImgSrc;
				newImg2.onload = function() {
					childImg.attr("src", getImgSrc);
				};
			};
		});
	}
});