if (!ieFlag && !ffFlag)
{
  alert('½öÖ§³ÖIEä¯ÀÀÆ÷!');
}

// Global Variables
var TOI_inited = false;
var TOI_ondrag = false;
var TOI_xmax, TOI_ymax, TOI_xmin, TOI_ymin;
var TOI_img, TOI_txt, TOI_tab;
var TOI_isrc;


// Init the current data. (from the form)
function TOI_init()
{
	
  if (TOI_inited == true) return;
  // init the vaiables
  TOI_img = $('MakeImg');
  TOI_txt = $('demoText');
  TOI_tab = $('demoTab');
  TOI_isrc = new Image();
  TOI_isrc.src = TOI_img.src;
  TOI_inited = true;

  // Drag event bind
  TOI_tab.onmousedown = function(ev)
  {  
    var cx = getoffset(this, 'offsetLeft');
    var cy = getoffset(this, 'offsetTop');

    if (typeof ev == 'undefined')
    {    
      this.X = event.clientX - cx;
      this.Y = event.clientY - cy;
      this.setCapture();
    }
    else
    {
      this.X = ev.pageX - cx;
      this.Y = ev.pageY - cy;
    }
    TOI_ondrag = true;
  };
  
  TOI_tab.onmouseup = function(ev)
  {
    TOI_ondrag = false;
    if (typeof ev == 'undefined')  
      this.releaseCapture();
  };
  
  TOI_tab.onmousemove = function(ev)
  {
    var dx, dy;
    if (!TOI_ondrag) return;
    if (typeof ev == 'undefined')
    {
      dx = event.clientX - this.X;
      dy = event.clientY - this.Y;
    }
    else
    {
      dx = ev.pageX - this.X;
      dy = ev.pageY - this.Y;
    }

    if (dx > TOI_xmax) dx = TOI_xmax;
    if (dx < TOI_xmin) dx = TOI_xmin;
    if (dy > TOI_ymax) dy = TOI_ymax;
    if (dy < TOI_ymin) dy = TOI_ymin;

    TOI_tab.style.left = dx + 'px';
    TOI_tab.style.top = dy + 'px';

    document.form1.xpos.value = dx - TOI_xmin;
    document.form1.ypos.value = dy - TOI_ymin
	    if ($('xyinfo1'))
        $('xyinfo1').innerHTML = "x:" + (dx - TOI_xmin) + " y:" + (dy - TOI_ymin); 
  };

  // update the preview
  TOI_update();
  TOI_tab.style.display = '';
}

// Update the preview
function TOI_update()
{
  var form = document.form1;
  if (form.BtnMake.disabled == true)
    return false;

  // get the default value
  var text = form.txtInput1.value;
  text = text.replace(/ /g, '&nbsp;');
  text = text.replace(/\n/g, '<br>');
  TOI_txt.innerHTML = text + '';

  // generate the style
  TOI_txt.style.fontSize = form.txtFontSize.value + 'px';
  TOI_txt.style.color = form.txtFontColor.value;
  TOI_txt.style.fontFamily = form.dropFontName.value;
  // generate the filter: glow or shadow

  var filter = '';
  if (form.dropfShow.value == "1")
  {
    filter  = 'dropshadow(color=' + form.txtfshowColor.value + ', offx=1';
    filter += ',offy=1, positive=1)';
  }
  else if (form.dropfShow.value == "2")
  {
    filter  = 'glow(color=' + form.txtfshowColor.value + ', strength=1)';
  }
  else
  {
    filter = 'none';
  }
  TOI_txt.style.filter = filter;

  // reset the image & tab show
//  if (TOI_tab.style.display == 'none')
//  {  
//    TOI_tab.style.display = '';
//    TOI_img.src = ((!form.ifile || !form.ifile.value || form.ifile.value == '') ? TOI_isrc.src : form.ifile.value);
//    
//    if (form.bsave) form.bsave.disabled = true;
//    if (form.bcopy) form.bcopy.disabled = true;
//    if (form.bmms) form.bmms.disabled = true;
//  }

  // count the posX & posY
  var ix = getoffset($('MakeImg'), 'offsetLeft');
  var iy = getoffset($('MakeImg'), 'offsetTop');
  var iw = $('MakeImg').offsetWidth;
  var ih = $('MakeImg').offsetHeight;
  var tw = TOI_tab.offsetWidth;
  var th = TOI_tab.offsetHeight;
  
  TOI_xmin = ix;
  TOI_ymin = iy;
  TOI_xmax = ix + iw - tw;
  TOI_ymax = iy + ih - th;
  
  var xpos = parseInt(form.xpos.value);
  var ypos = parseInt(form.ypos.value);  
  if (xpos == -1) xpos = parseInt((iw - tw) / 2);
  if (ypos == -1) ypos = parseInt((ih - th) / 2);

  TOI_tab.style.left = (xpos + ix) + 'px';
  TOI_tab.style.top = (ypos + iy) + 'px';
}


// get object's offset
function getoffset(o, n)
{
  var w = 0;
  do { w = w + o[n]; } while (o = o.offsetParent);
  
  return w;
}

// Bind the init function after page loaded.
if (typeof window.attachEvent != 'undefined')
{
  window.attachEvent('onload', TOI_init);

  window.attachEvent('onresize', TOI_update);
}
else if (typeof window.addEventListener != 'undefined')
{
  window.addEventListener('load', TOI_init, false);
  window.addEventListener('resize', TOI_update, false);
}
else
{
  window.onload = function() { TOI_init(); }
  window.onresize = function() { TOI_update(); }
}