﻿  //ホットペッパーＡＰＩを利用しています。
  //バリューコマースのホットペッパー店コードを利用してリンクしています。
  //コードは<a Href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2357831&pid=876052362" target="_blank" ><img Src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2357831&pid=876052362" height="1" width="1" Border="0">自由テキスト</a>
  
  //リンクコードは<a Href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2357831&pid=876052362&vc_url=http%3a%2f%2fwww%2ehotpepper%2ejp%2fA_20100%2fstr' + shop_id[i] + '%2ehtml%3fvos%3dnhppvccp99002" target="_blank" ><img Src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2357831&pid=876052362" height="1" width="1" Border="0">' + shop_name[i] + '</a>
	
		
	
	
	function hotSearch (start_page){
	    //利用する変数を設定します。
	     var str_html = ""   ;                  //htmlエラー表示の取得
	     var res_count = 0  ;                  //対象店の該当件数を取得
	     var view_count = 0  ;                 //このページの表示件数を取得
	     var shop_id = new Array ();           //各店番号の取得
	     var shop_name = new Array ();         //各店名を取得
	     var shop_photo = new Array ();        //各店写真のURLを取得
	     var shop_genrecpy = new Array ();        //各店の料理名を取得
	     var shop_area = new Array ();        //各店の簡単な住所を取得
	     var shop_avrate = new Array ();        //各店の平均予算を取得
	     var shop_genre = new Array ();    //各キャッチコピーを取得
             var shop_open = new Array ();         //各店の営業時間を取得
	     var shop_close = new Array ();         //各店の休業日を取得
	     var shop_x = new Array ();           //各緯度を取得
	     var shop_y = new Array ();           //各経度を取得
	     var result_html = "";                  //html検索結果を表示する
	     var pagenavi_html = "";                //htmlページナビゲーションを表示する
	     var shop_ichiran_html = "";             //htmlで店一覧を作成
	      



	    
	    //世界測地系の緯度経度で以下を扱います。
	     var wy = myLatlng[0];
	     var wx = myLatlng[1];

		if(!wx||!wy){alert("地図で目的地を探してクリックしてください");}
	
           
		//cgiに必要なデータを送信します
		//開始ページ、ミリ秒単位の緯度経度をクエリの要素として加えます
		var start = 1 ;
		start = (start_page -1) * 10 + 1;
		$('fh').start.value = start;
		$('fh').lng.value = wx;
		$('fh').lat.value = wy;

		//題名欄に「ホットペッパー店の検索」をしている旨の表示をします
		$('kekka_daimei').innerHTML = '<b>ホットペッパー店検索</b>'; 
		$('page_navi').innerHTML     = '';  //ページナビを消去する
				
		//結果欄と一覧表欄に「只今　目的地設定中の表示をします
		$('yado_kekka').innerHTML = '<b>只今</b>'
		$('yado_ichiran').innerHTML = '<p style="padding:25px"><img src="scr_hol/ajax_load_orange.gif" \/><br />検索中...<\/p>';


	     var myAjax = new Ajax.Request(
		'search_hot.cgi',
		{    
			method: 'post', 
			postBody: Form.serialize($('fh')),
			onComplete:function(request) {   
			  $('yado_ichiran').innerHTML = '<p style="padding:8px"><b>読み込み終了しました</b></p>';
	                  showResponse (request);
	　		  },   
	                onSuccess: function(request) {   
			  $('yado_ichiran').innerHTML = '<p style="padding:8px"><b>読み込み成功しました</b></p>';
	                  },   
	                onFailure: function(request) {   
	                  request.transport.abort();
			  },   
	                onException: function (request) {   
	                  request.transport.abort();
			  }
		}
		);
		
		//----cgiに必要データを送信終了





	//----cgiから受信したデータを加工します
		function showResponse (request){
	     //cgiデータをcsv方式で受信します
		var rcvdata = new Array();
		rcvdata = request.responseText.split("%,") ;
		
		
       //検索結果が ０件の場合は目的地検索「obSearch(0)」を実行します
             if(parseInt(rcvdata[1]) == 0 || rcvdata[1] == "")
		{
			obSearch();
		}

       　//検索結果が ０件の以外の場合の処理を行います。
              else
	      {
	      
	     //各変数に値を設定します
		 str_html = rcvdata[0] ;
		 
		 res_count = parseInt(rcvdata[1]) ;
		 
		 view_count = parseInt(rcvdata[2]) ;
		 //表示件数が１０件に満たない場合はview_countを変更します。
		 hasukensu = 0 ;
		 hasukensu =  res_count- (start-1) ;
		 if( hasukensu < 10 )
		   {
		   view_count = hasukensu ;
		   }


		     
		 
		 for( var i = 0; i < view_count; i++ ) 
			 {
			  shop_id[i]        = trim(rcvdata[(i * 10) + 3]);      //各店番号の取得
			  shop_name[i]      = rcvdata[(i * 10) + 4];            //各店名を取得
		      shop_photo[i]     = trim(rcvdata[(i * 10) + 5]);            //各店写真のURLを取得
		      shop_genrecpy[i]     = rcvdata[(i * 10) + 6];            //各店ジャンルキャッチコピーを取得
		      shop_avrate[i]    = trim(rcvdata[(i * 10) + 7]);            //平均予算
			  shop_genre[i] = rcvdata[(i * 10) + 8];            //各キャッチコピーを取得
			  shop_open[i]      = rcvdata[(i * 10) + 9];           //各店の営業時間を取得
			  shop_close[i]     = rcvdata[(i * 10) + 10];           //各店の休業日を取得
		      shop_x[i]         = rcvdata[(i * 10) + 11];           //各緯度を取得
		      shop_y[i]         = rcvdata[(i * 10) + 12];           //各経度を取得
		    
		      }
		      
	
	
	//検索結果が０件の場合はobsearch(0)へ移動するようにしています。
		
	//表示可能な最大ページ数を計算します
		var max_page = (res_count%10 > 0) ? parseInt(res_count/10) + 1 : parseInt(res_count/10);//ページ数


	//検索結果が１００件を超える場合は１００件に制限します
		max_page = (max_page > 10 ) ? 10 : max_page ;  //ページを10(１００件)に制限する
		

	//掲載が２ページ以上ある場合はページナビゲーションを設定します
		pagenavi_html =""
		if (start_page > 1)
			{  
			pagenavi_html += '<a href="javascript:void(0)" onclick="hotSearch (' + (start_page - 1) + ');">←前へ</a>　';								}
		for (var i = 1; i <= max_page; i++ )
			{
			if (start_page == i)
				{
				pagenavi_html += '<span id="page_navi" style="background-color:#fff000;">' + i + '</span>　';
				}
			else
				{
				pagenavi_html += '<a href="javascript:void(0)" onclick="hotSearch (' + i + ');">' + i + '</a>　';
				}
			}
		if (start_page < max_page && 1 <= max_page )
			{
			  pagenavi_html += '<a href="javascript:void(0)" onclick="hotSearch (' + (start_page + 1) + ');">次へ→</a>';
			
			}
          
				
	//検索結果(result_html)を表示します。
		
		result_html += '<div>検索結果：' + res_count + ' 件<span>（うち ' + ((start_page-1)*10 + 1) + '－' + ((start_page-1)*10+view_count) + '件を表示）</span></div>';
		
		
			
	//このページの検索状態表示と店リストを作成します
		shop_ichiran_html = "<div>検索状態 :　" + str_html + "</div>" ;
		
		shop_ichiran_html += '<span id="mark_'+ view_count + '" style="padding:6px;"><a href="javascript:void(0)" onclick="this.blur()" ><b>目標地点</b></a></span><br>';
		for (var i = 0; i < view_count; i++ )                           //view_count=実表示件数
        {
		shop_ichiran_html += '<li id="mark_'+ i + '" style="padding-right:2px;"><a href="javascript:void(0)" onclick="this.blur()" >' + shop_name[i] + '</a><br>（' + shop_genre[i] + '）</li>';
		}
	
		
		

	//各欄に結果を表示するコマンド
		
		$('kekka_daimei').innerHTML = '<b>ホットペッパー店検索結果</b>'; 
		$('page_navi').innerHTML = pagenavi_html;  //ページナビを設定
		$('yado_kekka').innerHTML = result_html;   //店結果件数を設定
		$('yado_ichiran').innerHTML = shop_ichiran_html; //店検索結果を設定
		
		
	//今までに作成されたオーバーレイ(マーカー、アイコン等)を削除します
        map.clearOverlays();
		



//------------------------------地図本文-----------------------------------------------
		
	//各データを元に地図中のアイコンを設定します。
		
			var baseIcon = new GIcon();
			baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
			baseIcon.iconSize = new GSize(20, 34);
			baseIcon.shadowSize = new GSize(37, 34);
			baseIcon.iconAnchor = new GPoint(9, 34);
			baseIcon.infoWindowAnchor = new GPoint(9, 2);
			baseIcon.infoShadowAnchor = new GPoint(18, 25);
		
		      
	
			

			
//------------------------------地図本文終了-------------------------------------------------------------------
		
		
//-----------------地図　createMarker----------------------------------------------------------

 // マーカーはＡ，Ｂ，Ｃ・・で表現します。
 // Create a marker whose info window displays the letter corresponding
 // to the given index.
		  function createMarker(point, index) {
		  	 //目標地点だけののアイコンをブルーにします
		  	 if(index ==  view_count)
		  	 {
		  	 	var blueIcon = new GIcon(G_DEFAULT_ICON);
			  	blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
				// Set up our GMarkerOptions object
				markerOptions = { icon:blueIcon };
				var marker = new GMarker(point, markerOptions)
		        var html = ('ここにコメントを追加します')
			  }
			 else
			  { 
			    var letter = String.fromCharCode("A".charCodeAt(0) + index);
          		var letteredIcon = new GIcon(baseIcon);
          		letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
          		markerOptions = { icon:letteredIcon };
				var marker = new GMarker(point, markerOptions);
			   }
			
	// 最高10程度に地点を設定します。
	// 地図のマーカーをクリックした時も、ページ中の地名をクリックしても詳細が出るようにします。
	
				var mark_ = new Array
				for( var i = 0; i < view_count; i++ )  //view_count=実表示件数
          		{
				if (index==i){
				var html =('<table width="260" height="240" style="background-color:#ffcccc"><tr><td colspan="2" style="padding:4px;font-size:11pt"><b><a Href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2357831&pid=876052362&vc_url=http%3a%2f%2fwww%2ehotpepper%2ejp%2fA_20100%2fstr' + shop_id[i] + '%2ehtml%3fvos%3dnhppvccp99002" target="_blank" ><img Src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2357831&pid=876052362" height="1" width="1" Border="0">' + shop_name[i] + '</b>（詳細）</a><div style="padding:2px;font-size:10pt">' + shop_genrecpy[i] + '</div></td></tr><tr><td style="padding:4px;"><img src="' + shop_photo[i] + '" alt=""><br><span style="padding:2px;font-size:7pt;">写真提供：ホットペッパー.jp </span></td><td valign="top" style="padding:4px;font-size:8pt;">【営業時間】<div style="padding:2px 2px 4px 6px">' + shop_open[i] + '</div>【定休日】<div style="padding:2px 2px 4px 6px">' + shop_close[i] + '</div>【平均予算】<div style="padding:2px 2px 2px 6px">' + shop_avrate[i] + '</div><br></td></tr></table>');
				mark_[i] = document.getElementById("mark_"+i);
				if(mark_[i]){mark_[i].onclick = hyoji;};
				};
				}
				if (index == view_count)
				{
				var html =('<table height="70"><tr><td style="padding:4px;font-size:10pt;background-color:#ff0000;color:#ffffff"><b>ホットペッパー店舗検索中</b><div style="padding:4px;font-size:10pt;"><a href="javascript:obSearch(1);" ><b>目的地点を変更する</b></a></div></td></tr></table>');
				mark_[view_count] = document.getElementById("mark_" + view_count);
				if(mark_[view_count]){mark_[view_count].onclick = hyoji;};
				}
				
			    
				
				
				
	// ページ内からリンクされたときに詳細を表示します。 
				function hyoji() {marker.openInfoWindowHtml(html);};
				
	// 地図の中でマーカーをクリックした時に詳細を表示します
				GEvent.addListener(marker, 'click', function() {
							marker.openInfoWindowHtml(html);});
			
				return marker;
				};

	// 各地点のマーカーポイントを緯度、経度で設定します。
				for( var i = 0; i < view_count; i++ )  //view_count=実表示件数
          		        { 
					var point = new GLatLng(shop_y[i],shop_x[i]);
					var marker = createMarker(point,i);
					map.addOverlay(marker);
					
				}
				
				
				
	//目標を示すためにblueIconを設定します。
				
					var point = new GLatLng(wy,wx);
					var marker = createMarker(point,view_count);
					map.addOverlay(marker);
					
	//------------------------------地図　createMarker終了---------------------------------
	//検索結果が0以外の場合の処理を終了します
                }

	//----cgiから受信したデータ加工を終了します----showResponse (request)の終了
	
		}
		
	// hotSearch終了
	}
		
 
    
    

