// XMLファイル
var XML_FILE = "mapdata.xml";
// XMLファイル形式(0:XMLデータ, 1:XMLスプレッドシート)
var XML_TYPE = 0;
// XMLスプレッドシートの場合はワークシート名
var XML_SHEET = "グーグルマップ作成用データ";

// XMLスプレッドシートのカラム番号
// コンテンツ名(作品名)
var COLM_NAME        = 0;
// 町名(作家名)
var COLM_SUBNAME     = 1;
// 簡単な紹介文
var COLM_DESCRIPTION = 2;
// カテゴリー
var COLM_CATEGORY    = 3;
// 詳細ページのURL
var COLM_URL         = 4;
// 地区
var COLM_AREA        = 5;
// 所在地（GoogleMapで検索可能な形式であること）
var COLM_ADDRESS     = 6;
// 緯度（検索結果でズレがある場合の微調整用）-90～90
var COLM_LAT         = 7;
// 経度（検索結果でズレがある場合の微調整用）-180～180
var COLM_LNG         = 8;
// サムネイル画像のパス
var COLM_IMAGE       = 9;

// 画像がアップロードされるパス
var DIR_IMAGES = "../art/img_s/";

var ICON_MAX_W = 37;
var ICON_MAX_H = 37;
var ICON_PADDING = 3;

var AREA_ALL = "全市";
// 地区
var _arrAreaList = new Array();
_arrAreaList[0] = AREA_ALL;
_arrAreaList[1] = "北区";
_arrAreaList[2] = "東区";
_arrAreaList[3] = "中央区";
_arrAreaList[4] = "江南区";
_arrAreaList[5] = "秋葉区";
_arrAreaList[6] = "南区";
_arrAreaList[7] = "西区";
_arrAreaList[8] = "西蒲区";

// 各地区経緯度オブジェクト
var _arrAreaPos = new Array();
// (中身はGoogleAPIのGLatLngなので、GoogleAPIの読み込みを完了している必要がある。なので設定はonloadイベント以降であるonSuccess_Requestにて行う)

// カテゴリ名（カテゴリのアイコン画像とインデックスを揃えること）
var _arrCategoryName = new Array();
_arrCategoryName[0] = "アート作品";
_arrCategoryName[1] = "美術館と建築物";
_arrCategoryName[2] = "朝市と収穫祭";

// アート作品だけアイコンにサムネイルを表示したり、作品名：作家名の表示をする必要がある
var EX_CATEGORY = 0;
// アート作品だけ大きいアイコン用意する必要がある
var EX_CATEGORY_ICON_FILE_STATIC = "marker_art.png";
// アート作品だけ条件によってアイコンを動的に生成する必要がある
// TODO
//var EX_CATEGORY_ICON_FILE_PHP = "marker_art.php?n=";
var EX_CATEGORY_ICON_FILE_PHP = "marker_art.php?.png";

// 画像の先読み
var imgPreLoad = new Image();
imgPreLoad.src = EX_CATEGORY_ICON_FILE_STATIC;

// カテゴリのアイコン画像をセット
var _arrCategoryIconFile = new Array();
_arrCategoryIconFile[0] = "marker_art2.png";
_arrCategoryIconFile[1] = "marker2.png";
_arrCategoryIconFile[2] = "marker1.png";

//-----------------------------------------
//-----------------------------------------

// 地区選択チェックボックス
var _arrChkArea;
// カテゴリチェックボックス
var _arrChkCategory;
// GoogleMap
var _objGMap;
// XMLデータをJavaScriptの配列にしたもの
var _arrXmlData = new Array();
// _arrXmlData内から検索条件とマッチングしたもの
var _arrMatchingData = new Array();
// 住所⇔経緯度の変換を行う
var _objGeoCorder;
// カテゴリのアイコン画像(GIconオブジェクトを配列の要素とする)
var _arrCategoryIcon;

var ID_AREA_LIST = "divAreaList";

var ID_CATEGORY_ICON_LIST = "trCategoryIconList";

var ID_CATEGORY_LIST = "trCategoryList";

//マーカーアイコンの影
var SHADOW_IMG = "shadow-marker.png";
var SHADOW_IMG_ART = "shadow-marker_art.png";


// XMLのタグ名
// 各データをラップする親ノード
var NODE_ITEM = "item";
// コンテンツ名(作品名)
var NODE_NAME = "name";
// 町名(作家名)
var NODE_SUBNAME = "subname";
// 簡単な紹介文
var NODE_DESCRIPTION = "description";
// カテゴリー
var NODE_CATEGORY = "category";
// 詳細ページのURL
var NODE_URL = "url";
// 地区
var NODE_AREA = "area";
// 所在地（GoogleMapで検索可能な形式であること）
var NODE_ADDRESS = "address";
// 緯度（検索結果でズレがある場合の微調整用）-90～90
var NODE_LAT = "latitude";
// 経度（検索結果でズレがある場合の微調整用）-180～180
var NODE_LNG = "longitude";
// サムネイル画像のパス
var NODE_IMAGE = "image";


// CSSクラス（現在未使用）
var CLASS_ICON = "imgIcon_";
// 重複する住所のデータを格納する連想配列のキー
var ARRAY_KEY_DUPLICATE = "duplicate_data";
// マーカーを地図に追加するかどうかのフラグ
var ARRAY_KEY_ADDMAPFLG = "addmapflg";

// pngfix.jsの読み込みを完了している必要があるのでbody.onload以降に使うこと
function pngfixEx()
{
    try
    {
        // ↓pngfix.jsで定義
        pngfix();
    }
    catch(e)
    {
    }
}
function writeAreaList()
{
    // タグの構造を変えるとロジックが狂う恐れがあるので注意
    document.write('<div id="'+ ID_AREA_LIST +'">');
    for(var i = 0; i < _arrAreaList.length; i++)
    {
        document.write('<input type="checkbox" id="chkArea'+ i +'" value="'+ _arrAreaList[i] +'" />');
        document.write('<label for="chkArea'+ i +'">');
        document.write(_arrAreaList[i]);
        document.write('</label>');
    }
    document.write('</div>');
}

function writeCategoryList()
{
    // タグの構造を変えるとロジックが狂う恐れがあるので注意
    document.write('<table class="tblCategoryList">');
    document.write('<tr id="'+ ID_CATEGORY_ICON_LIST +'">');
    for(var i = 0; i < _arrCategoryIconFile.length; i++)
    {
        document.write('<th><img class="'+ CLASS_ICON + i +'" src="'+ _arrCategoryIconFile[i] +'" id="imgMarker_'+ i +'" /></th>');
    }
    document.write('</tr>');
    document.write('<tr id="'+ ID_CATEGORY_LIST +'">');
    for(var i = 0; i < _arrCategoryName.length; i++)
    {
        document.write('<td>');
        document.write('<input type="checkbox" id="chkCategory'+ i +'" value="'+ _arrCategoryName[i] +'" />');
        document.write('<label for="chkCategory'+ i +'">');
        document.write(_arrCategoryName[i]);
        document.write('</label>');
        document.write('</td>');
    }
    document.write('</tr>');
    document.write('</table>');
}



function onLoad_Page()
{
    // pngfix内でie6以前であるか判別している
    pngfixEx();
    var filename = XML_FILE;
    //ファイル名に乱数を付加してキャッシュを利用しない
    filename += "?rand=" + Math.random();
    // XMLファイルの読み込み開始
    new Ajax.Request(filename, {method:"get",
                                onSuccess:onSuccess_Request,
                                onFailure:onFailure_Request,
                                onException:onException_Request});
}

function onFailure_Request(httpObj)
{
    window.alert("データファイルを読み込めませんでした。");
}

function onException_Request(httpObj)
{
    // onSuccess_Request中にスクリプトエラーが発生した場合でもこのイベントが呼ばれる
    window.alert("データファイルの読み込み中にエラーが発生しました。");
    window.alert(arguments[1]);
}

function XmlD2JSArray(httpObj)
{
    // XMLデータを_arrXmlDataへ取得
    var objItems = httpObj.responseXML.getElementsByTagName(NODE_ITEM);
    var strNodeValue = "";
    var strTagName = "";
    var arrTemp = new Array();
    for(var nItemCnt = 0; nItemCnt < objItems.length; nItemCnt++)
    {
        arrTemp = new Array();
        for(var nChildCnt = 0; nChildCnt < objItems[nItemCnt].childNodes.length; nChildCnt++)
        {
            try
            {
                // FireFoxの場合XMLファイルに改行等があると、firstChild.nodeValueを参照する際に例外が発生するのでキャッチする
                //（インデントや改行等をNULLのノードとして認識するためfirstChildがNULLとなりnodeValueを参照する際に例外となる）
                strNodeValue = objItems[nItemCnt].childNodes[nChildCnt].firstChild.nodeValue;
                strTagName = objItems[nItemCnt].childNodes[nChildCnt].tagName;
                if(strNodeValue == 0)
                {
                    strNodeValue = undefined;
                }
                arrTemp[strTagName] = strNodeValue;
            }
            catch(e)
            {
            }
        }
        _arrXmlData.push(arrTemp);
    }
}

function XmlS2JSArray(httpObj)
{
    // XMLスプレッドシートを_arrXmlDataへ取得
    var objXml = httpObj.responseXML;
    var arrTemp = new Array();
    var objSheet = getWorkSheet(objXml, XML_SHEET);
    for(var nRowCnt = 0; nRowCnt < getWorkSheetRowCount(objSheet); nRowCnt++)
    {
        try
        {
            arrTemp = new Array();
            // 空のセルを参照するとgetCellData関数（Lib_Excel.js）で例外が発生する。catchした場合はundefinedとする
            if(getCellData(objXml, XML_SHEET, COLM_NAME, nRowCnt) != 0)
            {
                arrTemp[NODE_NAME] = getCellData(objXml, XML_SHEET, COLM_NAME, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_SUBNAME, nRowCnt) != 0)
            {
                arrTemp[NODE_SUBNAME] = getCellData(objXml, XML_SHEET, COLM_SUBNAME, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_DESCRIPTION, nRowCnt) != 0)
            {
                arrTemp[NODE_DESCRIPTION] = getCellData(objXml, XML_SHEET, COLM_DESCRIPTION, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_CATEGORY, nRowCnt) != 0)
            {
                arrTemp[NODE_CATEGORY] = getCellData(objXml, XML_SHEET, COLM_CATEGORY, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_URL, nRowCnt) != 0)
            {
                arrTemp[NODE_URL] = getCellData(objXml, XML_SHEET, COLM_URL, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_AREA, nRowCnt) != 0)
            {
                arrTemp[NODE_AREA] = getCellData(objXml, XML_SHEET, COLM_AREA, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_ADDRESS, nRowCnt) != 0)
            {
                arrTemp[NODE_ADDRESS] = getCellData(objXml, XML_SHEET, COLM_ADDRESS, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_LAT, nRowCnt) != 0)
            {
                arrTemp[NODE_LAT] = getCellData(objXml, XML_SHEET, COLM_LAT, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_LNG, nRowCnt) != 0)
            {
                arrTemp[NODE_LNG] = getCellData(objXml, XML_SHEET, COLM_LNG, nRowCnt);
            }
            if(getCellData(objXml, XML_SHEET, COLM_IMAGE, nRowCnt) != 0)
            {
                arrTemp[NODE_IMAGE] = getCellData(objXml, XML_SHEET, COLM_IMAGE, nRowCnt);
            }
            _arrXmlData.push(arrTemp);
        }
        catch(e)
        {
        }
    }
}

function onSuccess_Request(httpObj)
{
    // ブラウザがGoogleMapに対応しているかチェック
    if(GBrowserIsCompatible())
    {
        switch(XML_TYPE)
        {
            case 0:
                XmlD2JSArray(httpObj);
                break;

            case 1:
                XmlS2JSArray(httpObj);
                break;

            default:
                XmlS2JSArray(httpObj);
                break;
        }
        
        // GMap2オブジェクトを作成 引数は地図をはめ込むエレメント（getElementById()で取得）
        _objGMap = new GMap2(document.getElementById("divMapCanvas"));
        // 地図へ移動・ズームのコントロールを追加
        _objGMap.addControl(new GLargeMapControl());
        // 地図へ地図種類選択のコントロールを追加
        _objGMap.addControl(new GMapTypeControl());
        // 縮尺を追加
        _objGMap.addControl(new GScaleControl());
        // 右下の小地図
        _objGMap.addControl(new GOverviewMapControl(new GSize(189, 150)));
        // ホイールによるズームの許可
        _objGMap.enableScrollWheelZoom();
        // 地図の初期表示エリアを設定
        SetMapDefault();
        // ジオコーダ作成
        _objGeoCorder = new GClientGeocoder();
        
        // GIconオブジェクトを要素とする配列を作成
        _arrCategoryIcon = new Array();
        for(var i = 0; i < _arrCategoryIconFile.length; i++)
        {
            // GIcon作成
            var objIcon = new GIcon();
            // <body onload="">イベントが発生したということは、画像も読み込まれているはず。。。
            var elmImg = new Image();
            if(i == EX_CATEGORY)
            {
                elmImg.src = EX_CATEGORY_ICON_FILE_STATIC;
                objIcon.image = EX_CATEGORY_ICON_FILE_STATIC;
                objIcon.shadow = SHADOW_IMG_ART;
            }
            else
            {
                elmImg.src = _arrCategoryIconFile[i];
                objIcon.image = _arrCategoryIconFile[i];
                objIcon.shadow = SHADOW_IMG;
            }
            objIcon.iconSize = new GSize(elmImg.width, elmImg.height);
            objIcon.iconAnchor = new GPoint(elmImg.width / 2, elmImg.height);
            objIcon.infoWindowAnchor = new GPoint(elmImg.width / 2, elmImg.height);
            _arrCategoryIcon[i] = objIcon;
        }
        
        // 各区役所の座標（0は全市）
        _arrAreaPos[0] = null;
        // 北区
        _arrAreaPos[1] = new GLatLng(37.916245942181995, 139.2185515165329);
        // 東区
        _arrAreaPos[2] = new GLatLng(37.93683617747863, 139.0731543302536);
        // 中央区
        _arrAreaPos[3] = new GLatLng(37.91636655529039, 139.03632760047913);
        // 江南区
        _arrAreaPos[4] = new GLatLng(37.86767993215757, 139.09399509429932);
        // 秋葉区
        _arrAreaPos[5] = new GLatLng(37.78833998741242, 139.11324799060821);
        // 南区
        _arrAreaPos[6] = new GLatLng(37.76573209856405, 139.01911854743957);
        // 西区
        _arrAreaPos[7] = new GLatLng(37.874082724556864, 138.97167563438415);
        // 西蒲区
        _arrAreaPos[8] = new GLatLng(37.76042044676381, 138.88929963111877);
        
        // 検索ボタンイベント設定
        document.getElementById("btnSearch").onclick = onClick_btnSearch;
        // カテゴリチェックボックスすべてを取得
        _arrChkCategory = document.getElementById(ID_CATEGORY_LIST).getElementsByTagName("input");
        // 地区チェックボックスすべてを取得
        _arrChkArea = document.getElementById(ID_AREA_LIST).getElementsByTagName("input");

        // 地区名クリック時のイベントを設定
        for(var i = 0; i < _arrChkArea.length; i++)
        {
            // イベントハンドラの引数にインデックスを渡す
            _arrChkArea[i].onclick = new Function("onClick_rdoArea("+ i +");");
        }
        
        
        // クエリストリングからモードを取得
        var strMode = location.search.substr(1);

        // モードによりカテゴリチェックボックスと地区チェックボックスの初期状態を変更
        switch(strMode)
        {
            case "1":
            // にいがた収穫祭
                _arrChkArea[0].checked = true;
                _arrChkCategory[2].checked = true;
                break;
            // 作品紹介
            case "2":
                _arrChkArea[0].checked = true;
                _arrChkCategory[0].checked = true;
                break;

            // 新潟市の美術館と建築物
            case "3":
                _arrChkArea[0].checked = true;
                _arrChkCategory[1].checked = true;
                break;

            // トップページから
            default:
                _arrChkArea[0].checked = true;
                break;
        }

        SearchContents();
    }
    else
    {
        // ブラウザがGoogleMapに対応していない
        window.alert("御使用のブラウザではこのページを御覧頂けません。");
    }
}
function SetMapDefault()
{
    // 初期表示は新潟市役所を中心としておく
    var objLatlng = new GLatLng(37.9161924, 139.0364126);
    // 地図の中心を設定 引数は経緯度, 拡大率（大きいほど拡大率が高い）, 地図種類（通常、航空写真…など）
    _objGMap.setCenter(objLatlng, 12, G_NORMAL_MAP);
}
function onClick_btnSearch()
{
    // 検索ボタン押下
    SearchContents();
}

function SearchContents()
{
    // 前回の検索結果をクリア
    // 何故か配列が完全に初期化されない。。。
    for(var i = 0; i < _arrMatchingData.length; i++)
    {
        if(_arrMatchingData[i][ARRAY_KEY_DUPLICATE] != undefined)
        {
            _arrMatchingData[i][ARRAY_KEY_DUPLICATE] = undefined;
        }
    }
    _arrMatchingData = new Array();
    
    // チェックされているカテゴリチェックボックス
    var arrChkedCategory = new Array();
    for(var i = 0; i < _arrChkCategory.length; i++)
    {
        if(_arrChkCategory[i].checked)
        {
            arrChkedCategory.push(_arrChkCategory[i]);
        }
    }

    // チェックされている地区チェックボックス
    var bAreaAll = false;
    var arrChkedArea = new Array();
    for(var i = 0; i < _arrChkArea.length; i++)
    {
        if(_arrChkArea[i].checked)
        {
            arrChkedArea.push(_arrChkArea[i]);
            // 全市がチェックされていたらブレーク
            if(_arrChkArea[i].value == AREA_ALL)
            {
                bAreaAll = true;
                break;
            }
        }
    }
    
    // チェックされたカテゴリ数を基準にループ（マッチングデータの配列がカテゴリ毎に並ぶように）
    for(var nBoxCnt = 0; nBoxCnt < arrChkedCategory.length; nBoxCnt++)
    {
        // チェックされた地区数分ループ
        for(var nAreaCnt = 0; nAreaCnt < arrChkedArea.length; nAreaCnt++)
        {
            // XMLデータ分ループ（<item>タグ分）
            for(var nItemCnt = 0; nItemCnt < _arrXmlData.length; nItemCnt++)
            {
                // チェックされたカテゴリとデータのカテゴリが一致するか
                if(arrChkedCategory[nBoxCnt].value == _arrXmlData[nItemCnt][NODE_CATEGORY])
                {
                    // 地区のマッチングチェック
                    if(bAreaAll || arrChkedArea[nAreaCnt].value == _arrXmlData[nItemCnt][NODE_AREA])
                    {
                        _arrMatchingData.push(_arrXmlData[nItemCnt]);
                    }
                }
            }
            // 全市がチェックされていたらブレークしないと、重複して表示されてしまう
            if(bAreaAll)
            {
                break;
            }
        }
    }
    
    // アート作品に限り、同じ会場で展示されることを考慮し、住所が一致した場合はデータをまとめる
    for(var i = 0; i < _arrMatchingData.length; i++)
    {
        _arrMatchingData[i][ARRAY_KEY_ADDMAPFLG] = true;
    }
    var bDuplicateAddress = false;
    for(var i = 0; i < _arrMatchingData.length; i++)
    {
        bDuplicateAddress = false;
        for(var j = 0; j < _arrMatchingData.length; j++)
        {
            if(
                // 住所が入力されている
                _arrMatchingData[i][NODE_ADDRESS] != undefined &&
                _arrMatchingData[i][NODE_ADDRESS] != 0 &&
                // かつカテゴリーがアート作品である
                _arrMatchingData[i][NODE_CATEGORY] == _arrCategoryName[EX_CATEGORY] &&
                // かつ住所が一致するデータがある
                _arrMatchingData[i][NODE_ADDRESS] == _arrMatchingData[j][NODE_ADDRESS]
            )
            {
                bDuplicateAddress = true;
                break;
            }
        }
        
        // iとjが同じ場合は同じデータを参照しているので無視
        if(bDuplicateAddress && i != j)
        {
            // マップにアイコンを表示するかどうかのフラグをfalseに
            _arrMatchingData[i][ARRAY_KEY_ADDMAPFLG] = false;
            if(_arrMatchingData[j][ARRAY_KEY_DUPLICATE] == undefined)
            {
                _arrMatchingData[j][ARRAY_KEY_DUPLICATE] = new Array();
            }
            // データを、住所が重複するデータを保持する配列に加える
            _arrMatchingData[j][ARRAY_KEY_DUPLICATE].push(_arrMatchingData[i]);
        }
    }
    // 検索結果を表示
    ShowResult();
}

function ShowResult()
{
    // GoogleMap上のすべてのマーカーを削除
    _objGMap.clearOverlays();
    // GoogleMap上のすべてのイベントを削除
    GEvent.clearInstanceListeners(_objGMap);
    var strCatName = "";
    var nCatCnt = 0;
    var strIconFile = "";
    var strPrevCatName = "";
    var divItemList = document.getElementById("divItemList");
    divItemList.innerHTML = "";

    for(var i = 0; i < _arrMatchingData.length; i++)
    {
        if(_arrMatchingData[i][NODE_ADDRESS] == undefined &&
           (_arrMatchingData[i][NODE_LAT] == undefined || _arrMatchingData[i][NODE_LNG] == undefined)
        )
        {
            // 住所、経緯度どちらかが指定されていなければ、結果を表示できない
            continue;
        }
        
        strCatName = _arrMatchingData[i][NODE_CATEGORY];
        if(strPrevCatName != strCatName)
        {
            // カテゴリが変わったらカテゴリ名の<h2>タグを作成する
            strPrevCatName = strCatName;
            var elmH2 = document.createElement("h2");
            var elmCatName = document.createTextNode(strCatName);

            // 配列からアイコン画像を取得するためのインデックスを得る
            for(nCatCnt = 0; nCatCnt < _arrCategoryName.length; nCatCnt++)
            {
                if(_arrCategoryName[nCatCnt] == strCatName)
                {
                    break;
                }
            }

            strIconFile = _arrCategoryIconFile[nCatCnt];

            elmH2.appendChild(elmCatName);
            divItemList.appendChild(elmH2);
        }
        // コンテンツを表示するする<table>タグを作成
        var elmTable = document.createElement("table");
        var elmTableBody = document.createElement("tbody");
        var elmTr = document.createElement("tr");
        var elmTdIcon = document.createElement("td");
        var elmTdName = document.createElement("td");
        var elmP = document.createElement("p");
        var elmBR = document.createElement("br");
        //var elmImg = document.createElement("img");
        var elmImg = document.getElementById("imgMarker_"+ nCatCnt).cloneNode(false);
        var elmContentName = document.createTextNode(_arrMatchingData[i][NODE_NAME]);
        var elmContentSubName;

        if(nCatCnt == EX_CATEGORY)
        {
            elmContentSubName = document.createTextNode(_arrMatchingData[i][NODE_SUBNAME]);
        }
        else
        {
            elmContentSubName = document.createTextNode("（"+ _arrMatchingData[i][NODE_AREA] + _arrMatchingData[i][NODE_SUBNAME] +"）");
        }
        //elmImg.src = strIconFile;
        //elmImg.className = CLASS_ICON + nCatCnt;
        // 関数・引数を文字列化し、新規の関数オブジェクトとしてセットする
        elmP.onclick = new Function("onClick_ItemList(" + i + ");");

        elmTdIcon.appendChild(elmImg);
        // アート作品の時は、作者名→作品名の順に表示
        //elmP.appendChild(elmContentName);
        if(nCatCnt == EX_CATEGORY)
        {
            elmP.appendChild(elmContentSubName);
        }
        else
        {
            elmP.appendChild(elmContentName);
        }
        elmP.appendChild(elmBR);

        // アート作品の時は、作者名→作品名の順に表示
        //elmP.appendChild(elmContentSubName);
        if(nCatCnt == EX_CATEGORY)
        {
            elmP.appendChild(elmContentName);
        }
        else
        {
            elmP.appendChild(elmContentSubName);
        }
        
        elmTdName.appendChild(elmP);
        elmTr.appendChild(elmTdIcon);
        elmTr.appendChild(elmTdName);
        elmTableBody.appendChild(elmTr);
        elmTable.appendChild(elmTableBody);
        divItemList.appendChild(elmTable);

        // IE6以下の場合のみ、pngfixCoreを実行
        //var arrVersion = navigator.appVersion.split("MSIE");
        //var version = parseFloat(arrVersion[1])
        //if ((version >= 5.5 && version < 7) && (document.body.filters)) 
        //{
        //    pngfixCore(elmImg);
        //}

        if(_arrMatchingData[i][ARRAY_KEY_ADDMAPFLG])
        {
            // 経緯度が設定されているか
            if(_arrMatchingData[i][NODE_LAT] == undefined || _arrMatchingData[i][NODE_LNG] == undefined)
            {
                // 必要な情報をローカル変数にするため、関数内部でgetLatLng()を実行する
                rapLatLng(_arrMatchingData[i], i);
            }
            else
            {
                // 経緯度をそのままセット
                // マーカー作成
                SetGMarker(i);
            }
        }
    }
}
function rapLatLng(arrMatchingData, nIndex)
{
    // 住所から経緯度を求める。getLatLng関数によりGoogleサーバーとの通信が発生する
    _objGeoCorder.getLatLng(arrMatchingData[NODE_ADDRESS],
                            function(latlng)
                            {
                                // このコールバック関数はGoogleサーバーとの通信が終わったタイミングで起動するため、注意が必要（回線状況次第で一定のタイミングでは発生しない）
                                // 通信終了次第、配列に経緯度をセット
                                if(latlng != null)
                                {
                                    // 住所から経緯度を取得できた
                                    _arrMatchingData[nIndex][NODE_LAT] = latlng.lat();
                                    _arrMatchingData[nIndex][NODE_LNG] = latlng.lng();
                                    // マーカー作成
                                    SetGMarker(nIndex);
                                }
                                else
                                {
                                    // 住所から経緯度を取得できない可能性もある
                                    //(ここでelmPに別のonclickイベントを設定するか、onClick_ItemListイベントで経緯度がundefinedの場合に処理を追加するか)
                                }
                            });
}

function onClick_ItemList(nIndex)
{
    var nLat = _arrMatchingData[nIndex][NODE_LAT];
    var nLng = _arrMatchingData[nIndex][NODE_LNG];
    if(nLat != undefined && nLng != undefined)
    {
        // クリックしたコンテンツを中心に、ズーム最大
        _objGMap.setCenter(new GLatLng(nLat, nLng), 17);
        // HTMLをレンダリングするフキダシを表示
        GOpenInfoWindow(nIndex);
    }
}

function SetGMarker(nIndex)
{
    var nCatCnt = 0;
    // 配列からカスタムアイコンを取得するためのインデックスを得る
    for(nCatCnt = 0; nCatCnt < _arrCategoryName.length; nCatCnt++)
    {
        if(_arrCategoryName[nCatCnt] == _arrMatchingData[nIndex][NODE_CATEGORY])
        {
            break;
        }
    }
    var objIcon = _arrCategoryIcon[nCatCnt];
    // アート作品の吹き出しに数字を振る処理
    if(
        nCatCnt == EX_CATEGORY &&
        _arrMatchingData[nIndex][ARRAY_KEY_DUPLICATE] != undefined
    )
    {
        // imageプロパティだけを変更したのではうまくいかない。newして各プロパティを複製してから変数を上書く
        var objIconTemp = new GIcon();
        var nArraySize = _arrMatchingData[nIndex][ARRAY_KEY_DUPLICATE].length + 1;
        // TODO
        //objIconTemp.image = EX_CATEGORY_ICON_FILE_PHP + nArraySize + "&.png";
        objIconTemp.image = EX_CATEGORY_ICON_FILE_PHP;
        objIconTemp.shadow = objIcon.shadow;
        objIconTemp.iconSize = objIcon.iconSize;
        objIconTemp.iconAnchor = objIcon.iconAnchor;
        objIconTemp.infoWindowAnchor = objIcon.infoWindowAnchor;
        objIcon = objIconTemp;
    }
    
    var objLatLng = new GLatLng(_arrMatchingData[nIndex][NODE_LAT], _arrMatchingData[nIndex][NODE_LNG]);
    // カスタムアイコンをつかってマーカー作成
    var objMarker = new GMarker(objLatLng, {icon: objIcon});
    
    if(nCatCnt == EX_CATEGORY)
    {
        var objImg = new Image();
        objImg.onload = function()
        {
            var objImgIcon = new GIcon();
            objImgIcon.image = objImg.src;
            objImgIcon.infoWindowAnchor = new GPoint(ICON_MAX_W / 2, objIcon.iconSize.height);
            if(objImg.width > objImg.height)
            {
                // 横長画像の場合
                // 画像の縦横比率を維持
                var nImgHeight = objImg.height * (ICON_MAX_W / objImg.width);

                objImgIcon.iconSize = new GSize(ICON_MAX_W, nImgHeight);
                objImgIcon.iconAnchor = new GPoint(ICON_MAX_W / 2, objIcon.iconSize.height - ICON_PADDING - (ICON_MAX_H - nImgHeight) / 2);
            }
            else if(objImg.width < objImg.height)
            {
                // 縦長画像の場合
                // 画像の縦横比率を維持
                var nImgWidth = objImg.width * (ICON_MAX_H / objImg.height);

                objImgIcon.iconSize = new GSize(nImgWidth, ICON_MAX_H);
                objImgIcon.iconAnchor = new GPoint(nImgWidth / 2, objIcon.iconSize.height - ICON_PADDING);
            }
            else
            {
                // 正方形の場合
                objImgIcon.iconSize = new GSize(ICON_MAX_W, ICON_MAX_H);
                objImgIcon.iconAnchor = new GPoint(ICON_MAX_W / 2, objIcon.iconSize.height - ICON_PADDING);
            }

            var objImgMarker = new GMarker(objLatLng, {icon: objImgIcon});
            // GEventにマーカークリック時のイベントを追加
            GEvent.addListener(objImgMarker,
                               "click",
                               function(){
                                   // HTMLをレンダリングするフキダシを表示
                                   GOpenInfoWindow(nIndex);
                               });
            // ↓addOverlayする順番を変えると、IEで画像がフキダシの後ろに隠れてしまう
            _objGMap.addOverlay(objMarker);
            _objGMap.addOverlay(objImgMarker);
        }
        
        objImg.src = GetImagePath(nIndex);
    }
    else
    {
        // GEventにマーカークリック時のイベントを追加
        GEvent.addListener(objMarker,
                           "click",
                           function(){
                               // HTMLをレンダリングするフキダシを表示
                               GOpenInfoWindow(nIndex);
                           });
        _objGMap.addOverlay(objMarker);
    }
}

function GOpenInfoWindow(nIndex)
{
    // 既に開いている他のフキダシを閉じる
    _objGMap.closeInfoWindow();
    
    var objLatlng = new GLatLng(_arrMatchingData[nIndex][NODE_LAT], _arrMatchingData[nIndex][NODE_LNG]);
    if(_arrMatchingData[nIndex][NODE_IMAGE] != undefined)
    {
        // 画像が指定されている
        var objImage = new Image();

        //※src指定前にイベントハンドラをセットしないとIEやOperaでイベントが発生しないことがある
        // 画像を読み込み次第、フキダシ表示
        objImage.onload = function(){
                              _objGMap.openInfoWindowHtml(objLatlng, GetInfoWindowHtml(_arrMatchingData[nIndex], objImage));
                          };
        // 画像のパスを間違っていたりして存在しない場合
        objImage.onerror = function(){
                              _objGMap.openInfoWindowHtml(objLatlng, GetInfoWindowHtml(_arrMatchingData[nIndex], new Image()));
                          };

        //※イベントハンドラを先にセットしてからsrcを指定
        objImage.src = GetImagePath(nIndex);
    }
    else
    {
        // 画像が指定されていない
        // すぐにフキダシ表示
        _objGMap.openInfoWindowHtml(objLatlng, GetInfoWindowHtml(_arrMatchingData[nIndex], new Image()));
    }
}

function GetImagePath(nIndex)
{
    var strRet = "";
    if(_arrMatchingData[nIndex][NODE_IMAGE] == undefined)
    {
        return strRet;
    }
    if(_arrMatchingData[nIndex][NODE_IMAGE].indexOf("http://")  > -1 ||
       _arrMatchingData[nIndex][NODE_IMAGE].indexOf("https://") > -1)
    {
        // 画像が絶対パス指定
        strRet = _arrMatchingData[nIndex][NODE_IMAGE];
    }
    else
    {
        // 画像がファイル名だけ
        strRet = DIR_IMAGES + _arrMatchingData[nIndex][NODE_IMAGE];
    }
    return strRet;
}

function GetInfoWindowHtml(arrContentsData, objImage)
{
    var strRet = "";
    var strUrl = "";
    var strImg = "";
    var strDes = "";
    if(arrContentsData[NODE_URL] != undefined)
    {
        strUrl = '<a href="'+ arrContentsData[NODE_URL] +'" target="_blank">詳細ページはこちら</a>';
    }
// TODO
/*
    if(
        arrContentsData[ARRAY_KEY_DUPLICATE] == undefined &&
        arrContentsData[NODE_DESCRIPTION] != undefined
    )
    {
        strDes = arrContentsData[NODE_DESCRIPTION];
    }
    else if(arrContentsData[ARRAY_KEY_DUPLICATE] != undefined)
    {
        strDes += '<a href="'+ arrContentsData[NODE_URL] +'" target="_blank">';
        strDes += arrContentsData[NODE_SUBNAME] +'　/　'+ arrContentsData[NODE_NAME] +"</a><br>";
        for(var i = 0; i <  arrContentsData[ARRAY_KEY_DUPLICATE].length; i++)
        {
            strDes += '<a href="'+ arrContentsData[ARRAY_KEY_DUPLICATE][i][NODE_URL] +'" target="_blank">';
            strDes += arrContentsData[ARRAY_KEY_DUPLICATE][i][NODE_SUBNAME] +'　/　'+ arrContentsData[ARRAY_KEY_DUPLICATE][i][NODE_NAME] +"</a><br>";
        }
        strUrl = "";
    }
*/
    if(
        arrContentsData[NODE_DESCRIPTION] != undefined
    )
    {
        strDes = arrContentsData[NODE_DESCRIPTION];
    }
    // どのブラウザでもnewした直後のImageオブジェクトのsrcプロパティは空文字の模様
    if(objImage.src != "")
    {
        // srcプロパティが指定されていたら画像を表示
        strImg = '<img src="'+ objImage.src +'" width="'+ objImage.width +'" height="'+ objImage.height +'" />';
    }

    strRet  = '<table class="tblInfoWindow">';
    strRet += '<tr>';
    strRet += '<th colspan="2">';

    // アート作品の場合は、アート作品名も表示
    if(arrContentsData[NODE_CATEGORY] == _arrCategoryName[EX_CATEGORY])
    {
       strRet += arrContentsData[NODE_SUBNAME];
       strRet += '　/　';
    }

    strRet += arrContentsData[NODE_NAME];
    strRet += '</th>';
    strRet += '</tr>';
    strRet += '<tr>';
    strRet += '<td>';
    strRet += strImg;
    strRet += '</td>';
    strRet += '<td class="td_descrip">';
    strRet += strDes;
    strRet += '</td>';
    strRet += '</tr>';
    strRet += '</table>';
    strRet += strUrl;

    return strRet;
}

function onClick_rdoArea(nIndex)
{
    if(nIndex < _arrAreaPos.length && _arrAreaPos[nIndex] != null)
    {
        _objGMap.setCenter(_arrAreaPos[nIndex], 13);
    }
    else
    {
        SetMapDefault();
    }
}