/** 
 * @projectDescription	banner组自动播放插件for jQuery1.32
 *						每个页面只能建立一个bannerGroup。调用方法： DomElement.BannerGroup(options)
 *
 * @author 	lynn.LH
 * @version 	0.5
 * @since	0.5
*/
(function($){	//可在范围内直接用$替代关键字jQuery
$.fn.BannerGroup = function(options){
	$.BannerGroup = {};  //存放插件数据
	$.BannerGroup.Setting = $.extend({
		banners:[
			{alt:"图片1", src:"1.jpg", href:"#1"},
			{alt:"图片2", src:"2.jpg", href:"#2"},
			{alt:"图片3", src:"3.jpg", href:"#3"}
		], 
		width: "700px",	
		height: "180px",
		autoplay: 0	//播放速度（毫秒）。0为不自动播放
	}, options); //end $.BannerGroup.Setting
	
	$.BannerGroup.Div = $(this);	//作为bannerGroup的div
	$.BannerGroup.Div.addClass("bannergroup"); //样式位于jQuery.BannerGroup.1.0.css
	$.BannerGroup.Div.css("width", $.BannerGroup.Setting.width);
	$.BannerGroup.Div.css("height", $.BannerGroup.Setting.height);
	$.BannerGroup.Banners = {};	//声明变量存放banner图片
	$.BannerGroup.Buttons = {};	//声明变量存放按钮
	$.BannerGroup.BannerIndex = 1;	//当前显示的banner索引号
	
	var autoHandle = 0;	//计数器句柄
	var lastAutoPlayIndex = 1;	//最后一个自动播放的图片序号
	
	//将所有图片和按钮保存在$.BannerGroup集合以及实体div中
	for(var i = 0; i < $.BannerGroup.Setting.banners.length; i++){
		var $banner = $("<img />");
		$banner.attr("src", $.BannerGroup.Setting.banners[i].src);
		$banner.attr("alt", $.BannerGroup.Setting.banners[i].alt);
		$banner.attr("width", "743");
		$banner.attr("height", "102");
		var $hyperlink = $("<a></a>");
		$hyperlink.attr("href", $.BannerGroup.Setting.banners[i].href);
		$banner.appendTo($hyperlink);	//结构：<a><img /></a>
		$hyperlink.appendTo($.BannerGroup.Div);
		var indexKey = i+1;
		$.BannerGroup.Banners[indexKey] = $banner;	//将banner保存到$.BannerGroup集合 下标从1开始
		
		var $button = $("<div class='button'></div>");
		$button.text(indexKey);
		$button.appendTo($.BannerGroup.Div);
		$.BannerGroup.Buttons[indexKey] = {	//将button保存到$.BannerGroup集合 下标从1开始
			"button": $button,
			"index": indexKey
		};			
	};//end for
	
	
	$.each($.BannerGroup.Buttons, function(i, n){	//i循环索引， n对应的按钮对象
		//修正按钮位置
		var buttonWidth = 13+2+3; // 一个按钮占据的宽度 13 + 边框粗1×2 +按钮间距 3
		var allButtonsWidth = $.BannerGroup.Setting.banners.length	* buttonWidth +2;  //所有按钮连同间距加起来的宽度 + 所有按钮组成的按钮组右边距 2
		var buttonRight = allButtonsWidth - i*buttonWidth; 
		fixButtonPosition(n, buttonRight, 2);
		//绑定按钮点击事件
		n.button.click(function(){
			clearInterval(autoHandle);					
			bannerShow(n);
			lastAutoPlayIndex = $.BannerGroup.BannerIndex;	
			play($.BannerGroup.Setting.autoplay);
		});
	});
	
	
	play($.BannerGroup.Setting.autoplay);
	
	
	//播放
	function play(speed){
		(function(){
			bannerShow($.BannerGroup.Buttons[lastAutoPlayIndex++]);		  
			if(speed){	//如果设置了播放速度
				clearInterval();
				autoHandle = setInterval(function(){
					if(lastAutoPlayIndex > $.BannerGroup.Setting.banners.length){
						lastAutoPlayIndex = 1;	//超过最大索引值。自动修正为1
					} //end if							  
					bannerShow($.BannerGroup.Buttons[lastAutoPlayIndex++]);
			
				},speed); //end setInterval	
			}//end if
		}());	
	};
	//显示和按钮对应的banner
	function bannerShow(relevantButton){	//显示索引值指定的banner
		if($.BannerGroup.BannerIndex!=0){
				$.BannerGroup.Buttons[$.BannerGroup.BannerIndex].button.css("background", "#000");	//复原上一个按钮的底色
				$.BannerGroup.Banners[$.BannerGroup.BannerIndex].hide();	//隐藏banner
		}//end if
		relevantButton.button.css("background", "#660000");	//当前按钮改变底色
		$.BannerGroup.BannerIndex = relevantButton.index;	//记录索引值
		//$.BannerGroup.Banners[relevantButton.index].parent().fadeIn("slow");
		$.BannerGroup.Banners[relevantButton.index].fadeIn(250);	//显示图片
		
	}// end function bannerShow
	
	function fixButtonPosition(Button, styleRight, styleBottom){
		if($.BannerGroup.Setting.banners.length!=1){	//假如只有一个图片就不显示按钮
			Button.button.css("right", styleRight);
			Button.button.css("bottom", styleBottom);
		}else{	
			Button.button.hide();
		};//end if
	}// end function fixButtonPosition
};
}(jQuery));//end 可在范围内直接用$替代关键字jQuery

/*$.BannerGroup的结构:

	$.BannerGroup = {
		Setting:{
			banners:[
				{alt:"图片1", src:"1.jpg", href:"#1"},
				{alt:"图片2", src:"2.jpg", href:"#2"},
				{alt:"图片3", src:"3.jpg", href:"#3"}
			], 
			width: "200px",	
			height: "80px",
			autoplay: 0
		},
		Banners:{
			"1": $banner对象,
			"2": $banner对象,
			"3": $banner对象
		},
		Buttons:{
			"1": {
				button:$button对象,
				index:1
			},
			"2": {
				button:$button对象,
				index:2
			},
			"3": {
				button:$button对象,
				index:3
			}
		},
		BannerIndex: 0
	}
*/