var operaBrowser = false;
if(navigator.userAgent.indexOf('Opera')>=0)operaBrowser=1;
function cancelEvent()
{
  return false;
}
var activeImage = false;
var readyToMove = false;
var moveTimer = -1;
var dragDropDiv;
var insertionMarker;

var offsetX_marker = -7; //7; // offset X - element that indicates destinaton of drop
var offsetY_marker = 0; //7;	// offset Y - element that indicates destinaton of drop

var firefoxOffsetX_marker = -3; 
var firefoxOffsetY_marker = -4;


var destinationObject = false;

var divXPositions = new Array();
var divYPositions = new Array();
var divWidth = new Array();
var divHeight = new Array();

var tmpLeft = 0;
var tmpTop = 0;

function selectImage(e)
{
  if(document.all && !operaBrowser)e = event;
  var obj = this.parentNode;
  if(activeImage)activeImage.className='imageBox';
  obj.className = 'imageBoxHighlighted';
  activeImage = obj;
  readyToMove = true;
  moveTimer=0;

  tmpLeft = e.clientX -200;
  tmpTop = e.clientY - 78;

  startMoveTimer();


  return false;
}

function startMoveTimer(){
  if(moveTimer>=0 && moveTimer<10){
    moveTimer++;
    setTimeout('startMoveTimer()',15);
  }
  if(moveTimer==10){
    var subElements = dragDropDiv.getElementsByTagName('DIV');
    if(subElements.length>0){
      dragDropDiv.removeChild(subElements[0]);
    }

    dragDropDiv.style.display='block';
    var newDiv = activeImage.cloneNode(true);
    newDiv.className='imageBox';
    newDiv.id='';
    dragDropDiv.appendChild(newDiv);

    dragDropDiv.style.top = tmpTop + 'px';
    dragDropDiv.style.left = tmpLeft + 'px';

  }
  return false;
}

function dragDropEnd()
{
  readyToMove = false;
  moveTimer = -1;

  dragDropDiv.style.display='none';
  insertionMarker.style.display='none';

  if(destinationObject && destinationObject!=activeImage){
    var parentObj = destinationObject.parentNode;
    parentObj.insertBefore(activeImage,destinationObject);
    activeImage.className='imageBox';
    activeImage = false;
    destinationObject=false;
    getDivCoordinates();
  }
  return false;
}

function dragDropMove(e)
{
  if(moveTimer==-1)return;
  if(document.all && !operaBrowser)e = event;
  
  var leftPos = e.clientX -200;
  var topPos = e.clientY - 78;
  
  dragDropDiv.style.top = topPos + 'px';
  dragDropDiv.style.left = leftPos + 'px';

  if(e.button!=1 && document.all &&  !operaBrowser)dragDropEnd();
  
  var elementFound = false;
  
  for(var prop in divXPositions) {   
    if(divXPositions[prop]/1 < leftPos/1 && (divXPositions[prop]/1 + divWidth[prop]*0.7)>leftPos/1 && divYPositions[prop]/1<topPos/1 && (divYPositions[prop]/1 + divWidth[prop])>topPos/1){

      if(document.all ){
        offsetX = offsetX_marker;
        offsetY = offsetY_marker;
      }else{
        offsetX = firefoxOffsetX_marker;
        offsetY = firefoxOffsetY_marker;
      }
      insertionMarker.style.top = divYPositions[prop] + offsetY + 'px';
      insertionMarker.style.left = divXPositions[prop] + offsetX + 'px';
      insertionMarker.style.display='block';
      
      destinationObject = document.getElementById(prop);
      elementFound = true;
      break;
    }
  }


  if(!elementFound){
    insertionMarker.style.display='none';
    destinationObject = false;
  }

  return false;

}



function getDivCoordinates() {
  var divs = document.getElementsByTagName('DIV');
  
  for(var no=0;no<divs.length;no++){
    if(divs[no].className=='imageBox' || divs[no].className=='imageBoxHighlighted' && divs[no].id){
      divXPositions[divs[no].id] = divs[no].offsetLeft;
      divYPositions[divs[no].id] = divs[no].offsetTop;
      divWidth[divs[no].id] = divs[no].offsetWidth;
      divHeight[divs[no].id] = divs[no].offsetHeight;
    }
  }
}

function saveImageOrder()
{
  var orderString = "";
  var objects = document.getElementsByTagName('DIV');
  
  for(var no=0;no<objects.length;no++){
    if(objects[no].className=='imageBox' || objects[no].className=='imageBoxHighlighted'){
      if(orderString.length>0)orderString = orderString + ',';
        orderString = orderString + objects[no].id.substr(8);
    }
  }
  
  document.getElementById('cms_form_order').value = orderString.substr(0, (orderString.length -1));
  document.getElementById('cms_form').submit();
}

function initGallery()
{
  var divs = document.getElementsByTagName('DIV');
  for(var no=0;no<divs.length;no++){
    if(divs[no].className=='imageBox_theImage' || divs[no].className=='imageBox_label'){
      divs[no].onmousedown = selectImage;

    }
  }

  var insObj = document.getElementById('insertionMarker');
  var images = insObj.getElementsByTagName('IMG');
  document.body.onselectstart = cancelEvent;
  document.body.ondragstart = cancelEvent;
  document.body.onmouseup = dragDropEnd;
  document.body.onmousemove = dragDropMove;


  window.onresize = getDivCoordinates;

  dragDropDiv = document.getElementById('dragDropContent');
  insertionMarker = document.getElementById('insertionMarker');
  getDivCoordinates();
}