/*
	Copyright Robert Nyman, http://www.robertnyman.com
	Free to use if this text is included
	// modified slightly based on Prototype
*/

var intContainer = 5;
var arrayOfDivs = new Array();

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        var css = document.defaultView.getComputedStyle(oElm, null);
        strValue = css ? css.getPropertyValue(strCssRule) : null;
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

function Draggable(el, elID)
{
  var xDelta = 0, yDelta = 0;
  var xStart = 0, yStart = 0;
  var fgDirection = 0;
 
  // remove the events
  function enddrag(e)
  {
    el.style.zIndex = 5;
    document.onmouseup = null;
    document.onmousemove = null;

    newY = parseInt(getStyle(el,'top'));
    intThisHeight = parseInt(el.offsetHeight);
    for( var i in arrayOfDivs ) {
      if( i >= 0 ) {
        if( arrayOfDivs[i] != elID ) {
            otherDiv = document.getElementById(arrayOfDivs[i])
            otherY = parseInt(getStyle(otherDiv,'top'));
            intHeight = parseInt(otherDiv.offsetHeight);
            if( (newY-otherY < 0 && Math.abs(newY-otherY)-5 < intThisHeight ) ) {
                newY = otherY - intThisHeight - 5;
            } else if ( (newY-otherY > 0 && Math.abs(newY-otherY)-5 < intHeight) ) {
                newY = otherY + intHeight + 5;
            }
        }
      }
    }
            if( newY < 5 ) {
                newY = 5;
            }

            if( newY > intContainer - intThisHeight - 5 ) {
                newY = intContainer - intThisHeight - 5;
            }
            el.style.top = newY + 'px';

    fgDirection = 0;
  }
 
  // fire each time it's dragged
  function drag(e)
  {
    e = e || window.event;
    yDelta = yStart - parseInt(e.clientY);
    if( yDelta > 0 ) {
        fgDirection = 1;
    } else {
        fgDirection = 2;
    }

    yStart = parseInt(e.clientY);
    if( (parseInt(el.style.top) - yDelta) < 0 ) {
        el.style.top = '0' + 'px';
        newY = 0;
    } else if( (parseInt(el.style.top) - yDelta) > intContainer - parseInt(el.offsetHeight) ) {
        el.style.top = intContainer - parseInt(el.offsetHeight);
        newY = intContainer - parseInt(el.offsetHeight);
    } else {
        newY = (parseInt(el.style.top) - yDelta)
        el.style.top = newY + 'px';
    }
    moveOthers(e, newY);
  }
 
  // initiate the drag
  function md(e)
  {
    e = e || window.event;
    fgDirection = 0;
    xStart = parseInt(e.clientX);
    yStart = parseInt(e.clientY);
    el.style.top = parseInt(getStyle(el,'top')) + 'px';
    el.style.left = parseInt(getStyle(el,'left')) + 'px';

    for( var i in arrayOfDivs ) {
      if( i >= 0 ) {
        if( arrayOfDivs[i] == elID ) {
            el.style.zIndex = 10;
        } else {
            document.getElementById(arrayOfDivs[i]).style.zIndex = 0;
        }
      }
    }

    document.onmouseup = enddrag;
    document.onmousemove = drag;
    return false;
  }

  function moveOthers(e){
    e = e || window.event;
    intThisHeight = parseInt(el.offsetHeight);

    for( var i in arrayOfDivs ) {
      if( i >= 0 ) {
        if( arrayOfDivs[i] != elID ) {
            otherDiv = document.getElementById(arrayOfDivs[i])
            otherY = parseInt(getStyle(otherDiv,'top'));
            intHeight = parseInt(otherDiv.offsetHeight);
            if( intHeight > intThisHeight ) {
                intMaxHeight = intHeight;
                intMinHeight = intThisHeight;
            } else {
                intMaxHeight = intThisHeight;
                intMinHeight = intHeight;
            }

            if( Math.abs( newY - otherY ) < intMaxHeight ) {
                // Only consider a div that it's close to
                if( fgDirection == 2 && (newY+intThisHeight-otherY) >= parseInt(intHeight/4) && (newY+intThisHeight-otherY) <= parseInt(intHeight/3) ) {
                    // Move other up
                    moveY = otherY - intThisHeight - 5;
                    otherDiv.style.top = moveY + 'px';
                    swapForm( elID, 1 );
                } else if( fgDirection == 1 && (newY-otherY) >= intHeight*2/4 && (newY-otherY) <= intHeight*2/3 ) {
                    // Move other down
                    moveY = otherY + intThisHeight + 5;
                    otherDiv.style.top = moveY + 'px';
                    swapForm( elID, -1 );
                }
            }
        }
      }
    }
  }

  function swapForm( id, intChange ) {
      for( i=0 ; i<document.forms.frmOrder.elements.length ; i++ ) {
          if( document.frmOrder.elements[i].value == id ) {
              intTarget = i+(intChange);
              strTempValue = document.frmOrder.elements[intTarget].value;
              document.frmOrder.elements[intTarget].value = document.frmOrder.elements[i].value;
              document.frmOrder.elements[i].value = strTempValue;
              break;
          }
      }
  }
 
  // tie it into the element
  el.onmousedown = md;
 
}

function attachDraggable( ) {
    for( var i=0 ; i< attachDraggable.arguments.length ; i++ ) {
        new Draggable(document.getElementById(attachDraggable.arguments[i]), attachDraggable.arguments[i]);
        arrayOfDivs.push( attachDraggable.arguments[i] );
        intContainer += parseInt(document.getElementById(attachDraggable.arguments[i]).offsetHeight+5)

        // Add a new field to the form
        var the_form = document.getElementById('frmOrder');
        var intFieldNum = the_form.elements.length - 1;
        var new_field = document.createElement('input');
        new_field.setAttribute('type', 'hidden' );
        new_field.setAttribute('id', 'RateMyGay[' + intFieldNum + ']' );
        new_field.setAttribute('name', 'RateMyGay[' + intFieldNum + ']' );
        new_field.setAttribute('value', attachDraggable.arguments[i] );
        the_form.insertBefore( new_field, null )
    }

}

function removeDraggable( ) {
    for( var i=0 ; i< attachDraggable.arguments.length ; i++ ) {
        // Find the location of the element in the array, then delete it
        j = arrayOfDivs.indexOf( attachDraggable.arguments[i] );
        arrayOfDivs.splice(j,1);
        intContainer += parseInt(document.getElementById(attachDraggable.arguments[i]).offsetHeight-2)
    }
}

function addBox( ) {
    // Add a new box to the container
    var container = document.getElementById('RateMyGayContainer');
    var boxNumber = document.getElementById('boxNumber');
    var boxHeight = parseInt(document.getElementById('boxSize').value);
    var thisBoxNumber = document.getElementById('boxNumber').value;
    boxNumber.value = parseInt(thisBoxNumber) + 1;

    // Create a new div of size X, increase the size of the container, put the new div inside the container relative to any other divs in there already, make this new div draggable
    var newDiv = document.createElement('div');
    newDiv.className = "box";
    newTop = intContainer;
    newDiv.style.top = newTop + 'px';
    newDiv.style.height = boxHeight + 'px';

    var newDivIdName = 'Box' + thisBoxNumber;
    newDiv.setAttribute('id', newDivIdName);
    newDiv.innerHTML = newDivIdName;
    container.appendChild(newDiv);

    attachDraggable( newDivIdName );
    document.getElementById('RateMyGayContainer').style.height = intContainer + 'px';
}

function addItem( intID, strDescription ) {
    var container = document.getElementById('RateMyGayContainer');

    // Create a new div, increase the size of the container to fit the div, put the new div inside the container relative to any other divs in there already, make this new div draggable
    var newDiv = document.createElement('div');
    newDiv.className = "box";
    newTop = intContainer;
    newDiv.style.top = newTop + 'px';

    var newDivIdName = intID;
    newDiv.setAttribute('id', newDivIdName);
    newDiv.innerHTML = strDescription;
    container.appendChild(newDiv);

    attachDraggable( newDivIdName );
    container.style.height = intContainer + 'px';
}