// SayLayer Environment Constants
SL_ENV = [];
SL_ENV.IE_Version = new Number(((window.navigator.appVersion.split('; '))[1].split(' '))[1]);
SL_ENV.ImgPrefix = AFREECA+'/img/main_img/';			//이미지파일이 위치에 있는 경로를 의미합니다.
SL_ENV.ScrBoxWidth = 13;															// Scrollbar Width Size의 좌우 폭을 의미합니다. 즉, 이미지 사이즈의 폭이 증가됩니다.
SL_ENV.ScrBarWidth = SL_ENV.ScrBoxWidth;
SL_ENV.ScrBarColor = ['#DDDDDD', '#FFFFFF', '#DDDDDD', '#FFFFFF'];
//SL_ENV.ScrBarColor = ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF'];
SL_ENV.ScrBarMinSize = 17;
SL_ENV.ScrBtnWidth = SL_ENV.ScrBarWidth;
SL_ENV.ScrBtnHeight = 7;																// Scrollbar 삼각형 버튼의 간격을 의미합니다. 숫자가 클수록 삼각형 버튼의 간격이 좁아집니다.
SL_ENV.ScrBtnColor = SL_ENV.ScrBarColor;
SL_ENV.ScrTimeInterval = 40;
SL_ENV.ScrSkipTimeInterval = 200;

// SayLayer Variables
SL_VAR = [];
SL_VAR.last = 0;
SL_VAR.tidList = [];
SL_VAR.tmToSkipList = [];
SL_VAR.YList = [];
SL_VAR.YdifList = [];
SL_VAR.BoxOnAction = [];
SL_VAR.BarOnAction = [];
SL_VAR.BtnOnAction = [];
SL_VAR.onmousemove_slID = 0;

function SL_open (width, height)
{
  SL_VAR.last++;

  var opt = new Object();
  opt.width = ('undefined'!=typeof(width)) ? "width="+width: "";
  opt.height = ('undefined'!=typeof(height)) ? "height="+height: "";

  var openHTML = ""
    + "<table id=SL_Container_"+SL_VAR.last+" border=0 cellpadding=0 cellspacing=0 "+opt.width+" "+opt.height+" style='TABLE-LAYOUT:fixed; "+opt.border+"'"
    + "  onmousewheel='SL_scrWheel("+SL_VAR.last+", window.event)'"
    + "  onmousedown='SL_rlScrAll()'"
    + "  onmousemove='SL_mvScrBox("+SL_VAR.last+", window.event)'"
    + ">"
    + "<tr>"
    + "<td id=SL_ContentBox_"+SL_VAR.last+">"
    + "  <div id=SL_Content_"+SL_VAR.last+" style='width:100%; height:100%; overflow:hidden'"
    + "    onscroll='SL_relocateScrBar("+SL_VAR.last+")'"
    + "    onresize='SL_resizeScrBar("+SL_VAR.last+")'"
    + "  >"
    + "\n";

  document.write(openHTML);
  return SL_VAR.last;
}

function SL_close()
{
  var closeHTML = ""
    + "  </div>"
    + "</td>"
	+ "<td id=SL_ScrBox_"+SL_VAR.last+" bgcolor=#FFFFFF width="+SL_ENV.ScrBoxWidth+" style='display:none'>"
	+ "  <table border=0 cellpadding=0 cellspacing=0 width=100% height=100% style='TABLE-LAYOUT:fixed'>"
    + "  <tr height="+(SL_ENV.ScrBtnHeight + 4)+">"
    + "    <td style='position:relative; top:0; left:0;'"
    + "      onmousedown='SL_prScrBtn("+SL_VAR.last+", \"up\", window.event)'"
    + "      onmouseup='SL_rlScrBtn("+SL_VAR.last+", \"up\", window.event)'"
    + "      onmouseout='SL_rlScrBtn("+SL_VAR.last+", \"up\", window.event)'"
    + "      ondragstart='SL_cancelEvent(window.event)'"
    + "    >"
    //+ "      <img id=SL_ScrBtn_Wrapper_"+SL_VAR.last+" src='"+SL_ENV.ImgPrefix+"/scroll_up.gif' width=100% height=100% style='position:absolute; top:0; left:0; z-index:4;'>"
    + "      <img id=SL_ScrBtn_Wrapper_"+SL_VAR.last+" src='"+SL_ENV.ImgPrefix+"/special_14.gif' width=100% height=100% style='position:absolute; top:0; left:0; z-index:4;'>"
	+ "      "+SL_mkScrBtnTable("SL_ScrBtn_upOff_"+SL_VAR.last, "up", 2, SL_ENV.ScrBtnWidth, SL_ENV.ScrBtnHeight, SL_ENV.ScrBtnColor[0], SL_ENV.ScrBtnColor[1])
    + "      "+SL_mkScrBtnTable("SL_ScrBtn_upOn_"+SL_VAR.last,  "up", 1, SL_ENV.ScrBtnWidth, SL_ENV.ScrBtnHeight, SL_ENV.ScrBtnColor[2], SL_ENV.ScrBtnColor[3])
    + "    </td>"
    + "  </tr>"
	+ "  <tr height=2>"
	+ "    <td></td>"
	+ "  </tr>"
    + "  <tr>"
    + "    <td align=center valign=middle style='position:relative; top:0; left:0; width:100%; height:100%;'>"
    + "      <img src='"+SL_ENV.ImgPrefix+"/dum.gif' width=100% height=100% style='position:absolute; top:0; left:0;'"
    + "        onmousedown='SL_prScrBox("+SL_VAR.last+", window.event)'"
    + "        onmouseup='SL_rlScrBox("+SL_VAR.last+", window.event)'"
    + "        onmouseout='SL_rlScrBox("+SL_VAR.last+", window.event)'"
    + "        ondragstart='SL_cancelEvent(window.event)'"
    + "      >"
    + "      <div id=SL_ScrBar_Carrier_"+SL_VAR.last+" style='position:absolute; top:0; left:0; width:100%; height:100%;'"
    + "        onmousedown='SL_prScrBar("+SL_VAR.last+", window.event)'"
    + "        onmouseup='SL_rlScrBar("+SL_VAR.last+", window.event)'"
    + "        onmouseout='SL_rlScrBar("+SL_VAR.last+", window.event)'"
    + "        ondragstart='SL_cancelEvent(window.event)'"
    + "      >"
    + "        <img id=SL_ScrBar_Wrapper_"+SL_VAR.last+" src='"+SL_ENV.ImgPrefix+"/dum.gif' width=100% height=100% style='position:absolute; top:0; left:0; z-index:4;'>"
    + "        "+SL_mkScrBarTable("SL_ScrBarOff_"+SL_VAR.last, 2, SL_ENV.ScrBarColor[0], SL_ENV.ScrBarColor[1])
    + "        "+SL_mkScrBarTable("SL_ScrBarOn_"+SL_VAR.last, 1, SL_ENV.ScrBarColor[2], SL_ENV.ScrBarColor[3])
    + "      </div>"
    + "    </td>"
    + "  </tr>"
	+ "  <tr height=2>"
	+ "    <td></td>"
	+ "  </tr>"
	+ "  <tr height="+(SL_ENV.ScrBtnHeight + 4)+">"
    + "    <td style='position:relative; top:0; left:0'"
    + "      onmousedown='SL_prScrBtn("+SL_VAR.last+", \"down\", window.event)'"
    + "      onmouseup='SL_rlScrBtn("+SL_VAR.last+", \"down\", window.event)'"
    + "      onmouseout='SL_rlScrBtn("+SL_VAR.last+", \"down\", window.event)'"
    + "      ondragstart='SL_cancelEvent(window.event)'"
    + "    >"
    //+ "      <img id=SL_ScrBtn_Wrapper_"+SL_VAR.last+" src='"+SL_ENV.ImgPrefix+"/scroll_down.gif' width=100% height=100% style='position:absolute; top:0; left:0; z-index:4;'>"
	+ "      <img id=SL_ScrBtn_Wrapper_"+SL_VAR.last+" src='"+SL_ENV.ImgPrefix+"/special_15.gif' width=100% height=100% style='position:absolute; top:0; left:0; z-index:4;'>"
    + "      "+SL_mkScrBtnTable("SL_ScrBtn_downOff_"+SL_VAR.last, "down", 2, SL_ENV.ScrBtnWidth, SL_ENV.ScrBtnHeight, SL_ENV.ScrBtnColor[0], SL_ENV.ScrBtnColor[1])
    + "      "+SL_mkScrBtnTable("SL_ScrBtn_downOn_"+SL_VAR.last,  "down", 1, SL_ENV.ScrBtnWidth, SL_ENV.ScrBtnHeight, SL_ENV.ScrBtnColor[2], SL_ENV.ScrBtnColor[3])
    + "    </td>"
    + "  </tr>"
    + "  </table>"
    + "</td>"
    + "</tr>"
    + "</table>"
    + "\n";

  document.write(closeHTML);
  setTimeout("SL_resizeScrBar("+SL_VAR.last+")", 200);
}

// private method
function SL_cancelEvent (event)
{
  event.cancelBubble = true;
  event.returnValue = false;
}
function SL_isThisEventToBeCanceled (event)
{
  if ('object' == typeof(event)) {
    switch (event.type) {
      case 'mousedown':
      case 'mouseup':
        if (!(event.button & 1))
          return true;
        break;
      case 'mouseout':
        if (SL_ENV.IE_Version >= 5.5)
          return true;
        break;
    }
  }
  return false;
}
function SL_scr (slID, dir)
{
  document.all['SL_Content_'+slID].doScroll(dir);
}
function SL_scrTo (slID, X, Y)
{
  document.all['SL_Content_'+slID].scrollLeft = X;
  document.all['SL_Content_'+slID].scrollTop = Y;
}
function SL_scrWheel (slID, event)
{
  SL_rlScrAll(slID);

  for (var i=0; i < event.wheelDelta; i += 120) {
    SL_scr(slID, "up");
  }
  for (var i=0; i > event.wheelDelta; i -= 120) {
    SL_scr(slID, "down");
  }
}
function SL_scrRepeatedly (slID, dir, option)
{
  if ('START' == option) {
    if (SL_VAR.tidList[slID]) clearInterval(SL_VAR.tidList[slID]);
    SL_VAR.tidList[slID] = setInterval("SL_scrRepeatedly('"+slID+"', '"+dir+"', '')", SL_ENV.ScrTimeInterval);
    SL_VAR.tmToSkipList[slID] = SL_ENV.ScrSkipTimeInterval;
  }
  else if ('STOP' == option) {
    if (SL_VAR.tidList[slID]) clearInterval(SL_VAR.tidList[slID]);
    SL_VAR.tidList[slID] = '';
    return;
  }
  else if (SL_VAR.tmToSkipList[slID] > 0) {
    SL_VAR.tmToSkipList[slID] -= SL_ENV.ScrTimeInterval;
    return;
  }

  switch (dir) {
    case 'pageup':
      if ((SL_VAR.YList[slID] - SL_VAR.YdifList[slID]) < document.all['SL_ScrBar_Carrier_'+slID].offsetTop) {
        SL_scr(slID, dir);
      }
      break;
    case 'pagedown':
      if ((SL_VAR.YList[slID] - SL_VAR.YdifList[slID]) >= document.all['SL_ScrBar_Carrier_'+slID].offsetTop + document.all['SL_ScrBar_Carrier_'+slID].offsetHeight) {
        SL_scr(slID, dir);
      }
      break;
    case 'up':
    case 'down':
      SL_scr(slID, dir);
      break;
  }
}
function SL_resizeScrBar (slID)
{
  var A = document.all['SL_Content_'+slID].offsetHeight;
  var B = document.all['SL_Content_'+slID].scrollHeight;
  //var b = A - 16;
  var b = A - 26;
  var a = Math.max(Math.round(A * b / B), SL_ENV.ScrBarMinSize);

  if (A == 0 || B == 0) {
    setTimeout("SL_resizeScrBar("+slID+")", 200);
    return;
  }

  if (A < B) {
    document.all['SL_ScrBox_'+slID].style.display = 'block';
    if (SL_ENV.IE_Version < 5.5 && 'fixed'==document.all['SL_ScrBarOff_'+slID].style.tableLayout) {
      document.all['SL_ScrBarOff_'+slID].style.tableLayout = 'auto';
      document.all['SL_ScrBarOn_'+slID].style.tableLayout = 'auto';
    }
    document.all['SL_ScrBar_Carrier_'+slID].style.height = a;
    SL_relocateScrBar(slID);
  }
  else {
    // no scrollbar
    document.all['SL_ScrBox_'+slID].style.display = 'none';
    document.all['SL_ScrBox_'+slID].style.height = '100%';
  }
}
function SL_relocateScrBar (slID)
{
  var A = document.all['SL_Content_'+slID].offsetHeight;
  var B = document.all['SL_Content_'+slID].scrollHeight;
  var C = document.all['SL_Content_'+slID].scrollTop;
  //var b = A - 16;
  var b = A - 26;
  var a = Math.max(Math.round(A * b / B), SL_ENV.ScrBarMinSize);
  var c = Math.round(C * b / B);

  if (a + c >= b) {
    // the bottom of scroll
    document.all['SL_ScrBar_Carrier_'+slID].style.top = b - a;
  }
  else if (A < B) {
    document.all['SL_ScrBar_Carrier_'+slID].style.top = c;
  }
  else {
    // no scrollbar
  }
}
function SL_prScrBox (slID, event)
{
  SL_cancelEvent(event);

  if (SL_isThisEventToBeCanceled(event))
    return;
  if (SL_VAR.BoxOnAction[slID])
    return;

  SL_rlScrAll();

  SL_VAR.BoxOnAction[slID] = true;
  SL_VAR.YList[slID] = event.clientY;
  SL_VAR.YdifList[slID] = event.clientY - event.offsetY;
  var dir = (event.offsetY < document.all['SL_ScrBar_Carrier_'+slID].offsetTop) ? 'pageup' : 'pagedown';
  SL_scrRepeatedly(slID, dir, 'START');
}
function SL_mvScrBox (slID, event)
{
  SL_VAR.YList[slID] = event.clientY;

  SL_mvScrBar(slID, event);
}
function SL_rlScrBox (slID, event)
{
  if (SL_isThisEventToBeCanceled(event))
    return;

  SL_VAR.BoxOnAction[slID] = false;
  SL_scrRepeatedly(slID, '', 'STOP');
}
function SL_prScrBar (slID, event)
{
  SL_cancelEvent(event);

  if (SL_isThisEventToBeCanceled(event))
    return;
  if (SL_VAR.BarOnAction[slID])
    return;

  SL_rlScrAll();
  SL_VAR.BarOnAction[slID] = true;
  SL_mSB_Ydif = event.clientY - document.all['SL_ScrBar_Carrier_'+slID].offsetTop;
  document.all['SL_ScrBarOn_'+slID].style.zIndex = 3;

  SL_VAR.onmousemove_slID = slID;
  document.attachEvent('onmousemove', SL_mvBody);
}
function SL_mvScrBar (slID, event)
{
  if (!SL_VAR.BarOnAction[slID])
    return;

  //SL_scrTo(slID, 0, Math.round((event.clientY - SL_mSB_Ydif) * document.all['SL_Content_'+slID].scrollHeight / (document.all['SL_Content_'+slID].offsetHeight - 16)));
  SL_scrTo(slID, 0, Math.round((event.clientY - SL_mSB_Ydif) * document.all['SL_Content_'+slID].scrollHeight / (document.all['SL_Content_'+slID].offsetHeight - 26)));
}
function SL_rlScrBar (slID, event)
{
  if (SL_isThisEventToBeCanceled(event))
    return;

  SL_VAR.BarOnAction[slID] = false;
  document.all['SL_ScrBarOn_'+slID].style.zIndex = 1;

  SL_VAR.onmousemove_slID = 0;
  document.detachEvent('onmousemove', SL_mvBody);
}
function SL_mvBody ()
{
  SL_mvScrBar(SL_VAR.onmousemove_slID, window.event);
}
function SL_prScrBtn (slID, dir, event)
{
  SL_cancelEvent(event);

  SL_rlScrAll();

  SL_VAR.BtnOnAction[slID] = true;
  SL_scrRepeatedly(slID, dir, "START");
  document.all['SL_ScrBtn_'+dir+'On_'+slID].style.zIndex = 3;
}
function SL_rlScrBtn (slID, dir, event)
{
  if (SL_isThisEventToBeCanceled(event))
    return;

  SL_VAR.BtnOnAction[slID] = false;
  SL_scrRepeatedly(slID, "", "STOP");
  document.all['SL_ScrBtn_'+dir+'On_'+slID].style.zIndex = 1;
}
function SL_rlScrAll (except)
{
  for (var i=1; i <= SL_VAR.last; i++) {
    if (i == except)
      continue;

    if ('object'==typeof(document.all['SL_Container_'+i])) {
      if (SL_VAR.BoxOnAction[i])
        SL_rlScrBox(i);
      if (SL_VAR.BarOnAction[i])
        SL_rlScrBar(i);
      if (SL_VAR.BtnOnAction[i]) {
        SL_rlScrBtn(i, "up");
        SL_rlScrBtn(i, "down");
      }
    }
    else alert('no object - '+i);
  }
}
function SL_mkTd (colspan, backgroundColor)
{
  var strTD = "<td"+(colspan > 1 ? " colspan="+colspan : "")+(backgroundColor ? " bgcolor="+backgroundColor : "")+"></td>";

  return strTD;
}
function SL_mkTr (pattern, height, borderColor, backgroundColor)
{
  var ColorOfType = [];
  ColorOfType['e'] = '';
  ColorOfType['B'] = borderColor;
  ColorOfType['b'] = backgroundColor;

  var strTR = "<tr"+(""!=height ? " height="+height : "")+">";
  var PatternList = pattern.split("|");
  for (var i in PatternList) {
    var token = PatternList[i]
    var colspan = parseInt(token.substr(0, token.length-1));
    var type = token.substr(token.length-1, 1);
    if (colspan > 0)
      strTR += SL_mkTd(colspan, ColorOfType[type]);
  }
  strTR += "</tr>";
  return strTR;
}
function SL_mkScrBarTable (id, zIndex, borderColor, backgroundColor)
{
  var strTABLE = ""
    + "<table id="+id+" border=0 cellpadding=0 cellspacing=0 width="+SL_ENV.ScrBarWidth+" height=100% style='table-layout:fixed; z-index:"+zIndex+"; position:absolute; top:0; left:0;'>\n"
    + "<col width=1><col width=1><col><col width=1><col width=1>\n"
    + SL_mkTr("|1e|3B|1e|", 1, borderColor, backgroundColor)
    + SL_mkTr("|1B|3b|1B|", "", borderColor, backgroundColor)
    + SL_mkTr("|1B|1b|1B|1b|1B|", 1, borderColor, backgroundColor)
    + SL_mkTr("|1B|3b|1B|", 1, borderColor, backgroundColor)
    + SL_mkTr("|1B|1b|1B|1b|1B|", 1, borderColor, backgroundColor)
    + SL_mkTr("|1B|3b|1B|", 1, borderColor, backgroundColor)
    + SL_mkTr("|1B|1b|1B|1b|1B|", 1, borderColor, backgroundColor)
    + SL_mkTr("|1B|3b|1B|", "", borderColor, backgroundColor)
    + SL_mkTr("|1e|3B|1e|", 1, borderColor, backgroundColor)
    + "</table>";

  return strTABLE;
}
function SL_mkScrBtnTable (id, dir, zIndex, width, height, borderColor, backgroundColor)
{
  var strTRs = "";
  for (var i=0; i < height-1; i++) {
    var cntEmpty = ("up"==dir) ? height-i-2 : i;
    var cntBackground = width - 2 * cntEmpty - 2;
    if (cntBackground >= 0) {
      var pattern = "|"+cntEmpty+"e|1B|"+cntBackground+"b|1B|"+cntEmpty+"e|";
      strTRs += SL_mkTr(pattern, 1, borderColor, backgroundColor);
    }
    else {
      strTRs += SL_mkTr("|"+width+"e|", 1, borderColor, backgroundColor);
    }
  }
  strTRs = ("up"==dir)
    ? strTRs+SL_mkTr(width+"B", 1, borderColor, backgroundColor)
    : SL_mkTr(width+"B", 1, borderColor, backgroundColor)+strTRs;

  var strTABLE = "<table id="+id+" border=0 cellpadding=0 cellspacing=0 width="+width+" height="+height+" style='table-layout:fixed; z-index:"+zIndex+"; position:absolute; top:1; left:0;'>\n"
  for (var i=0; i < width; i++)
    strTABLE += "<col width=1>";
  strTABLE += strTRs;
  strTABLE += "</table>";

  return strTABLE;
}