var inEdit = false;
var dataChanged = false;
var editCell;

var colorList = new Array();

colorList['red'] = 0;
colorList['orange'] = 1;
colorList['yellow'] = 2;
colorList['green'] = 3;
colorList['blue'] = 4;
colorList['violet'] = 5;
colorList['white'] = 6;
colorList['gray'] = 7;
colorList['black'] = 8;
colorList['transparent'] = 9;

function showInfo( cell, event )
{
	if( inDrag || !cell.hasData )
		return;

	if( document.all )
	{
		var tooltip = document.all['tooltip'];
	}
	else
	{
		var tooltip = document.getElementById('tooltip');
	}

	tooltip.innerHTML = writeInfo( cell );

  if( document.all )
  {
    var yOff = document.body.scrollTop;
    var xOff = document.body.scrollLeft;
  }
  else
  {
    var yOff = window.pageYOffset;
    var xOff = window.pageXOffset;
  }

	tooltip.style.left = event.clientX + 5 + xOff;
	tooltip.style.top = event.clientY +5 + yOff;	
	tooltip.style.visibility = "visible";
}

function writeInfo( cell )
{
	var infoBody = '';
	var needBreak = false;

	infoBody += "<div style='padding-left: 3px; padding-right: 3px;'>\n";

	if( cell.myName )
	{
		infoBody += "<b>" + cell.myName + "</b>\n";
		needBreak = true;
	}
	
	if ( cell.myHP != '' )
	{
		if( needBreak )
			infoBody += "<br />\n";
		
		infoBody += "HP: " + cell.myHP;

		if( cell.myMaxHP )
			infoBody += " / " + cell.myMaxHP;

		infoBody += "\n";

		needBreak = true;
	}

	infoBody += "</div>\n";

	if ( cell.myNote != '' )
	{
//		infoBody += "<span style='color: blue; font-size: small;'>&nbsp;Note:</span>\n";
		infoBody += "<div class='note'>\n"
		infoBody += cell.myNote;
		infoBody += "</div>\n";
	}

	if( infoBody == '' )
	{
		infoBody = "NO DATA";
	}

	return infoBody;
}

function hideInfo()
{
	if( document.all )
	{
		var tooltip = document.all['tooltip'];
	}
	else
	{
		var tooltip = document.getElementById('tooltip');
	}

	tooltip.style.visibility = 'hidden';
}

function showTooltip( event, tipName )
{
	if( document.all ) 
	{
		var tooltip = document.all[tipName];
	}
	else
	{
		var tooltip = document.getElementById(tipName);
	}

  if( document.all )
  {
    var yOff = document.body.scrollTop;
    var xOff = document.body.scrollLeft;
  }
  else
  {
    var yOff = window.pageYOffset;
    var xOff = window.pageXOffset;
  }

	tooltip.style.top = event.clientY + 5 + yOff;
	tooltip.style.left = event.clientX + 5 + xOff;

	tooltip.style.visibility = 'visible';
}

function hideTooltip(tipName)
{
  if( document.all )
  {
    var tooltip = document.all[tipName];
  }
  else
  {
    var tooltip = document.getElementById(tipName);
  }

	tooltip.style.visibility = 'hidden';
}

function showEditPane( cell, event )
{
  if( document.all )
  {
    var tooltip = document.all['editWindow'];
  }
  else
  {
    var tooltip = document.getElementById('editWindow');
  }

	if( editCell != null )
		unselectCell( editCell );
	editCell = cell;
	selectCell( cell );

  if( document.all )
  {
    var yOff = document.body.scrollTop;
    var xOff = document.body.scrollLeft;
  }
  else
  {
    var yOff = window.pageYOffset;
    var xOff = window.pageXOffset;
  }

	var leaveOpen = false;
	if( inEdit )
	{
		leaveOpen = document.forms.editForm.copyOpen.checked;
	}

	tooltip.innerHTML = writeEditPane( cell );

	if( !inEdit )
	{
	  tooltip.style.left = event.clientX + 5 + xOff;
	  tooltip.style.top = event.clientY +5 + yOff;
	}

	if( cell.style.backgroundColor )
		document.forms.editForm.myColor.selectedIndex = colorList[cell.style.backgroundColor];
	else
		document.forms.editForm.myColor.selectedIndex = 3;

	document.forms.editForm.copyOpen.checked = leaveOpen;

  tooltip.style.visibility = "visible";

	inEdit = true;
}

function selectCell( cell )
{
	cell.style.borderStyle = 'solid';
	cell.style.borderWidth = '2px';
	cell.style.borderColor = 'cyan';
	if( !document.all )
	{
	  if( document.forms.toolboxForm.layerHighlite.checked )
 		{
			cell.style.top = parseInt( cell.style.top ) - 1;
			cell.style.left = parseInt( cell.style.left ) - 1;
		}
		else
		{
      cell.style.top = parseInt( cell.style.top ) - 2;
      cell.style.left = parseInt( cell.style.left ) - 2;
		}
	}
}

function unselectCell( cell )
{
	if( document.forms.toolboxForm.layerHighlite.checked && cell.myLayer == current_layer )
	{
		cell.style.borderWidth = '1px';
		cell.style.borderColor = 'pink';
		if( !document.all )
		{
			cell.style.top = parseInt( cell.style.top ) + 1;
			cell.style.left = parseInt( cell.style.left ) + 1;
		}
	}
	else
	{
		cell.style.borderWidth = '0px';
		cell.style.borderColor = 'gray';
		if( !document.all )
		{
			cell.style.top = parseInt( cell.style.top ) + 2;
			cell.style.left = parseInt( cell.style.left ) + 2;
		}
	}
}

function hideEditPane()
{
  if( document.all )
  {
    var tooltip = document.all['editWindow'];
  }
  else
  {
    var tooltip = document.getElementById('editWindow');
  }

	if( editCell != null )
		unselectCell( editCell );

	tooltip.style.visibility = "hidden";
	inEdit = false;
	editCell = null;
}

function refreshTooltip( name )
{
	if( document.all )
	{
		var editPane = document.all[name];
	}
	else
	{
		var editPane = document.getElementById(name);
	}

	editPane.style.borderWidth = '1px';
	editPane.style.borderWidth = '2px';
}

function writeEditPane( cell )
{
	var body = '';

	//	body += "<div class=\"editTitle\" onMouseDown=\"beginDrag( this.parentNode, event );\">Editing Cell</div>\n";
	body += "<div class=\"editTitle\" onMouseDown=\"beginDrag( this.parentNode, event );\">";
  body += "<img src='./icons/x.gif' class='closeBtn' onMouseDown='if( event.stopPropagation ) ";
	body += "event.stopPropagation();' onClick=\"hideEditPane();\" />\n";
	body += "</div>\n";
	body += "<div style=\"padding: 3px;\">\n";
	body += "<form name='editForm'>\n";
	body += "<table>\n";
	body += "<tr>\n";
	body += "<td colspan=2 align=right>Leave open <input type=checkbox name='copyOpen' />\n";
	body += "</tr><tr>\n";
	body += "<td>Name</td>";
	body += "<td><input type=text name='myName' value=\"";
	if( cell.myName )
		body += cell.myName;
	body += "\" onChange='dataChanged = true;'/>\n";
	body += "</td></tr><tr>\n";
	body += "<td>Current HP</td><td><input type=text name='myHP' value=\"";
	if( cell.myHP )
		body += cell.myHP;
	body += "\" onChange='dataChanged = true;'/>\n";
	body += "</td></tr><tr>\n";
	body += "<td>Max HP</td><td><input type=text name='myMaxHP' value=\"";
	if( cell.myMaxHP )
		body += cell.myMaxHP;
	body += "\" onChange='dataChanged = true;'/>\n";
	body += "</td></tr><tr>\n";
	body += "<td colspan=2>Note<br><textarea name='myNote' cols='30' rows='4' onChange='dataChanged = true;'>";
	if( cell.myNote )
		body += cell.myNote.replace( /<br>\n/g, '\n' );
	body += "</textarea>\n";
	body += "</td></tr><tr>\n";
	body += "<td>Color</td>";
	body += "<td><select name='myColor' onChange='dataChanged = true;'>\n";
	body += "  <option value='red'>Red</option>\n";
	body += "  <option value='orange'>Orange</option>\n";
	body += "  <option value='yellow'>Yellow</option>\n";
	body += "  <option value='green'>Green</option>\n";
	body += "  <option value='blue'>Blue</option>\n";
	body += "  <option value='violet'>Violet</option>\n";
	body += "  <option value='white'>White</option>\n";
	body += "  <option value='gray'>Gray</option>\n";
  body += "	 <option value='black'>Black</option>\n";
	body += "  <option value='transparent'>Clear</option>\n";
	body += "</select>\n";
	body += "</td></tr><tr><td></td><td>\n";
	body += "<input type=button value='Pick Icon' onClick=\"showTooltip(event, 'iconPicker');\" />\n";
	body += "<input type=button value='Pick BG' onClick=\"showTooltip(event, 'BGPicker');\" />\n";
	body += "</td></tr><tr><td>Width</td><td>\n";
	body += "<input type=text size=3 name='myWidth' value=\"";
	if( cell.myWidth )
		body += cell.myWidth;
	body += "\" />";
	body += "<input type=button value='+' onClick=\"myWidth.value ++;\" />\n";
	body += "<input type=button value='-' onClick=\"if( myWidth.value > 1 ) { myWidth.value --; }\" />\n";
  body += "</td></tr><tr><td>Height</td><td>\n";
  body += "<input type=text size=3 name='myHeight' value=\"";
  if( cell.myHeight )
    body += cell.myHeight;
  body += "\" />";
  body += "<input type=button value='+' onClick=\"myHeight.value ++;\" />\n";
  body += "<input type=button value='-' onClick=\"if( myHeight.value > 1 ) { myHeight.value --; }\" />\n";
	body += "</td></tr><tr><td colspan=2>\n";
	body += "<input type=button value='Save' onClick=\"saveEdit( this.form );\" />\n";
	body += "<input type=button value='Copy' onClick=\"copyCell( editCell );\" />\n";
	body += "<input type=button value='Delete' onClick=\"deleteCell( editCell );\" />\n";
	body += "<input type=button value='Unselect' onClick=\"unselectCell( editCell ); editCell = null;\" />\n";
	body += "</td></tr></table>\n";
	body += "</form>";
	body += "</div>";

	return body;
}

function saveEdit( editForm )
{
	if( editCell == null )
	{
		alert( "No active cell. Double click a cell to select it." );
		return;
	}

	if( editForm.myName.value || editForm.myHP.value || editForm.myMaxHP.value || editForm.myNote.value ) 
		editCell.hasData = true;
  else 
		editCell.hasData = false;
	
	editCell.myName = editForm.myName.value;
	editCell.myHP = editForm.myHP.value;
	editCell.myMaxHP = editForm.myMaxHP.value;
	editCell.myColor = editForm.myColor.options[ editForm.myColor.selectedIndex ].value;
	editCell.myNote = editForm.myNote.value.replace(/\n/g,'<br>\n');

	editCell.style.backgroundColor = editForm.myColor.options[ editForm.myColor.selectedIndex ].value;

  var myWidth = editForm.myWidth.value - 0;
  var myHeight = editForm.myHeight.value - 0;

	if( isNaN( myWidth ) ) myWidth = 1;
	if( isNaN( myHeight ) ) myHeight = 1;

  myWidth = myWidth<1?1:myWidth;
  myHeight = myHeight<1?1:myHeight;

	editCell.myWidth = myWidth;
	editCell.myHeight = myHeight;

	editCell.style.width = gridX * myWidth - 2;
	editCell.style.height = gridY * myHeight - 2;

	dataChanged = false;

	if( !editForm.copyOpen.checked )
	{
		hideEditPane();	
		alert( 'Data Saved' );
	}
}