var ieFlag = (navigator.appVersion.indexOf("MSIE")!=-1);
var ffFlag = ((navigator.userAgent.indexOf("Firefox")!=-1) || (navigator.userAgent.indexOf("Chrome")!=-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, 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('BtnColor2');
      input = document.dform.bgColor;
      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.dform.xpos.value = dx - TOI_xmin;
    document.dform.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;
  text = text.replace(/ /g, '&nbsp;');
  text = text.replace(/\n/g, '<br>');
  TOI_txt.innerHTML = text + '';

  // generate the style
  TOI_txt.style.fontSize = form.size0.value + 'px';
  TOI_txt.style.color = form.color0.value;
  TOI_txt.style.fontFamily = form.font0.value;


  // 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 = 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(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';
}

// TOI_submit
function TOI_submit()
{
  TOI_img.src = 'j/d.gif';
  TOI_img.title = '图片生成中,请稍候...';
  TOI_tab.style.display = 'none';
  document.dform.submit.disabled = false;
  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();
}


// 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(); }
}

// redraw form 
function RedrawDform()
{
  var form = document.dform;
  // 文字跳动
  if (form.mdir.value == '')
  {
    document.getElementById('mdirDiv1').style.display = 'none';
  }
  else
  {
    document.getElementById('mdirDiv1').style.display = '';
    if (form.mdist.value == '0') form.mdist.value = '1';
  }
}

//创建颜色
function selectColor()
{
	if (arguments.length < 1) return;
	if (arguments.length == 1)
	{
		var argv = document.clrArguments;
		var color = arguments[0];
		for (var i = 1; i < argv.length; i++)
		{
			if (typeof argv[i] == 'function')
			{
				argv[i]();
				continue;
			}
			if (!argv[i].tagName) continue;
			if (argv[i].tagName == 'INPUT') argv[i].value = color;
			else if (argv[i].tagName == 'IMG') argv[i].style.backgroundColor = color;
			else if (argv[i].tagName == 'DIV') argv[i].style.borderColor = color;			
		}
		document.clrDiv.style.display = 'none';
		return;
	}
	document.clrArguments = arguments;
	if (!document.clrDiv)
	{
		var oDiv = document.createElement('DIV');
		oDiv.style.display = 'none';
		oDiv.style.position = 'absolute';
		oDiv.style.zIndex = '99';
		document.body.insertBefore(oDiv, document.body.firstChild);
		document.clrDiv = oDiv;

		var aColors = new Array('00', '33', '66', '99', 'CC', 'FF');
		var cRanges = new Array(0, 0, 3, 0, 0, 3, 3, 3);
		try { var oTable = document.createElement('<TABLE cellspacing=0 cellpadding=0>'); }
		catch (e) { var oTable = document.createElement('TABLE'); }
		oTable.border = 0;
		oTable.width = '216';
		oTable.cellSpacing = '0';
		oTable.cellPadding = '0';
		oTable.style.border = '2px inset';

		for (var i = 0; i < cRanges.length; i += 2)
		{
			for (var j = cRanges[i]; j < cRanges[i] + 3; j++)
			{
				var oRow = oTable.insertRow(-1);
				for (var k = cRanges[i+1]; k < cRanges[i+1] + 3; k++)
				{
					for (var l = 0; l < 6; l++)
					{
						var oCell = oRow.insertCell(-1);
						var color = '#' + aColors[k] + aColors[l] + aColors[j];
						oCell.bgColor = color;
						oCell.title = color;
						oCell.height = '12';
						oCell.width = '12';
						oCell.onclick = function () { selectColor(this.bgColor); };
					}
				}
			}
		}

		// Gray scale colors
		var oRow = oTable.insertRow(-1);
		for (var n = 0; n < 18; n++)
		{
			var oCell = oRow.insertCell(-1);
			var k = n % 6;
			var color = '#' + aColors[k] + aColors[k] + aColors[k];
			oCell.bgColor = color;
			oCell.height = '12';
			oCell.width = '12';
			if (n == 17)
			{
				oCell.title = '关闭颜色面板';
				oCell.onclick = function () { document.clrDiv.style.display = 'none'; }
				oCell.innerHTML = '<a href="javascript:void(0)"><font color="#ff0000">X</font></a>';
				oCell.align = 'center';
			}
			else
			{
				oCell.title = color;
				oCell.onclick = function () { selectColor(this.bgColor); };			
			}
		}
		oDiv.appendChild(oTable);	
	}

	var lt = arguments.length - 1;
	var ev = arguments[lt];
	var xpos, ypos;
	if (ev.pageX)
	{
		xpos = ev.pageX;
		ypos = ev.pageY;
	}
	else
	{
		xpos = document.body.scrollLeft + ev.clientX;
		ypos = document.body.scrollTop + ev.clientY;
	}

	document.clrDiv.style.left =  (xpos + 2) + 'px';
	document.clrDiv.style.top =  (ypos + 2) + 'px';
	document.clrDiv.style.display = '';
}