/**
 * Created by 14091150 on 15-1-8.
 *
 *
 * list				图片列表			类型：array			必须 格式:[{ url: '', src: ''},{ url: '', src: ''}]
 * 														url表示图片超链，src表示图片地址
 *
 * height			焦点图高度			类型：number			默认值：300
 * showNum			是否显示数字栏		类型：boolean		默认值：true
 * showNumTxt		数字栏是否显示数字		类型：boolean		默认值：true
 * showArr			是否显示箭头			类型：boolean		默认值：true
 * showTxt			是否显示图片说明		类型：boolean		默认值：false
 * transitionTime	过渡时间				类型：number			默认值：500
 * time				轮播间隔时间			类型：number			默认值：4000
 * effect			轮播效果				类型：string			默认值：fade		fade/horizontal
 *
 *
 * 调用方式
 * $(selector).scrollpic({
 * 		list: [{
 * 			url: '',
 * 			src: '',
 * 			txt: ''
 * 		}]
 * });
 *
 */
;(function($, undefined){
	$.fn.scrollpic = function(options){
		var $that = this,
			defaultSetting = {
				list: [{
					url: '',
					src: '',
					txt: '',
					width: 'auto',
					height: 'auto'
				}],
				height: 300,
				showNum: true,
				showNumTxt: true,
				showArr: true,
				showTxt: false,
				transitionTime: 500,
				time: 4000,
				effect: 'fade'
			},
			settings = $.extend({}, defaultSetting, options),
			_list = '',
			_nums = '',
			_len = settings.list.length,
			o, _html, _index;
		o = {
			build: function(){
				if(_len < 1) return;
				for(var i = 0; i < _len; i++){
					if(i == 0){
						_list += '<li style="z-index: 2; opacity: 1; filter:alpha(opacity=100)" class="focusShow"><a href="'+ settings.list[i].url +'" target="_blank" style="height: '+ settings.height +'px"><img src="'+ settings.list[i].src +'" alt="" style="margin-top: -'+ settings.list[i].height/2 +'px; margin-left: -'+ settings.list[i].width/2 +'px" /></a>'+ (settings.showTxt && settings.list[i].txt ? ('<p>'+ settings.list[i].txt +'</p>') : '') +'</li>';
						_nums += '<a href="javascript:;" focusID="'+ i +'" class="focusSel">'+ (settings.showNumTxt ? i+1 : '') +'</a>';
					}else{
						if(settings.effect == 'fade'){
							_list += '<li style="opacity: 0;  filter:alpha(opacity=0)"><a href="'+ settings.list[i].url +'" target="_blank" style="height: '+ settings.height +'px"><img src="'+ settings.list[i].src +'" alt="" style="margin-top: -'+ settings.list[i].height/2 +'px; margin-left: -'+ settings.list[i].width/2 +'px" /></a>'+ (settings.showTxt && settings.list[i].txt ? ('<p>'+ settings.list[i].txt +'</p>') : '') +'</li>';
						}else{
							_list += '<li style="opacity: 1; visibility: hidden"><a href="'+ settings.list[i].url +'" target="_blank" style="height: '+ settings.height +'px"><img src="'+ settings.list[i].src +'" alt="" style="margin-top: -'+ settings.list[i].height/2 +'px; margin-left: -'+ settings.list[i].width/2 +'px" /></a>'+ (settings.showTxt && settings.list[i].txt ? ('<p>'+ settings.list[i].txt +'</p>') : '') +'</li>';
						}
						_nums += '<a href="javascript:;" focusID="'+ i +'">'+ (settings.showNumTxt ? i+1 : '') +'</a>';
					}
				}
				_html = '<ul class="focusImages" style="height: '+ settings.height +'px">'+ _list +'</ul>'+ (settings.showNum ? ('<div class="focusNumBox">'+ _nums +'</div>') : '') + (settings.showArr ? ('<a href="javascript:;" class="focusPreArr"></a><a href="javascript:;" class="focusNextArr"></a>') : '');
				$that.css({position: 'relative', overflow: 'hidden'}).append(_html);
			},
			pos: function(){
				var arrObj = $that.find('.focusPreArr,.focusNextArr'),
					numObj = $that.find('.focusNumBox'),
					txtObj = $that.find('.focusImages li p');
				arrObj.css({ marginTop: -arrObj.height()/2 });
				numObj.css({ marginLeft: -numObj.width()/2 });
				if(!txtObj.length) return;
				txtObj.each(function(){
					var th = $(this).innerHeight();
					$(this).css({ top: settings.height-th});
				});
			},
			automove: function(flag){
				_index = $that.find('.focusShow').index();
				if(flag == 'pre'){
					if(_index == 0){
						o.effectchange(_index, _len-1, settings.effect, flag);
					}else{
						o.effectchange(_index, _index-1, settings.effect, flag);
					}
				}else{
					if(_index == _len-1){
						o.effectchange(_len-1, 0, settings.effect);
					}else{
						o.effectchange(_index, _index + 1, settings.effect);
					}
				}
			},
			effectchange: function(hi,si,type,dir){
				var imgList = $that.find('.focusImages li'),
					numList = $that.find('.focusNumBox a'),
					w = $that.find('.focusImages li').width();
				if(hi == si || imgList.is(':animated')) return;
				if(type == 'fade'){
					imgList.eq(hi).css({zIndex: 1}).animate({opacity: 0},settings.transitionTime,function(){
						$(this).removeClass();
					});
					imgList.eq(si).css({ zIndex: 2 }).animate({opacity: 1},settings.transitionTime,function(){
						$(this).addClass('focusShow');
					});
				}else if(type == 'horizontal'){
					imgList.css({ opacity: 1});
					if(dir == 'pre'){
						imgList.eq(hi).css({ zIndex: 1}).animate({ left: w},settings.transitionTime,function(){
							$(this).removeClass().css({visibility: 'hidden'});
						});
						imgList.eq(si).css({ left: -w , zIndex: 2, visibility: 'visible'}).animate({ left: 0 },settings.transitionTime,function(){
							$(this).addClass('focusShow');
						});
					}else{
						imgList.eq(hi).css({ zIndex: 1 }).animate({ left: -w},settings.transitionTime,function(){
							$(this).removeClass().css({visibility: 'hidden'});
						});
						imgList.eq(si).css({ left: w , zIndex: 2, visibility: 'visible'}).animate({ left: 0 },settings.transitionTime,function(){
							$(this).addClass('focusShow');
						});
					}
				}
				numList.removeClass('focusSel').eq(si).addClass('focusSel');
			},
			act: function(){
				var timer = setInterval(o.automove, settings.time),
					btns = $that.children('a'),
					tips = $that.find('.focusImages li p');
				$that.hover(function(){
					clearInterval(timer);
					/*btns.add(tips).fadeIn();*/
				},function(){
					timer = setInterval(o.automove, settings.time);
					/*btns.add(tips).fadeOut();*/
				});
				btns.click(function(e){
					e.preventDefault();
					var _name = this.className;
					switch (_name){
						case 'focusPreArr':
							o.automove('pre');
							break;
						case 'focusNextArr':
							o.automove();
							break;
					}
				});
				$that.find('.focusNumBox a').mouseover(function(){
					var showIndex = $(this).attr('focusID');
					var hideIndex = $that.find('.focusShow').index();
					var defaultIndex = $that.find('.focusNumBox .focusSel').attr('focusID');
					if(defaultIndex < showIndex){
						o.effectchange(hideIndex, showIndex, settings.effect);
					}else{
						o.effectchange(hideIndex, showIndex, settings.effect, 'pre');
					}
				});
			},
			init: function(){
				o.build();
				o.pos();
				o.act();
			}
		};
		o.init();
		return $that;
	};
})(jQuery);