(function(){
	
	jQuery.fn.bviewer = function ( config ) {
		
		$( this ).wrap('<div class="bviewerArea"></div>');
		
		var _list_Num=$( this ).children().length;//表示されるリストの数
		
		var s_page=0;//現在のページ
		
		var select_btn=0;//押したボタンのページ
		
		var btnMax=4;//ボタンの数！！増減があるときは書き変えること！！
		
		
		
		
		//ボタンを選択状態にする関数
		 function btnSelect(btn_num){
			 for( i= 0; i < btnMax; i = i+1){
			
			 $('ul.main_btn').find('li').each( function () {
														 		 $(this).removeClass('main_select0'+i);
																 $(this).removeClass('main_hover0'+i);
																			 
			 												});
			 };
			
			 
			 //$('ul.main_btn li').removeClass('main_hover0'+btn_num);
			 
			 $('ul.main_btn').find('li:eq(' + btn_num + ')').each( function () {
			 
																			 $(this).addClass('main_select0'+btn_num);
																			
																			});
			
			 
		 }
		 

		
		//元の画面に戻す
		function slideMover(){
								$( 'ul.bviewer').addClass('main_back');
								$( 'ul.bviewer li div').stop();
								$( 'ul.bviewer li div').animate({opacity:0});
								for(n= 0; n < btnMax; n = n+1){
														 		 $( 'ul.main_btn li').removeClass('main_select0'+n);
																}
																			 
			 							
								
								/*if(s_page<_list_Num-1){
									s_page++;
								}
								else {
									s_page=0;	
								}
								$( 'ul.bviewer' ).animate({ top: -350 * s_page }, 500 );
								btnSelect(s_page);*/
		 };
		 
		 
		 //ボタンを押した時動かす関数
		 function btnMover(){
			 				s_page=select_btn;
							$( 'ul.bviewer li div' ).each( function () {		
																	 			$( 'ul.bviewer').removeClass('main_back');

																	 			$( 'ul.bviewer li div').stop();
																				$( 'ul.bviewer li div').hide();
																				$( 'ul.bviewer li div').eq(select_btn).show();
																				$( 'ul.bviewer li div').eq(select_btn).animate({opacity:1.0},{duration: 500, easing: "linear"});								 
							});
							
							clearInterval(TimerID);
							slideTimer();
		 };
		 
		
		 
		 
		//タイマー
		var TimerID; 
		function slideTimer(){
			TimerID = setInterval(slideMover, 10000);
		
		};
		
		
		//スライド自動再生を実行
		slideTimer();
		
		
		//ボタンを表示する
		//var _j = $( '<ul class="navi"></ul>' ).appendTo( '#main_view' );
		
		
		//メイン画像の枠⇒ボタンへ
		$( this ).addClass( 'bviewer' ).find('li').each( function () {
		
			//ボタンの設定
			$( 'ul.main_btn').find('li').each( function () {
				
				var _serbtn = $(this);
				
				var _btnin = $('ul.main_btn li').index(this);
	
				
				
	
				//ボタンのロールオーバー
				_serbtn.hover( 
							  
							function () { $(this).addClass('main_hover0'+_btnin); }, 
							function () { $(this).removeClass('main_hover0'+_btnin); }
							
							/*function () { 
								for(h= 0; h < 4; h = h+1){
									$('ul.main_btn li').removeClass('main_select0'+h);
								};
								
								$(this).addClass('main_select0'+_btnin);
								select_btn=_btnin;
								btnMover();
							},
							function () { 
								slideMover();
							}*/
				)
		
			
				//ボタンを押したら動かす関数
				_serbtn.click( function () {
						select_btn=_btnin;
						btnMover();
				});
				
				
				//ボタンを押し終わったら選択状態にする
				_serbtn.click( function () {
						btnSelect(s_page);
							
				});
			
			});	
			

		});
	
	
	}
	
})(jQuery);
/*--プラグインここまで--*/



 $(function(){
	
	//プラグイン実行
	$('ul.main_anime').bviewer();
	$('ul.bviewer li div').hide();
	
	
	//ボタンの選択の初期状態を設定
	$('ul.main_anime').addClass('main_back');
	//$('ul.main_btn li:eq(0)').addClass('main_select00');
	
	//表示順に(画像名,リンク先URL)を格納
	var url_ary = new Array();
	url_ary[0]= new Array("main_img01.png","service/jnavi.html")
	url_ary[1]= new Array("main_img02.png","service/navigation.html#viajar");
	url_ary[2]= new Array("main_img03.png","service/tvmeta.html");
	url_ary[3]= new Array("main_img04.png","service/camera.html");
	
	
	$('ul.main_anime li div').each(function(){					 
					
					//divのインデックス番号を抽出
					var _index= $('ul.main_anime li div').index(this);
					
					//divに配列の順に画像を入れる
					$( '<img style="vertical-align:bottom;" src=img/main/'+url_ary[_index][0]+' />').appendTo(this);
					
					//仮のテキストを削除
					$('span').remove();
					
					//クリックしたら画像と同じ配列に格納されているＵＲＬに飛ぶ
					$(this).click(function(){
										  window.open(url_ary[_index][1],'_self'); 
										  return false; 		   
					});	
	});	
	
	
		
});



