function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

var lastX=0;
var lastY=0;
function createLine(src,imageTag,x,y,length,isVertical,type,weight)
{
  var offX = findPosX(imageTag);
  var offY = findPosY(imageTag);
  
  var posX = (x == null || x == 'last')?lastX:x;
  var posY = (y == null || y == 'last')?lastY:y;
  
  var lineId = src.getAttribute('lineMaxId_' + type);
  if(lineId == null || lineId == '') lineId = 0;
  
  lineId++;
  var line;
  if(isVertical){line = '<div id="line_' + type + '_' + src.id + '_' + lineId + '" style="width:' + weight + 'px;height:' + length + 'px;left:' + (offX + posX) +'px;top:' + (offY + posY) + 'px;position:absolute;z-index:' + (90+type) + ';border:0px;background-image:url(' + applicationUrl + '/images/dashLineV-' + type + '-w' + weight + '.gif);background-repeat:' + ((weight > 1)?'repeat':'repeat-y') + ';font-size:0px;"></div>'; lastX = posX; lastY=posY + length;}
  else          {line = '<div id="line_' + type + '_' + src.id + '_' + lineId + '" style="width:' + length + 'px;height:' + weight + 'px;left:' + (offX + posX) +'px;top:' + (offY + posY) + 'px;position:absolute;z-index:' + (90+type) + ';border:0px;background-image:url(' + applicationUrl + '/images/dashLineH-' + type + '-w' + weight + '.gif);background-repeat:' + ((weight > 1)?'repeat':'repeat-x') + ';font-size:0px;"></div>'; lastX = posX + length; lastY=posY;}
  
  document.body.insertAdjacentHTML('afterBegin',line);
  src.setAttribute('lineMaxId_' + type,lineId);
  return document.getElementById('line_' + type + '_' + src.id + '_' + lineId);
}

function createDot(src,imageTag,x,y)
{
  var offX = findPosX(imageTag);
  var offY = findPosY(imageTag);
  
  var dot = '<img id="line_0_' + src.id + '_dot" src="' + applicationUrl + '/images/dot.gif" border=0 style="left:' + (offX + x - 3) +'px;top:' + (offY + y - 3) + 'px;position:absolute;z-index:100"></div>';
  document.body.insertAdjacentHTML('afterBegin',dot);
}

function createLineLabel(src,line,imageTag,text,type)
{
  var offX = findPosX(imageTag);
  var offY = findPosY(imageTag);

  var isToRight = (line.style.posLeft < offX + imageTag.width/2);
  var left = (isToRight)?line.style.posLeft + 5:offX + 5;
  var top = line.style.posTop + 7;
  var width = (isToRight)?imageTag.width + offX - line.style.posLeft - 10:line.style.posLeft - offX - 10;
  
  var html = '<div id="lineLabel_' + type + '_' + src.id + '" align=' + ((isToRight)?'left':'right') + ' style="left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;z-index:' + (90+type) + ';position:absolute;" class=text1>' + text + '</div>';
  document.body.insertAdjacentHTML('afterBegin',html);
}

function removeLines(src,type)
{
  var lineMaxId = src.getAttribute('lineMaxId_' + type);
  if(lineMaxId == null || lineMaxId == '') lineMaxId = 0;
  
  for(var i = 1; i <= lineMaxId ; i++)
  {
    try{removeTag(document.getElementById('line_' + type + '_' + src.id + '_' + i));}catch(e){}
  }
  try{removeTag(document.getElementById('line_' + type + '_' + src.id + '_dot'));}catch(e){}
  try{removeTag(document.getElementById('lineLabel_' + type + '_' + src.id));}catch(e){}
}

var lastVisibleCard = null;
var lastClickedIcon = null;
var lastIconOpacity = 100;
var lastBgImage = null;
function showCard(icon,iconIndex,subIndex,backgroundImage,blurIcon)
{
  var bgImage = (backgroundImage == null)?lastBgImage:backgroundImage;
  lastBgImage = bgImage;
  
  var offX = findPosX(bgImage);
  var offY = findPosY(bgImage);
  var result = true;
  var container = document.getElementById('cardContainerDiv');
  try
  {
    container.filters[0].WipeStyle = (lastVisibleCard != null)?0:1;
    container.filters[0].Apply();
  }catch(e){}
  
  var tag = document.getElementById('card_' + iconIndex + '_' + subIndex);
  hideLastCard(blurIcon);
  
  try
  {
    if(icon!=null) lastClickedIcon = icon;
    if(icon.filters.item('Alpha').opacity < 100) lastIconOpacity = icon.filters.item('Alpha').opacity;
    icon.filters.item('Alpha').opacity = 100;
  }catch(e){}

  
  try{
    container.style.posLeft = offX + 405;
    container.style.posTop = offY - 53; 
    container.style.width = 350;
    tag.style.display = 'inline';
    lastVisibleCard = tag;
  }
  catch(e){result = false;}
  
  try{container.filters[0].Play();}catch(e){}
  return result;
}

function hideLastCard(blurIcon)
{
  if(lastVisibleCard != null) lastVisibleCard.style.display = 'none';
  if(blurIcon && lastClickedIcon != null) 
  {
    removeLines(lastClickedIcon,1);
    try{lastClickedIcon.filters.item('Alpha').opacity = lastIconOpacity;}catch(e){}
  }
}

function removeTag(tag)
{
  tag.parentElement.removeChild(tag);
}

var coordDiv = null;
function showCoordinates(tag)
{
  if(coordDiv == null) createCoordDiv();
  
  if(document.getElementById('genLineHover').checked)  coordDiv.innerHTML += '&lt;lineHover x="' + window.event.offsetX + '" y="' + window.event.offsetY + '" length="???" isVertical="???" isLabel="???"/&gt;<br/>';
  if(document.getElementById('genLineClick').checked)  coordDiv.innerHTML += '&lt;lineClick x="' + window.event.offsetX + '" y="' + window.event.offsetY + '" length="???" isVertical="???" isLabel="???"/&gt;<br/>';
  if(document.getElementById('genDot').checked)  coordDiv.innerHTML += '&lt;lineDot x="' + window.event.offsetX + '" y="' + window.event.offsetY + '" /&gt;<br/>';
}

function createCoordDiv()
{
  var html = '<div id="coordDivMain" align=left style="padding:5px;position:absolute;z-index:100;left:10px;top:10px;width:600px;border:1px solid black;background-color:whitesmoke;">';
  html    += '<div style="padding-bottom:5px;"><b>X</b> axis of first <b>lineHover</b> tag must be set to <b>2</b>.<br><b>X</b> axis of first <b>lineClick</b> tag must be set to <b>-5</b>.</div>';
  html    += '<div id="coordDiv" CONTENTEDITABLE="true" style="border:1px solid gray;background-color:white;font-size:10;height:100px;" align="left"></div>';
  html    += '<a href="javascript: removeTag(document.getElementById(\'coordDivMain\')); coordDiv=null; void(0);">close</a>&nbsp;&nbsp;';
  html    += '<a href="javascript: document.getElementById(\'coordDiv\').innerHTML=\'\'; void(0);">clear</a>&nbsp;&nbsp;';
  html    += '<a href="?r=true">refresh</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
  html    += 'Generate:&nbsp;<input type="radio" name="tagType" id="genLineHover" checked>lineHover</input>&nbsp;&nbsp;&nbsp;&nbsp;';
  html    += '<input type="radio" name="tagType" id="genLineClick">lineClick</input>&nbsp;&nbsp;&nbsp;&nbsp;';
  html    += '<input type="radio" name="tagType" id="genDot">lineDot</input>&nbsp;&nbsp;&nbsp;&nbsp;tag';
  html    += '</div>';
  document.body.insertAdjacentHTML('afterBegin',html);
  coordDiv = document.getElementById('coordDiv');
}