tab_paging={
	el:{
		frameslide:null,
		navTabContainer:null,
		bTabContainer:null,
		bTabs:null,
		
		bPageContainer:null,
		bPage:null, imgPage:null
	},
	initBPageChildEl:function(){	
		var el=this.el;
		el.bPage=$('a.b-page-index', el.bPageContainer);
		el.imgPage=$('img', el.bPage);
	},
	initEl:function(){
		var el=this.el;
		el.frameslide=$('#frameslide', el.frameslide);
		
		el.navTabContainer=$('.navtab-container');
		el.bTabContainer=$('#navtab', el.navTabContainer);
		el.bTabs=$('a', el.bTabContainer);
		
		el.bPageContainer=$('.nextpage');
		this.initBPageChildEl();
	},
	getActiveTabIndex:function(){
		var el=this.el;
		var currTab=$('a.on', el.bTabContainer);
		var index=0;
		$.each(el.bTabs, function(i,o){	
			if(currTab.parent().attr('class')==$(o).parent().attr('class')){ index=i; return false; }
		});
		return index;
	},
	reCreatePagingButtons:function(currentTab){
		var el=this.el;
		currentTab=currentTab||$('.tab-page-'+(this.getActiveTabIndex()+1));
		var childs=$('div.slide-scroll > div.slide-page', currentTab);
		var html='';
		if(childs.length>1){
			for(var i=0;i<childs.length;i++){
				html+='<a href="javascript:;"><img alt="" src="images/theme/point'+((i==0)?'2':'1')+'.png"/></a>';
			};
			el.bPageContainer.empty().html(html);
			this.initBPageChildEl();
			this.initPageButtons();
		}else{
			el.bPageContainer.empty();
		}
	},
	initTabButtons:function(){
		var _this=this; var el=this.el;
		$.each(el.bTabs, function(i,o){
			var b=$(o);
			//b.attr('href', 'javascript:void(0);');
			b.click(function(){
				// remove all active tab class
				el.bTabs.removeClass('on');
				// slide
				var target=$('.tab-page-'+(i+1));
				target.scrollTo(0);
				el.frameslide.scrollTo(target, 300);
				// set active tab
				b.addClass('on');
				// set paging buttons
				//_this.reCreatePagingButtons(target);
			});
		});
	},
	initPageButtons:function(){
		var _this=this; var el=this.el;
		
		var checkNav=function(index, lim, bBack, bNext){
			var imgBack=$('img', bBack);
			var imgNext=$('img', bNext);
			imgBack.attr('src', imgBack.attr('src').replace('arrowback-dis.png', 'arrowback.png'));
			imgNext.attr('src', imgNext.attr('src').replace('arrownext-dis.png', 'arrownext.png'));
			if(index<=0){
				imgBack.attr('src', imgBack.attr('src').replace('arrowback.png', 'arrowback-dis.png'));
			}
			if(index>=(lim-1)){
				imgNext.attr('src', imgNext.attr('src').replace('arrownext.png', 'arrownext-dis.png'));
			}
		};
		
		var bBack=$('#b-backpage');
		var bNext=$('#b-nextpage');
		var imgSrc=el.imgPage.attr('src');
		var targetParent=$('.tab-page-1');
		var pIndex=0; var pLim=$('.slide-page', targetParent).length;
		$.each(el.bPage, function(i,o){
			var b=$(o);
			b.click(function(){
				// set all image src state to white
				el.imgPage.attr('src', imgSrc.replace('2.png', '1.png'));
				// slide
				var index = 0;
				pIndex = i;
				var target=$('.slide-page-'+(pIndex+1), targetParent);
				
				targetParent.scrollTo(target, 300);
				// set image src state to blue
				var thisImg=$('img', b);
				var thisSrc=thisImg.attr('src');
				thisImg.attr('src', thisSrc.replace('1.png', '2.png'));

				// check nav
				checkNav(pIndex, pLim, bBack, bNext);
				
				return false;
			});
		});
		
		bBack.unbind('click').bind('click', function(){
			if(pIndex>0){
				pIndex--;
				// clear blue
				el.imgPage.attr('src', imgSrc.replace('2.png', '1.png'));
				// set blue
				var currentImg=$('.page-index-'+(pIndex+1)+' > img');
				currentImg.attr('src', currentImg.attr('src').replace('1.png', '2.png'));
				// scroll
				var target=$('.slide-page-'+(pIndex+1), targetParent);
				targetParent.scrollTo(target, 300);
				// check nav
				checkNav(pIndex, pLim, bBack, bNext);
			}
			return false;
		});
		bNext.unbind('click').bind('click', function(){
			if(pIndex<(pLim-1)){
				pIndex++;
				// clear blue
				el.imgPage.attr('src', imgSrc.replace('2.png', '1.png'));
				// set blue
				var currentImg=$('.page-index-'+(pIndex+1)+' > img');
				currentImg.attr('src', currentImg.attr('src').replace('1.png', '2.png'));
				// scroll
				var target=$('.slide-page-'+(pIndex+1), targetParent);
				targetParent.scrollTo(target, 300);
				// check nav
				checkNav(pIndex, pLim, bBack, bNext);
			}
			return false;
		});
	},
	initNavTabScroller:function(){
		var _this=this; var el=this.el;
		if(el.navTabContainer.length<=0) return;
		var bBack=$('.back-arrow', el.navTabContainer);
		var bNext=$('.next-arrow', el.navTabContainer);
		var wrapper=$('.navtab-wrapper', el.navTabContainer);
		var pIndex=0;
		var bLen=el.bTabs.length;
		var lim=bLen-3;

		var jump=function(){
			var index=0;
			$.each(el.bTabs, function(i,o){
				if($(o).is('.on')){ index=i; return false; }
			});
			if(index>2){
				var l=0;
				if((bLen-1-index)>0){
					l=(index-1)*192;
					pIndex=index-1;
				}
				else{
					l=(index-2)*192;
					pIndex=index-2;
				}
				wrapper.scrollTo({top:0,left:l}, 0);
				//pIndex=index-2;
			}
		};
		jump();

		var checkBtn=function(){
			bBack.removeClass('back-dis'); bNext.removeClass('next-dis');
			if(pIndex<=0){ bBack.addClass('back-dis'); }
			if(pIndex>=lim){ bNext.addClass('next-dis'); }
		};
		checkBtn();

		bBack.click(function(){
			if(pIndex>0){
				var l=(pIndex-1)*192;
				wrapper.scrollTo({top:0,left:l}, 300);
				pIndex--;
				checkBtn();
			}
			return false;
		});
		bNext.click(function(){
			if(pIndex<lim){
				var l=(pIndex+1)*192;
				wrapper.scrollTo({top:0,left:l}, 300);
				pIndex++;
				checkBtn();
			}
			return false;
		});
	},
	initEvents:function(){
		var el=this.el;
		
		// define tab scroller
		this.initNavTabScroller();
		
		// define tab action
		//this.initTabButtons();
		
		// define paging action
		this.initPageButtons();
	},
	init:function(){
		this.initEl();
		this.initEvents();
	}
};
$(function(){
	tab_paging.init();
});