var leftDiv, rightDiv, topDiv, bottomDiv, coverDiv;
var tableLeftDiv, tableRightDiv, tableTopDiv, tableBottomDiv;

var borderSize = 4;
var regularBorder   = borderSize + 'px solid #ff9900';
var containerBorder = borderSize + 'px dotted #ff9900';
var tableBorder     = '1px solid #aaaaff';

var isReady = false;

// initializes the four divs that we use as our element border
function initializeBorder() {
  // some times the user presses the "start container mode" button before
  // the borders have been initialized.  we have to determine which types of
  // borders to show depending on whether or not we are initializing the borders
  // before or after the user has pressed this button.  other code handles 
  // setting the borders to the right styles at later points.
  var inSetContainer = false;//top.mainPanel.document.getElementById('inSetContainer').value == 1;

  leftDiv = top.mainPanel.createDappIframe.document.createElement('div');
  leftDiv.id                     = 'dapperLeftDiv';
  leftDiv.style.borderLeft       = inSetContainer ? containerBorder : regularBorder;
  leftDiv.className              = 'borders';
  leftDiv.onmouseover            = borderIn;
  leftDiv.onmouseout             = borderOut;
  top.mainPanel.createDappIframe.document.body.appendChild(leftDiv);  

  rightDiv = top.mainPanel.createDappIframe.document.createElement('div');
  rightDiv.id                     = 'dapperRightDiv';
  rightDiv.style.borderLeft       = inSetContainer ? containerBorder : regularBorder;
  rightDiv.className              = 'borders';
  rightDiv.onmouseover            = borderIn;
  rightDiv.onmouseout             = borderOut;
  top.mainPanel.createDappIframe.document.body.appendChild(rightDiv);  

  topDiv = top.mainPanel.createDappIframe.document.createElement('div');
  topDiv.id                       = 'dapperTopDiv';
  topDiv.style.borderTop          = inSetContainer ? containerBorder : regularBorder;
  topDiv.className                = 'borders';
  topDiv.onmouseover              = borderIn;
  topDiv.onmouseout               = borderOut;
  top.mainPanel.createDappIframe.document.body.appendChild(topDiv);  

  bottomDiv = top.mainPanel.createDappIframe.document.createElement('div');
  bottomDiv.id                    = 'dapperBottomDiv';
  bottomDiv.style.borderTop       = inSetContainer ? containerBorder : regularBorder;
  bottomDiv.className             = 'borders';
  bottomDiv.onmouseover           = borderIn;
  bottomDiv.onmouseout            = borderOut;
  top.mainPanel.createDappIframe.document.body.appendChild(bottomDiv);  
  
  // used to cover up iframes and frames and other content
  // that dapper doesn't handle
  coverDiv = top.mainPanel.createDappIframe.document.createElement('div');
  coverDiv.id                     = 'dapperCoverDiv';
  
  top.mainPanel.createDappIframe.document.body.appendChild(coverDiv);
  
  // set things up for the table divs
  tableLeftDiv = leftDiv.cloneNode(true);
  tableLeftDiv.id = 'dapperTableLeftDiv';
  tableLeftDiv.style.border = tableBorder;
  top.mainPanel.createDappIframe.document.body.appendChild(tableLeftDiv);

  tableRightDiv = rightDiv.cloneNode(true);
  tableRightDiv.id = 'dapperTableRightDiv';
  tableRightDiv.style.border = tableBorder;
  top.mainPanel.createDappIframe.document.body.appendChild(tableRightDiv);

  tableTopDiv = topDiv.cloneNode(true);
  tableTopDiv.id = 'dapperTableTopDiv';
  tableTopDiv.style.border = tableBorder;
  top.mainPanel.createDappIframe.document.body.appendChild(tableTopDiv);

  tableBottomDiv = bottomDiv.cloneNode(true);
  tableBottomDiv.id = 'dapperTableBottomDiv';
  tableBottomDiv.style.border = tableBorder;
  top.mainPanel.createDappIframe.document.body.appendChild(tableBottomDiv);
}

function borderIn(){
  timeOutA = setTimeout(removeToggledBorders, 100);
}
function borderOut(){
  clearTimeout(timeOutA);
}

// used for toggling the border around an element when hover over it
// used on mouse over and mouse out
function toggleBorder(event, el, on) {
	if (!event) 
			 event = top.mainPanel.createDappIframe.event;  
 	event.cancelBubble = true;
  if (el.tagName == 'HTML' || el.tagName == 'BODY')
    return;

  

  if (on) {
    if (!leftDiv) {
      // IE hass a MASSIVE bug where, if we call this function before the page
      // is finished loading it will say "Cannot load, operation aborted".
      // so we can only do this if top.mainPanel.createDappIframe.document.body is ready.
      // isReady gets set in the onLoad - we use window.event to detect if this is IE
      if (isReady || !window.event) {
        initializeBorder(); // has to be called now, as opposed to earlier, 
                            // otherwise body is not yet ready
      }
      else
        return;
    }
    if (el.getAttribute('cursor') == '0'){
      top.mainPanel.setContextMessage('Click to remove this type of content');
    } else {
      if ((top.mainPanel.anchorsCount == 1) && (top.mainPanel.getHighlightCount() > 0)){
        top.mainPanel.setContextMessage('Keep clicking');
      } else {
        top.mainPanel.showDefaultContextMessage();
      }
    }
    //var cursorMode = (el.getAttribute('cursor') == '1') ? true : false;
    top.mainPanel.updateCursorHelperMode(el);//cursorMode);
    
    if (top.mainPanel.tableMode && (el.tagName=='TABLE' || el.tagName == 'TBODY'))
	    return;
    // update debugging information
    /*
    if (getMakerPanel('debugOn').checked) 
      getMakerPanel('debugContent').innerHTML =
        'Currently hovering over: '+el.tagName+', '+el.getAttribute('debug');
    */

    leftDiv.style.height          = (el.offsetHeight + borderSize) + 'px';
    leftDiv.style.left            = parseInt(getX(el) - borderSize) +'px';
    leftDiv.style.top             = getY(el)+'px';
    leftDiv.style.display         = '';

    rightDiv.style.height         = (el.offsetHeight + borderSize) + 'px';
    rightDiv.style.left           = (el.tagName == 'HTML' ? (getX(el)+el.offsetWidth-5) : (getX(el)+el.offsetWidth)) + 'px';
    rightDiv.style.top            = getY(el)+'px';
    rightDiv.style.display        = '';    

    topDiv.style.width            = (el.tagName == 'HTML' ? (el.offsetWidth-5) : (el.offsetWidth+borderSize+borderSize)) + 'px'; // the first borderSize is because I made the border look ouside the element. the second is for closing the upper left gap..
    topDiv.style.left             = parseInt(getX(el) - borderSize) +'px';
    topDiv.style.top              = parseInt(getY(el) - borderSize) +'px';
    topDiv.style.display          = '';    

    bottomDiv.style.width         = (el.tagName == 'HTML' ? (el.offsetWidth-5) : (el.offsetWidth + borderSize)) + 'px';
    bottomDiv.style.left          = getX(el)+'px';
    bottomDiv.style.top           = getY(el)+el.offsetHeight+'px';
    bottomDiv.style.display       = '';    

    // for frames and iframes, we have a special means of dealing with things
    if (el.tagName == 'IFRAME' || el.tagName == 'FRAME' || el.tagName == 'OBJECT' || el.tagName == 'EMBED') {
      coverDiv.style.width        = el.offsetWidth;
      coverDiv.style.height       = el.offsetHeight;
      coverDiv.style.left         = getX(el)+'px';
      coverDiv.style.top          = getY(el)+'px';
      coverDiv.style.padding      = '10px';  
      
      coverDiv.onclick            = function(ev) {
                                      ev.cancelBubble = true;
                                    }
      coverDiv.onmouseout         = function(ev) {
                                      coverDiv.style.width='0';
                                      coverDiv.style.height='0';
                                      coverDiv.innerHTML = '';
                                      coverDiv.style.padding=0;
                                      ev.cancelBubble = true;
                                    };
      coverDiv.onmouseover        = function(ev) {
                                      toggleBorder(ev,coverDiv,true);
                                    };
    
      if (el.tagName != 'OBJECT' && el.tagName != 'EMBED') 
        coverDiv.innerHTML          = 'This content is contained in an external document. '+
                                      'If you would like to work with this content separately, '+
                                      'please click <a target="_blank" href="http://'+window.location.host+
                                      '/dapp-factory.jsp?url='+
                                      encodeURIComponent(el.getAttribute('src'))+
                                      '">here</a>';
      else
        coverDiv.innerHTML          = 'This content type is not supported by Dapper';
    }
    
    // if this is a table element (td/tr/th), we want to highlight the table it belongs to
    // but only if we are not in table mode already
/*
    if (	!top.mainPanel.tableMode && 
    			el.getAttribute('numericCellKey') && 
    			top.mainPanel.createDappIframe.findTableForDescendent(el).getAttribute('isHighlightedTable') == 'true' ) 
    			{
						var table = top.mainPanel.createTableSelector(el);
						setTableBorder(table);
    			}
    else if (tableLeftDiv.style.display != 'none' && el.id != 'tableSelector' && el.tagName!='HTML' && el.tagName!='TABLE')
    {
			removeTableBorder();
			top.mainPanel.removeTableSelector();
    }
*/    
  }
  else {
    // update debugging information
    /*
    if (getMakerPanel('debugOn').checked)
      getMakerPanel('debugContent').innerHTML = '';
    */

  }
}

function removeToggledBorders()
{
	leftDiv.style.display='none';
	rightDiv.style.display='none';
	bottomDiv.style.display='none';
	topDiv.style.display='none';
	
}

function setTableBorder(table) {
  if ((isReady || !window.event) && table) {
    tableLeftDiv.style.height          = table.offsetHeight;
    tableLeftDiv.style.left            = getX(table)+'px';
    tableLeftDiv.style.top             = getY(table)+'px';
    tableLeftDiv.style.display         = '';
  
    tableRightDiv.style.height         = table.offsetHeight;
    tableRightDiv.style.left           = getX(table)+table.offsetWidth+'px';
    tableRightDiv.style.top            = getY(table)+'px';
    tableRightDiv.style.display         = '';
  
    tableTopDiv.style.width            = table.offsetWidth;
    tableTopDiv.style.left             = getX(table)+'px';
    tableTopDiv.style.top              = getY(table)+'px';
    tableTopDiv.style.display         = '';
  
    tableBottomDiv.style.width         = table.offsetWidth;
    tableBottomDiv.style.left          = getX(table)+'px';
    tableBottomDiv.style.top           = getY(table)+table.offsetHeight+'px';
    tableBottomDiv.style.display         = '';
  }
}

function removeTableBorder() {
  if (isReady || !window.event) {
  	tableLeftDiv.style.display = 'none';
  	tableRightDiv.style.display = 'none';
  	tableTopDiv.style.display = 'none';
  	tableBottomDiv.style.display = 'none';		
  }
}

// gets the number of pixels from the left of an element
function getX (el) {
  var x = 0;
  if (el.offsetParent) {
  	while (el.offsetParent) {
  		x += el.offsetLeft
  		el = el.offsetParent;
    }
	}
  else if (el.x)
    x += el.x;
  return x;
}

// gets the number of pixels from the top of an element
function getY (el) {
  var y = 0;
  	
  if (el.offsetParent) {
  	while (el.offsetParent) {
  		y += el.offsetTop
  		el = el.offsetParent;
		}
 	}
  else if (el.y)
    y += el.y;
  return y;
}

function showDebugKeys(event, el, show) {
	if (show)
	{
//		  outerDivAlreadyCreated = top.mainPanel.document.getElementById(el.id + '_debug_dapper_1');
//		  if (outerDivAlreadyCreated)
//		  {
//		  	outerDivAlreadyCreated.style.display='';
//			return ;
//		  }
		
		  var outerDiv = top.mainPanel.document.createElement('div');
		  outerDiv.style.width = el.offsetWidth;
		  outerDiv.style.height = el.offsetHeight;
		  outerDiv.style.position = 'absolute';
		  
		  outerDiv.style.left = screen.width/2 - 100 + 'px';
		  outerDiv.style.top = screen.height/2 - 125 + 'px';
		 
		  outerDiv.style.zIndex = 100000;
		
		  
		  var innerDiv = top.mainPanel.document.createElement('div');
		  innerDiv.style.width = '200px';
		  innerDiv.style.height = '250px';
		  
		  innerDiv.style.backgroundColor = '#bb3399';
		  innerDiv.style.paddingLeft = '10px';
		  innerDiv.style.paddingBottom = '10px';
		  innerDiv.style.paddingRight = '10px';
		  innerDiv.style.paddingTop = '10px';
		  outerDiv.appendChild(innerDiv);
		  
		  innerDiv.innerHTML = el.tagName+'<br/>'+el.getAttribute('debug');
		  
		  innerDiv.id = el.id + '_debug_dapper_2';
		  outerDiv.id = el.id + '_debug_dapper_1';
		  
		  top.mainPanel.document.body.appendChild(outerDiv);
		  
		  el.onmouseout = function(ev)
		  {
		  	outerDiv.style.display='none';
		  }
		  
	}
	else
	{
	}
}