/**
 * LX' Element Relocation Script v1.1
 * http://www.lxhome.de
 *
 * This script allows relocation of webpage elements by clicking on an
 * element and dragging it to another position.
 *
 *********************************************************************
 *
 * History of Changes:
 * v1.1  - removed restriction that element must be positioned
 *         absolute
 *       - prefixed functions and global variables to reduce chance of
 *         name collisions with other scripts
 *       - added another class while mouse is clicked on the element
 *         to move so that other cursors can be associated
 *
 *********************************************************************
 *
 * Works with (at least):
 * - modern browsers
 * - IE6
 *
 *********************************************************************
 *
 * Usage:
 * Include this javascript on the page you want to use it on.
 * e.g. <script type="text/javascript" src="drag_element.js"></script>
 *
 * Add an onmousedown event handler to the element you want to be able
 * to drag around.
 * e.g. <div onmousedown="startMove(this)">...</div>
 *
 * You can also use an element ID as parameter if you want to move a
 * different element than the one you're clicking on.
 * e.g. <h1 onmousedown="startMove('menu')">...</h1>
 *
 *********************************************************************
 *
 * Restrictions:
 * - if the element to move should be positioned absolute, then it
 *   must be specified in the element's "style" attribute (putting it
 *   into a CSS class won't work)
 * - in every other case the script assumes "position: relative" and
 *   treats the element accordingly
 *
 *********************************************************************
 *
 * Disclaimer:
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License as
 * published  by the Free Software Foundation; either version 2 of
 * the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
 * MA 02110-1301, USA.
 */

// mouse position
var lers_mouseY;
var lers_mouseX;

// mouse position relative to current element
var lers_diffX;
var lers_diffY;

// element to move
var lers_element;

/**
 * read mouse position and put it
 * into global variables
 */
function lers_mousepos ( evt )
{
    if ( !evt )
        var evt = window.event;
    
    if ( evt.pageY )
    {
        lers_mouseX = evt.pageX;
        lers_mouseY = evt.pageY;
    }
    else if ( evt.clientY )
    {
        lers_mouseX = evt.clientX + ( document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft );
        lers_mouseY = evt.clientY + ( document.documentElement.scrollTop  ? document.documentElement.scrollTop  : document.body.scrollTop  );
    }
}

/**
 * reset element move status
 */
function lers_reset ( evt )
{
    // reset class
    if ( lers_element ) lers_element.className = lers_element.klasse;
    
    // reset global variables
    lers_element = null;
    lers_diffX   = null;
    lers_diffY   = null;
    
    document.onmousemove = lers_mousepos;
}

/**
 * start element dragging
 */
function lers_startMove ( element )
{
    if ( typeof ( element ) == 'object' )
        lers_element = element;
    else
        lers_element = document.getElementById ( element );
        
    // get current class and write it into element attributes
    if ( !lers_element.klasse ) lers_element.klasse = lers_element.className;
    
    // add another class to allow style changes (e.g. other cursors)
    lers_element.className += ' lers_hilight';

    // get current position and write starting position into
    // element attributes
    if ( !lers_element.startX ) lers_element.startX = lers_element.offsetLeft;
    lers_diffX  = lers_mouseX - lers_element.offsetLeft;
    
    if ( !lers_element.startY ) lers_element.startY = lers_element.offsetTop;
    lers_diffY  = lers_mouseY - lers_element.offsetTop;

    // set event handlers
    document.onmousemove = lers_winmove;
    document.onmouseup   = lers_reset;
    
    return false;
}

/**
 * move current element
 */
function lers_winmove ( evt )
{
    if ( lers_mousepos ( evt ) === false )
        return;

    if ( lers_element.style.position == 'absolute' )
    {
        lers_element.style.top  = ( lers_mouseY - lers_diffY ) + 'px';
        lers_element.style.left = ( lers_mouseX - lers_diffX ) + 'px';
    }
    else
    {
        lers_element.style.position = 'relative';
        lers_element.style.top  = ( lers_mouseY - lers_diffY - lers_element.startY ) + 'px';
        lers_element.style.left = ( lers_mouseX - lers_diffX - lers_element.startX ) + 'px';
    }
    
    return false;
}

lers_reset();