/* STARRTECH CALENDAR GENERATOR */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

// months as they appear in the calendar's title
var SHORT_MONTH_NAMES = [ "Jan",
                  "Feb",
                  "Mar",
                  "Apr",
                  "May",
                  "Jun",
                  "Jul",
                  "Aug",
                  "Sep",
                  "Oct",
                  "Nov",
                  "Dec"];

var LONG_MONTH_NAMES = [  "January",
                  "February",
                  "March",
                  "April",
                  "May",
                  "June",
                  "July",
                  "August",
                  "September",
                  "October",
                  "November",
                  "December"];

// week day titles as they appear on the calendar
var SHORT_DAY_NAMES = [ "S",
                "M",
                "T",
                "W",
                "T",
                "F",
                "S"];

var LONG_DAY_NAMES = [  "Sunday",
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday"];

// calendar state maintenance
// each calendar div id will be represented in this array
var calendars = new Array();

// calendar       - populates a div with the calendar
//----------------------------------------------------
// event        - the browser event that fired
// calendarDivId    - the id of the div to populate with the calendar. the contents of the div will be deleted.
// startDateFieldId   - the id of the field to return the date into.
// endDateFieldId   - the id of the field to return the date into.
// renderDate     - the date to render the calendar around, defaults to today.
// startDate      - the start of the date range to highlight.
// endDate        - the end of the date range to highlight.
// monthsToOffset   - number of months to offset the renderdate by.
// daysToOffset     - number of days to offset the renderdate by.
//
// This function expects its arguments to be strings, these variables are modified, so dont pass anything in by reference
function calendar( event, calendarDivId, startDateFieldId, endDateFieldId, renderDate, startDate, endDate, monthsToOffset, daysToOffset )
{
  if( !calendars[calendarDivId] )
  {
    var calendar = new Array();
    calendar.calendarDiv = document.getElementById( calendarDivId );
    calendar.startDateField = document.getElementById( startDateFieldId );
    calendar.isDateRange = false;

    // closure to call the calendar again
    // force all calendars to close before displaying new one; event triggering only available in IE.
    if (document.body.click) { document.body.click(); }

    // check to see if this a date range selection
    if( endDateFieldId )
    {
      calendar.endDateField = document.getElementById( endDateFieldId );
      if( calendar.endDateField )
      {
        calendar.isDateRange = true;
      }
    }

    // these objects must be valid for the calendar to work, otherwise return with no effect
    if( !( calendar.calendarDiv && calendar.startDateField ))
    {
      return;
    }

    // set the default value for monthsToOffset
    calendar.monthsToOffset = monthsToOffset;
    if( !calendar.monthsToOffset )
    {
      calendar.monthsToOffset = 0;
    }

    // set the default value for daysToOffset
    calendar.daysToOffset = daysToOffset;
    if( !calendar.daysToOffset )
    {
      calendar.daysToOffset = 0;
    }

    // setup the date that is going to be displayed
    calendar.renderDate = renderDate;
    if( !calendar.renderDate )
    {
      calendar.renderDate = new Date();
      if ( document.getElementById( startDateFieldId + "_month" )
        && document.getElementById( startDateFieldId + "_year" ) ) {
        var monthField = document.getElementById( startDateFieldId + "_month" ).value;
        var yearField = document.getElementById( startDateFieldId + "_year" ).value;
        calendar.renderDate.setYear(yearField);
        calendar.renderDate.setMonth(monthField-1, 1);
      }
    }
    else
    { // renderDate is valid, so try to parse it for a date
      calendar.renderDate = new Date().setTime( Date.parse( renderDate ));
    }

    // factor in the offsets
    calendar.renderDate.setMonth( calendar.renderDate.getMonth() + calendar.monthsToOffset );
    calendar.renderDate.setDate( calendar.renderDate.getDate() + calendar.daysToOffset );

    // setup the highlighted dates
    calendar.startDate = startDate;
    if( startDate )
    {
      calendar.startDate = new Date().setTime( Date.parse( calendar.startDate ));
      calendar.shouldHighlight = true;
    }
    else
    { // startDateField is a required parameter
      var highlightDate = null;
      if( highlightDate = parseDate( calendar.startDateField.value ))
      {
        calendar.startDate = highlightDate;
      }
      calendar.shouldHighlight = true;
    }

    calendar.endDate = endDate;
    if( calendar.endDate )
    {
      calendar.endDate = new Date().setTime( Date.parse( calendar.endDate ));
      if( !calendar.startDate )
      {
        calendar.startDate = calendar.endDate;
      }
      calendar.shouldHighlight = true;
    }
    else if( calendar.endDateField )
    {
      var highlightDate = null;
      if( highlightDate = parseDate( calendar.endDateField.value ))
      {
        calendar.endDate = highlightDate;
      }
      calendar.shouldHighlight = true;
    }
    else if( calendar.startDate )
    {
      calendar.endDate = calendar.startDate;
      calendar.shouldHighlight = true;
    }
    else
    {
      if( !calendar.shouldHighlight )
      {
        calendar.shouldHighlight = false;
      }
    }

    calendars[calendarDivId] = calendar;
  }
  else
  {
    var calendar = calendars[calendarDivId];
  }


  // delete the contents of the calendar div
  deleteContents( calendar.calendarDiv );

  // build the scroll bar
  //var calendarScrollBar = buildScrollBar( calendar );
  //calendar.calendarDiv.appendChild( calendarScrollBar );

  // build calendar navigation
  var calendarNavBar = buildNavBar( calendar );
  calendar.calendarDiv.appendChild( calendarNavBar );

  // create the header, date buttons, etc
  calendar.renderDate.setDate( 1 );
  calendar.renderDate.setMonth( calendar.renderDate.getMonth() );
  var calendarHeader = buildCalendarHeader( calendar );
  calendar.calendarDiv.appendChild( calendarHeader );

  // build a month
  //renderDate.setMonth( renderDate.getMonth() - 1 );
  calendar.renderDate.setDate( 1 );
  calendar.renderDate.setMonth( calendar.renderDate.getMonth() );
  calendar.calendarDiv.appendChild( buildCalendarMonth( calendar ));
  //calendar.renderDate.setMonth( calendar.renderDate.getMonth() + 1 );
  //calendar.calendarDiv.appendChild( buildCalendarMonth( calendar ));
  //calendar.renderDate.setMonth( calendar.renderDate.getMonth() + 1 );
  //calendar.calendarDiv.appendChild( buildCalendarMonth( calendar ));

  // reset the renderdate back to the 'target' month
  //calendar.renderDate.setMonth( calendar.renderDate.getMonth() - 2 );


  // set the top margin on the scroll bar so that it lines up with the month tables
  //var scrollBarOffset = calendarHeader.offsetHeight + (( calendar.calendarDiv.offsetHeight - calendarHeader.offsetHeight - calendarScrollBar.offsetHeight ) / 2 );
  //calendarScrollBar.style.marginTop = "30px";

  // today bar link
  //var calendarTodayBar = buildTodayBar( calendar );
  //calendar.calendarDiv.appendChild( calendarTodayBar );

  // close button bar
  var calendarCloseButton = buildCloseBar( calendarDivId, calendar );
  calendar.calendarDiv.appendChild( calendarCloseButton );

  // display the calendar
  //calendar.calendarDiv.firstChild.style.width = calendarDiv.offsetWidth;
  calendar.calendarDiv.style.display = "block";
  var html = calendar.calendarDiv.innerHTML;

  // for debug - outputs calendar dynamic html
  if (dumpsite = document.getElementById("dump")) {
    dumpsite.value = html;
  }

  // update the position of the calendar div
  if( event )
  {
    moveToClickedElement( event, calendar.calendarDiv );
  }

  // set the body onclick so that we can close the calendar if the user clicks outside of it
  document.body.onclick = function(){ closeCalendar( calendarDivId ); }


  // IE select (dropdowns) bug hack
  ieSelectBugHack(calendar.calendarDiv);

  // make sure that the calendar itself catches any clicks, to prevent it from closing
  calendar.calendarDiv.onclick =  function( e )
                        {
                          if (!e) var e = window.event;
                          e.cancelBubble = true;
                          if (e.stopPropagation) e.stopPropagation();
                        }

  // prevent the current event from propogating and closing the calendar when it reaches the body
  if (!event) var event = window.event;
  if( event )
  {
    event.cancelBubble = true;
    if (event.stopPropagation) event.stopPropagation();
  }
}

function ieSelectBugHack (obj) {
  if (obj.parentNode.id == 'QS_form' ) {
    obj.style.left = findPosLeft(obj.parentNode);
    var target;
    if ( typeof(event) != "undefined" ) {
      if (event.target) target = event.target;
      else if (event.srcElement) target = event.srcElement;
      if (target.nodeType == 3) target = target.parentNode; // defeat Safari bug

      if (target.offsetHeight != 0) {
        obj.style.top = findPosTop(target) + target.offsetHeight + 1;
      }
    }
  }

  // append a clear iframe under content
  var calIframe = document.createElement('iframe');
  calIframe.src = "";
  calIframe.style.position = "absolute";
  calIframe.style.top = 0;
  calIframe.style.left = 0;
  calIframe.style.zIndex = -1;
  calIframe.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
  calIframe.frameBorder = 0;
  calIframe.scrolling = "no";
  calIframe.width = (obj).offsetWidth;
  calIframe.height = (obj).offsetHeight;
  obj.appendChild(calIframe);
}

// this function builds the navigation elements at the top of the calendar
function buildCalendarHeader( calendarData )
{
  // the calendar is based on a table
  // there is one row per week in the month
  // and each row containes seven days
  var headerTable = document.createElement( "table" );
  //headerTable.cellspacing = 0;
  //headerTable.cellpadding = 0;
  //headerTable.border = 0;
  var headerBody = document.createElement( "tbody" );
  var headerRow = document.createElement( "tr" );
  var headerCell = document.createElement( "td" );
  var headerText = document.createTextNode( "" );

  // do the day headers
  for( var dayCount = 0; dayCount < 7; dayCount++ )
  {
    headerText = document.createTextNode( SHORT_DAY_NAMES[dayCount]);
    headerCell.appendChild( headerText );
    headerRow.appendChild( headerCell );
    headerCell = document.createElement( "td" );
  }

  headerBody.appendChild( headerRow );
  headerTable.appendChild( headerBody );
  headerTable.className = "header";
  return headerTable;
}

// buildCalendarMonth constructs a month of calendar data
function buildCalendarMonth( calendarData )
{
  var monthToRender = calendarData.renderDate.getMonth();
  var today = new Date();
  var renderDate = new Date();
  renderDate.setTime( calendarData.renderDate.getTime());
  renderDate.setDate( 1 );

  // the calendar is based on a table
  // there is one row per week in the month
  // and each row containes seven days
  var calendarTable = document.createElement( "table" );
  //calendarTable.cellspacing = 0;
  //calendarTable.cellpadding = 0;
  //calendarTable.border = 0;
  // set the class for the table
  calendarTable.className = SHORT_MONTH_NAMES[renderDate.getMonth()] + " month";
  var calendarBody = document.createElement( "tbody" );
  var calendarRow = document.createElement( "tr" );
  var calendarCell = document.createElement( "td" );
  var calendarText = document.createTextNode( "" );
  var dayCount = renderDate.getDay();
  var weekRowsCount = 1;

  // insert leading cells on the first row
  for( var leadDays = 0; leadDays < renderDate.getDay(); leadDays++ )
  {
    calendarText = document.createTextNode( "" );
    calendarCell.appendChild( calendarText );
    calendarCell.innerHTML = "&nbsp;";
    calendarRow.appendChild( calendarCell );
    calendarCell = document.createElement( "td" );
  }

  // render the actual days of the calendar
  while( renderDate.getMonth() == monthToRender) // when they arent equal anymore then we have reached the end of the month
  {
    calendarText = document.createTextNode( renderDate.getDate());
    calendarCell.appendChild( calendarText );
    calendarRow.appendChild( calendarCell );

    // install the onclick function for the day
    // store the month offset from the initial date as an attribute of the cell
    // this means that these variables arent accessed through the closure
    calendarCell.divId = calendarData.calendarDiv.id;
    calendarCell.fieldId = calendarData.startDateField.id;
    calendarCell.date = renderDate.getTime();

    calendarCell.onclick = function(){ returnDate( this.date, this.divId, this.fieldId ); }

    // highlight selected day
    if(   calendarData.shouldHighlight &&
        simpleDate( renderDate ) >= simpleDate( calendarData.startDate ) &&
        simpleDate( renderDate ) <= simpleDate( calendarData.endDate )
      )
    {
      calendarCell.className += " activeDay ";
    }

    // highlight today's date
    if( calendarData.shouldHighlight && simpleDate( renderDate ) == simpleDate( today ) )
    {
      calendarCell.className += " today ";
    }

    calendarCell.className += " calendar_link ";
    if (true) {
      calendarCell.onmouseover = function() { this.className += " hover"; }
      calendarCell.onmouseout = function() { this.className=this.className.replace(new RegExp(" hover\\b"), ""); }
    }

    // increment the day counter and the date object
    dayCount++;
    renderDate.setDate( renderDate.getDate() + 1 );

    // create the cell for the next day
    calendarCell = document.createElement( "td" );

    // create a new row every seven days
    if( dayCount % 7 == 0 )
    {
      calendarBody.appendChild( calendarRow );
      calendarRow = document.createElement( "tr" );
      weekRowsCount++;
    }
  }

  // insert trailing cells on the last row
  if( calendarRow.childNodes.length > 0 )
  {
    var numberOfMissingDays = 7 - calendarRow.childNodes.length;
    for( var trailingDays = 0; trailingDays < numberOfMissingDays; trailingDays++ )
    {
      calendarText = document.createTextNode( "" );
      calendarCell.appendChild( calendarText );
      calendarCell.innerHTML = "&nbsp;";
      calendarRow.appendChild( calendarCell );
      calendarCell = document.createElement( "td" );
    }
    calendarBody.appendChild( calendarRow );
  }

  calendarTable.appendChild( calendarBody );

  // guarantee that each calendar month contains six rows
  //  this is for styling use
  if (!numberOfMissingDays) { weekRowsCount--; }
  for (var i = 1; i <= (6 - weekRowsCount); i++) {
    calendarRow = document.createElement( "tr" );
    for (var j = 0; j < 7; j++) {
      calendarText = document.createTextNode( "" );
      calendarCell.appendChild( calendarText );
      calendarCell.innerHTML = "&nbsp;";
      calendarRow.appendChild( calendarCell );
      calendarCell = document.createElement( "td" );
    }
    // evenly distribute empty rows to calendar month table;
    //  ie. first empty row is prepend, second appended, third prepended, etc.
    if (i % 2 == 0) {
      calendarBody.appendChild( calendarRow );
    } else {
      calendarBody.insertBefore(calendarRow, calendarBody.firstChild);
    }
  }

  calendarTable.appendChild( calendarBody );
  return calendarTable;
}

// buildNavBar constructs the calendar navigation
function buildNavBar( calendarData )
{
  var renderDate = new Date();
  renderDate.setTime( calendarData.renderDate.getTime());
  renderDate.setDate( 1 );

  var navTable = document.createElement( "table" );
  //navTable.cellspacing = 0;
  //navTable.cellpadding = 0;
  //navTable.border = 0;
  var navBody = document.createElement( "tbody" );
  var navRow = document.createElement( "tr" );
  var navCell;
  var navText;

  // previous month link
  navCell = document.createElement( "td" );
  navCell.month = -1;
  navCell.divId = calendarData.calendarDiv.id;
  navCell.onclick = function(){ animateScrollBar( this.divId, this.month ); }
  navText = document.createTextNode( "<<" );
  navCell.appendChild(navText);
  navRow.appendChild(navCell);

  // current month heading
  navCell = document.createElement( "th" );
  navText = document.createTextNode( SHORT_MONTH_NAMES[renderDate.getMonth()] + " " + renderDate.getFullYear() );
  navCell.appendChild(navText);
  navRow.appendChild(navCell);

  // next month link
  navCell = document.createElement( "td" );
  navCell.month = +1;
  navCell.divId = calendarData.calendarDiv.id;
  navCell.onclick = function(){ animateScrollBar( this.divId, this.month ); }
  navText = document.createTextNode( ">>" );
  navCell.appendChild(navText);
  navRow.appendChild(navCell);

  navBody.appendChild(navRow);
  navTable.appendChild(navBody);
  navTable.className = "calendarnav";
  return navTable;
}

// buildTodayBar constructs the calendar navigation
function buildTodayBar( calendarData )
{
  var today = new Date();
  var renderDate = new Date();
  renderDate.setTime( calendarData.renderDate.getTime());

  var navTable = document.createElement( "table" );
  var navBody = document.createElement( "tbody" );
  var navRow = document.createElement( "tr" );
  var navCell;
  var navText;

  // previous month link
  navCell = document.createElement( "td" );
  navCell.month = (today.getFullYear() - renderDate.getFullYear()) * 12 + (today.getMonth() - renderDate.getMonth());
  navCell.divId = calendarData.calendarDiv.id;
  navCell.onclick = function(){ animateScrollBar( this.divId, this.month ); }
  navText = document.createTextNode( "Today: " + LONG_MONTH_NAMES[today.getMonth()] + " " + today.getDate() + ", " + today.getFullYear());
  navCell.appendChild(navText);
  navRow.appendChild(navCell);

  navBody.appendChild(navRow);
  navTable.appendChild(navBody);
  navTable.className = "todayBar";
  return navTable;
}

// buildCloseBar constructs a close button
function buildCloseBar( calendarDivId, calendarData )
{
  var today = new Date();
  var renderDate = new Date();
  renderDate.setTime( calendarData.renderDate.getTime());

  var navTable = document.createElement( "table" );
  var navBody = document.createElement( "tbody" );
  var navRow = document.createElement( "tr" );
  var navCell;
  var navText;

  // previous month link
  navCell = document.createElement( "td" );
  navCell.onclick = function(){ closeCalendar( calendarDivId ); }
  navText = document.createTextNode( "Close Calendar");
  navCell.appendChild(navText);
  navRow.appendChild(navCell);

  navBody.appendChild(navRow);
  navTable.appendChild(navBody);
  navTable.className = "todayBar";
  return navTable;
}

// buildScrollBar constructs a month of calendar data
function buildScrollBar( calendarData )
{
  var renderDate = new Date();
  renderDate.setTime( calendarData.renderDate.getTime());
  renderDate.setDate( 1 );

  // calculate the month to start drawing at
  if( calendarData.offsetDirection )
  {
    if( calendarData.offsetDirection > 0 )
    {
      renderDate.setMonth( renderDate.getMonth() - 3);
      var monthStart = -3;
    }
    else
    {
      renderDate.setMonth( renderDate.getMonth() - 3);
      var monthStart = -3;
    }
  }
  else
  {
    renderDate.setMonth( renderDate.getMonth() - 3);
    var monthStart = -3;
  }


  renderDate.setMonth( renderDate.getMonth() - 3);
  monthStart -= 3;

  // the calendar is based on a table
  // there is one row per week in the month
  // and each row contains seven days
  var scrollTable = document.createElement( "table" );
  //scrollTable.cellspacing = 0;
  //scrollTable.cellpadding = 0;
  //scrollTable.border = 0;
  var scrollBody = document.createElement( "tbody" );
  var scrollRow = document.createElement( "tr" );
  var scrollCell = document.createElement( "td" );
  var scrollText = document.createTextNode( "" );

  // do the month row and buttons
  for( var monthCount = monthStart; monthCount < monthStart + 15; monthCount++ )
  {
    scrollText = document.createTextNode( SHORT_MONTH_NAMES[renderDate.getMonth()]);
    scrollCell.appendChild( scrollText );
    scrollCell.style.borderLeft = "1px solid white";

    // store the month offset from the initial date as an attribute of the cell
    // this means that these variables arent accessed through the closure
    scrollCell.month = monthCount;
    scrollCell.divId = calendarData.calendarDiv.id;

    scrollCell.onclick = function(){ animateScrollBar( this.divId, this.month ); }

    // check to see if this month is one of the displayed months
    if( monthCount >= 0 && monthCount <= 2 )
    {
      scrollCell.className = "activeMonth";
    }

    scrollRow.appendChild( scrollCell );

    // insert the year cell
    scrollCell = document.createElement( "td" );
    if( monthCount == monthStart || renderDate.getMonth() == 0 )
    {
      scrollText = document.createTextNode( renderDate.getFullYear());
    }
    else
    {
      scrollText = document.createTextNode( "" );
    }
    scrollCell.appendChild( scrollText );

    scrollRow.appendChild( scrollCell );
    scrollBody.appendChild( scrollRow );
    scrollCell = document.createElement( "td" );
    scrollRow = document.createElement( "tr" );
    renderDate.setMonth( renderDate.getMonth() + 1 );
  }

  scrollTable.appendChild( scrollBody );
  scrollTable.className = "scrollbar";
  return scrollTable;
}

// handle a click on the scroll bar
function animateScrollBar( calendarDivId, monthsToOffset )
{
  var OFFSET_DISTANCE = 2;
  var offsetDirection = 0; // -1 for moving earlier, +1 for moving later, 0 for not moving

  if( !calendars[calendarDivId] )
  {
    // no calendar data structure exists, so just return silently
    return;
  }
  else
  {
    var calendarData = calendars[calendarDivId];
  }

  // adjust the month to render
  // record the direction of the offset
  // adjust the offset
  if( monthsToOffset >= OFFSET_DISTANCE )
  {
    calendarData.renderDate.setMonth( calendarData.renderDate.getMonth() + OFFSET_DISTANCE );
    offsetDirection = 1;
    monthsToOffset -= OFFSET_DISTANCE;
  }
  else if( monthsToOffset <= -OFFSET_DISTANCE )
  {
    calendarData.renderDate.setMonth( calendarData.renderDate.getMonth() - OFFSET_DISTANCE );
    offsetDirection = -1;
    monthsToOffset += OFFSET_DISTANCE;
  }
  else
  {
    calendarData.renderDate.setMonth( calendarData.renderDate.getMonth() + monthsToOffset );
    if( monthsToOffset != 0 )
    {
      offsetDirection = Math.ceil( 1 / monthsToOffset );
    }
    else
    {
      offsetDirection = 0;
    }
    monthsToOffset = 0;
  }

  // record whether the offset is positive or negative, so that the buildscrollbar function can
  // implement appropriate highlighting and offset behaviour
  calendarData.offsetDirection = offsetDirection;

  // redraw the calendar ( only adjusted by one OFFSET_DISTANCE or less )
  calendar( null, calendarDivId );

  // set a timeout to draw the calendar again, untill monthsToOffset reaches 0
  if( monthsToOffset != 0 )
  {
    setTimeout( "animateScrollBar( '" + calendarDivId + "', " + monthsToOffset + " )", 30  );
  }

}

// parseDate accepts a string representation of a date
// and returns a JS Date object
function parseDate( dateString )
{
  var date = new Date();
  var milliseconds = Date.parse( dateString )

  if( milliseconds != 0 )
  {
    date.setTime( milliseconds );
  }

  return date;
}

// simpleDate returns a string representation of the date
// uses date hash format - yyyymmdd - where y is year
// and m is month of year + 10
// and d is day of month + 10
function simpleDate( date )
{
  return date.getFullYear() + "" + ( date.getMonth() + 10 ) + "" + ( date.getDate() + 10 );
}

// when a day is clicked in a calendar call this function to return the date value to
// the
function returnDate( utcTime, calendarDivId, returnFieldId )
{
  var finalDate = new Date();
  finalDate.setTime( utcTime );

  var dateModel = document.getElementById( returnFieldId );
  dateModel.value = ( finalDate.getMonth() + 1 ) + "/" + finalDate.getDate() + "/" + finalDate.getFullYear();
  document.getElementById( calendarDivId ).style.display = "none";
  closeCalendar( calendarDivId );

  if( dateModel.onchange )
  {
    dateModel.onchange();
  }
}

// when a day is clicked in a calendar call this function to return the date value to
// the
function closeCalendar( calendarDivId )
{
  document.getElementById( calendarDivId ).style.display = "none";
  deleteContents( document.getElementById( calendarDivId ));
  calendars[calendarDivId] = null;
  document.body.onclick = "";
}

// delete the contents of a div
function deleteContents( domObject )
{
  while( domObject.firstChild )
  {
    domObject.removeChild( domObject.firstChild );
  }
}

// align a div top and left with another which was clicked on
function moveToClickedElement( event, objectToMove )
{
  var target;
  if (!event) var e = window.event;
  if (event.target) target = event.target;
  else if (event.srcElement) target = event.srcElement;
  if (target.nodeType == 3) target = target.parentNode; // defeat Safari bug

  if( objectToMove )
  {
    objectToMove.style.left = findPosLeft( target );
    objectToMove.style.top = findPosTop( target );


  }
}

// calculate x click
function clickX( e )
{
  return e.clientX + document.body.scrollLeft;
}

// calculate y click
function clickY( e )
{
  return e.clientY + document.body.scrollTop;
}

function findPosLeft(obj)
{
  var curleft = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curleft += obj.offsetLeft
      obj = obj.offsetParent;
    }
  }
  else if (obj.x)
    curleft += obj.x;

  return curleft;
}

function findPosTop(obj)
{
  var curtop = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curtop += obj.offsetTop
      obj = obj.offsetParent;
    }
  }
  else if (obj.y)
    curtop += obj.y;

  return curtop;
}