var Container = null;
var Editor = null;


function mouseX(evt) {
  if (evt.pageX) return evt.pageX;
  else if (evt.clientX)
    return evt.clientX + (document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft);

  else return null;
}

function mouseY(evt) {
  if (evt.pageY) return evt.pageY - 55;
  else if (evt.clientY)
    return evt.clientY + (document.documentElement.scrollTop ?
    document.documentElement.scrollTop :
    document.body.scrollTop)-4;
  else return null;
}

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
  }
  return [curleft,curtop];
}

document.CreateElement = function (obj) {
  if (obj == null) {
    var obj = document.createElement('span');
    Editor.createMode();
    Editor.style.display='';
    Editor.displayed();
    document.resultObject = obj;
  }
  else {
    obj.style.marginLeft = 100 + 'px';
    obj.style.marginTop = 100 + 'px';
    obj.style.position = 'absolute';

    addEventHandlers(obj);
    Container.appendChild(obj);	
  }
  

}

function makeEditable(e,el){
  if ( Container.dragmode==false ) {
  Editor.editMode();
  Editor.style.display = '';
  Editor.displayed();
  
  document.resultObject = this;
  document.loadObject();
  }
  Container.CanEdit = false;
}

function EnterKeyPress(e) {
	if (e == undefined) e = window.event;	

	if(e.keyCode==13){
		e.returnValue = false;
		makeEditable(null, this.parentNode);
		return false;
		
	}
}

function dragMode(e){

if (e == undefined) e = event;

  var el = this;

  el.parentNode.CanEdit = false;

  ParentPosition = findPos(el.parentNode);

  el.currentMouseX = mouseX(e);
  el.currentMouseY = mouseY(e);

  _Position = findPos(el);
//  el.currentX = _Position[0];
//  el.currentY = _Position[1];

  el.currentX = parseInt(el.style.marginLeft);
  el.currentY = parseInt(el.style.marginTop);
  el.Dragging = true;
  Container.dragmode=false;
}

function dragging(e){

if (e == undefined) e = event;

  var el = this;
  if (  el.Dragging != true ) return false;
  el.parentNode.CanEdit = false;


  ParentPosition = findPos(el.parentNode);
  newX = mouseX(e) - el.currentMouseX; //Amount of Change
  newY = mouseY(e) - el.currentMouseY; //Amount of Change

  newX = newX + parseInt(el.currentX); //Amount of Change
  newY = newY + parseInt(el.currentY); //Amount of Change


  if (newX > 0 && newX < parseInt(el.parentNode.style.width)) {
    if (newY > 0 && newY < parseInt(el.parentNode.style.height)) {
        //alert(el.style.marginLeft + ' : ' + el.style.marginTop + ', ' + newX + ' : ' + newY)
        el.style.marginLeft = newX + 'px';
        el.style.marginTop = newY + 'px';
    }
  }
  Container.dragmode=true;

}

function releaseDragMode(e ){
if (e == undefined) e = event;
  var el = this;
  if (  el.Dragging != true ) return false;
  el.parentNode.CanEdit = false;


  ParentPosition = findPos(el.parentNode);
  newX = mouseX(e);
  newY = mouseY(e);

  newX = newX-el.currentMouseX;
  newY = newY-el.currentMouseY

  newX = newX + el.currentX - ParentPosition[0];
  newY = newY + el.currentY - ParentPosition[1];

  if (newX > 0 && newX < parseInt(el.parentNode.style.width)) {
    if (newY > 0 && newY < parseInt(el.parentNode.style.height)) {
      el.style.marginLeft = newX + 'px';
      el.style.marginTop = newY + 'px';
    }
  }
  el.Dragging = false;

}

function addEventHandlers(obj) {
  obj.onmouseup = releaseDragMode;
  obj.onmousemove = dragging;
  obj.onmousedown = dragMode;
  obj.onclick = makeEditable;
  obj.title = 'Click to edit';
  return false;
}