path: root/static/js/palette_selfy.js

// palette_selfy.js .. for PaintBBS and ShiPainter .. last update : 2004/04/11.

//→使い方 .. 外部JSとして読み込んでから、好きな所で palette_selfy() を呼び出して下さい.
var selfv = new Array();
var selfytag = new Array(); //←消さないで.

//↓設定 ------------------------------------------------------------
//  ※selfv[*] は、それぞれの設定を空白にすると、その�@能のボタンを表示させなくできます.

// +-する値のとこ
var pnum = 10; // +- のデフォルト値
selfv[0] = 'size=3 style="text-align:right">'; // 数値タグ(type=text)の中身

// パレットリスト.
// ..各要素の中の色は、1つだけなら他の13色はその色を元に↓の2通りから自動取得、
var psx = 0; // 0:彩度+明度を元に. 1:色相を循環で.

// 彩度+明度を元にするときの色. (複数設定する場合は、1つ1つの色を \n で区切る)
var pdefs = new Array(
  "#ffffff",
  "#ffe6e6",
  "#ffece6",
  "#fff3e6",
  "#fff9e6",
  "#ffffe6",
  "#f3ffe6",
  "#e6fff3",
  "#e6f3ff",
  "#ffe6ff",
  "#eeddbb",
  ""
); // ※空白だとその要素はスキップ.

// 色相で循環させるときの色. (複数設定する場合は、1つ1つの色を \n で区切る)
var pdefx = new Array(
  "#ffffff",
  "#ffe6e6",
  "#ffcccc",
  "#ff9999",
  "#e6cccc",
  "#e69999",
  "#cc9999",
  "#cc6666",
  "#996666",
  "#993333",
  "#660000",
  ""
); // ※空白だとその要素はスキップ.

// デフォルトのパレットカラー (一番最初にアプレットにでる色)
var pbase =
  "#000000\n#FFFFFF\n#B47575\n#888888\n#FA9696\n#C096C0\n#FFB6FF\n#8080FF\n#25C7C9\n#E7E58D\n#E7962D\n#99CB7B\n#FCECE2\n#F9DDCF";

// サンプルカラーの
// 表示するパレットのカラー番号(この中にある番号だけ↓で書き出し)
var sams = new Array(0, 2, 4, 6, 8, 10, 12, 1, 3, 5, 7, 9, 11, 13); // 彩度+明度を元にするとき
var samx = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13); // 色相で循環させるとき

selfv[1] = " "; // フォント
selfv[2] = 'style="font-size:xx-small; background-color:$FONT;"';
// フォントタグの中身(「$FONT」:16進�@RGB色が代入、正確に適用される属性は↓の3つ)
//  … color, style="color" style="background", style="background-color")

// ※↓これより下は ">"(閉じタグ) も入れてください //

// パレットの選択ボタン(type=radio)タグの中身
selfv[3] = 'style="border-width:0;" title="デフォルトのパレット">'; // デフォルト色
selfv[4] =
  'style="border-width:0;" title="ここのパレットを使う。\nチェックしてるときにさらに押すと、チェックが外れ、\n色相循環か、彩度+明度パレットに。(1番の色が基本色)">'; // 選択

// ボタン(type=button)タグの中身
selfv[5] = 'value="H" title="色相パレット (1番の色が基本色)">'; // 色相
selfv[6] = 'value="S" title="彩度パレット (1番の色が基本色)">'; // 彩度
selfv[7] = 'value="B" title="明度パレット (1番の色が基本色)">\n'; // 明度
selfv[8] = 'value="o" title="ここに今のパレットを保存">'; // セーブ
selfv[9] = 'value="x" title="ここのパレットをデフォルトに戻す"><br>\n'; // デフォルト

selfv[10] = 'value="H+" title="パレット全体の色相を＋">'; // 色相+
selfv[11] = 'value="H-" title="パレット全体の色相を−">'; // 色相-
selfv[12] = 'value="S+" title="パレット全体の彩度を＋">'; // 彩度+
selfv[13] = 'value="S-" title="パレット全体の彩度を−">'; // 彩度-
selfv[14] = 'value="B+" title="パレット全体の明度を＋">\n'; // 明度+
selfv[15] = 'value="B-" title="パレット全体の明度を−">\n'; // 明度-
selfv[16] = 'value="RGB+" title="パレット全体のRGBを＋"><br>\n'; // RGB+
selfv[17] = 'value="RGB-" title="パレット全体のRGBを−"><br>\n'; // RGB-

// グラデーションのとこ
selfv[18] =
  'style="border-width:0;" title="2点を元にグラデーション (1番の色と14番の色)" checked>2'; // 2点
selfv[19] =
  'style="border-width:0;" title="3点を元にグラデーション (1番、8番、14番の色)">3'; // 3点
selfv[20] =
  'style="border-width:0;" title="4点を元にグラデーション (1、6、10、14番の色)">4<br>\n'; // 4点
selfv[21] = 'value="RGB" title="RGBでグラデーション">\n'; // RGB?
selfv[22] = 'value="+HSB" title="+HSBでグラデーション (色相＋方向)">\n'; // +HSB
selfv[23] = 'value="-HSB" title="-HSBでグラデーション (色相−方向)"><br>\n'; // -HSB

// 追加・削除
selfv[24] = 'value="+" title="パレットを追加します">'; // 追加
selfv[25] = 'value="-" title="選択中のパレットを削除します">\n'; // 削除

// セーブ・オートセーブ
selfv[26] =
  'checked title="ここにチェックをつけておくと、色を変更するとき、\n�@自動で保存パレットにパレット情報をセーブします。\n自動保存が適用されるのは、\n�@チェックしてるパレットから他のパレットに移動したとき、\n�@チェックしてるパレットのH/S/Bボタンを押したとき、\n�@の2つのときです。サンプルの色も変わります。\nもちろん、ここにチェックしてなくても、\n�@手動でセーブボタンを押せば、パレットに保存されます。">'; // 自動セーブ
selfv[27] = 'value="O" title="今の全体のパレットをクッキーに保存"><br>\n'; // セーブ

// デフォルトのパレットを 色相360°にするか、彩度++明度-- にするか
selfv[28] =
  'style="border-width:0;" title="デフォルトのパレットは、色相で循環させる">H<sup>o</sup>'; // H°
selfv[29] =
  'style="border-width:0;" title="デフォルトのパレットは、彩度＋、明度−でリスト">+S-B'; // +S-B
selfv[30] = 'value="X" title="全体のパレットをデフォルトに戻す"><br>\n'; // デフォルトに

// UPLOAD / DOWNLOAD
selfv[31] =
  "value=\"\" size=8 title=\"パレットデータ。\n・アップロードするときは、ここに貼り付けてください。\n・ダウンロードするときは、ここにデータが出力されます。\n�@ ローカルのテキストにでも保存してください。\n※パレットデータは、\n pals = new Array('#FFFFFF','#B47575\\n#888888\\n...');\n�@のように、JSの配列形式で書かれます。\">\n"; //
selfv[32] = 'value="↑" title="←からパレットデータをアップロード">'; //
selfv[33] = 'value="↓" title="←←にパレットデータをダウンロード"><br>\n'; //

// このパレットテーブルを囲んでる、ソースとかタグとか (formタグは消しちゃダメ)
// フォーム始まり
selfytag[0] =
  '<table class="ptable"><tr><form name="palepale"><td class="ptd" nowrap>\n<div align=right class="menu">Palette-Selfy</div>\n<div style="font-size:xx-small;">\n';

// フォームの間_1 (個別のパレット  〜  全体の HSB、RGB +- とか)
selfytag[1] = '<div style="text-align:right; padding:5;">\n';

// フォームの間_2 (全体の HSB、RGB +- とか  〜  グラデーション)
selfytag[2] =
  '</div>\n<div style="text-align:right; padding:0 5 5 5;"">\nGradation';

// フォームの間_3 (グラデーション 〜 パレットの追加・削除ボタン)
selfytag[3] =
  '</div>\n<div style="text-align:right; padding:0 5 0 5;"">\nPalette';

// フォームの間_4 (パレットの追加・削除ボタン 〜 セーブボタン)
selfytag[4] = "\nSave";

// フォームの間_5 (セーブボタン 〜 Defaultは H++/+S-B どちらか)
selfytag[5] =
  '</div>\n<div style="text-align:right; padding:3 5 2 5;"">\nDefault';

// フォームの間_6 (Defaultは H++/+S-B どちらか 〜 パレットのアップ/ダウンロード)
selfytag[6] =
  '</div>\n<div style="text-align:right; padding:0 5 0 5;">\nUpdata ';

// フォーム終わり
selfytag[7] = "</div>\n</div>\n</td></form></tr></table>\n";
//↑設定おわり ------------------------------------------------------

// 初期値 (いたるところで使う値)
var d = document;
var pon, pno; // radioチェック中？  / チェックしたパレットNO.
var qon, qno, qmo; // buttonプッシュ中？ / プッシュしたパレットNO.
var pals = new Array(); // color-palette
var inp = '<input type="button" '; // input-button
var inr = '<input type="radio" '; // input-button
var cname = "selfy="; // cookie-name
var psx_ch = new Array("", ""); // h_sb-checked
var brwz = 0;
if (d.all) {
  brwz = 1;
} else if (d.getElementById) {
  brwz = 2;
}

// -------------------------------------------------------------------------
// HSB→RGB 計算. 値は0〜255.
function HSBtoRGB(h, s, v) {
  var r, g, b;
  if (s == 0) {
    r = v;
    g = v;
    b = v;
  } else {
    var max, min, dif;
    h *= 360 / 255; //360°
    max = v;
    dif = (v * s) / 255; //s=(dif/max)*255
    min = v - dif; //min=max-dif

    if (h < 60) {
      r = max;
      b = min;
      g = (h * dif) / 60 + min;
    } else if (h < 120) {
      g = max;
      b = min;
      r = (-(h - 120) * dif) / 60 + min;
    } else if (h < 180) {
      g = max;
      r = min;
      b = ((h - 120) * dif) / 60 + min;
    } else if (h < 240) {
      b = max;
      r = min;
      g = (-(h - 240) * dif) / 60 + min;
    } else if (h < 300) {
      b = max;
      g = min;
      r = ((h - 240) * dif) / 60 + min;
    } else if (h <= 360) {
      r = max;
      g = min;
      b = (-(h - 360) * dif) / 60 + min;
    } else {
      r = 0;
      g = 0;
      b = 0;
    }
  }
  return new Array(r, g, b);
}

// RGB→HSB 計算. 値は0〜255.
function RGBtoHSB(r, g, b) {
  var max, min, dif, h, s, v;

  // max
  if (r >= g && r >= b) {
    max = r;
  } else if (g >= b) {
    max = g;
  } else {
    max = b;
  }

  // min
  if (r <= g && r <= b) {
    min = r;
  } else if (g <= b) {
    min = g;
  } else {
    min = b;
  }

  // 0,0,0
  if (max <= 0) {
    return new Array(0, 0, 0);
  }

  // difference
  dif = max - min;

  //Hue:
  if (max > min) {
    if (g == max) {
      h = ((b - r) / dif) * 60 + 120;
    } else if (b == max) {
      h = ((r - g) / dif) * 60 + 240;
    } else if (b > g) {
      h = ((g - b) / dif) * 60 + 360;
    } else {
      h = ((g - b) / dif) * 60;
    }
    if (h < 0) {
      h = h + 360;
    }
  } else {
    h = 0;
  }
  h *= 255 / 360;

  //Saturation:
  s = (dif / max) * 255;

  //Value:
  v = max;

  return new Array(h, s, v);
}

// RGB16→RGB10 表記. 値は 000000〜ffffff
function to10rgb(str) {
  var ns = new Array();
  str = str.replace(/[^0-9a-fA-F]/g, "");
  for (var i = 0; i <= 2; i++) {
    ns[i] = str.substr(i * 2, 2);
    if (!ns[i]) {
      ns[i] = "00";
    }
    ns[i] = Number(parseInt(ns[i], 16).toString(10));
  }
  return ns;
}

// 10→16進�@二桁
function format16(n) {
  n = Number(n).toString(16);
  if (n.length < 2) {
    n = "0" + n;
  }
  return n;
}

// -------------------------------------------------------------------------
// パレットに (※ q=1:アプレットパレットに出力しない. lst=1:最初のとき
function rady(p, q, lst) {
  var d = document;
  var df = d.forms.palepale;

  // デフォルトパレット
  if (!p && p != 0) {
    pon = 0;
    pno = "";
    d.paintbbs.setColors(pbase);
    return;
  }

  var ps = pals[p].split("\n");
  var n = pnum;
  if (!q && df.num.value) {
    n = Number(df.num.value);
  }
  if (!q && pon == 1 && pno != p) {
    poncheck();
  }

  // 揃ってるならすぐ返す
  if ((pon != 1 || pno != p) && ps.length == 14) {
    if (!q) {
      pon = 1;
      pno = p;
    }
    if (q != 1 && pals[p]) {
      d.paintbbs.setColors(pals[p]);
    }
    return;
  }

  // checkしてるなら
  if (pon == 1 && pno == p) {
    var pget = String(d.paintbbs.getColors());
    //		if(pget==pals[p]){ return; }
    var cs = pget.split("\n");
    ps[0] = cs[0];
    ps[1] = "";
  }
  // 欠けているなら
  var cs = new Array();

  var psy = 0; // H°/ +S-B
  psy = check_h_sb(lst);

  if (psy == 1) {
    cs = rh_list(p, n);
  } // H°リスト
  else {
    cs = sb_list(p, n);
  } // +S-B リスト

  if (q) {
    // 初期設定時
    pals[p] = String(cs.join("\n"));
  }
  if (q != 1) {
    // 一般
    if (pon == 1 && pno == p) {
      checkout();
    } else {
      pon = 1;
      pno = p;
    }
    //		pals[p] = String(cs.join('\n'));
    d.paintbbs.setColors(String(cs.join("\n")));
  }
}

// H°リスト
function rh_list(p, n) {
  var ps = pals[p].split("\n");
  var rgb = to10rgb(ps[0]); //→RGB
  var hsv = RGBtoHSB(rgb[0], rgb[1], rgb[2]); //→HSB
  var cs = new Array(ps[0], ps[1]);
  if (!cs[0]) {
    cs[0] = "#ffffff";
  }
  if (hsv[1] != 0 && !cs[13]) {
    cs[13] = "#ffffff";
  }

  for (var i = 1; i < 13; i++) {
    if (ps[i] && (pon != 1 || pno != p)) {
      cs[i] = ps[i];
      continue;
    } //ある
    var x, y, z;
    if (hsv[1] == 0) {
      //白黒
      x = hsv[0];
      y = 0;
      if (i % 2 == 0) {
        z = 255 - i * n;
      } else {
        z = 0 + (i - 1) * n;
      }
    } else if (i >= 12) {
      x = hsv[0];
      y = 0;
      z = 255 - hsv[1];
    } else {
      x = hsv[0] + (i * 255) / 12;
      y = hsv[1];
      z = hsv[2];
    }
    while (x < 0) {
      x += 255;
    }
    if (y < 0) {
      y = 0;
    }
    if (z < 0) {
      z = 0;
    } //↓0
    while (x > 255) {
      x -= 255;
    }
    if (y > 255) {
      y = 255;
    }
    if (z > 255) {
      z = 255;
    } //↑255
    //		for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
    rgb = HSBtoRGB(x, y, z);
    for (var j = 0; j <= 2; j++) {
      rgb[j] = Math.round(rgb[j]);
    }
    cs[i] = "#" + format16(rgb[0]) + format16(rgb[1]) + format16(rgb[2]);
  }
  return cs;
}

// +S-B リスト
function sb_list(p, n) {
  var ps = pals[p].split("\n");
  var rgb = to10rgb(ps[0]); //→RGB
  var hsv = RGBtoHSB(rgb[0], rgb[1], rgb[2]); //→HSB
  var cs = new Array(ps[0], ps[1]);
  if (!cs[0]) {
    cs[0] = "#ffffff";
  }
  if (hsv[1] == 0 && !cs[1]) {
    cs[1] = "#000000";
  } else if (!cs[1]) {
    cs[1] = "#ffffff";
  }

  for (var i = 2; i < 14; i++) {
    if (ps[i] && (pon != 1 || pno != p)) {
      cs[i] = ps[i];
      continue;
    } //ある
    var y, z;
    if (hsv[1] == 0) {
      //白黒
      y = 0;
      if (i % 2 == 0) {
        z = 255 - i * n;
      } else {
        z = 0 + (i - 1) * n;
      }
    } else {
      if (i % 2 == 0) {
        //左
        y = hsv[1] + i * n;
        z = hsv[2];
      } else {
        //右
        y = hsv[1] + (i - 1) * n;
        z = hsv[2] - (i - 1) * n;
      }
    }
    while (z < 0) {
      z += 255;
    }
    while (y < 0) {
      y += 255;
    } //↓0
    while (z > 255) {
      z -= 255;
    }
    while (y > 255) {
      y -= 255;
    } //↑255
    //		for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
    rgb = HSBtoRGB(hsv[0], y, z);
    for (var j = 0; j <= 2; j++) {
      rgb[j] = Math.round(rgb[j]);
    }
    cs[i] = "#" + format16(rgb[0]) + format16(rgb[1]) + format16(rgb[2]);
  }
  return cs;
}

// 個別でH/S/Bをリストアップ
function onplus(p, m) {
  var d = document;
  var df = d.forms.palepale;
  var n = Number(df.num.value); //+-
  if (pon == 1 && pno == p) {
    poncheck();
  }

  // 連続のとき
  if (m > 0 && n * (qon + 1) > 38) {
    qon = 0;
  }
  if (qno == p && qmo == m && qon >= 1) {
    qon++;
    n *= (qon + 1) / 2;
  } else {
    qno = p;
    qmo = m;
    qon = 1;
  }

  var ps = pals[p].split("\n");
  var rgb = to10rgb(ps[0]); //→RGB
  var hsv = RGBtoHSB(rgb[0], rgb[1], rgb[2]); //→HSB
  var cs = new Array();
  if (m == 2) {
    n *= -1;
  }
  for (var i = 0; i < 14; i++) {
    var z;
    if (m == 0) {
      z = hsv[m] + ((i % 2) * 2 - 1) * Math.round(Math.floor(i / 2) * n);
    } else {
      z = hsv[m] + i * n;
    }
    while (z < 0) {
      z += 255;
    } //↓0
    while (z > 255) {
      z -= 255;
    } //↑255
    //		for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
    if (m == 1) {
      rgb = HSBtoRGB(hsv[0], z, hsv[2]);
    } //→HSB
    else if (m == 2) {
      rgb = HSBtoRGB(hsv[0], hsv[1], z);
    } else {
      rgb = HSBtoRGB(z, hsv[1], hsv[2]);
    } //→HSB
    for (var j = 0; j <= 2; j++) {
      rgb[j] = Math.round(rgb[j]);
    }
    cs[i] = "#" + format16(rgb[0]) + format16(rgb[1]) + format16(rgb[2]);
  }
  checkout(1);
  d.paintbbs.setColors(String(cs.join("\n")));
}

// 全体のH/S/Bをプラスマイナス
function alplus(m, n) {
  var d = document;
  var cs = String(d.paintbbs.getColors()).split("\n");
  n *= Number(d.forms.palepale.num.value); //+-
  poncheck();

  for (var i = 0; i < cs.length; i++) {
    var rgb = to10rgb(cs[i]); //→RGB
    var hsv = RGBtoHSB(rgb[0], rgb[1], rgb[2]); //→HSB
    //↑明度255のとき彩度減
    if (m == 2 && n > 0 && hsv[2] >= 255) {
      hsv[1] -= n;
      if (hsv[1] < 0) {
        hsv[1] = 0;
      } else if (hsv[1] > 255) {
        hsv[1] = 255;
      } //↓0 or ↑255
    }
    hsv[m] += n;
    //↓0 ↑255
    if (m == 0) {
      if (hsv[0] < 0) {
        hsv[0] += 255;
      } else if (hsv[0] > 255) {
        hsv[0] -= 255;
      }
    } else {
      if (hsv[m] < 0) {
        hsv[m] = 0;
      } else if (hsv[m] > 255) {
        hsv[m] = 255;
      }
    }
    //		for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
    rgb = HSBtoRGB(hsv[0], hsv[1], hsv[2]); //→HSB
    for (var j = 0; j <= 2; j++) {
      rgb[j] = Math.round(rgb[j]);
    }
    cs[i] = "#" + format16(rgb[0]) + format16(rgb[1]) + format16(rgb[2]);
  }
  checkout();
  d.paintbbs.setColors(String(cs.join("\n")));
}

// 全体のRGBをプラスマイナス
function alrgb(n) {
  var d = document;
  var cs = String(d.paintbbs.getColors()).split("\n");
  n *= Number(d.forms.palepale.num.value); //+-
  poncheck();

  for (var i = 0; i < cs.length; i++) {
    var rgb = to10rgb(cs[i]); //→RGB
    for (var j = 0; j <= 2; j++) {
      rgb[j] += n;
      rgb[j] = Math.round(rgb[j]);
      if (rgb[j] < 0) {
        rgb[j] = 0;
      } //↓0
      if (rgb[j] > 255) {
        rgb[j] = 255;
      } //↑255
    }
    cs[i] = "#" + format16(rgb[0]) + format16(rgb[1]) + format16(rgb[2]);
  }
  checkout();
  d.paintbbs.setColors(String(cs.join("\n")));
}

// グラデーション
function grady(m) {
  var d = document;
  var df = d.forms.palepale;
  var n = 2;
  if (df.gradc) {
    for (var j = 0; j < df.gradc.length; j++) {
      if (df.gradc[j].checked == true) {
        n = Number(df.gradc[j].value);
        break;
      }
    }
  }
  var cs = String(d.paintbbs.getColors()).split("\n");
  var gs = new Array(1, 13);
  if (n == 3) {
    gs = new Array(1, 7, 13);
  } else if (n == 4) {
    gs = new Array(1, 5, 9, 13);
  }
  poncheck();
  cs[1] = cs[0];

  // 2〜4色
  for (var i = 0; i < gs.length - 1; i++) {
    var p = gs[i];
    var q = gs[i + 1];
    var rgbp = to10rgb(cs[p]); //→RGB
    var rgbq = to10rgb(cs[q]); //→RGB2
    // HSB
    var hsvp = new Array();
    var hsvq = new Array();
    if (m == 1 || m == -1) {
      hsvp = RGBtoHSB(rgbp[0], rgbp[1], rgbp[2]); //→HSB
      hsvq = RGBtoHSB(rgbq[0], rgbq[1], rgbq[2]); //→HSB
    }
    // パレットの色
    for (var k = p + 1; k < q; k++) {
      var rgb = new Array();
      // HSB
      if (m == 1 || m == -1) {
        var hsv = new Array();
        for (var j = 0; j <= 2; j++) {
          // RGB
          var sa = (hsvp[j] - hsvq[j]) / (q - p);
          if (j == 0) {
            // H
            if (m * hsvp[j] > m * hsvq[j]) {
              sa = Math.abs(sa) - 255 / (q - p);
            }
            hsv[0] = hsvp[0] + m * Math.abs(sa) * (k - p);
            if (hsv[0] < 0) {
              hsv[0] += 255;
            } else if (hsv[0] > 255) {
              hsv[0] -= 255;
            }
          } else {
            // S,B
            hsv[j] = hsvp[j] - sa * (k - p);
            if (hsv[j] < 0) {
              hsv[j] = 0;
            } else if (hsv[j] > 255) {
              hsv[j] = 255;
            }
          }
        }
        rgb = HSBtoRGB(hsv[0], hsv[1], hsv[2]); //→HSB
        for (var j = 0; j <= 2; j++) {
          rgb[j] = Math.round(rgb[j]);
        }
        // RGB
      } else {
        for (var j = 0; j <= 2; j++) {
          // RGB
          var sa = (rgbp[j] - rgbq[j]) / (q - p);
          rgb[j] = Math.round(rgbp[j] - sa * (k - p));
          if (rgb[j] < 0) {
            rgb[j] = 0;
          } else if (rgb[j] > 255) {
            rgb[j] = 255;
          } //↑↓
        }
      }
      cs[k] = "#" + format16(rgb[0]) + format16(rgb[1]) + format16(rgb[2]);
    }
  }
  cs[0] = cs[1];
  cs[1] = "#ffffff";
  checkout();
  d.paintbbs.setColors(String(cs.join("\n")));
}

// -------------------------------------------------------------------------
// パレットのサンプルカラー
function csamp(p, pz, lst) {
  var ss = "";
  var ps = pz.split("\n");
  var slong = sams.length;
  var psy = check_h_sb(lst);
  if (psy == 1) {
    slong = samx.length;
  }
  // color-sample
  for (var i = 0; i < slong; i++) {
    // color-title
    var k,
      cl = "",
      rgb = "",
      hsv = "",
      ctl = "";
    if (psy == 1) {
      k = samx[i];
    } else {
      k = sams[i];
    }
    if (ps[k]) {
      rgb = to10rgb(ps[k]); //→RGB
      hsv = RGBtoHSB(rgb[0], rgb[1], rgb[2]); //→HSB
      for (var j = 0; j <= 2; j++) {
        hsv[j] = Math.round(hsv[j]);
      }
      ctl = "HSB: " + hsv[0] + "," + hsv[1] + "," + hsv[2] + "\n";
      ctl +=
        "RGB: " + rgb[0] + "," + rgb[1] + "," + rgb[2] + "\nRGB16: " + ps[k];
    }
    if (selfv[2]) cl = selfv[2].replace(/\$FONT/i, ps[k]);
    if (selfv[1])
      ss +=
        '<font id="font_' +
        p +
        "_" +
        k +
        '" ' +
        cl +
        ' title="' +
        ctl +
        '">' +
        selfv[1] +
        "</font>";
  }
  return ss;
}

// パレットのリスト
function palette_list(lst) {
  var d = document;
  var ds = "";
  for (var p = 0; p < pals.length; p++) {
    if (!pals[p]) {
      continue;
    }
    var samw = csamp(p, pals[p], lst); //サンプル

    // element
    if (selfv[4])
      ds +=
        inr +
        'name="rad" value="' +
        p +
        '" onclick="rady(' +
        p +
        ')" ' +
        selfv[4] +
        samw +
        "\n";
    //		ds+='<font color="'+ps[0]+'" id="font_'+p+'" title="'+ctl+'">'+samw+'</font>';
    if (selfv[5]) ds += inp + 'onclick="onplus(' + p + ',0)" ' + selfv[5];
    if (selfv[6]) ds += inp + 'onclick="onplus(' + p + ',1)" ' + selfv[6];
    if (selfv[7]) ds += inp + 'onclick="onplus(' + p + ',2)" ' + selfv[7];
    if (selfv[8]) ds += inp + 'onclick="savy(' + p + ')" ' + selfv[8];
    if (selfv[9]) ds += inp + 'onclick="defy(' + p + ')" ' + selfv[9];
  }
  return ds;
}

// チェックをつける、フォントカラーのサンプルを変更
function checkin(p, not) {
  qno = "";
  qmo = "";
  qon = 0;
  if (!pals[p]) {
    return;
  }
  var d = document;
  // font-color
  var ps = pals[p].split("\n");
  var slong = sams.length;
  var psy = check_h_sb();
  if (psy == 1) {
    slong = samx.length;
  }
  // color-sample
  for (var i = 0; i < slong; i++) {
    // color-title
    var k,
      rgb = "",
      hsv = "",
      ctl = "";
    if (psy == 1) {
      k = samx[i];
    } else {
      k = sams[i];
    }
    if (ps[k]) {
      rgb = to10rgb(ps[k]); //→RGB
      hsv = RGBtoHSB(rgb[0], rgb[1], rgb[2]); //→HSB
      for (var j = 0; j <= 2; j++) {
        hsv[j] = Math.round(hsv[j]);
      }
      ctl = "HSB: " + hsv[0] + "," + hsv[1] + "," + hsv[2] + "\n";
      ctl +=
        "RGB: " + rgb[0] + "," + rgb[1] + "," + rgb[2] + "\nRGB16: " + ps[k];
    }
    // replace
    var ds;
    if (brwz == 1) {
      ds = d.all("font_" + p + "_" + k);
    } else if (brwz == 2) {
      ds = d.getElementById("font_" + p + "_" + k);
    }
    if (ds) {
      if (ds.style.background) {
        ds.style.background = ps[k];
      }
      if (ds.style.backgroundColor) {
        ds.style.backgroundColor = ps[k];
      }
      if (ds.style.color) {
        ds.style.color = ps[k];
      }
      if (ds.color) {
        ds.color = ps[k];
      }
    }
  }

  // check
  if (not != 1) {
    var df = d.forms.palepale;
    for (var j = 0; j < df.rad.length; j++) {
      if (df.rad[j].value == p) {
        df.rad[j].checked = true;
        break;
      }
    }
  }
}

// checkを外す
function checkout(q) {
  pon = 0;
  pno = "";
  if (q != 1) {
    qno = "";
    qmo = "";
    qon = 0;
  }
  var df = document.forms.palepale;
  for (var j = 0; j < df.rad.length; j++) {
    if (df.rad[j].checked == true) {
      df.rad[j].checked = false;
      break;
    }
  }
}

// 以前のパレットを自動保存
function poncheck(not) {
  var d = document;
  var df = document.forms.palepale;
  if (df.autosave && df.autosave.checked == false) {
    return;
  } else if (pon == 1) {
    var pget = String(d.paintbbs.getColors());
    if (pals[pno] != pget) {
      pals[pno] = pget;
      checkin(pno, 1);
      if (not != 1) {
        pcookset(1);
      }
    }
  }
}

// パレットをセーブ
function savy(p) {
  var d = document;
  pals[p] = String(d.paintbbs.getColors());
  checkin(p);
  pcookset(1);
  pon = 1;
  pno = p;
}

// パレットをデフォルトに
function defy(p) {
  checkout();
  var q = pdefs[p];
  var df = document.forms.palepale;
  if (check_h_sb() == 1) {
    q = pdefx[p];
  }
  if (q) {
    pals[p] = q;
    rady(p, 2);
    checkin(p);
  } else {
    minsy(p);
  }
}

// パレット追加
function plusy() {
  var d = document;
  if (brwz == 1 || brwz == 2) {
    var p = pals.length;
    var pz = String(d.paintbbs.getColors());
    if (pz) {
      pals[p] = pz;
    } else {
      pals[p] = "#" + Number(d.paintbbs.getInfo().m.iColor).toString(16);
      rady(p, 1);
    }
  }
  if (brwz == 1 && d.all("palelist").innerHTML) {
    d.all("palelist").innerHTML = palette_list();
    checkin(p);
  } else if (brwz == 2 && d.getElementById("palelist").innerHTML) {
    d.getElementById("palelist").innerHTML = palette_list();
    checkin(p);
  }
}

// パレット削除
function minsy(p) {
  var d = document;
  var df = d.forms.palepale;
  if (!p && p != 0) {
    for (var j = 0; j <= df.rad.length; j++) {
      if (df.rad[j] && df.rad[j].checked == true) {
        p = Number(df.rad[j].value);
        break;
      }
    }
  }
  if ((!p && p != 0) || p < 0) {
    return;
  }
  pals[p] = "";
  var plong = pdefs.length;
  if (check_h_sb() == 1) {
    plong = pdefx.length;
  }
  if (p >= plong) {
    var k = 0;
    var pds = new Array();
    pds = pals;
    pals = new Array();
    for (var j = 0; j < pds.length; j++) {
      if (p != j && pds[j]) {
        pals[k] = pds[j];
        k++;
      }
    }
  }

  if (brwz == 1 && d.all("palelist").innerHTML) {
    d.all("palelist").innerHTML = palette_list();
  } else if (brwz == 2 && d.getElementById("palelist").innerHTML) {
    d.getElementById("palelist").innerHTML = palette_list();
  }
  checkout();
}

// パレットデフォルト
function def_list() {
  var okd = confirm("全体のパレットをデフォルトに戻します。\nよろしいですか？");
  if (!okd) {
    return;
  }
  var d = document;
  var df = d.forms.palepale;
  pals = new Array();
  var psy = 0;
  var plong = pdefs.length;
  if (check_h_sb() == 1) {
    psy = 1;
    plong = pdefx.length;
  }
  for (var p = 0; p < plong; p++) {
    if (psy == 1) {
      pals[p] = pdefx[p];
    } else {
      pals[p] = pdefs[p];
    }
  }
  for (var p = 0; p < pals.length; p++) {
    if (pals[p]) {
      rady(p, 1);
    }
  }

  if (brwz == 1 && d.all("palelist").innerHTML) {
    d.all("palelist").innerHTML = palette_list();
  } else if (brwz == 2 && d.getElementById("palelist").innerHTML) {
    d.getElementById("palelist").innerHTML = palette_list();
  } else {
    for (var p = 0; p < pals.length; p++) {
      if (pals[p]) {
        checkin(p, 1);
      }
    }
  }
}

// デフォルト h_sb のフォームのチェック. H°にチェックがついてるなら1
function check_h_sb(lst) {
  var ch = 0;
  var df = document.forms.palepale;
  if (lst != 1 && df && df.h_sb) {
    for (var i = 0; i < df.h_sb.length; i++) {
      if (df.h_sb[i].value == 1 && df.h_sb[i].checked == true) {
        ch = 1;
        break;
      }
    }
  } else {
    ch = psx;
  }
  return ch;
}

// パレットデータ アップロード
function pupload() {
  var d = document;
  var df = d.forms.palepale;
  var qs = new Array();
  var palx = "";
  if (df.palz) {
    palx = df.palz.value;
  }
  if (!palx) {
    return;
  }
  pals = new Array();
  if (eval(palx)) {
  } else {
    var px = palx.split(/\(|\)/);
    var ps = px[1].split(",");
    for (var p = 0; p < ps.length; p++) {
      var q = ps[p].replace(/[^0-9a-fA-F]/g, "");
      pals[p] = q;
    }
  }

  for (var p = 0; p < pals.length; p++) {
    if (pals[p]) {
      rady(p, 1);
    }
  }

  if (brwz == 1 && d.all("palelist").innerHTML) {
    d.all("palelist").innerHTML = palette_list();
  } else if (brwz == 2 && d.getElementById("palelist").innerHTML) {
    d.getElementById("palelist").innerHTML = palette_list();
  } else {
    for (var p = 0; p < pals.length; p++) {
      if (pals[p]) {
        checkin(p, 1);
      }
    }
  }
}

// パレットデータ ダウンロード
function pdownload() {
  var d = document;
  var df = d.forms.palepale;
  var qs = new Array();
  for (var p = 0; p < pals.length; p++) {
    qs[p] = "'" + pals[p].replace(/\n/g, "\\n") + "'";
  }
  var palx = "pals = new Array(\n" + qs.join(",\n") + "\n);";
  if (df.palz) {
    df.palz.value = palx;
  }
}

// 全体のパレット情報をクッキーにセーブ
function pcookset(o) {
  var df = document.forms.palepale;
  if (o && df.autosave && df.autosave.checked == false) {
    return;
  }
  var exp = new Date();
  exp.setTime(exp.getTime() + 1000 * 86400 * 60);
  var cs = new Array();
  for (var i = 0; i < pals.length; i++) {
    cs[i] = escape(pals[i].replace(/\n/g, "_"));
  }
  var cooki = "";
  if (df.num) {
    cooki += df.num.value;
  }
  cooki += "_" + check_h_sb() + "_%00";
  cooki += cs.join("%00");
  document.cookie = cname + cooki + "; expires=" + exp.toGMTString();
}

// 全体のパレット情報をクッキーからロード
function pcookget() {
  var cooks = document.cookie.split("; ");
  var cooki = "";
  for (var i = 0; i < cooks.length; i++) {
    if (cooks[i].substr(0, cname.length) == cname) {
      cooki = cooks[i].substr(cname.length, cooks[i].length);
      break;
    }
  }
  if (cooki) {
    var cs = cooki.split("%00");
    pals = new Array();
    for (var i = 0; i < cs.length - 1; i++) {
      pals[i] = unescape(cs[i + 1]).replace(/\_/g, "\n");
    }
    if (cs[0]) {
      var ps = cs[0].split("_");
      if (ps[0]) {
        pnum = ps[0];
      }
      if (ps[1]) {
        psx = ps[1];
      } else if (!ps[1] && ps[1] == 0) {
        psx = 0;
      }
    }
  }
}

// 増減する数を増やしたり減らしたり
function num_plus(n) {
  var df = document.forms.palepale;
  var m = Number(df.num.value);
  var l = n;
  n *= Math.abs(Math.round(m / 10)) + 1;
  if (n == 0) {
    n = l;
  }
  df.num.value = m + n;
}

// トーンセレクトの値を±
function tone_plus(n) {
  var df = document.forms.palepale;
  var m = Number(df.tone.value);
  if (m > 0) {
    n = Math.floor(m / 10 + n) * 10;
  }
  if (n < 0) {
    n = 0;
  } else if (n < 5) {
    n = 5;
  } else if (n > 100) {
    n = 100;
  }
  df.tone.value = n;
  tone_sel(n);
}

// トーンセレクト
function tone_sel(t) {
  var dp = document.paintbbs;
  t = Number(t);
  if (t == 0) {
    dp.getInfo().m.iTT = 0;
  } else {
    dp.getInfo().m.iTT = Math.floor(t / 10) + 1;
  }
}

// -------------------------------------------------------------------------
// document.write
function palette_selfy() {
  var d = document;
  var df = document.forms.palepale;
  var pzs = palette_selfy.arguments; //パレット指定があったとき

  // browzer
  if (brwz != 1 && brwz != 2) {
    return;
  }

  // パレットとパレットクッキー
  var plong = pdefs.length;
  if (psx == 1) {
    plong = pdefx.length;
  }
  for (var p = 0; p < plong; p++) {
    if (psx == 1) {
      pals[p] = pdefx[p];
    } else {
      pals[p] = pdefs[p];
    }
    if (pzs && pzs.length >= 1) {
      var ok = 0; //？
      for (var q = 0; q < pzs.length; q++) {
        if (p == pzs[q]) {
          ok = 1;
          break;
        }
      }
      if (ok != 1) {
        pals[p] = "";
      }
    }
  }
  pcookget(); // cookie-get
  psx_ch[psx] = "checked ";
  for (var p = 0; p < pals.length; p++) {
    if (pals[p]) {
      rady(p, 1, 1);
    }
  }

  // basic
  d.write(selfytag[0]);
  if (selfv[3])
    d.write(inr + 'name="rad" value="-1" onclick="rady()" ' + selfv[3]);
  if (pbase) d.write(csamp(-1, pbase, 1));

  // +-する数
  if (selfv[0]) {
    d.write("\n<small>&nbsp;</small>+-");
    d.write('<input type="text" name="num" value="' + pnum + '" ' + selfv[0]);
    d.write(inp + 'value="+" onclick="num_plus(1)">');
    d.write(inp + 'value="-" onclick="num_plus(-1)">\n');
  }
  // パレットリスト
  if (pdefs || pdefx)
    d.write('<div id="palelist">\n' + palette_list(1) + "</div>\n");

  // 全体の HSB、RGB +-
  if (selfytag[1]) d.write(selfytag[1]);
  if (selfv[10]) d.write(inp + 'onclick="alplus(0,1)" ' + selfv[10]);
  if (selfv[12]) d.write(inp + 'onclick="alplus(1,1)" ' + selfv[12]);
  if (selfv[14]) d.write(inp + 'onclick="alplus(2,1)" ' + selfv[14]);
  if (selfv[16]) d.write(inp + 'onclick="alrgb(1)" ' + selfv[16]);
  if (selfv[11]) d.write(inp + 'onclick="alplus(0,-1)" ' + selfv[11]);
  if (selfv[13]) d.write(inp + 'onclick="alplus(1,-1)" ' + selfv[13]);
  if (selfv[15]) d.write(inp + 'onclick="alplus(2,-1)" ' + selfv[15]);
  if (selfv[17]) d.write(inp + 'onclick="alrgb(-1)" ' + selfv[17]);

  // トーンセレクト
  if (selfv[0]) {
    d.write('Tone <select name="tone" onchange="tone_sel(this.value)">');
    for (var i = 0; i <= 100; i += 5) {
      d.write('<option value="' + i + '">' + i + "%</option>\n");
      if (i >= 10) {
        i += 5;
      }
    }
    d.write("</select>");
    d.write(inp + 'value="+" onclick="tone_plus(1)">');
    d.write(inp + 'value="-" onclick="tone_plus(-1)">\n');
  }

  // GRADATION
  if (selfytag[2]) d.write(selfytag[2]);
  if (selfv[18]) d.write(inr + 'name="gradc" value="2" ' + selfv[18]); //18
  if (selfv[19]) d.write(inr + 'name="gradc" value="3" ' + selfv[19]); //19
  if (selfv[20]) d.write(inr + 'name="gradc" value="4" ' + selfv[20]); //20
  if (selfv[21]) d.write(inp + 'onclick="grady(0)" ' + selfv[21]); //21
  if (selfv[22]) d.write(inp + 'onclick="grady(1)" ' + selfv[22]); //22
  if (selfv[23]) d.write(inp + 'onclick="grady(-1)" ' + selfv[23]); //23

  // 追加・削除
  if (selfytag[3]) d.write(selfytag[3]);
  if (selfv[24]) d.write(inp + 'onclick="plusy()" ' + selfv[24]); //24
  if (selfv[25]) d.write(inp + 'onclick="minsy()" ' + selfv[25]); //25

  // セーブ・オートセーブ
  if (selfytag[4]) d.write(selfytag[4]);
  if (selfv[26])
    d.write('<input type="checkbox" name="autosave" value="1" ' + selfv[26]); //26
  if (selfv[27]) d.write(inp + 'onclick="pcookset()" ' + selfv[27]); //27

  // デフォルト
  if (selfytag[5]) d.write(selfytag[5]);
  if (selfv[28])
    d.write(inr + 'name="h_sb" value="1" ' + psx_ch[1] + selfv[28]); //28
  if (selfv[29])
    d.write(inr + 'name="h_sb" value="0" ' + psx_ch[0] + selfv[29]); //29
  if (selfv[30]) d.write(inp + 'onclick="def_list()" ' + selfv[30]); //30

  // UPLOAD / DOWNLOAD
  if (selfytag[6]) d.write(selfytag[6]);
  if (selfv[31]) d.write('<input type="text" name="palz" ' + selfv[31]); //31
  if (selfv[32]) d.write(inp + 'onclick="pupload()" ' + selfv[32]); //32
  if (selfv[33]) d.write(inp + 'onclick="pdownload()" ' + selfv[33]); //33

  // /FORM
  if (selfytag[7]) d.write(selfytag[7]);
}