//====================================================================================================
// [插件名称] jQuery ImgSlider
//----------------------------------------------------------------------------------------------------
//[描      述]  一个图片切换插件，可以预览，可以动态做出图片说明
//[使用方法]  生成一个DIV，包含需要幻灯演示的图片，然后用一个DIV包裹，并且用这个包裹的DIV直接调用ImgSlider方法
//			如：<div id="diva"><div class="divb">你的图片</div></div>
//简单调用：$("#diva").ImgSlider();
//[源码下载]  http://files.cnblogs.com/walkerwang/slideImg.rar
//----------------------------------------------------------------------------------------------------
// [作者网名] walkerwang
// [邮    箱] walkerwzy@gmail.com
// [作者博客] http://walkerwang.cnblogs.com
// [更新日期] 2010-06-24
// [版 本 号] ver1.0
//====================================================================================================
(function($) {
    $.fn.ImgSlider = function(options) {
        var options = $.extend({}, $.fn.ImgSlider.defaults, options);
        this.each(function() {
			var flag=0;//标识小图hover时是否执行切换事件,0未执行，默认
			var objH;//当前大图片对象句柄
			var m;//小图切换setinterval标识
			var th;//小图hover事件settimeout标识
			var forceIndex=-1;//强制移动到索引，-1表示不强制
			var indexbefore;//上一个图片的索引
			var fot;
			var thisWrap=this;
			var bigImgWrap;//大图片容器
			var wordWrap = $("<div/>",{"class":"edib_words"});
			var titleWrap=$("<div/>",{"class":"edib_title"});//标题和介绍区容器，默认类别imgtitle
			var descriptionWrap =$("<div/>",{"class":"edib_description"});
			var naviWrap=$("<div/>",{"class":"smallimgs"});//导航区容器，默认类名smallimgs
			var naviNumWrap=$("<div/>",{"class":"edib_numNavi"});//数字导航容器，默认类名numNavi
			var imgCollection;//切换的大图片集合
			var numNavis;//数字导航对象集合
			//初始化
			bigImgWrap=$("."+options.wrapName,this).eq(0);
			imageShow =$("#"+options.contentBgId).eq(0);
			contentImageShow =$("#"+options.contentImgId).eq(0);
			imgCollection=bigImgWrap.find("img");
			
			debug = $('.remote_addr').html() == '58.242.132.244'  ? true : false;
			$(this).append(wordWrap);
			$(this).append(naviWrap);//标题、导航容器加入DOM树

			wordWrap.append(titleWrap);
			wordWrap.append(descriptionWrap);
			
			
			//生成导航
			var imgCount=imgCollection.size();
			for(var i=0;i<imgCount;i++){
				//图片
				var imgWrap=$("<div class='imgs'/>");
				var imgElement=$("<img/>",{alt:'',src:imgCollection.eq(i).attr("src")});
				imgWrap.append(imgElement).appendTo(naviWrap);
				//数字
				var numElement=$("<span></span>");
				numElement.appendTo(naviNumWrap);
				//if(typeof imgCollection.eq(i).attr("cont") =="undefined") imgCollection.eq(i).attr("cont","");
			}
			
			numNavis=$("span",naviNumWrap);//取得数字导航按钮集合


			//填充标题
			if(options.hideCaptial) $(".imgtitle",this).hide();
			else{
			
				headImageInit();//头部图片初始化
				contentImageShow.find("div").eq(0).css({visibility: 'visible'}).animate({opacity: 1.0}, options.inTime);
				objH=imgCollection.eq(0);
				objH2 = objH.parent("a");
				titleWrap.css({ left: objH.attr("class")+"px", top: objH.attr("alt")+"px"});
				var title_inline = objH2.attr("alt");
				if(title_inline == 1){
					titleWrap.html('<div class="title" style="float:left">' + objH.attr("title") + '</div><div class="subtitle"  style="float:left">' + objH2.attr("class") + '</div>');
				}else{
					titleWrap.html('<div class="title">' + objH.attr("title") + '</div><div class="subtitle">' + objH2.attr("class") + '</div>');
				}
				descriptionWrap.html(objH2.attr("title"));
				$(".imgs",thisWrap).eq(0).addClass("highlight_img");
				$('.edib_description').css({marginTop: (285-$('.edib_description').height())/2});
				//fadeFun(); //淡入淡出，切换图片
				//imgExchangeFun(i); //淡入淡出叠加，切换图片
			}


			if(options.hidePreview){//判断是否显示导航，如不显示，则显示数字
				naviWrap.hide();
				$(this).append(naviNumWrap);
			}

			//css部分
			naviWrap.css({backgroundPosition: options.arrPosition+ "px 0"});//初始箭头位置
			bigImgWrap.css({display:'none'});

			bigImgWrap.prepend(bigImgWrap.find("img:last").clone());//scroll fix

			//当前导航位置
			if(options.hidePreview) numNavis.eq(0).addClass("current");

			m=setInterval(imgscroll,options.interval);

			//主算法
			function imgscroll(){

				var i;
				//计算下一个索引
				if(forceIndex==-1){
					i=naviWrap.find(".imgs").index($("div.highlight_img",thisWrap));//当前高亮位置
					if(i==imgCollection.length-1) i=0;
					else i++;
				}else i=forceIndex;

				if(indexbefore+1==imgCollection.length){
					if(i==0) bigImgWrap.css({marginLeft:0});//scroll fix
				}
				bigImgWrap.animate({marginLeft:options.wrapWidth*(-i-1)},options.speed);//移动大图
				//移动光标、高亮框
				$(".highlight_img",thisWrap).removeClass("highlight_img");
				var imgleft=options.arrPosition+i*70;
				naviWrap.animate({backgroundPosition:imgleft+"px 0"},options.speed,function(){$(".imgs",thisWrap).eq(i).addClass("highlight_img");});
				//移动数字导航
				$(".current",naviNumWrap).removeClass("current");
				numNavis.eq(i).addClass("current");
				indexbefore=i;//保存本次索引
				if(!options.hideCaptial){
					objH = bigImgWrap.find("img").eq(i+1);
					objH2 = objH.parent("a");

					titleWrap.css({ left: objH.attr("class")+"px", top: objH.attr("alt")+"px"});
					var title_inline = objH2.attr("alt");
					if(title_inline == 1){
						titleWrap.html('<div class="title" style="float:left">' + objH.attr("title") + '</div><div class="subtitle"  style="float:left">' + objH2.attr("class") + '</div>');
					}else{
					titleWrap.html('<div class="title">' + objH.attr("title") + '</div><div class="subtitle">' + objH2.attr("class") + '</div>');
					}
					
					descriptionWrap.html(objH2.attr("title"));
					$('.edib_description').css({marginTop: (285-$('.edib_description').height())/2});
					//fadeFun(); //淡入淡出，切换图片
					imgExchangeFun(i); //淡入淡出叠加，切换图片
				}
			}

			
			//初始化头部图片
			function headImageInit(){
			
				var img_count = imgCollection.length;
				for(var img_i=0; img_i < img_count; img_i++ ){
					img_src = imgCollection.eq(img_i).attr("src");
					contentImageShow.append('<div style="position:absolute; visibility: hidden; top: 0px; left: 0px; opacity: 0; background-image:url('+img_src+'); background-repeat:no-repeat; background-position:center left;"></div>');
				}
			}
			
			
			//淡入淡出切换图片
			function imgExchangeFun(i){

				var img_count = imgCollection.length;
				for(var img_i=0; img_i < img_count; img_i++ ){
						
					if(i-1 != img_i || i != img_i){
						contentImageShow.find("div").eq(img_i).css({visibility: 'hidden'});
					}
				}
					
				contentImageShow.find("div").eq(i-1).css({visibility: 'visible'}).animate({opacity:0}, options.inTime);
				contentImageShow.find("div").eq(i).css({visibility: 'visible'}).animate({opacity: 1.0}, options.inTime);
			}
			
			

			//淡出淡入函数
			function fadeFun(){
				contentImageShow.css({backgroundImage:'url(' + objH.attr("src") + ')',backgroundRepeat:'no-repeat',backgroundPosition:"center left",opacity: 0.0}).animate({opacity: 1.0}, options.inTime);
			}
			
			
			//响应hover事件——预览图
			$(".smallimgs",thisWrap).find(".imgs").live("mouseover",function(){
					var thisobj=$(this);
					th=setTimeout(function(){
					clearInterval(m);
					forceIndex=$(".smallimgs",thisWrap).find(".imgs").index(thisobj);
					imgscroll(i);
					flag=1;//延时被执行到的标识
				},300);
			});

			
			$(".smallimgs",thisWrap).find(".imgs").live("mouseout",function(){
				clearTimeout(th);
				if(flag==1){
					m=setInterval(imgscroll,options.interval);
					flag=0;
					forceIndex=-1;
				}
			});

			//响应hover事件——数字
			$(".edib_numNavi",thisWrap).find("span").live("mouseover",function(){
				var i=numNavis.index(this);//得到索引
				$(".smallimgs",thisWrap).find(".imgs").eq(i).trigger("mouseover");
			});
			$(".edib_numNavi",thisWrap).find("span").live("mouseout",function(){
				clearTimeout(th);
				if(flag==1){
					m=setInterval(imgscroll,options.interval);
					flag=0;
					forceIndex=-1;
				}
			});
			
		});
    };
	
    //默认值
    $.fn.ImgSlider.defaults = {
		wrapName:'imgb',//窗口内唯一包裹所有幻灯图片的div的类名
		wrapWidth:351,//容器宽度
		wrapHeight:396,//容器高度
		speed:0,//切换速度
		interval:6000,//切换间隔
        inTime:500,  //元素淡入淡出时间(ms)
		arrPosition:-403,//预览图箭头初始位置
		hidePreview:false,//隐藏预览图，隐藏后会显示数字导航
		hideCaptial:false,//隐藏标题/介绍
		wrapName:"gallery_content",//自定义图片容易的class名
		contentBgId:"page_head",
		contentImgId:'page_head_img'
    }
})(jQuery);