var g_areatype = '';
var g_areakey = '';
var g_keyword = '';

var g_jsonreq;

var g_page;
var g_num=10;
var g_json_data;

var g_max=50;

var title_max = 15;
var content_max = 75;

// for simple ##################################################################################################################################

function run_simple(areatype, areakey, keyword) {
  
  g_page=1;
  g_areatype = areatype;
  g_areakey = areakey;
  g_keyword = keyword;
  g_num = 4;
  g_max = 50;
  
  Element.show('indicator');
  $("search_result").innerHTML = "";

  var url =
    "http://api.4travel.jp/Ver1/SearchAlbum.php?format=xml&ic=utf8&oc=utf8&areatype=" + areatype + "&areakey=" + areakey + "&format=jsonp&all=1&order=travel_date&callback=search_callback_simple&max=" + g_max + "&keyword=" + encodeURIComponent(keyword);
  g_jsonreq = new JSONscriptRequest(url);
  g_jsonreq.buildScriptTag();
  g_jsonreq.addScriptTag();
}

function search_callback_simple(json_data){

  Element.hide('indicator');
  g_json_data = json_data;
  draw_simple(json_data);
  
}

function show_simple(page) {

  g_page = page;
  draw_simple(g_json_data);
  
}

function draw_simple(json_data){
  var s = ''; 

// show travel information ******************************************************
  
  s = s + '<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mid">';
  s = s + '  <tr align="left" class="mid">';
  s = s + '    <td height="10"></td>';
  s = s + '  </tr>';
  s = s + '  <tr class="mid">';
  s = s + '    <td>';
/*  s = s + '      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bar_jp/bar_long.gif" class="mid">';
  s = s + '        <tr>';
  s = s + '          <th width="75%" height="25" align="left" ><span class="mid"><img src="images/dot.gif" width="5" height="1"></span><img src="images/user_comment.gif" width="16" height="16" align="absmiddle">&nbsp;&nbsp;旅行記</th>';
  s = s + '          <td width="25%" height="25" align="right" valign="middle" class="mid"><a href="http://www.thainavigation.com/travel-record.php?areatype='+g_areatype+'&areakey='+g_areakey+'" class="mid1"><img src="images/news/tnv_more.gif" alt="旅行記詳細検索" width="50" height="20" border="0" align="absmiddle"/></a>&nbsp;</td>';
  s = s + '        </tr>';
  s = s + '      </table>';*/
  
  s = s + '      <table width="100%" border="0" cellspacing="0" cellpadding="0">';
  s = s + '        <tr>';
  s = s + '          <td width="15"><img src="/images/border_jp/border1_report1.gif" width="15" height="32" /></td>';
  s = s + '          <td background="/images/border_jp/border1_report2.gif" class="mid2_b">';
  s = s + '          <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">';
  s = s + '         <tr>';
  s = s + '          <th align="left" class="mid2_b"><span class="mid"><img src="/images/dot.gif" width="5" height="1"></span><img src="/images/user_comment.gif" width="16" height="16" align="absmiddle">&nbsp;&nbsp;旅行記</th>';
  s = s + '          <td align="right"><a href="http://www.thainavigation.com/travel-record.php?areatype='+g_areatype+'&areakey='+g_areakey+'" class="mid1"><img src="/images/button/more1.gif" width="45" height="17" border="0" /></a></td>';	
  s = s + '          </tr>';	  
  s = s + '          </table></td>';		
  s = s + '          <td width="15"><img src="/images/border_jp/border1_report3.gif" width="15" height="32" /></td>';
  s = s + '        </tr>';
  s = s + '      </table>';
  
  /*s = s + '<table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="15"><img src="/images/border_jp/border1_report1.gif" width="15" height="32" /></td>
                                                <td background="/images/border_jp/border1_report2.gif" class="mid2_b"><table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                      <th align="left" class="mid2_b"><span class="mid"><img src="/images/dot.gif" width="5" height="1"></span><img src="/images/user_comment.gif" width="16" height="16" align="absmiddle">&nbsp;&nbsp;旅行記</th>
                                                      <td align="right"><a href="http://www.thainavigation.com/travel-record.php?areatype='+g_areatype+'&areakey='+g_areakey+'" class="mid1"><img src="/images/button/more1.gif" width="45" height="17" border="0" /></a></td>
                                                    </tr>
                                                </table></td>
                                                <td width="15"><img src="/images/border_jp/border1_report3.gif" width="15" height="32" /></td>
                                              </tr>
                                          </table>';*/
  
  s = s + '    </td>';
  s = s + '  </tr>';
  s = s + '  <tr>';
  s = s + '    <td  background="images/border_jp/border1_report4.gif">';
  s = s + '      <table width="200" border="0" cellpadding="0" cellspacing="0" class="mid">';
  s = s + '        <tr>';
  s = s + '          <td valign="top">&nbsp;</td>';
  s = s + '        </tr>';
  
  
  // paging ******************************************************
  s = s + "<tr>";
  s = s + "  <td colspan=2>";
  if (json_data && json_data.length > 0) {
    s = s + '&nbsp;&nbsp;' + json_data.length + ' 件見つかりました。&nbsp;&nbsp;&nbsp;';
    if (json_data.length > g_num) {
      c = Math.ceil(json_data.length / g_num);
      if (g_page == 1) {
      	s = s + '<img src="images/controlpage/playset_start_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '<img src="images/controlpage/playset_backward_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '&nbsp;';
      } else {
      	s = s + '<a href="javascript:show_simple(1)" class="mid1"><img src="images/controlpage/playset_start.gif" align="absmiddle" border="0"/></a>';
      	s = s + '<a href="javascript:show_simple(' + (g_page - 1) + ')" class="mid1"><img src="images/controlpage/playset_backward.gif" align="absmiddle" border="0"/></a>';
      	s = s + '&nbsp;';
      }
      for(i=1; i<c+1; i++ ){
        if ((g_page == i) ){
          s = s + '<font color=orange><b>' + i + '</b></font>' ;
        }else{
          s = s + '<a href="javascript:show_simple(' + i + ')" class="mid1">' + i + '</a>';
        }
        s = s + '&nbsp;';
      }
      if (g_page == c) {
      	s = s + '<img src="images/controlpage/playset_forward_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '<img src="images/controlpage/playset_end_disable.gif" align="absmiddle" border="0" />';
      } else {
      	s = s + '<a href="javascript:show_simple(' + (g_page + 1) + ')" class="mid1"><img src="images/controlpage/playset_forward.gif" align="absmiddle" border="0"/></a>';
      	s = s + '<a href="javascript:show_simple(' + c +  ')" class="mid1"><img src="images/controlpage/playset_end.gif" align="absmiddle" border="0" /></a>';
      }
    } 
  }
  //s = s + '<br /><br />';
  s = s + '  </td>';
  s = s + '</tr>';
  
  if(json_data && json_data.length != 0){
  	
  	endcount = g_page*g_num;
  	if (json_data.length < endcount) endcount = json_data.length;

    for(i=(g_page-1)*g_num; i<endcount; i++){
    
    if (i%2==0){
        s = s + '        <tr>';
        
    } 
	
    //if ( (i >= (g_page-1)*g_num ) && (i < g_page*g_num) ) {
    	
    	// album title
    	var title = json_data[i].albumtitle;
        if (title.length > title_max) {
        	title = title.substring(0,title_max-1) + "･･･";
        }
    	
    	// album content
    	var desc = json_data[i].description;
        if (desc.length > content_max) {
        	desc = desc.substring(0,content_max-1) + "･･･";
        }
    	
        s = s + '          <td width="442" valign="top">';
        s = s + '            <table width="300" border="0" cellpadding="1" cellspacing="2" class="mid">';
        s = s + '              <tr>';
        s = s + '                <td width="75" align="center" valign="top"><span class="mid"><a href="' + json_data[i].albumurl + '" target="_blank" class="mid1"><img src="' + json_data[i].picture + '" width="70" border="0" class="border_1" alt="' + json_data[i].albumtitle + '"></a></span></td>';
        s = s + '                <th width="225" align="left" valign="top" class="mid">'; 
        s = s + '                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mid">';
        s = s + '                    <tr>';
        s = s + '                      <th align="left" class="mid"><a href="' + json_data[i].albumurl + '" target="_blank" class="mid1">' + title + '</a></th>';
        s = s + '                    </tr>';
        s = s + '                    <tr>';
        s = s + '                      <td class="mid"><a href="' + json_data[i].albumurl + '" target="_blank" class="mid1">' + desc + '</a></td>';
        s = s + '                    </tr>';
        s = s + '                    ';
        s = s + '                  </table>';
        s = s + '                </th>';
        s = s + '              </tr>';
        s = s + '              <tr>';
        s = s + '                <td colspan=2 class="mid">( by ' + json_data[i].traveler + ' さん)</td>';
        s = s + '              </tr>';
        s = s + '            </table>';
        s = s + '          </td>';
    //}
    
    if (i%2==1) {
        s = s + '        </tr>';
    }
    }
    
  } else {
   // s = s + '          <td>旅行記がみつかりませんでした。</td>';
    s = s + '        </tr>';
  }
  
  s = s + '        <tr>';
  s = s + '          <td valign="top">&nbsp;</td>';
  s = s + '        </tr>';
  s = s + '      </table>';
  s = s + '      ';
  s = s + '    </td>';
  s = s + '  </tr>';
  s = s + '                <tr>';
  s = s + '                 <td height="5"><img src="images/border_jp/border1_report5.gif" width="623" height="10" /></td>';
  s = s + '                 </tr>';
  s = s + '  <tr>';
  s = s + '    <td>';
  s = s + '      <p align="right">';
  s = s + '        <a href="http://4travel.jp/" target=_blank title="旅行のクチコミサイト フォートラベル" class="mid1"><img src=http://img.4travel.jp/img/api/4travel_api_88x35.gif width=88 height=35 alt="旅行のクチコミサイト フォートラベル" border=0></a> ';
  s = s + '      </p>';
  s = s + '    </td>';
  s = s + '  </tr>';
  s = s + '</table>';
  
  $("search_result").innerHTML = s;
}



// for detail ##################################################################################################################################

function run(areatype, areakey, keyword, purpose) {
  
  if (document.getElementById("menu").value != '' && document.getElementById("submenu").value == '') {
  	alert('エリア名称を選択してください。');
  	return;
  }
  
  g_page=1;
  g_areatype = areatype;
  g_areakey = areakey;
  g_keyword = keyword;
  
  Element.show('indicator');
  $("search_result").innerHTML = "";

  var url =
    "http://api.4travel.jp/Ver1/SearchAlbum.php?format=xml&ic=utf8&oc=utf8&areatype=" + areatype + "&areakey=" + areakey + "&purpose=" + purpose +"&format=jsonp&all=1&order=travel_date&callback=search_callback&max=" + g_max + "&keyword=" + encodeURIComponent(keyword);
  g_jsonreq = new JSONscriptRequest(url);
  g_jsonreq.buildScriptTag();
  g_jsonreq.addScriptTag();
}

function search_callback(json_data){

  Element.hide('indicator');
  g_json_data = json_data;
  draw(json_data);
  
}

function show_detail(page) {

  g_page = page;
  draw(g_json_data);
  
}

function draw(json_data){
  var s = '';	

// paging ******************************************************

  if (json_data) {
    s = '<table width="623"><tr><td  align="left" ><strong>['+json_data.length + ']</strong>件見つかりました</td><td align="right">';
    if (json_data.length > g_num) {
      c = Math.ceil(json_data.length / g_num);
      if (g_page == 1) {
      	s = s + '<img src="images/controlpage/playset_start_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '<img src="images/controlpage/playset_backward_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '&nbsp;';
      } else {
      	s = s + '<a href="javascript:show_detail(1)" class="mid1"><img src="images/controlpage/playset_start.gif" align="absmiddle" border="0"/></a>';
      	s = s + '<a href="javascript:show_detail(' + (g_page - 1) + ')" class="mid1"><img src="images/controlpage/playset_backward.gif" align="absmiddle" border="0"/></a>';
      	s = s + '&nbsp;';
      }
      for(i=1; i<c+1; i++ ){
        if ((g_page == i) ){
          s = s + '<font color=orange ><b class="mid1">' + i + '</b></font>' ;
        }else{
          s = s + '<a href="javascript:show_detail(' + i + ')">' + i + '</a>';
        }
        s = s + '&nbsp;';
      }
      if (g_page == c) {
      	s = s + '<img src="images/controlpage/playset_forward_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '<img src="images/controlpage/playset_end_disable.gif" align="absmiddle" border="0" />';
      } else {
      	s = s + '<a href="javascript:show_detail(' + (g_page + 1) + ')" class="mid1"><img src="images/controlpage/playset_forward.gif" align="absmiddle" border="0"/></a>';
      	s = s + '<a href="javascript:show_detail(' + c +  ')"><img src="images/controlpage/playset_end.gif" align="absmiddle" border="0" /></a>';
      }
    } 
  }
  s = s + '</td></tr></table><br />'


// show travel information ******************************************************   
  if(json_data && json_data.length != 0){

  	endcount = g_page*g_num;
  	if (json_data.length < endcount) endcount = json_data.length;
	for(i=(g_page-1)*g_num; i<endcount; i++){
	      s = s + '<b><img src="images/star.gif" width="14" height="14" align="absmiddle"> <a href="' + json_data[i].albumurl + '" target="_blank" class="mid1">' + json_data[i].albumtitle + '</a></b><br />\r\n';
	      s = s + '<table width="623" border="0" cellpadding="8" cellspacing="1" bgcolor="#D4D4D4" class="mid">\r\n'
	      s = s + '  <tr><th width="10%" bgcolor="#ECE9E3" class="mid2">投稿者</th><td bgcolor="#FFFFFF">' + json_data[i].traveler + '&nbsp;</td></tr>\r\n'
	      s = s + '  <tr><th width="10%" bgcolor="#ECE9E3" class="mid2">テーマ</th><td bgcolor="#FFFFFF"><a href="' + json_data[i].themeurl + '" target="_blank" class="mid1">' + json_data[i].theme + '</a>&nbsp;</td></tr>\r\n'
	      s = s + '  <tr><th width="10%" bgcolor="#ECE9E3" class="mid2">エリア</th><td bgcolor="#FFFFFF"><a href="' + json_data[i].areaurl + '" target="_blank" class="mid1">' + json_data[i].area + '</a>&nbsp;</th></tr>\r\n'
	      s = s + '  <tr><th width="10%" bgcolor="#ECE9E3" class="mid2">写真</th><td bgcolor="#FFFFFF"><img src="' + json_data[i].picture + '"alt="' + json_data[i].albumtitle + '">&nbsp;</td></tr>\r\n'
	      
	      desc = json_data[i].description;
	      desc = desc.replace(/\x0D\x0A|\x0D|\x0A/g,'<br>');
	      
	      s = s + '  <tr><th width="10%" bgcolor="#ECE9E3">内容</th><td bgcolor="#FFFFFF">' + desc + '&nbsp;</td></tr>\r\n'
	      s = s + '</table><br>'
	  
	  if( i >= (g_page*g_num-1) ){
	  	break;
	  }
	  
    }
		
  }else{
      s = '旅行記がみつかりませんでした。';
  }

  if (json_data) {
    s = s + '<table width="623"><tr><td  align="left" ><strong>['+json_data.length + ']</strong>件見つかりました</td><td align="right">';
    if (json_data.length > g_num) {
      c = Math.ceil(json_data.length / g_num);
      if (g_page == 1) {
      	s = s + '<img src="images/controlpage/playset_start_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '<img src="images/controlpage/playset_backward_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '&nbsp;';
      } else {
      	s = s + '<a href="javascript:show_detail(1)" class="mid1"><img src="images/controlpage/playset_start.gif" align="absmiddle" border="0"/></a>';
      	s = s + '<a href="javascript:show_detail(' + (g_page - 1) + ')" class="mid1"><img src="images/controlpage/playset_backward.gif" align="absmiddle" border="0"/></a>';
      	s = s + '&nbsp;';
      }
      for(i=1; i<c+1; i++ ){
        if ((g_page == i) ){
          s = s + '<font color=orange><b class="mid1">' + i + '</b></font>' ;
        }else{
          s = s + '<a href="javascript:show_detail(' + i + ')" class="mid1">' + i + '</a>';
        }
        s = s + '&nbsp;';
      }
      if (g_page == c) {
      	s = s + '<img src="images/controlpage/playset_forward_disable.gif" align="absmiddle" border="0"/>';
      	s = s + '<img src="images/controlpage/playset_end_disable.gif" align="absmiddle" border="0" />';
      } else {
      	s = s + '<a href="javascript:show_detail(' + (g_page + 1) + ')" class="mid1"><img src="images/controlpage/playset_forward.gif" align="absmiddle" border="0"/></a>';
      	s = s + '<a href="javascript:show_detail(' + c +  ')" class="mid1"><img src="images/controlpage/playset_end.gif" align="absmiddle" border="0" /></a>';
      }
    } 
  }
  s = s + '</td></tr></table><br />'
  
  $("search_result").innerHTML = s;
}

// メインメニューを設定
function setMenu( req , areatype, areakey)
{
  // 出力先のトップ要素となるselect要素
  var topElem = document.getElementById("menu");

  // pref_name要素を取得
  var prefnames = req.responseXML.getElementsByTagName('pref_name');
  var prefvalues = req.responseXML.getElementsByTagName('pref_value');
  
  for(var i=0; i<prefnames.length; i++) {
    // エリアタイプ名
    var pref_name = prefnames[i].firstChild.nodeValue;
    var pref_value = prefvalues[i].firstChild.nodeValue;
    
    // option要素を作成
    var opElem = document.createElement('option');
    // value属性を設定
    opElem.setAttribute("value", pref_value);
    
   if (pref_value == areatype) opElem.selected = true;
    
    // テキストノードを設定
    var text = document.createTextNode(pref_name);
    opElem.appendChild(text);
    topElem.appendChild(opElem);
    
  }
  changeList( document.getElementById("menu"), areakey );
}

// メインメニューを選択した場合の処理
function changeList( target, areakey )
{
  // リクエストURL
  var url = 'include/Prefecture.xml';
  // リクエスト
  sendRequest( url, 
               function (req) { setSubmenu(req, target, areakey)},
               'GET',
               '' );
}

// サブメニューを設定
function setSubmenu( req, target, areakey )
{
  // 出力先のトップ要素となるselect要素
  var topElem = document.getElementById("submenu");
  // 全ての<option>要素を削除
  var options = topElem.childNodes;
  while(options.length>0){
    topElem.removeChild(options[options.length-1]);
  }
  // pref_name要素を取得
  var pref = req.responseXML.getElementsByTagName('pref_value');
  for(var i=0; i<pref.length; i++) {
    // pref_name要素の内容が選択ボックスの値と等しい場合
    if(pref[i].firstChild.nodeValue == target.value){
      // pref_name要素と親が同じそのcity要素を取得
      var disps = pref[i].parentNode.getElementsByTagName('disp');
      var values = pref[i].parentNode.getElementsByTagName('value');
      
      for(var j=0; j<disps.length; j++) {
        // エリア名
        var city_name = disps[j].firstChild.nodeValue;
        var city_value = values[j].firstChild.nodeValue;
        
        // option要素を作成
        var opElem = document.createElement('option');
        // value属性を設定
        opElem.setAttribute("value", city_value);
        
        if (city_value == areakey) opElem.selected = true;
        
        // テキストノードを設定
        var text = document.createTextNode(city_name);
        opElem.appendChild(text);
        topElem.appendChild(opElem);
      }
    }
  }
}

// テーマメニューを設定
function setMenuForTheme( req )
{
  // 出力先のトップ要素となるselect要素
  var topElem = document.getElementById("purpose");

  // pref_name要素を取得
  var disps = req.responseXML.getElementsByTagName('disp');
  var values = req.responseXML.getElementsByTagName('value');
  
  for(var i=0; i<disps.length; i++) {
    // エリアタイプ名
    var pref_name = disps[i].firstChild.nodeValue;
    var pref_value = '';
    if (values[i].firstChild != null){
      pref_value = values[i].firstChild.nodeValue;
    }
    
    // option要素を作成
    var opElem = document.createElement('option');
    // value属性を設定
    opElem.setAttribute("value", pref_value);
    
    // テキストノードを設定
    var text = document.createTextNode(pref_name);
    opElem.appendChild(text);
    topElem.appendChild(opElem);
    
  }
  
}


// For travel-record.php