//*************************************************
//ポップアップボックス生成
//*************************************************
function PopupBox(myText, myId)
{
  var myNewEle = null;

  if (document.getElementById(myId))
  {
    myNewEle = document.getElementById(myId);
    myNewEle.innerHTML = "<p style=\"text-align:center; margin:0 0 1em 0; padding:0;\">"
                       + "<span style=\"color:#00f;cursor:pointer;font-weight:bold;\" "
                       + "onclick=\"CloseBox('" + myId + "')\">[ ×閉じる ]</span></p>"
                       + myText
                       + "<p style=\"text-align:center; margin:0; padding:0;\">"
                       + "<span style=\"color:#00f;cursor:pointer;font-weight:bold;\" "
                       + "onclick=\"CloseBox('" + myId + "')\">[ ×閉じる ]</span></p>"
  }
  else
  {
    myNewEle = document.createElement('div');
    myNewEle.id = myId;
    myNewEle.style.backgroundColor = '#fff';
    myNewEle.style.border = '4px ridge #f44';
    myNewEle.style.padding = '10px';
    myNewEle.style.position = 'absolute';
    myNewEle.innerHTML = "<p style=\"text-align:center; margin:0 0 1em 0; padding:0;\">"
                       + "<span style=\"color:#00f;cursor:pointer;font-weight:bold;\" "
                       + "onclick=\"CloseBox('" + myId + "')\">[ ×閉じる ]</span></p>"
                       + myText
                       + "<p style=\"text-align:center; margin:0; padding:0;\">"
                       + "<span style=\"color:#00f;cursor:pointer;font-weight:bold;\" "
                       + "onclick=\"CloseBox('" + myId + "')\">[ ×閉じる ]</span></p>"

    document.getElementsByTagName("body").item(0).appendChild(myNewEle);
  }
  var myCenterTop = document.documentElement.scrollTop + (document.documentElement.clientHeight / 2);
  var myCenterleft = (document.documentElement.clientWidth / 2);

  myNewEle.style.top = (myCenterTop - 350) + "px";
  myNewEle.style.left = (myCenterleft - 430) + "px";
}

//*************************************************
//ポップアップボックス削除
//*************************************************
function CloseBox(myEleId) {
  var myEle = document.getElementById(myEleId);
  myEle.parentNode.removeChild(myEle);
}

//*************************************************
//画像のリンク切れ
//*************************************************
function NoImage(myThisEle)
{
  myThisEle.parentNode.removeChild(myThisEle);
}

//*************************************************
//バナー画像リンク切れ
//*************************************************
function NoBanner(myThisEle)
{
  var myNewEle = document.createElement('div');

  myNewEle.innerHTML = "No Banner";
  myNewEle.style.backgroundColor = '#333';
  myNewEle.style.color = '#aaa';
  myNewEle.style.textDecoration = 'none';
  myNewEle.style.fontWeight = 'bold';
  myNewEle.style.textAlign = 'center';
  myNewEle.style.cursor = 'pointer';

  myNewEle.style.width = '88px';
  myNewEle.style.height = '25px';
  myNewEle.style.paddingTop = '6px';

  myThisEle.parentNode.replaceChild(myNewEle, myThisEle);
}

//*************************************************
//更新情報レンダー
//*************************************************
function InfoRender()
{
  $.get("/UserData/Infos.xml", function(myXmlDoc)
  {
    var myFilter = "Info";
    var myNodes = $(myXmlDoc).find(myFilter);
    var myOutput = "<dl>"
    myNodes.each(function()
    {
      var myNichiji = $(this).attr("Nichiji");
      myOutput += "<dt>"
                + myNichiji.substr(0, 4) + "年"
                + myNichiji.substr(5, 2) + "月"
                + myNichiji.substr(8, 2) + "日</dt>"
                + "<dd>" + $(this).attr("Memo") + "</dd>";
    });
    myOutput += "</dl>";
    $('#InfoBox').html(myOutput);
  });
}

//*************************************************
//画像レンダー
//*************************************************
function ImageRender(myTarget)
{
  var myOutput = "<p><img src=\"/UserData/" + myTarget + ".jpg\" alt=\"\" /></p>";
  var myDivId = "#ImageBox" + myTarget;

  $(myDivId).html(myOutput);
}

//*************************************************
//Topicsレンダー
//*************************************************
function TopicsRender(myTarget) {
  $.get("/UserData/Topics.txt", function (myMemo) {
    $("#" + myTarget).html(myMemo);
  });
}

//*************************************************
//Extraレンダー
//*************************************************
function ExtraRender(myTarget) {
  $.get("/UserData/Extra.txt", function (myMemo) {
    $("#" + myTarget).html(myMemo);
  });
}

//*************************************************
//リンクレンダー
//*************************************************
function LinkRender()
{
  $.get("/UserData/Links.xml", function(myXmlDoc)
  {
    var myFilter = "Group";
    var myGroup = $(myXmlDoc).find(myFilter);
    var myOutput = "";

    for (i = 0; i < myGroup.length; i++)
    {
      myOutput += "<h2>" + myGroup[i].getAttribute("Memo") + "</h2>";

      var myItem = $(myXmlDoc).find("Link[GroupMemo='" + myGroup[i].getAttribute("Memo") + "']");
      myOutput += "<table cellspacing=\"10\" style=\"margin-bottom:1em;\">";
      var myItemCount = 0;
      while (myItemCount < myItem.length)
      {
        myOutput += "<tr>";
        var myTdCount = 0;
        while (myTdCount < 3)
        {
          if (myItemCount < myItem.length)
          {
            myOutput += "<td style=\"vertical-align:top;\">"
                     + "<a href=\"" + myItem[myItemCount].getAttribute("SiteUrl") + "\" target=\"_blank\">"
                     + "<img src=\"" + myItem[myItemCount].getAttribute("BannerUrl") + "\" "
                     + "onerror=\"NoBanner(this)\" alt=\"\" "
                     + "style=\"width:88px; height:31px; border-style:none;\" /></td>"
                     + "<td style=\"vertical-align:top;\">" + myItem[myItemCount].getAttribute("Memo") + "</td>";
          }
          else
          {
            myOutput += "<td>&nbsp;</td><td>&nbsp;</td>";
          }
          myTdCount = myTdCount + 1;
          myItemCount++;
        }
        myOutput += "</tr>";
      }
      myOutput += "</table>";
    }
    if (myGroup.length == 0)
    {
      myOutput = "<p>データなし…</p>";
    }
    $('#LinkBox').html(myOutput);
  });
}

//*************************************************
//モデル一覧レンダー
//*************************************************
function ModelRender()
{
  $.get("/UserData/Models.xml", function(myXmlDoc)
  {
    var myFilter = "Model";
    var mySelect = $(myXmlDoc).find(myFilter);
    var myModels = $(mySelect).get();
    var myOutput = "<table cellspacing=\"6\">";
    
    var myItemCount = 0;
    while (myItemCount < myModels.length)
    {
      myOutput += "<tr>";
      var myTdCount = 0;
      while (myTdCount < 7)
      {
        if (myItemCount < myModels.length)
        {
          myOutput += "<td><img src=\"/UserData/" + myModels[myItemCount].getAttribute("Id") + "-Icon.jpg\" "
                    + "alt=\"\" style=\"cursor:pointer;\" onclick=\"ModelDetail('"
                    + myModels[myItemCount].getAttribute("Id") + "','"
                    + myModels[myItemCount].getAttribute("Name") + "')\" /><br />"
                    + "<img src=\"/Images/New-" + myModels[myItemCount].getAttribute("NewBool") + ".gif\" alt=\"\" />"
                    + myModels[myItemCount].getAttribute("Name") + "</td>" + "\n";
        }
        else
        {
          myOutput += "<td style=\"border-style:none;\">&nbsp;</td>";
        }
        myTdCount = myTdCount + 1;
        myItemCount++;
      }
      myOutput += "</tr>";
    }
    
    if (myModels.length == 0)
    {
      myOutput = "<p>データなし…</p>";
    }
    
    $('#ModelBox').html(myOutput);
  });
}

//*************************************************
//モデル詳細レンダー
//*************************************************
function ModelDetail(myPK, myName)
{
  var myOutput = "<table cellspacing=\"10\"><caption style=\"font-weight:bold;\">" + myName + "</caption>"
               + "<tr><td style=\"vertical-align:middle;\">"
               + "<img src=\"/UserData/" + myPK + "-Gallery01.jpg\" alt=\"\" onerror=\"NoImage(this)\" />"
               + "</td><td style=\"vertical-align:middle;\">"
               + "<img src=\"/UserData/" + myPK + "-Gallery02.jpg\"alt=\"\" onerror=\"NoImage(this)\" />"
               +"</tr></table>";
  PopupBox(myOutput, "ModelDetailBox");
}

//*************************************************
//衣装メニューレンダー
//*************************************************
function CostumeRender()
{
  $.get("/UserData/Costumes.xml", function(myXmlDoc)
  {
    //サイドメニュー
    var myOutput = "<ul style=\"list-style:disc; padding-left:1.25em;\">"
                 + "<li style=\"cursor:pointer; text-decoration:underline; color:#00f; margin:0.5em 0;\" "
                 + "onclick=\"CostumeSelect('true','')\">新入荷</li>";
                   
    var myFilter = "Group";
    var mySelect = $(myXmlDoc).find(myFilter);
    var myNodes = $(mySelect).get();

    for (i = 0; i < myNodes.length; i++)
    {
      myOutput += "<li style=\"cursor:pointer; text-decoration:underline; color:#00f; margin:0.5em 0;\" "
                + "onclick=\"CostumeSelect('false', '" + myNodes[i].getAttribute("Memo") + "')\">"
                + myNodes[i].getAttribute("Memo") + "</li>";
    }
    myOutput += "</ul>";

    $('#CostumeMenuBox').html(myOutput);

    myFilter = "Costume[NewBool='true']";
    mySelect = $(myXmlDoc).find(myFilter);
    myNodes = $(mySelect).get();
    CostumeListRender(myNodes);
  });
}

//*************************************************
//衣装メニューレンダー
//*************************************************
function CostumeSelect(myNewBool, myMemo)
{
  $.get("/UserData/Costumes.xml", function(myXmlDoc)
  {
    var myFilter = "";
    if(myNewBool=="true") { myFilter = "Costume[NewBool='true']" }
    else { myFilter = "Costume[GroupMemo='"+ myMemo +"']"; }
    var mySelect = $(myXmlDoc).find(myFilter);
    var myNodes = $(mySelect).get();
    CostumeListRender(myNodes);
  });
}

//*************************************************
//衣装一覧レンダー
//*************************************************
function CostumeListRender(myNodes)
{
  var myOutput = "<table cellspacing=\"5\">";
  var myItemCount = 0;
  while (myItemCount < myNodes.length)
  {
    myOutput += "<tr>";
    var myTdCount = 0;
    while (myTdCount < 3)
    {
      if (myItemCount < myNodes.length)
      {
        myOutput += "<td style=\"padding:4px; width:210px; border:1px solid #f77;\">"
                  + "<div style=\"float:left; width:100px; padding-right:5px;\">"
                  + "<img src=\"/UserData/" + myNodes[myItemCount].getAttribute("Id") + "-Icon.jpg\" alt=\"\" /></div>"
                  + "<div style=\"float:left; width:105px;\">";
        if (myNodes[myItemCount].getAttribute("NewBool") == "true")
        {
          myOutput += "<img src=\"/Images/New-true.gif\" alt=\"\" /><br />";
        }
        myOutput += myNodes[myItemCount].getAttribute("Memo") + "</div></td>" + "\n";
      }
      else
      {
        myOutput += "<td>&nbsp;</td>";
      }
      myTdCount = myTdCount + 1;
      myItemCount++;
    }
    myOutput += "</tr>";
  }
  myOutput += "</table>";

  $('#CostumeListBox').html(myOutput);

  window.scroll(0, 0);
}

//*************************************************
//掲示板レンダー
//*************************************************
function BbsRender()
{
  $.ajax({
    url: "/UserData/Bbss.xml",
    cache: false,
    success: function(myXmlDoc)
    {
      var myNodes = myXmlDoc.getElementsByTagName('Bbs');
      var myOutput = "";
      for (var i = 0; i < myNodes.length; i++)
      {
        myOutput += "<table cellspacing=\"0\" style=\"margin:0 0 2em 0;\">"
                  + "<tr><td style=\"vertical-align:top; padding:0 10px 0 0;\">"
                  + "<img src=\"/UserData/" + myNodes[i].getAttribute("Icon") + "\" alt=\"\" /></td>"
                  + "<td style=\"vertical-align:top;\">"
                  + "<p style=\"font-weight:bold; color:#e77; margin:0 0 1em 0;\">"
                  + myNodes[i].getAttribute("Name") + " - "
                  + myNodes[i].getAttribute("Nichiji").substr(0, 4) + "/"
                  + myNodes[i].getAttribute("Nichiji").substr(5, 2) + "/"
                  + myNodes[i].getAttribute("Nichiji").substr(8, 2) + " "
                  + myNodes[i].getAttribute("Nichiji").substr(11, 2) + ":"
                  + myNodes[i].getAttribute("Nichiji").substr(14, 2) + ":"
                  + myNodes[i].getAttribute("Nichiji").substr(17, 2) + "</p>"
                  + "<p>" + myNodes[i].getAttribute("Memo") + "</p>"
                  + "</tr></table>";
      }
      $('#BbsBox').html(myOutput);
    }
  });
}