/**
 * @class HTML Process Object
 * @constructor
 */
function HTML() {

  var APP = 'http://teamm6.appspot.com/';

  var PREV_PAGE = '\u524d\u3078';
  var NEXT_PAGE = '\u6b21\u3078';

  /**
   * HTML output of InfoWindow
   * @param {Object} entry -Entry Details
   * @param {boolean} error api:do_approval was successful or not
   */
  this.markerInfo = function(entry, error) {
    var infoType = _getInfoType(entry);
    var str = [
               '<div class="info ',
               infoType,
               '">',
              '<img src="images/spacer.gif" width="520" height="1" />',
               _getHead(entry, infoType),
               _getAction(entry, infoType),
               _getIdea(entry, infoType, error),
               '</div>'
               ].join('');
    return str;
  }

  function _getInfoType(entry) {
    var infoType = '';
    if (entry.type == 0) {
      if (entry.img_title != "") {
        infoType = "info_general";
      } else {
        infoType = "info_generalNoIdea";
      }
    } else if (entry.type == 1) {
      if (entry.img_title != "") {
        infoType = "info_org";
      } else {
        infoType = "info_orgUnderApproval";
      }
    } else if (entry.type == 2) {
      infoType = "info_guest";
    }
    return infoType;
  }

  function _getHead(entry, infoType) {
    var head = '';
    var icon = '';
    if (infoType == "info_guest") {
      icon = ['<img src="images/guest/',
              entry.user_id,
              '.jpg" class="icon" alt="" width="90" height="65" />'].join('');
    } else {
      icon = ['<img src="images/icons/',
              entry.icon,
              '" class="icon" alt="" width="32" height="32" />'].join('');
    }
    head = ['<div class="name">',
            '<small class="date">',
            entry.date,
            '</small>',
            icon,
            '<h3>',
            entry.nickname,
            '</h3>',
            '<img src="images/spacer.gif" class="cb" />',
            '</div>'
            ].join('');
    return head;
  }

  function _getAction(entry, infoType) {
    var action = '';
    if (infoType == "info_general" || infoType == "info_generalNoIdea") {
      var actions = [];
      var max = (entry.actions.length > 10)? 10: entry.actions.length;
      if (max > 0) {
        for (var i = 0; i < max; i++) {
          actions.push('<li class="action">');
          actions.push('<a href="#" title="');
          switch (entry.actions[i]) {
            case 1:
            actions.push('\u590F\u306E\u51B7\u623F\u6642\u306E\u8A2D\u5B9A');
            actions.push('\u6E29\u5EA6\u3092\u0032\u0036\u2103\u304B\u3089');
            actions.push('\u0032\u0038\u2103\u306B\u0032\u2103\u9AD8\u304F');
            actions.push('\u3059\u308B\u3002');
            break;
            case 2:
            actions.push('\u30B7\u30E3\u30EF\u30FC\u306E\u4F7F\u7528\u6642');
            actions.push('\u9593\u3092\u0031\u65E5\u0031\u5206\u77ED\u304F');
            actions.push('\u3059\u308B\u3002');
            break;
            case 3:
            actions.push('\u98A8\u5442\u306E\u6B8B\u308A\u6E6F\u3092\u6D17');
            actions.push('\u6FEF\u306B\u4F7F\u3044\u307E\u308F\u3059\u3002');
            break;
            case 4:
            actions.push('\u901A\u52E4\u3084\u8CB7\u7269\u306E\u969B\u306B');
            actions.push('\u3001\u81EA\u52D5\u8ECA\u306E\u4EE3\u308F\u308A');
            actions.push('\u306B\u81EA\u8EE2\u8ECA\u3092\u5229\u7528\u3059');
            actions.push('\u308B\u3002');
            break;
            case 5:
            actions.push('\u901A\u52E4\u3084\u8CB7\u7269\u306E\u969B\u306B');
            actions.push('\u3001\u81EA\u52D5\u8ECA\u306E\u4EE3\u308F\u308A');
            actions.push('\u306B\u30D0\u30B9\u3084\u9244\u9053\u3092\u5229');
            actions.push('\u7528\u3059\u308B\u3002');
            break;
            case 6:
            actions.push('\u767A\u9032\u6642\u306B\u3075\u3093\u308F\u308A');
            actions.push('\u30A2\u30AF\u30BB\u30EB\u300C\u0065\u30B9\u30BF');
            actions.push('\u30FC\u30C8\u300D\u3092\u3059\u308B\u3002');
            break;
            case 7:
            actions.push('\u8CB7\u3044\u7269\u306E\u969B\u306F\u3001\u30DE');
            actions.push('\u30A4\u30D0\u30C3\u30B0\u3092\u6301\u3061\u6B69');
            actions.push('\u304D\u3001\u7701\u5305\u88C5\u306E\u91CE\u83DC');
            actions.push('\u3092\u9078\u3076\u3002');
            break;
            case 8:
            actions.push('\u30B4\u30DF\u306E\u5206\u5225\u3092\u5FB9\u5E95');
            actions.push('\u3057\u3001\u5EC3\u30D7\u30E9\u30B9\u30C1\u30C3');
            actions.push('\u30AF\u3092\u30EA\u30B5\u30A4\u30AF\u30EB\u3002');
            break;
            case 9:
            actions.push('\u30C6\u30EC\u30D3\u3092\u898B\u306A\u3044\u3068');
            actions.push('\u304D\u306F\u6D88\u3059\u3002\u0028\u30D6\u30E9');
            actions.push('\u30A6\u30F3\u7BA1\u30C6\u30EC\u30D3\u0029');
            break;
            case 10:
            actions.push('\u51B7\u8535\u5EAB\u306E\u6249\u3092\u958B\u3051');
            actions.push('\u3066\u3044\u308B\u6642\u9593\u3092\u77ED\u304F');
            actions.push('\u3059\u308B\u3002');
            break;
          }
          actions.push('">');
          actions.push('<img src="images/icons/action_');
          actions.push(entry.actions[i]);
          actions.push('_s.gif" width="30" height="30" alt="" />');
          actions.push('</a>');
          actions.push('</li>');
        }
      } else if (max == 0 && entry.approval_state == 2){
        actions.push('<li class="noAction">');
        actions.push('<a href="http://www.google.co.jp/ig/">');
        actions.push('\u0047\u0072\u0065\u0065\u006E\u0020\u0069\u0047');
        actions.push('\u006F\u006F\u0067\u006C\u0065\u0020\u304B\u3089');
        actions.push('\u0020\u0043\u004F\u0032\u0020\u524A\u6E1B\u30A2');
        actions.push('\u30AF\u30B7\u30E7\u30F3\u3092\u3057\u3066\u307F');
        actions.push('\u3088\u3046\uFF01</a></li>');
      }
      action = ['<div class="action">',
                '<b class="rcon"><b class="r1">&nbsp;</b>',
                '<b class="r2">&nbsp;</b><b class="r3">&nbsp;</b>',
                '<b class="r4">&nbsp;</b></b>',
                '<div class="outline">',
                '<ul>',
                actions.join(''),
                '</ul><img src="images/spacer.gif" class="cl" />',
                '<p class="total_cuts">',
                '\u0043\u004F\u0032\u0020\u524A\u6E1B\u91CF',
                '<strong>',
                entry.total_cuts,
                '</strong>',
                '</p>',
                '<img src="images/spacer.gif" class="cb" />',
                '</div>',
                '<b class="rcon"><b class="r4">&nbsp;</b>',
                '<b class="r3">&nbsp;</b><b class="r2">&nbsp;</b>',
                '<b class="r1">&nbsp;</b></b>',
                '</div>'
                ].join('');
    }

    return action;
  }

  function _getIdea(entry, infoType, error) {
    var idea = '';
    if (infoType != "info_generalNoIdea" &&
        infoType != "info_orgUnderApproval") {
      var total_approvals = '';
      var approval_btn = '';
      if (infoType != "info_guest") {
        /**
          * Random Choice of one of the approved_users
          * which the user of entry was approved
          */
        var approved_user = [];
        if (entry.approved_users.length) {
          var random = Math.floor(Math.random() * entry.approved_users.length);
          approved_user.push('<span class="approvingUser">');
          approved_user.push('<a href="javascript:void(0);" onclick="');
          approved_user.push('openApproved(');
          approved_user.push(entry.approved_users[random].user_id)
          approved_user.push(');">');
          approved_user.push('&raquo;&nbsp;');
          approved_user.push(entry.approved_users[random].nickname);
          approved_user.push('</a>');
          approved_user.push('</span>');
        }
        total_approvals = ['<div class="total_approvals">',
                           '<b class="rcon"><b class="r1">&nbsp;</b>',
                           '<b class="r2">&nbsp;</b><b class="r3">&nbsp;</b>',
                           '<b class="r4">&nbsp;</b></b>',
                           '<div class="outline">',
                           '\u5FDC\u63F4\u4EBA\u6570',
                           '<strong>',
                           entry.total_approvals,
                           ' \u4EBA',
                           '</strong>',
                           approved_user.join(''),
                           '</div>',
                           '<b class="rcon"><b class="r4">&nbsp;</b>',
                           '<b class="r3">&nbsp;</b><b class="r2">&nbsp;</b>',
                           '<b class="r1">&nbsp;</b></b>',
                           '</div>'
                           ].join('');
      }
      if (Green.login.logged_in) {
        if (entry.approval_state == 0) {
          var retry = [];
          if (error) {
            retry.push('<p>');
            retry.push('\u5FDC\u63F4\u304C\u3067\u304D\u307E\u305B\u3093');
            retry.push('\u3067\u3057\u305F\u3002\u518D\u5EA6\u3001\u304A');
            retry.push('\u8A66\u3057\u304F\u3060\u3055\u3044\u3002');
            retry.push('</p>');
          }
          approval_btn = ['<p class="approve">',
                          '<a href="#progressReport" onclick="doApproval(',
                          entry.user_id,
                          ');">',
                          '<img src="images/btn_do_approval.gif" width="129" ',
                          'height="48" alt="\u5FDC\u63F4\u3059\u308B" />',
                          '</a>',
                          '</p>',
                          retry.join('')].join('');
        } else if (entry.approval_state == 1) {
          approval_btn = ['<p class="approve">\u5FDC\u63F4\u3092\u53D7\u3051',
                          '\u4ED8\u3051\u307E\u3057\u305F\u3002<br />\u3042',
                          '\u308A\u304C\u3068\u3046\u3054\u3056\u3044\u307E',
                          '\u3057\u305F\uFF01</p>'].join('');
        } else if (entry.approval_state == 2) {
          if (infoType != "guest") {
            approval_btn = ['<p class="approve">\u3042\u306A\u305F\u306E',
                            '\u0020\u0043\u004F\u0032\u0020\u524A\u6E1B',
                            '\u30A2\u30A4\u30C7\u30A2\u3067\u3059\u3002',
                            '<br />\u4ED6\u306E\u4EBA\u306E\u0020\u0043\u004F',
                            '\u0032\u0020\u524A\u6E1B\u30A2\u30A4\u30C7',
                            '\u30A2\u3092\u5FDC\u63F4\u3057\u3088\u3046\uFF01',
                            '</p>'].join('');
          }
        }
      } else {
        if (infoType != "guest") {
          approval_btn = ['<p class="forApprove">',
                          '<a href="about.html">\u30D7\u30ED\u30B8\u30A7\u30AF',
                          '\u30C8\u306B\u53C2\u52A0\u3057\u3066\u3053\u306E\u30A2',
                          '\u30A4\u30C7\u30A2\u3092\u5FDC\u63F4\u3057\u3088\u3046',
                          '</a><br />\u3059\u3067\u306B\u53C2\u52A0\u3057\u3066',
                          '\u3044\u308B\u65B9\u306F\u3001\u3044\u307E\u3059\u3050',
                          '<a href="',
                          Green.login.login_url2,
                          '">',
                          '\u30ED\u30B0\u30A4\u30F3',
                          '</a>',
                          '</p>'].join('');
        }
      }
      idea = [
              '<div class="idea">',
              '<img src="images/spacer.gif" width="1" height="200" ',
              'style="float:right;" />',
              '<p class="ideaTitle">',
              '\u004F\u006E\u0065\u0020\u0047\u0072\u0065',
              '\u0065\u006E\u0020\u30A2\u30A4\u30C7\u30A2',
              '</p>',
              '<h3 class="idea"><em class="symbol">\u25CF</em>',
              entry.img_title,
              '</h3>',
              '<p>',
              '<img src="',
              APP,
              entry.img_url,
              '" class="image" alt="" />',
              entry.img_note,
              '</p>',
              '<img src="images/spacer.gif" width="1" height="1" ',
              'class="cb" />',
              '</div>',
              '<div class="approval">',
              '<div class="approvalBtn">',
              approval_btn,
              '</div>',
              '<div class="approvalInfo">',
              total_approvals,
              '</div>',
              '<img src="images/spacer.gif" width="1" height="1" ',
              'class="cb" />',
              '</div>'
              ].join('');
    } else if (infoType == "info_generalNoIdea" && entry.approval_state == 2) {
      idea = [
              '<div class="idea">',
              '<p class="noIdea"><a href="http://www.google.co.jp/ig/">',
              '\u004F\u006E\u0065\u0020\u0047\u0072\u0065\u0065\u006E\u0020',
              '\u30A2\u30A4\u30C7\u30A2\u3092\u0020\u0069\u0047\u006F\u006F',
              '\u0067\u006C\u0065\u0020\u304B\u3089\u6295\u7A3F\u3057\u3066',
              '\u307F\u3088\u3046\u3002</a></p>',
              '</div>'
              ].join('');
    } else if (infoType == "info_orgUnderApproval") {
      idea = [
              '<div class="idea">',
              '<p class="noIdea">\u73FE\u5728\u3001\u3053\u306E\u004F\u006E',
              '\u0065\u0020\u0047\u0072\u0065\u0065\u006E\u0020\u30A2\u30A4',
              '\u30C7\u30A2\u306E\u5BE9\u67FB\u3092\u884C\u3063\u3066\u3044',
              '\u307E\u3059\u3002</p>',
              '</div>'
              ].join('');
    }
    return idea;
  }

  /**
   * Output general list
   * @param {Object} entry - Array of Entry
   */
  this.generalEntries = function(entries) {
    var str = [];
    for (var i = 0; i < entries.length; i++) {
      var entry = entries[i];
      if (i%2 == 0) {
        str.push('<div class="g-unit g-first">');
      } else {
        str.push('<div class="g-unit">');
      }
      str.push('<ul><li><a href="#progressReport" onclick="openLatest(');
      str.push(entry.user_id);
      str.push(');" class="img">');
      str.push('<img src="images/icons/');
      str.push(entry.icon);
      str.push('" alt="');
      str.push(entry.icon);
      str.push('" /></a>');

      str.push('<div class="text">');
      if (entry.img_title != "") {
        str.push('<h3 class="idea"><a href="#progressReport" ');
        str.push('onclick="openLatest(');
        str.push(entry.user_id);
        str.push(');">');
        str.push('<em class="symbol">\u25CF</em>');
        str.push(entry.img_title);
        str.push('</a></h3>');
      }
      str.push('<span><a href="#progressReport" onclick="openLatest(');
      str.push(entry.user_id);
      str.push(');">');
      str.push(entry.nickname);
      str.push(' ');
      str.push('</a><br />');
      str.push('<small class="date">');
      str.push(entry.date);
      str.push('</small>');
      str.push('</div><img src="images/spacer.gif" class="cl" />');
      str.push('</li></ul></div>');
    }
    return str.join('');
  }

  /**
   * Output Campaign information
   * @param {Object} hash Campaign Details
   */
  this.campaignInfo = function(hash) {
    var day = new Date();
    var month = day.getMonth() + 1;
    if (month < 10) {
      month = '0' + month;
    }
    var date = day.getDate();
    if (date < 10) {
      date = '0' + date;
    }
    var today = [day.getFullYear(), '\u5E74', month, '\u6708',
                 date, '\u65E5'].join('');
    var str = [
               '<p>',
               today,
               '\u307E\u3067\u306E\u3001\u307F\u3093\u306A\u306E\u0020',
               '\u0043\u004F\u0032\u0020\u524A\u6E1B\u91CF',
               '<strong>',
               hash.total_cuts,
               '</strong>　',
               '\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u53C2\u52A0\u8005',
               '<strong>',
               hash.total_participants,
               '人</strong></p>'
               ];

    return str.join('');
  }

  /**
   * HTML output of Archive Entries
   * @param {Array} entry Array of Entry
   */
  this.archiveEntries = function(entries) {
    var str = ['<table id="archiveList"><thead><tr>',
               '<td class="arrow">&nbsp;</td>',
               '<td class="name">\u30CB\u30C3\u30AF\u30CD\u30FC\u30E0</td>',
               '<td class="idea">\u004F\u006E\u0065\u0020\u0047\u0072\u0065',
               '\u0065\u006E\u0020\u30A2\u30A4\u30C7\u30A2</td>',
               '<td class="total_cuts">\u0043\u004F\u0032\u0020\u524A\u6E1B',
               '\u91CF</td>',
               '<td class="total_approvals">\u5FDC\u63F4\u6570\u9806</td>',
               '</tr></thead>'];
    for (var i = 0; i < entries.length; i++) {
      var entry = entries[i];
      if (i == 0) {
        str.push('<tr class="sel">');
      } else {
        str.push('<tr>');
      }
      str.push('<td class="arrow">');
      str.push('<b>&raquo;</b>');
      str.push('</td>');
      str.push('<td class="name">');
      str.push('<a href="javascript:void(0);" onclick="openArchive(');
      str.push('this.parentNode.parentNode, ');
      str.push(entry.user_id);
      str.push(');" class="img">');
      str.push('<img src="images/icons/');
      str.push(entry.icon);
      str.push('" alt="');
      str.push(entry.icon);
      str.push('" />');
      str.push('</a>');

      str.push('<div class="text">');
      str.push('<a href="javascript:void(0);" onclick="openArchive(');
      str.push('this.parentNode.parentNode.parentNode, ');
      str.push(entry.user_id);
      str.push(');">');
      str.push(entry.nickname);
      str.push('</a>');
      str.push('<br />');
      str.push('<small class="date">');
      str.push(entry.date);
      str.push('</small>');
      str.push('</div>');
      str.push('</td>');

      str.push('<td class="idea">');
      if (entry.img_title) {
        str.push('<h3 class="idea"><a href="javascript:void(0);" onclick="');
        str.push('openArchive(this.parentNode.parentNode.parentNode, ');
        str.push(entry.user_id);
        str.push(');">');
        str.push('<em class="symbol">\u25CF</em>');
        str.push(entry.img_title);
        str.push('</a></h3>');
      } else {
        str.push('&nbsp;');
      }
      str.push('</td>');

      str.push('<td class="total_cuts">');
      if (entry.total_cuts) {
        str.push(entry.total_cuts);
      } else {
        str.push('&nbsp;');
      }
      str.push('</td>');

      str.push('<td class="total_approvals">');
      if (entry.total_approvals) {
        str.push(entry.total_approvals);
        str.push(' \u4EBA');
      } else {
        str.push('&nbsp;');
      }
      str.push('</td>');

      str.push('</tr>');
    }
    str.push('</table>');

    return str.join('');
  }

  /**
   * HTML output of Archive Info
   * @param {Object} entry Entry Detail
   * @param {boolean} error Error or not
   */
  this.archiveInfo = function(entry, error) {
    var infoType = _getInfoType(entry);
    var str = [
               '<div class="info ',
               infoType,
               '">',
               _getHead(entry, infoType),
               _getAction(entry, infoType),
               _getIdea(entry, infoType, error),
               '</div>',
               '<div id="map" style="width:100%; height:300px;">&nbsp;</div>'
               ].join('');
    return str;
  }

  /**
   * HTML output of Page Navigation
   * @param {Array} pages Array of Page Info
   */
  this.pageNav = function(pages) {
    var str = ['<p>'];
    for (var i = 0; i < pages.length; i++) {
      var page = pages[i];
      if (page[1]) {
        str.push('<a href="javascript:void(0);" onclick="loadPage(\'');
        str.push(page[1]);
        str.push('\');"');
        if (page[0] == PREV_PAGE) {
          str.push(' class="prev"');
        } else if (page[0] == NEXT_PAGE) {
          str.push(' class="next"');
        }
        str.push('>')
        str.push(page[0]);
        str.push('</a> ')
      } else {
        str.push('<span class="sel">');
        str.push(page[0]);
        str.push('</span> ')
      }
    }
    str.push('</p>');

    return str.join('');
  }

  /**
   * HTML output of Sort Navigation
   * @param {string} type Type of sort
   */
  this.sortNav = function(type) {
    var sort = {
      'ideas': '\u30A2\u30A4\u30C7\u30A2\u9806',
      'created': '\u53C2\u52A0\u9806',
      'cuts': '\u0043\u004F\u0032\u0020\u524A\u6E1B\u91CF\u9806',
      'approvals': '\u5FDC\u63F4\u6570\u9806'
    };
    var str = ['<p>'];
    for (var k in sort) {
      var label = sort[k];
      if (k == type) {
        str.push('<span class="sel">');
        str.push(label);
        str.push('</span> ');
      } else {
        str.push('<a href="javascript:void(0);" onclick="sort(\'');
        str.push(k);
        str.push('\');">');
        str.push(label);
        str.push('</a> ');
      }
    }
    str.push('</p>');

    return str.join('');
  }

  /**
   * HTML output of backMyBalloon
   */
  this.backMyBalloon = function() {
    var str = [];
    if (Green.login.logged_in) {
      var userId = Green.login.user_id;
      if (userId && userId != -1) {
        str.push('<p>');
        str.push('<a href="#progressReport" onclick="openLatest(');
        str.push(userId);
        str.push(');">');
        str.push('\u81EA\u5206\u306E\u30D0\u30EB\u30FC\u30F3\u306B');
        str.push('\u623B\u308B');
        str.push('</a>');
        str.push('</p>');
      } else {
        str.push('&nbsp;');
      }
    } else {
      str.push('&nbsp;');
    }
    return str.join('');
  }

  /**
   * HTML output of login Navigation
   */
  this.login = function() {
    var str = ['<p>'];
    if (Green.login.logged_in) {
      str.push(Green.login.email);
      str.push('\u0020\u007C\u0020');
      str.push('<a href="');
      str.push(Green.login.logout_url2);
      str.push('">\u30ED\u30B0\u30A2\u30A6\u30C8</a>');
    } else {
      str.push('<a href="');
      str.push(Green.login.login_url2);
      str.push('">\u30ED\u30B0\u30A4\u30F3</a>');
    }
    str.push('</p>');

    return str.join('');
  }
}