//*************************************************
//グローバル変数
//*************************************************
var myTableStyle = "cellspacing=\"1\" style=\"background-color:#633; margin-bottom:1em;\"";
var myThStyle = "style=\"padding:0.5em 1em; font-weight:bold; background-color:#411;\"";
var myTdStyle = "style=\"padding:1em; background-color:#000;\"";

//*************************************************
//ポップアップボックス生成
//*************************************************
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=\"cursor:pointer;\" "
           + "onclick=\"CloseBox('" + myId + "')\">[ ×閉じる ]</span></p>"
           + myText
           + "<p style=\"text-align:center; margin:0; padding:0;\"><span style=\"cursor:pointer;\" "
           + "onclick=\"CloseBox('" + myId + "')\">[ ×閉じる ]</span></p>"
  }
  else
  {
    myNewEle = document.createElement('div');
    myNewEle.id = myId;
    myNewEle.style.backgroundColor = '#000';
    myNewEle.style.padding = '20px 40px';
    myNewEle.style.border = '2px ridge #c77';
    myNewEle.style.position = 'absolute';
    myNewEle.innerHTML = "<p style=\"text-align:center; margin:0 0 1em 0; padding:0;\"><span style=\"cursor:pointer;\" "
           + "onclick=\"CloseBox('" + myId + "')\">[ ×閉じる ]</span></p>"
           + myText
           + "<p style=\"text-align:center; margin:0; padding:0;\"><span style=\"cursor:pointer;\" "
           + "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 - (myNewEle.clientHeight / 2)) + "px";
  myNewEle.style.left = (myCenterleft - (myNewEle.clientWidth / 2)) + "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);
}

//*************************************************
//FreeHtmlレンダー
//*************************************************
function HtmlRender(myTarget)
{
  $.get("/UserData/Htmls.xml", function(myXmlDoc)
  {
    var myFilter = "Html[Target='" + myTarget + "']";
    var myNode = $(myXmlDoc).find(myFilter);

    var myOutput = $(myNode).attr("Memo");

    var myDivId = "#HtmlBox" + myTarget;

    $(myDivId).html(myOutput);
  });
}

//*************************************************
//リンクレンダー
//*************************************************
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") + "\">"
                     + "<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 StaffRender()
{
  $.get("/UserData/Staffs.xml", function(myXmlDoc)
  {
    var myOutput = "<h2>レギュラースタッフ</h2>";
    var myFilter = "Staff[Type='Regular']";
    var mySelect = $(myXmlDoc).find(myFilter);
    var myArray = $(mySelect).get();

    if(myArray.length > 0)
    {
      myOutput += "<table cellspacing=\"20\" class=\"IconList\">";
      var myItemCount = 0;
      while (myItemCount < myArray.length)
      {
        myOutput += "<tr>";
        var myTdCount = 0;
        while (myTdCount < 6) {
          if (myItemCount < myArray.length) {
            myOutput += "<td style=\"text-align:center;\">"
                        + "<img src=\"/UserData/" + myArray[myItemCount].getAttribute("Id") + "-Icon.jpg\" "
                        + "onclick=\"StaffDetail('" + myArray[myItemCount].getAttribute("Id") + "')\" "
                        + "alt=\"\" style=\"cursor:pointer; width:100px; height:150px;\" /><br />"
                        + myArray[myItemCount].getAttribute("Name") + "</td>";
          }
          else {
            myOutput += "<td>&nbsp;</td>";
          }
          myTdCount = myTdCount + 1;
          myItemCount++;
        }
        myOutput += "</tr>";
      }
      myOutput += "</table>";
    }
    else
    {
      myOutput = "<p>データなし…</p>";
    }
    
    //ゲストスタッフ
    myOutput += "<h2>ゲストスタッフ</h2>";
    
    myFilter = "Staff[Type='Guest']";
    mySelect = $(myXmlDoc).find(myFilter);
    myArray = $(mySelect).get();
    
    if(myArray.length > 0)
    {
      myOutput += "<table cellspacing=\"20\" class=\"IconList\">";
      var myItemCount = 0;
      while (myItemCount < myArray.length)
      {
        myOutput += "<tr>";
        var myTdCount = 0;
        while (myTdCount < 6) {
          if (myItemCount < myArray.length) {
            myOutput += "<td style=\"text-align:center;\">"
                        + "<img src=\"/UserData/" + myArray[myItemCount].getAttribute("Id") + "-Icon.jpg\" "
                        + "onclick=\"StaffDetail('" + myArray[myItemCount].getAttribute("Id") + "')\" "
                        + "alt=\"\" style=\"cursor:pointer; width:100px; height:150px;\" /><br />"
                        + myArray[myItemCount].getAttribute("Name") + "</td>";
          }
          else {
            myOutput += "<td>&nbsp;</td>";
          }
          myTdCount = myTdCount + 1;
          myItemCount++;
        }
        myOutput += "</tr>";
      }
      myOutput += "</table>";
    }
    else
    {
      myOutput += "<p>データなし…</p>";
    }
    
    $('#StaffBox').html(myOutput);
  });
}

//*************************************************
//スタッフ詳細レンダー
//*************************************************
function StaffDetail(myPK)
{
  $.get("/UserData/Staffs.xml", function(myXmlDoc)
  {
    var myFilter = "Staff[Id='" + myPK + "']";
    var mySelect = $(myXmlDoc).find(myFilter);
    var myStaff = $(mySelect).get(0);

    var myOutput = "<table " + myTableStyle + ">"
                 + "<tr><th " + myThStyle + ">イメージ</th><th " + myThStyle + ">プロフィール</th></tr>"
                 + "<tr><td " + myTdStyle + ">"
                 + "<img src=\"/UserData/" + myPK + "-Icon.jpg\" alt=\"\" />"
                 + "</td><td " + myTdStyle + ">" + myStaff.getAttribute("Memo") + "</td></tr>"
                 + "</table>";
      PopupBox(myOutput, "StaffDetailBox");
  });
}

//*************************************************
//イベントレンダー
//*************************************************
function EventRender()
 {
  $.get("/UserData/Events.xml", function(myXmlDoc)
  {
    var myFilter = "Event";
    var mySelect = $(myXmlDoc).find(myFilter);
    var myArray = $(mySelect).get();

    if(myArray.length > 0)
    {
      var myOutput = "<table " + myTableStyle + ">"
                   + "<tr><th " + myThStyle + ">開催日</th><th " + myThStyle + ">タイトル</th></tr>"
      for (var i = 0; i < myArray.length; i++)
      {
        myOutput += "<tr><td " + myTdStyle + ">"
                  + myArray[i].getAttribute("Nichiji").substr(0, 4) + "年"
                  + myArray[i].getAttribute("Nichiji").substr(5, 2) + "月"
                  + myArray[i].getAttribute("Nichiji").substr(8, 2) + "日"
                  + "</td><td " + myTdStyle + ">"
                  + "<span onclick=\"EventDetailRender('" + myArray[i].getAttribute("PK") + "')\" "
                  + "style=\"text-decoration:underline; color:#44f; font-weight:bold; cursor:pointer;\">"
                  + myArray[i].getAttribute("Title") + "</span></td></tr>";
      }
      myOutput += "</table>";
    }
    else
    {
      myOutput = "<p>データなし…</p>";
    }
    
    $('#EventBox').html(myOutput);
  });
}

//*************************************************
//イベント詳細レンダー
//*************************************************
function EventDetailRender(myPK) {

  $.get("/UserData/Events.xml", function(myXmlDoc)
  {
    //出演者
    var myFilter = "Cast[EventPK='" + myPK + "']";
    var mySelect = $(myXmlDoc).find(myFilter);
    var myCasts = $(mySelect).get();

    var myCastText = "<table cellspacing=\"15\">";
    var myItemCount = 0;
    while (myItemCount < myCasts.length)
    {
      myCastText += "<tr>";
      var myTdCount = 0;
      while (myTdCount < 5) {
        if (myItemCount < myCasts.length) {
          myCastText += "<td style=\"text-align:center;\">"
                      + "<img src=\"/UserData/" + myCasts[myItemCount].getAttribute("StaffId") + "-Icon.jpg\" "
                      + "onclick=\"StaffDetail('" + myCasts[myItemCount].getAttribute("StaffId") + "')\" "
                      + "alt=\"\" style=\"cursor:pointer; width:100px; height:150px;\" /><br />"
                      + myCasts[myItemCount].getAttribute("StaffName") + "</td>";
        }
        else {
          myCastText += "<td>&nbsp;</td>";
        }
        myTdCount = myTdCount + 1;
        myItemCount++;
      }
      myCastText += "</tr>";
    }
    myCastText += "</table>";
      
    //イベント
    myFilter = "Event[PK='" + myPK + "']";
    mySelect = $(myXmlDoc).find(myFilter);
    var myEvent = $(mySelect).get(0);
    
    var myOutput = "<table " + myTableStyle + ">"
                 + "<tr><th " + myThStyle + ">タイトル</th><td " + myTdStyle + ">"
                 + myEvent.getAttribute("Title") + "</td></tr>"
                 + "<tr><th " + myThStyle + ">開催日</th><td " + myTdStyle + ">"
                 + myEvent.getAttribute("Nichiji").substr(0, 4) + "年"
                 + myEvent.getAttribute("Nichiji").substr(5, 2) + "月"
                 + myEvent.getAttribute("Nichiji").substr(8, 2) + "日"
                 + "</td></tr>"
                 + "<tr><th " + myThStyle + ">出演者</th><td " + myTdStyle + ">"
                 + myCastText + "</td></tr>"
                 + "<tr><th " + myThStyle + ">内容</th><td " + myTdStyle + ">"
                 + myEvent.getAttribute("Memo") + "</td></tr>"
                 + "</table>";
      
      PopupBox(myOutput, "EventDetailBox");
  });
}