$.extend({PromoViewer:{
			imgOff:"/common/images/mainarea/compornent/btn_next_promotion.gif",
			imgOn :"/common/images/mainarea/compornent/btn_next_promotion_on.gif",
			rectOff:"/common/images/mainarea/compornent/btn_promotion.gif",
			rectOn:"/common/images/mainarea/compornent/btn_promotion_on.gif",
			rectCurrent:"/common/images/mainarea/compornent/btn_promotion_current.gif",
			baloonImgHd:"/common/images/mainarea/compornent/promo_balloon_01.png",
			baloonImgBm:"/common/images/mainarea/compornent/promo_balloon_02.png",
			baloonImgBd:"/common/images/mainarea/compornent/promo_balloon_03.png",
			length:0,
			nowID:0,
			oldID:"",
			timeout:5000,
			createButtonList:function(_width,_hight){
				// make btnList html sourse
				var btnImg="<img src='"+ $.PromoViewer.imgOff +"' width='84' height='11' alt='NEXT PROMOTION' class='nextPromotionBtn hover' />";
				var btnListDivStart ="<div class='btnContainer'>";
				var btnListDivEnd ="</div>";
				var btnListUlStart ="<ul>";
				var btnListUlEnd ="</ul>";
				var li="";
				for(var i=0; i<$.PromoViewer.length; i++){
					li += "<li>";
					li +="<img src='"+$.PromoViewer.rectOff+"' width='12' height='11' alt='" + i + "' />"
					li += "</li>";				
				}
				$($.PromoViewer.container).append( btnListDivStart + btnImg + btnListUlStart + li+btnListUlEnd + btnListDivEnd);
				$(".btnContainer").css({width: _width+"px",height:"11px", marginTop: _hight+1+"px",backgroundColor:"#e9e9e9",position:"absolute"});
				$(".btnContainer ul").css({width:12*$.PromoViewer.length,float:"right"});
				$(".btnContainer li").css({margin:"0",padding:"0",float:"left", listStyle:"none", lineHeight:"11px",cursor:"pointer"});
				$(".nextPromotionBtn").css({margin:"0",padding:"0",float:"right",cursor:"pointer"});
				$(".nextPromotionBtn").click(function(){
					var newID = $.PromoViewer.getID()+1;
					$.PromoViewer.setID(newID);	
					$.PromoViewer.showImg($.PromoViewer.getID());
					$(".btnContainer li img").attr("src",$.PromoViewer.rectOff);
					$(".btnContainer li img:eq("+$.PromoViewer.getID()+")").attr("src",$.PromoViewer.rectCurrent);
				});
				$(".nextPromotionBtn").hover(function(){
					$(this).attr("src",$.PromoViewer.imgOn);
				},
				function(){
					$(this).attr("src",$.PromoViewer.imgOff);
				});
				$.PromoViewer.setRectBtn();
				$.PromoViewer.showImg(0);
			},
			createBaloon:function(){
				for(i=0; i<$.PromoViewer.dts.length; i++){
					//change zIndex
					var z =100+($.PromoViewer.dts.length - i);
					$($.PromoViewer.dts[i]).css({zIndex:z});
					$($.PromoViewer.dds[i]).css({zIndex:z+100});
					//add Baloon and description
					$($.PromoViewer.dds[i]).wrapInner("<div class='promoBaloon'><div><p></p></div></div>");
					$(".promoBaloon:eq("+i+")").css({display:"none",width:"160px",position:"absolute",padding:"3px 0 0 0",background:"transparent url("+$.PromoViewer.baloonImgHd+") left top no-repeat"});
					$(".promoBaloon div:eq("+i+")").css({padding:"0 0 3px 0",margin:"0",background:"transparent url("+$.PromoViewer.baloonImgBm+") left bottom no-repeat"});
					$(".promoBaloon p:eq("+i+")").css({padding:"6px",margin:"0",background:"transparent url("+$.PromoViewer.baloonImgBd+") left repeat-y"});
					var leftMargin = $.PromoViewer.containerWidth - ((160 -12) / 2 + (($.PromoViewer.length -i)* 12) +84);					
					var topMargin = $.PromoViewer.containerHeight - $(".promoBaloon:eq("+i+")").height() -12;
					$(".promoBaloon:eq("+i+")").css({marginTop:topMargin+"px",marginLeft:leftMargin+"px"});
				}
			},
			setRectBtn:function(){
				$(".btnContainer li img").click(function(e){
				var num = $(".btnContainer li img").index(this);
				$.PromoViewer.setID(num);
				$.PromoViewer.setCurrentRect();
				$.PromoViewer.showImg($.PromoViewer.getID());
			});
				$(".btnContainer li img").hover(
					function(e){
						var num = $(".btnContainer li img").index(this);
						if(!$.PromoViewer.isCurrent($(this).attr("src"))){
							$(this).attr("src",$.PromoViewer.rectOn);
							$.PromoViewer.showBaloon(num);
						}
					},
					function(){
						var num = $(".btnContainer li img").index(this);
						if(!$.PromoViewer.isCurrent($(this).attr("src"))){
							$(this).attr("src",$.PromoViewer.rectOff);
						}
						$.PromoViewer.hideBaloon(num);
				});

			},
			isCurrent:function(s){
				if(s == $.PromoViewer.rectCurrent){
					return true;
				}
				else{
					return false;
				}
			},
			setCurrentRect:function(){
				$(".btnContainer li img").attr("src",$.PromoViewer.rectOff);
				$(".btnContainer li img:eq("+ $.PromoViewer.getID()+")").attr("src",$.PromoViewer.rectCurrent);

			},
			showBaloon:function(n){
				$(".promoBaloon:eq("+n+")").css({display:"block"});
			},
			hideBaloon:function(n){
				$(".promoBaloon:eq("+n+")").css({display:"none"});
			},
			getID:function(){
				return  $.PromoViewer.nowID;
			},			
			setID: function(n){
				$.PromoViewer.oldID = $.PromoViewer.nowID;
				if(n < $.PromoViewer.length){
					$.PromoViewer.nowID =n;
				}else{
					$.PromoViewer.nowID =0;
				}
			},
			showImg: function(){
			
				clearTimeout($.PromoViewer.timer);
				$.PromoViewer.setCurrentRect($.PromoViewer.nowID);
				$($.PromoViewer.container + " dt:eq("+ Number($.PromoViewer.oldID) +")").fadeOut("3000");
				$($.PromoViewer.container + " dt:eq("+ Number($.PromoViewer.nowID) +")").fadeIn("3500");
				//$("#promoArea dt:eq("+ $.PromoViewer.oldID +"),#promoArea dd:eq("+ $.PromoViewer.oldID +")").fadeOut("3000");
				//$("#promoArea dt:eq("+ $.PromoViewer.nowID +"),#promoArea dd:eq("+ $.PromoViewer.nowID +")").fadeIn("3500");
				$.PromoViewer.timer = setTimeout($.PromoViewer.timerHandler,$.PromoViewer.timeout);
				
			},
			timerHandler:function(){
				$.PromoViewer.setID($.PromoViewer.getID()+1);
				$.PromoViewer.showImg();
			},
			init:function(_container,_width,_hight){
				$.PromoViewer.container = _container;
				$.PromoViewer.containerWidth = _width;
				$.PromoViewer.containerHeight = _hight;
				var _taget = $.PromoViewer.container + " dl";
				$.PromoViewer.length = $(_taget).children("dt").length;
				$.PromoViewer.dts = $(_taget).children("dt");
				$.PromoViewer.dds = $(_taget).children("dd");
				$.PromoViewer.createButtonList(_width,_hight);
				$.PromoViewer.createBaloon();
			}
		}
});