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;

var TOI_txt2, TOI_tab2;
var TOI_txt4, TOI_tab4;
var TOI_txt5, TOI_tab5;


// Init the current data. (from the form)
function TOI_init()
{
	
  if (TOI_inited == true) return;
  // init the vaiables
  TOI_img = $('MakeImg');
  TOI_txt = $('demoText1');
  TOI_tab = $('demoTab1');
  TOI_isrc = new Image();
  TOI_isrc.src = TOI_img.src;
  TOI_inited = true;
  
  TOI_txt2 = $('demoText2');
  TOI_tab2 = $('demoTab2');
  TOI_txt3 = $('demoText3');
  TOI_tab3 = $('demoTab3');
  TOI_txt4 = $('demoText4');
  TOI_tab4 = $('demoTab4');
  TOI_txt5 = $('demoText5');
  TOI_tab5 = $('demoTab5');

  // 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;
  };
  
    // Drag event bind
  TOI_tab2.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;
  };
  
      // Drag event bind
  TOI_tab4.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;
  };
  
      // Drag event bind
  TOI_tab5.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_tab2.onmouseup = function(ev)
  {
    TOI_ondrag = false;
    if (typeof ev == 'undefined')  
      this.releaseCapture();
  };
  
   TOI_tab4.onmouseup = function(ev)
  {
    TOI_ondrag = false;
    if (typeof ev == 'undefined')  
      this.releaseCapture();
  }; 
  
   TOI_tab5.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) + "]"; 
  };
  
  TOI_tab2.onmousemove = function(ev)
  {
    var dx2, dy2;
    if (!TOI_ondrag) return;
    if (typeof ev == 'undefined')
    {
      dx2 = event.clientX - this.X;
      dy2 = event.clientY - this.Y;
    }
    else
    {
      dx2 = ev.pageX - this.X;
      dy2 = ev.pageY - this.Y;
    }

    if (dx2 > TOI_xmax) dx2 = TOI_xmax;
    if (dx2 < TOI_xmin) dx2 = TOI_xmin;
    if (dy2 > TOI_ymax) dy2 = TOI_ymax;
    if (dy2 < TOI_ymin) dy2 = TOI_ymin;

    TOI_tab2.style.left = dx2 + 'px';
    TOI_tab2.style.top = dy2 + 'px';

    document.form1.xpos2.value = dx2 - TOI_xmin;
    document.form1.ypos2.value = dy2 - TOI_ymin
	    if ($('xyinfo2'))
        $('xyinfo2').innerHTML = "[x:" + (dx2 - TOI_xmin) + " y:" + (dy2 - TOI_ymin) + "]"; 
  };
  
    TOI_tab4.onmousemove = function(ev)
  {
    var dx4, dy4;
    if (!TOI_ondrag) return;
    if (typeof ev == 'undefined')
    {
      dx4 = event.clientX - this.X;
      dy4 = event.clientY - this.Y;
    }
    else
    {
      dx4 = ev.pageX - this.X;
      dy4 = ev.pageY - this.Y;
    }

    if (dx4 > TOI_xmax) dx4 = TOI_xmax;
    if (dx4 < TOI_xmin) dx4 = TOI_xmin;
    if (dy4 > TOI_ymax) dy4 = TOI_ymax;
    if (dy4 < TOI_ymin) dy4 = TOI_ymin;

    TOI_tab4.style.left = dx4 + 'px';
    TOI_tab4.style.top = dy4 + 'px';

    document.form1.xpos4.value = dx4 - TOI_xmin;
    document.form1.ypos4.value = dy4 - TOI_ymin
  };
  
     TOI_tab5.onmousemove = function(ev)
  {
    var dx5, dy5;
    if (!TOI_ondrag) return;
    if (typeof ev == 'undefined')
    {
      dx5 = event.clientX - this.X;
      dy5 = event.clientY - this.Y;
    }
    else
    {
      dx5 = ev.pageX - this.X;
      dy5 = ev.pageY - this.Y;
    }

    if (dx5 > TOI_xmax) dx5 = TOI_xmax;
    if (dx5 < TOI_xmin) dx5 = TOI_xmin;
    if (dy5 > TOI_ymax) dy5 = TOI_ymax;
    if (dy5 < TOI_ymin) dy5 = TOI_ymin;

    TOI_tab5.style.left = dx5 + 'px';
    TOI_tab5.style.top = dy5 + 'px';

    document.form1.xpos5.value = dx5 - TOI_xmin;
    document.form1.ypos5.value = dy5 - TOI_ymin
  }; 

  // update the preview
  TOI_update();
  //TOI_tab.style.display = '';
  TOI_tab2.style.display = '';
  TOI_tab4.style.display = '';
  TOI_tab5.style.display = '';
  //TOI_tab3.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;
  
   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;
  TOI_xmax = ix + iw;
  TOI_ymax = iy + ih;
  
  var xpos = parseInt(form.xpos.value);
  var ypos = parseInt(form.ypos.value);  
  var xpos2 = parseInt(form.xpos2.value);
  var ypos2 = parseInt(form.ypos2.value); 
  var xpos4 = parseInt(form.xpos4.value);
  var ypos4 = parseInt(form.ypos4.value); 
  var xpos5 = parseInt(form.xpos5.value);
  var ypos5 = parseInt(form.ypos5.value);   
  
  if (xpos == -1) xpos = parseInt((iw - tw) / 2);
  if (ypos == -1) ypos = parseInt((ih - th) / 2);
  
  if (xpos2 == -1) xpos2 = parseInt((iw - tw) / 2);
  if (ypos2 == -1) ypos2 = parseInt((ih - th) / 2);
  
  if (xpos4 == -1) xpos4 = parseInt((iw - tw) / 2);
  if (ypos4 == -1) ypos4 = parseInt((ih - th) / 2);

  if (xpos5 == -1) xpos5 = parseInt((iw - tw) / 2);
  if (ypos5 == -1) ypos5 = parseInt((ih - th) / 2);

  TOI_tab.style.left = (xpos + ix) + 'px';
  TOI_tab.style.top = (ypos + iy) + 'px';
  
  TOI_tab2.style.left = (xpos2 + ix) + 'px';
  TOI_tab2.style.top = (ypos2 + iy) + 'px';
 
  TOI_tab4.style.left = (xpos4 + ix) + 'px';
  TOI_tab4.style.top = (ypos4 + iy) + 'px';
  
  TOI_tab5.style.left = (xpos5 + ix) + 'px';
  TOI_tab5.style.top = (ypos5 + iy) + 'px'; 
  
  TOI_tab3.style.left = (ix) + 'px';
  TOI_tab3.style.top = (iy) + 'px';
  TOI_tab3.style.height = ih + 'px';
  TOI_tab3.style.width = iw + '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(); }
}