/********************************************************************************************************
 * D-ImageChange
 *----------------------------------------------------------------------------------------------------
 * @Desc 圖片輪換插件
 *----------------------------------------------------------------------------------------------------
 * @Author D.夏亦知非
 * @Email DeclanZhang@gmail.com
 * @QQ 29540200
 * @Blog http://onblur.javaeye.com
 * @Date 2009-10-19
 * @Version V1.3@2010-03-16
 * @JQueryVersion 1.3.2+ (建議使用1.4以上版本)
 * 
 * @update v1.1 增加清空原始內容功能,以免頁面加載完成之前顯示大片空白
 * 		   v1.2 修正IE6每次從服務器讀取背景圖片的BUG
 *         v1.3 修正了寬度過大產生的BUG, 兼容JQ1.4.1, 建議使用JQ1.4+, 效率更高
 **/

// 修正IE6每次從服務器讀取背景圖片的BUG
try {
	document.execCommand('BackgroundImageCache', false, true);
}catch(e){

}


(function($){

jQuery.fn.extend({
	
	d_imagechange:function(setting){
		
		var config = $.extend({
			bg:true,						// 是否背景色
			title:true,						// 是否有標題
			desc:true,						// 是否有描述
			btn:true,						// 是否顯示按鈕
			repeat:'no-repeat',				// 重複規則 'no-repeat' 'repeat-x' 'repeat-y' 'repeat' 'draw'
			
			bgColor:'#000',					// 背景色
			bgOpacity:.5,					// 背景透明度
			bgHeight:23,					// 背景高
			
			titleSize:12,					// 標題文字大小
			titleFont:'Verdana,細明體',		// 標題文本字體
			titleColor:'#FFF',				// 標題文本顏色
			titleTop:4,						// 標題上邊距
			titleLeft:4,					// 標題左邊距
			
			descSize:10,					// 描述文字大小
			descFont:'Verdana,細明體',			// 描述文本字體
			descColor:'#FFF',				// 描述文本顏色
			descTop:2,						// 描述上邊距
			descLeft:4,						// 描述左邊距
			
			btnColor:'#FFF',				// 按鈕顏色1 
			btnOpacity:.5,					// 未選中按鈕透明度
			btnFont:'Verdana',				// 按鈕文本字體
			btnFontSize:12,					// 按鈕文字大小(注意:Chrome有默認最小字號的限制)
			btnFontColor:'#000',			// 按鈕文本顏色
			btnText:true,					// 是否顯示文本
			btnWidth:15,					// 按鈕寬
			btnHeight:15,					// 按鈕高
			btnMargin:4,					// 按鈕間距
			btnTop:4,						// 按鈕上邊距
			
			playTime:2000,					// 輪換間隔時間,單位(毫秒)
			animateTime:500,				// 動畫執行時間,單位(毫秒)
			animateStyle:'o',				// 動畫效果:'o':漸顯 'x':橫向滾動 'y':縱向滾動 'show':原地收縮伸展 'show-x':橫向收縮伸展 'show-y':縱向收縮伸展' none':無動畫
			width:300,						// 寬, 不設定則從DOM讀取
			height:200						// 高, 不設定則從DOM讀取
			
		},setting);
		
		return $(this).each(function(){

			var _this = $(this);
			//從對像中讀取
			if(typeof (config.data)=='undefined') {
				var v = new Array();
				_this.find('a').each(function(i) {
					v[i] = {
						title:$(this).attr('title'),
						desc:$(this).attr('desc'),
						href:$(this).attr('href'),
						target:$(this).attr('target'),
						src:$(this).find('img').attr('src')
					};
				});
				config.data = v;
				$(this).html('');
			}

			var _w = config.width || _this.width();			// 寬
			var _h = config.height || _this.height();		// 高
			var _n = config.data.length;					// 數目
			var _i = 0;										// 當前顯示的item序號

			_this.empty()
				 .css('overflow','hidden')
				 .width(_w)
				 .height(_h);
			
			// 半透明背景
			if(config.bg){
			$('<div />').appendTo(_this)
						.width(_w)
						.height(config.bgHeight)
						.css('background-color',config.bgColor)
						.css('opacity',config.bgOpacity)
						.css('position','absolute')
						.css('marginTop',_h-config.bgHeight)
						.css('zIndex',3333);
			}
			
			// 文字區
			var _textArea = 
			$('<div />').appendTo(_this)
						.width(_w)
						.height(config.bgHeight)
						.css('position','absolute')
						.css('marginTop',_h-config.bgHeight)
						.css('zIndex',6666);
			// 按鈕區
			var _btnArea = 
			$('<div />').appendTo(_this)
						.width(config.data.length * (config.btnWidth + config.btnMargin))
						.height(config.bgHeight)
						.css('position','absolute')
						.css('marginTop',_h-config.bgHeight)
						.css('marginLeft',_w-(config.btnWidth+config.btnMargin)*_n)
						.css('zIndex',9999)
						.css('display',config.btn?'block':'none');
			
			// 插入空div修正IE的絕對定位BUG
			$('<div />').appendTo(_this);
			
			// 圖片區
			var _imgArea = 
			$('<div />').appendTo(_this)
						.width('x,show-x'.indexOf(config.animateStyle)!=-1?_w*_n:_w)
						.height('y,show-y'.indexOf(config.animateStyle)!=-1?_h*_n:_h);			
	
			// 初始化圖片 文字 按鈕
			$.each(config.data,function(i,n){
				var a = $('<a />');
				a.appendTo(_imgArea)
						  .width(_w)
						  .height(_h)
						  .attr('href',n.href?n.href:'')
						  .attr('target',n.target?n.target:'')
						  .css('display','block')
						  .css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':'');

				if(config.repeat != 'draw') {
					a.css('background-image','url('+n.src+')')
						  .css('background-repeat',config.repeat)
						  .css('display','block');
				} else {
					$('<img />').appendTo(a)
							.attr('src', n.src)
							.attr('height',config.height)
							.attr('width',config.width);
				}

				if(config.title){
				$('<b />').appendTo(_textArea)
						  .html(n.title?n.title:'')
						  .css('display',i==0?'block':'none')
						  .css('fontSize',config.titleSize)
						  .css('fontFamily',config.titleFont)
						  .css('color',config.titleColor)
						  .css('marginTop',config.titleTop)
						  .css('marginLeft',config.titleLeft);
				}
				
				if(config.desc){
				$('<p />').appendTo(_textArea)
						  .html(n.desc?n.desc:'')
						  .css('display',i==0?'block':'none')
						  .css('fontSize',config.descSize)
						  .css('fontFamily',config.descFont)
						  .css('color',config.descColor)
						  .css('marginTop',config.descTop)
						  .css('marginLeft',config.descLeft);
				}

				$('<a />').appendTo(_btnArea)
						  .width(config.btnWidth)
						  .height(config.btnHeight)
						  .html(config.btnText?i+1:'')
						  .css('fontSize',config.btnFontSize)
						  .css('fontFamily',config.btnFont)
						  .css('textAlign','center')
						  .css('display','block')
						  .css('float','left')
						  .css('overflow','hidden')
						  .css('marginTop',config.btnTop)
						  .css('marginRight',config.btnMargin)
						  .css('background-color',config.btnColor)
						  .css('opacity',i==0?1:config.btnOpacity)
						  .css('color',config.btnFontColor)
						  .css('cursor','pointer')

			});

			// 保存所有元素集合的引用,方便在事件中使用
			var _bs = _btnArea.children('a');
			var _ts = _textArea.children('b');
			var _ds = _textArea.children('p');
			var _is = _imgArea.children('a');

			// 針對不同的動畫效果的附加設置, 主要是block的問題, 若在初始化時設置block:none會造成之後無block效果
			if('o,show,none'.indexOf(config.animateStyle)!=-1){
				_is.not(':first').hide();
				_is.css('position','absolute');
			}
			
			// 添加按鈕事件
			_bs.click(function(){
				var ii = _bs.index(this);
				if(ii==_i){return;}
				
				_ts.eq(_i).css('display','none');
				_ts.eq(ii).css('display','block');
				_ds.eq(_i).css('display','none');
				_ds.eq(ii).css('display','block');
				_bs.eq(_i).css('opacity',config.bgOpacity);
				_bs.eq(ii).css('opacity',1)
				
				switch(config.animateStyle){
				case 'o' :
					_is.eq(_i).fadeOut(config.animateTime);
					_is.eq(ii).fadeIn(config.animateTime);
					break;
				case 'x' :
					_imgArea.animate({marginLeft:-ii*_w},config.animateTime);
					break;
				case 'y' :
					_imgArea.animate({marginTop:-ii*_h},config.animateTime);
					break;
				case 'show' :
				case 'show-x' :
				case 'show-y' :
					_is.eq(_i).hide(config.animateTime);
					_is.eq(ii).show(config.animateTime);
					break;				
				case 'none' :
					_is.eq(_i).hide();
					_is.eq(ii).show();
					break;				
				}
				_i = ii;
			});

			// 添加輪換任務
			var _play = setInterval(play,config.playTime);
			
			function play(){
				_bs.eq((_i+1)%_n).click()
			}		
			// 鼠標進入事件
			_this.mouseover(function(){
				clearInterval(_play);
			});
						
			// 鼠標離開事件
			_this.mouseout(function(){
				_play = setInterval(play,config.playTime);
			});
		});
	}
});
})(jQuery);