// JavaScript for TextOnImage (toi.js)
// Author:  hightman@twomice.net
// Date:  2007/03/23
// Version: 1.0.0
//
// public functions:
//
// TOI_Update()
// TOI_Init()
// auto bind??, only support IE?
// 
// Should recount the maxX, maxY ... after window.onresize??

// Check the browser version (only IE support OK)

var ieFlag = (navigator.appVersion.indexOf("MSIE")!=-1);
var ffFlag = (navigator.userAgent.indexOf("Firefox")!=-1);

if (!ieFlag && !ffFlag)
{
  alert('您的浏览器不是IE或FF, 页面显示可能会不正常!');
}

// 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;

// FORM, select color & color change?
/**
function TOI_setColor(n, c)
{
  var input = null;
  var img = null;
  var val = null;
  switch (n)
  {
    case 1 :
      img = document.getElementById('BtnColor0');
      input = document.dform.color0;
      break;
    case 2 :
      img = document.getElementById('BtnColor1');
      input = document.dform.color1;
      break;
    case 3 :
      img = document.getElementById('BtnFcolor0');
      input = document.dform.fcolor0;
      break;
    case 4 :
      img = document.getElementById('BtnFcolor1');
      input = document.dform.fcolor1;
      break;
  }
  if (!input || !img) return;
  if (typeof c == 'string')
  {
    val = c;
  }
  else
  {
    var url = '/selcolor.html?color=' + input.value + '&n=' + n;
    if (typeof showModalDialog == 'undefined')
    {
      window.open(url, '_selcolor', 'status=no,width=400,height=330');
      return;
    }
    else
    {
      val = showModalDialog(url, window, 'status:no;dialogWidth:400px;dialogHeight:330px;help:no');
    }
  }
  if (val && val != input.value) 
  {
    input.value = val;
    img.style.backgroundColor = val;

    // update the preview?? (only: 1 & 3)
    if (n == 1 || n == 3)
    {
      TOI_update();
    }
  }
}
**/
function TOI_setColor(n, evt)
{
  var input = null;
  var img = null;
  switch (n)
  {
    case 1 :
      img = document.getElementById('BtnColor0');
      input = document.dform.color0;
      break;
    case 2 :
      img = document.getElementById('BtnColor1');
      input = document.dform.color1;
      break;
    case 3 :
      img = document.getElementById('BtnFcolor0');
      input = document.dform.fcolor0;
      break;
    case 4 :
      img = document.getElementById('BtnFcolor1');
      input = document.dform.fcolor1;
      break;
  }
  if (!input || !img) return;
  selectColor(input.value, input, img, TOI_update, evt);
}

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

  // Drag event bind
  TOI_tab.onmousedown = function(ev)
  {  
    var cx = toi_get_offset(this, 'offsetLeft');
    var cy = toi_get_offset(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.getElementById('xpos').value = dx - TOI_xmin;
    document.getElementById('ypos').value = dy - TOI_ymin;
  };

  // update the preview
  TOI_update();
}

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

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

  // generate the style
  TOI_txt.style.fontSize = document.getElementById('sltFontsize').value + 'px';
  TOI_txt.style.color = document.getElementById('fontColor').value;

  // generate the filter: glow or shadow
  var filter = '';
  if (document.getElementById('effect').value == 'shadow')
  {
    filter  = 'dropshadow(color=' + $('#fontBorderColor').val() + ', offx=' + $('#effectWidth').val();
    filter += ',offy=' + $('#effectWidth').val() + ', positive=1)';
  }
  else if (document.getElementById('effect').value == 'border')
  {
    filter  = 'glow(color=' + $('#fontBorderColor').val() + ', strength=' + $('#effectWidth').val() + ')';
  }
  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 = $('input[@name=imgAddr]').val();
    
    //if (form.bsave) form.bsave.disabled = true;
    //if (form.bcopy) form.bcopy.disabled = true;
    //if (form.bmms) form.bmms.disabled = true;
	$('#btnCopy2QQ')[0].disabled = true;
	$('#btnSaveImage')[0].disabled = true;
	$('#btnSaveUrl')[0].disabled = true;
	$('#redirectto').hide();
	$('#divCopyMisc').hide();
  }

  // count the posX & posY
  var ix = toi_get_offset(TOI_img, 'offsetLeft');
  var iy = toi_get_offset(TOI_img, 'offsetTop');
  var iw = TOI_img.offsetWidth;
  var ih = TOI_img.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($('#xpos').val());
  var ypos = parseInt($('#ypos').val());  
  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';
}

// TOI_submit
function TOI_submit()
{
  TOI_img.src = 'img/wait2.gif';
  TOI_img.title = '图片生成中,请稍候...';
  TOI_tab.style.display = 'none';

  if (document.dform.mserver.value == 'yes')    
	  document.dform.action = ((Math.round(Math.random()*1000)%5) > 1 ? 'http://diy2.czxiu.com/tm.php' : 'tm.php');
  document.dform.submit.disabled = true;
  document.dform.submit.value = '请稍候...';
  return true;
}

// TOI_callback, 参与判断成功与否
function TOI_callback(type, msg)
{
  document.dform.submit.disabled = false;
  document.dform.submit.value = '生成图片!';

  // update the image source
  if (type == 'ok')
  {
    TOI_img.src = msg;
    document.getElementById('BtnCopy').disabled = false;
    document.getElementById('BtnSave').disabled = false;
    document.getElementById('BtnMms').disabled = false;
  }
  else
  {
    alert(msg);
    TOI_update();
    TOI_img.src = TOI_isrc.src;
    TOI_img.width = TOI_isrc.width;
    TOI_img.height = TOI_isrc.height;
  }
}

// Reset the form
function TOI_reset()
{
  document.dform.reset();  
  document.dform.submit.disabled = false;
  document.dform.submit.value = '生成图片!';
  document.getElementById('BtnCopy').disabled = true;
  document.getElementById('BtnSave').disabled = true;
  document.getElementById('BtnMms').disabled = true;
  
  TOI_img.src = TOI_isrc.src;
  TOI_img.width = TOI_isrc.width;
  TOI_img.height = TOI_isrc.height;
  TOI_update();
}

// Update the background image
function TOI_upimg()
{
  var form = document.dform;
  var isrc = form.ifile.value;
  var pos = isrc.lastIndexOf('.');
  var img = new Image();

  // on load
  img.onload = function () {
    var width = img.width;
    var height = img.height;
    img.onload = '';
    if (width > 600 || height > 400)
    {
      // => 480*360
      var ratio1 = 320/width;
      var ratio2 = 240/height;
      if (ratio1 > ratio2)
      {
        width = parseInt(ratio2 * width);
        height = 240;
      }
      else
      {
        width = 320;
        height = parseInt(ratio1 * height);
      }      
      alert('注意：图片过大, 系统自动进行了一些调整');
    }
    
    TOI_img.src = img.src;
    TOI_img.width = width;
    TOI_img.height = height;
    form.xpos.value = '-1';
    form.ypos.value = '-1';
    if (form.title.value == '')
    {
      var pos2 = isrc.lastIndexOf('\\');
      form.title.value = isrc.substring(pos2+1,pos);
    }
    TOI_update();
    delete img;
  };

  // on error
  img.onerror = function () {
    img.onerror = '';
    alert('注意：您刚刚试图上载的一个文件似乎不是合法图片');
    delete img;
  };

  // store the source address
  img.src = isrc;
}

// get object's offset
function toi_get_offset(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(); }
}