var PixelsDrawn = ';';
var DrawingPixel = false;
var NextXOffset = 0;
var NextYOffset = 0;
var ProblemOffset = 2;
var LastX = -1;
var LastY = -1;
var PixelColor = 'Black';
var Tool = '';
var AllowDraw = false;
var AllowSquare = false;
var CurrentSquare;
var SquareX = 0;
var SquareY = 0;
var Moving = false;
var MovingTextBox;
var MovingDiffX = 0;
var MovingDiffY = 0;
var MeasureThickness = 2;

var areaX0 = 0;
var areaY0 = 0;
var areaX1 = 0;
var areaY1 = 0;
var areaX2 = 0;
var areaY2 = 0;
var lastXFeet = 0;
var lastYFeet = 0;
var areaRunningTotal = 0;

Number.prototype.toRad = function() {  // convert degrees to radians
  return this * Math.PI / 180;
}

Number.prototype.toDeg = function() {  // convert radians to degrees (signed)
  return this * 180 / Math.PI;
}

Number.prototype.toBrng = function() {  // convert radians to degrees (as bearing: 0...360)
  return (this.toDeg()+360) % 360;
}

function GetLength(lat1,lon1,lat2,lon2) {
    var R = 6371; // km
    var dLat = (lat2-lat1).toRad();
    var dLon = (lon2-lon1).toRad(); 
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * 
            Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;
    // d is in kilometers...we want to return feet
    d = d * 3280; // 3.048 * 1000;
    d = Math.round(d * 100)/100;
    return d;

}

function DisableSelect() {
    e = e || window.event;
    var src = e.srcElement || e.target;
    var target = src;
    if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate') {
        return false;
    }
    target = target.parentElement || target.parentNode;
    if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate') {
        return false;
    }
    target = target.parentElement || target.parentNode;
    if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate') {
        return false;
    }
    return true;
    
}

function ShowWait() {
    document.getElementById(_Wait).style.display = '';
}

function HideWait() {
    document.getElementById(_Wait).style.display = 'none';
}

function WaitVisible() {
    if ( document.getElementById(_Wait)) {
        if (document.getElementById(_Wait).style.display == '') { return true; } else { return false; }
    }
    else
    {
        return false;
    }
}

function UpdateLineThickness() {
    document.getElementById(_LineThicknessDemo).style.borderBottom = document.getElementById(_LineThickness).value + ' solid ' + document.getElementById(_Color).value;
}

function UpdateFont() {
    document.getElementById(_AddText).style.fontSize = document.getElementById(_FontSize).value;
    if (document.getElementById(_FontBold).checked) {
        document.getElementById(_AddText).style.fontWeight = 'Bold';
    }
    else
    {
        document.getElementById(_AddText).style.fontWeight = '';
    }
}

function InitializeTools() {
    if (document.getElementById(_Wait)) {
        SetTool(document.getElementById(_Tool).value);
        PickColor(document.getElementById(_Color).value);
        UpdateFont();
        UpdateLineThickness();
        HideWait();
    }
}

function CheckButtonForDraw(e) {
    if (WaitVisible() == false) {
        e = e || window.event;
        var src = e.srcElement || e.target;
        var target = src;
        var parent = target.parentElement || target.parentNode;
        var ImageHolder = document.getElementById(_OrderImagesPanel);
        var root = document.documentElement||document.body;
        if ((e.button == 0 || e.button == 1) && target.style.cursor == 'move') {
            Moving = true;
            MovingTextBox = src;
            NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset;
            NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset;
            MovingDiffX = NextXOffset - MovingTextBox.style.left.replace('px','');
            MovingDiffY = NextYOffset - MovingTextBox.style.top.replace('px','');
        }
        else if ((e.button == 0 || e.button == 1) && Tool == 'DRAW') {
            if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                || parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate') {
                NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset;
                NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset;
                AllowDraw = true; 
                if (document.getElementById(_SaveReminder).style.display != '' && NextXOffset > 0 && NextYOffset > 0) { document.getElementById(_SaveReminder).style.display = ''; } }
            }
        else if ((e.button == 1 || e.button == 0) && Tool == 'SQUARE') {
            if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                || parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate') {
                NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset;
                NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset;
                SquareX = NextXOffset;
                SquareY = NextYOffset;
                if (NextXOffset > 0 && NextYOffset > 0) {
                    MakeSquare(NextXOffset, NextYOffset);   
                    AllowSquare = true;        
                    if (document.getElementById(_SaveReminder).style.display != '') { document.getElementById(_SaveReminder).style.display = ''; }
                }
            }
        }
        else if ((e.button == 1 || e.button == 0) && Tool == 'MEASURE') 
        {
          if( root.scrollLeft != 0 || root.scrollTop != 0 )
          {
            var xOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
            var yOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
          }
          else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
          {
            var xOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
            var yOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
          }
          
            //if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                //|| parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate' )
            if( xOffset > 0 && yOffset > 0 )
            {
                if (NextXOffset == 0 && NextYOffset == 0) 
                {
                  if( root.scrollLeft != 0 || root.scrollTop != 0 )
                  {
                    NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                  else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
                  {
                    NextXOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                    MakePixel(NextXOffset, NextYOffset, 4, 4);
                }
                else
                {
                    //alert ( document.getElementById(_Scale).value );
                    var LastXOffset = NextXOffset;
                    var LastYOffset = NextYOffset;

                  if( root.scrollLeft != 0 || root.scrollTop != 0 )
                  {
                    NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                  else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
                  {
                    NextXOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                    MakePixel(NextXOffset, NextYOffset, 4, 4);
                    // this will draw a line connecting the points
                    DrawLine(LastXOffset + 1,LastYOffset + 1,NextXOffset + 1,NextYOffset + 1,MeasureThickness);
                    var lat1 = document.getElementById(_Latitude).value - (LastYOffset * document.getElementById(_Scale).value);
                    var lat2 = document.getElementById(_Latitude).value - (NextYOffset * document.getElementById(_Scale).value);
                    var lon1 = document.getElementById(_Longitude).value - 0 + (LastXOffset * document.getElementById(_Scale).value);
                    var lon2 = document.getElementById(_Longitude).value - 0 + (NextXOffset * document.getElementById(_Scale).value);
                    var Length = GetLength(lat1,lon1,lat2,lon2) + ' ft';
                    var TextX = LastXOffset + ((NextXOffset - LastXOffset)/2);
                    var TextY = LastYOffset + ((NextYOffset - LastYOffset)/2);
                    //if line is sloping down, we need to raise the text y position so it does not end up sitting on top of the line
                    if (TextY > LastYOffset && TextX > LastXOffset) { 
                        TextY = TextY - (document.getElementById(_AddText).style.fontSize.replace('px','') * 2); 
                    }
                    else if (TextY < LastYOffset && TextX < LastXOffset) { 
                        TextY = TextY - (document.getElementById(_AddText).style.fontSize.replace('px','') * 2); 
                    }
                    MakeTextBox(TextX,TextY, Length);
                    NextXOffset = 0;
                    NextYOffset = 0;
                }
            }
        }
        else if ((e.button == 1 || e.button == 0) && Tool == 'AREA') 
        {
          if( root.scrollLeft != 0 || root.scrollTop != 0 )
          {
            var xOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
            var yOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
          }
          else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
          {
            var xOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
            var yOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
          }
           //if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                //|| parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate') 
            if( xOffset > 0 && yOffset > 0 )
            {
                // this is the first point in our polygon
                if (NextXOffset == 0 && NextYOffset == 0) 
                {
                  if( root.scrollLeft != 0 || root.scrollTop != 0 )
                  {
                    areaX0 = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    areaY0 = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                    NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                  else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
                  {
                    areaX0 = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    areaY0 = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                    NextXOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }

                    //var lat = document.getElementById(_Latitude).value - (NextYOffset * document.getElementById(_Scale).value);
                    //var lon = document.getElementById(_Longitude).value - 0 + (NextXOffset * document.getElementById(_Scale).value);
                    //var xFeet = GetLength(lat, ( document.getElementById(_Longitude).value * 1.0 ),lat,lon);
                    //var yFeet = GetLength(( document.getElementById(_Latitude).value * 1.0 ),lon,lat,lon);
                    //MakeTextBox(NextXOffset,NextYOffset, xFeet.toString() + "," + yFeet.toString() );
                    areaRunningTotal = 0;
                    //lastXFeet = xFeet;
                    //lastYFeet = yFeet;

                    MakePixel(NextXOffset, NextYOffset, 4, 4);
                }
                else
                {
                    var LastXOffset = NextXOffset;
                    var LastYOffset = NextYOffset;

                  if( root.scrollLeft != 0 || root.scrollTop != 0 )
                  {
                    NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                  else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
                  {
                    NextXOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    NextYOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                    MakePixel(NextXOffset, NextYOffset, 4, 4);
                    // this will draw a line connecting the points
                    DrawLine(LastXOffset + 1,LastYOffset + 1,NextXOffset + 1,NextYOffset + 1,MeasureThickness);

                    var newAngle = Math.atan2( ( NextXOffset - areaX2 ), ( NextYOffset - areaY2 ) );
                    var homeAngle = Math.atan2( ( areaX0 - areaX2 ), ( areaY0 - areaY2 ) );
                    var lastAngle = Math.atan2( ( areaX1 - areaX2 ), ( areaY1 - areaY2 ) );

                    //var lat1 = document.getElementById(_Latitude).value - (areaY0 * document.getElementById(_Scale).value);
                    //var lat2 = document.getElementById(_Latitude).value - (NextYOffset * document.getElementById(_Scale).value);
                    //var lon1 = document.getElementById(_Longitude).value - 0 + (areaY0 * document.getElementById(_Scale).value);
                    //var lon2 = document.getElementById(_Longitude).value - 0 + (NextXOffset * document.getElementById(_Scale).value);
                    //var xFeet = GetLength(lat1,lon2,lat2,lon2);
                    //var yFeet = GetLength(lat2,lon1,lat2,lon2);

                    //var lat = document.getElementById(_Latitude).value - (NextYOffset * document.getElementById(_Scale).value);
                    //var lon = document.getElementById(_Longitude).value - 0 + (NextXOffset * document.getElementById(_Scale).value);
                    //var xFeet = GetLength(lat,( document.getElementById(_Longitude).value * 1.0 ),lat,lon);
                    //var yFeet = GetLength(( document.getElementById(_Latitude).value * 1.0 ),lon,lat,lon);
                    //MakeTextBox(NextXOffset,NextYOffset, xFeet.toString() + "," + yFeet.toString() );
                    
                    //areaRunningTotal += ( ( ( lastXFeet * yFeet ) - ( lastYFeet * xFeet ) ) / 2 );
                    //MakeTextBox(NextXOffset,NextYOffset, areaRunningTotal.toString() );
                    //lastXFeet = xFeet;
                    //lastYFeet = yFeet;

                    areaX1 = areaX2;
                    areaY1 = areaY2;

                  if( root.scrollLeft != 0 || root.scrollTop != 0 )
                  {
                    areaX2 = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    areaY2 = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                  else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
                  {
                    areaX2 = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                    areaY2 = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
                  }
                    if( areaX0 > 0 && areaY0 > 0 && areaX1 > 0 && areaY1 > 0 && areaX2 > 0 && areaY2 > 0 )
                    {                        
                        if( areaRunningTotal > 0 
                         && ( ( homeAngle < lastAngle && newAngle > homeAngle && newAngle < lastAngle )
                           || ( homeAngle > lastAngle && newAngle < homeAngle && newAngle > lastAngle ) ) )
                            areaRunningTotal -= CalculateTriangleArea( areaX0, areaY0, areaX1, areaY1, areaX2, areaY2 );
                        else
                            areaRunningTotal += CalculateTriangleArea( areaX0, areaY0, areaX1, areaY1, areaX2, areaY2 );
                            
//                        alert( lastAngle + ", " + newAngle + ", " + homeAngle + " - " + areaRunningTotal );
                    }
                }
            }
        }
        else if ((e.button == 1 || e.button == 0) && Tool == 'PLOT') 
        {
            //alert( document.getElementById(Grid).offsetLeft.toString() );
            //var leftBuffer = ImageHolder.style.left.replace('px','') - document.getElementById(Grid).style.left.replace('px','');
            //var topBuffer = ImageHolder.style.top.replace('px','') - document.getElementById(Grid).style.top.replace('px','');

          if( root.scrollLeft != 0 || root.scrollTop != 0 )
          {
            NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
            NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
          }
          else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
          {
            NextXOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
            NextYOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
          }
            GridXOffset = NextXOffset - document.getElementById(Grid).style.left.replace('px','');
            GridYOffset = NextYOffset - document.getElementById(Grid).style.top.replace('px','');
            //alert( document.getElementById(Grid).style.left );
            
            //alert( document.getElementById(_Latitude).value.toString() + ", " + document.getElementById(_Longitude).value.toString() );
            //alert((GridYOffset * 1));

            var lat = document.getElementById(_Latitude).value - (GridYOffset * document.getElementById(_Scale).value);// + 0.003;
            var lon = document.getElementById(_Longitude).value - 0 + (GridXOffset * document.getElementById(_Scale).value);// - 0.00355;

            MakePixel(NextXOffset, NextYOffset, 4, 4);
            var TextX = NextXOffset;
            var TextY = NextYOffset;

            var str = "(" + lat.toString().substring( 0, lat.toString().indexOf( "." ) + 5 ) + ", " + lon.toString().substring( 0, lon.toString().indexOf( "." ) + 5 ) + ")";
            //alert( str );
            MakeTextBox(TextX,TextY, str );
        }
    }
}

function CalculateTriangleArea( x1, y1, x2, y2, x3, y3 )
{
    var lat1 = document.getElementById(_Latitude).value - (y1 * document.getElementById(_Scale).value);
    var lat2 = document.getElementById(_Latitude).value - (y2 * document.getElementById(_Scale).value);
    var lon1 = document.getElementById(_Longitude).value - 0 + (x1 * document.getElementById(_Scale).value);
    var lon2 = document.getElementById(_Longitude).value - 0 + (x2 * document.getElementById(_Scale).value);
    var len1 = GetLength(lat1,lon1,lat2,lon2);

    lat1 = document.getElementById(_Latitude).value - (y2 * document.getElementById(_Scale).value);
    lat2 = document.getElementById(_Latitude).value - (y3 * document.getElementById(_Scale).value);
    lon1 = document.getElementById(_Longitude).value - 0 + (x2 * document.getElementById(_Scale).value);
    lon2 = document.getElementById(_Longitude).value - 0 + (x3 * document.getElementById(_Scale).value);
    var len2 = GetLength(lat1,lon1,lat2,lon2);

    lat1 = document.getElementById(_Latitude).value - (y3 * document.getElementById(_Scale).value);
    lat2 = document.getElementById(_Latitude).value - (y1 * document.getElementById(_Scale).value);
    lon1 = document.getElementById(_Longitude).value - 0 + (x3 * document.getElementById(_Scale).value);
    lon2 = document.getElementById(_Longitude).value - 0 + (x1 * document.getElementById(_Scale).value);
    var len3 = GetLength(lat1,lon1,lat2,lon2);

    var sp = ( len1 + len2 + len3 ) / 2; //semi-permimeter
    
    var area = Math.sqrt( sp * ( sp - len1 ) * ( sp - len2 ) * ( sp - len3 ) ); 

    return area;
}

function HandleDoubleClick(e) 
{
    if (WaitVisible() == false) {
        e = e || window.event;
        var src = e.srcElement || e.target;
        var target = src;
        var parent = target.parentElement || target.parentNode;
        var ImageHolder = document.getElementById(_OrderImagesPanel);
        var root = document.documentElement||document.body;
        if (Tool == 'AREA') 
        {
            //if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                //|| parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate') 
            {
//alert( 'HandleDoubleClick' );
              if( root.scrollLeft != 0 || root.scrollTop != 0 )
              {
                NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
              }
              else //if( document.body.scrollLeft != 0 || document.body.scrollTop != 0 )
              {
                NextXOffset = (e.clientX + document.body.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset - MeasureThickness;
                NextYOffset = (e.clientY + document.body.scrollTop) - ImageHolder.offsetTop - ProblemOffset - MeasureThickness;
              }
                
                //var lat1 = document.getElementById(_Latitude).value - (areaY0 * document.getElementById(_Scale).value);
                //var lat2 = document.getElementById(_Latitude).value - (NextYOffset * document.getElementById(_Scale).value);
                //var lon1 = document.getElementById(_Longitude).value - 0 + (areaY0 * document.getElementById(_Scale).value);
                //var lon2 = document.getElementById(_Longitude).value - 0 + (NextXOffset * document.getElementById(_Scale).value);
                //var xFeet = GetLength(lat1,lon2,lat2,lon2);
                //var yFeet = GetLength(lat2,lon1,lat2,lon2);
                //var lat = document.getElementById(_Latitude).value - (NextYOffset * document.getElementById(_Scale).value);
                //var lon = document.getElementById(_Longitude).value - 0 + (NextXOffset * document.getElementById(_Scale).value);
                //var xFeet = GetLength(lat, ( document.getElementById(_Longitude).value * 1.0 ),lat,lon);
                //var yFeet = GetLength(( document.getElementById(_Latitude).value * 1.0 ),lon,lat,lon);
                    
                //areaRunningTotal += ( ( ( lastXFeet * yFeet ) - ( lastYFeet * xFeet ) ) / 2 );

                DrawLine(areaX0 + 1,areaY0 + 1,NextXOffset + 1,NextYOffset + 1,MeasureThickness);
                var TextX = NextXOffset;
                var TextY = NextYOffset;
                //if line is sloping down, we need to raise the text y position so it does not end up sitting on top of the line
                if (TextY > areaY0 && TextX > areaX0) { 
                    TextY = TextY - (document.getElementById(_AddText).style.fontSize.replace('px','') * 2); 
                }
                else if (TextY < areaY0 && TextX < areaX0) { 
                    TextY = TextY - (document.getElementById(_AddText).style.fontSize.replace('px','') * 2); 
                }
                MakeTextBox(TextX,TextY, Math.floor(areaRunningTotal) + ' sq ft');
                
                areaRunningTotal = 0;
                areaX0 = 0;
                areaY0 = 0;
                areaX1 = 0;
                areaY1 = 0;
                areaX2 = 0;
                areaY2 = 0;
                NextXOffset = 0;
                NextYOffset = 0;

//                alert( areaRunningTotal );
            }
        }
    }
}

function BeforeSave() {
    if (WaitVisible() == false) {
        ShowWait();
        setTimeout("SerializeDrawings();",1000);
    }
}

function SerializeDrawings() {
    //document.getElementById(_DrawingsToStore).value = '';
    var Elements = document.getElementById(_Slate).getElementsByTagName('SPAN');
    var text = '';
    for (x = 0; x < Elements.length; x++) {
        
        if (document.getElementById(_ProgressLabel).innerText != undefined) document.getElementById(_ProgressLabel).innerText = 'Processing object ' + (x+1) + ' of ' + Elements.length; 
            else  document.getElementById(_ProgressLabel).textContent = 'Processing object ' + (x+1) + ' of ' + Elements.length;
        if (Elements[x].innerText != undefined) text = Elements[x].innerText; 
            else  text = Elements[x].textContent;
        if( typeof( _DrawingsToStore ) != 'undefined' && text.length > 0) {
            document.getElementById(_DrawingsToStore).value = document.getElementById(_DrawingsToStore).value + '|||' 
                + Elements[x].style.left.replace('px','') + ',,|,,' 
                + Elements[x].style.top.replace('px','') + ',,|,,' 
                + text + ',,|,,' 
                + Elements[x].style.backgroundColor + ',,|,,' 
                + Elements[x].style.color + ',,|,,' 
                + Elements[x].style.width.replace('px','') + ',,|,,' 
                + Elements[x].style.height.replace('px','') + ',,|,,' 
                + Elements[x].style.border + ',,|,,' 
                + Elements[x].style.fontSize.replace('px','') + ',,|,,' 
                + Elements[x].style.fontWeight
        }
    }
    document.getElementById(_SaveDrawingsDemo).click();
}

function SerialDrawing(obj) {
  if( typeof( _DrawingsToStore ) != 'undefined' )
  {
    var text = '';
    document.getElementById(_DrawingsToStore).value = document.getElementById(_DrawingsToStore).value + '|||' 
        + obj.style.left.replace('px','') + ',,|,,' 
        + obj.style.top.replace('px','') + ',,|,,' 
        + text + ',,|,,' 
        + obj.style.backgroundColor + ',,|,,' 
        + obj.style.color + ',,|,,' 
        + obj.style.width.replace('px','') + ',,|,,' 
        + obj.style.height.replace('px','') + ',,|,,' 
        + obj.style.border + ',,|,,' 
        + obj.style.fontSize.replace('px','') + ',,|,,' 
        + obj.style.fontWeight
  }
}

function ERASE() {
    if (WaitVisible() == false) {
        document.getElementById(_Slate).innerHTML = '';
        if (document.getElementById(_SaveReminder).style.display == '') { document.getElementById(_SaveReminder).style.display = 'none'; }
    }
}

function SetTool(NewTool) {
    if (WaitVisible() == false) {
        Tool = NewTool;
        document.getElementById(_Tool).value = NewTool;
        if (NewTool == '') { NewTool = 'None'; }
        if( typeof( _CurrentToolShow ) != 'undefined' )
        {
            if ( document.getElementById(_CurrentToolShow).innerText != undefined) 
                document.getElementById(_CurrentToolShow).innerText = NewTool; 
            else  
                document.getElementById(_CurrentToolShow).textContent = NewTool;
        }
        NextXOffset = 0;
        NextYOffset = 0;
    }
}

function PickColor(Color) {
    if (WaitVisible() == false) {
        PixelColor = Color;
        if( typeof( _CurrentColorShow ) != 'undefined' )
            document.getElementById(_CurrentColorShow).style.backgroundColor = Color;
        document.getElementById(_Color).value = Color;
    }
}

function HideText() {
    document.getElementById(_TextPanel).style.display = 'none';
}

function AddTextToImage() {
    if (WaitVisible() == false) {
        document.getElementById(_TextPanel).style.display = 'none';
        MakeTextBox(document.getElementById(_TextPanel).style.left.replace('px',''),document.getElementById(_TextPanel).style.top.replace('px',''),document.getElementById(_AddText).value);
    }
}

function AddText(e) {
    if (WaitVisible() == false) {
        AllowDraw = false;
        e = e || window.event;
        var src = e.srcElement || e.target;
        var target = src;
        var parent = target.parentElement || target.parentNode;
        var ImageHolder = document.getElementById(_OrderImagesPanel);
        var root = document.documentElement||document.body;
        if (Moving) {
            Moving = false;
            MovingTextBox = null;
            NextXOffset = 0;
            NextYOffset = 0;
        }
        else if ((e.button == 1 || e.button == 0) && Tool == 'TEXT' && document.getElementById(_TextPanel).style.display != '') {
            window.status = target.id;
            if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                || parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate') {
                NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset;
                NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset;
                if (NextXOffset > 0 && NextYOffset > 0) {
                    document.getElementById(_TextPanel).style.display = '';
                    document.getElementById(_TextPanel).style.left = NextXOffset + 'px';
                    document.getElementById(_TextPanel).style.top = NextYOffset + 'px';
                    var Width = document.getElementById(_OrderImagesPanel).style.width.replace('px','') - NextXOffset - 20;
                    document.getElementById(_AddText).style.width = Width + 'px';            
                    var Height = document.getElementById(_OrderImagesPanel).style.height.replace('px','') - NextYOffset - 20;
                    if (Height > 60) { Height = 60; }
                    document.getElementById(_AddText).style.height = Height + 'px'; 
                    if (document.getElementById(_SaveReminder).style.display != '') { document.getElementById(_SaveReminder).style.display = ''; }           
                }
            }
        }
        else if ((e.button == 1 || e.button == 0) && Tool == 'SQUARE' && AllowSquare) {
            SerialDrawing(CurrentSquare);
            AllowSquare = false;
        }
    }
}

function FollowMouseForDrawing(e) {
    if (WaitVisible() == false) {
        e = e || window.event;
        var src = e.srcElement || e.target;
        var target = src;
        var parent = target.parentElement || target.parentNode;
        var ImageHolder = document.getElementById(_OrderImagesPanel);
        var root = document.documentElement||document.body;
        if (Moving && MovingTextBox) {
            NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset;
            NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset;
            MovingTextBox.style.left = NextXOffset - MovingDiffX + 'px';
            MovingTextBox.style.top = NextYOffset - MovingDiffY + 'px';
        }
        if (AllowDraw && Tool == 'DRAW') {

            if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                || parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate') {
                NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset;
                NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset;
                if (NextXOffset > 0 && NextYOffset > 0) {
                    DrawPixel(NextXOffset, NextYOffset);
                }
            }
            else
            {
                window.status = target.id.substring(target.id.length - 15,target.id.length);
            }
        }
        else if (AllowSquare && Tool == 'SQUARE') {
            if (target.id.substring(target.id.length - 15,target.id.length) == '_PurchasedImage' || target.id.substring(target.id.length - 5,target.id.length) == 'Slate'
                || parent.id.substring(parent.id.length - 15,parent.id.length) == '_PurchasedImage' || parent.id.substring(parent.id.length - 5,parent.id.length) == 'Slate') {
                NextXOffset = (e.clientX + root.scrollLeft) - ImageHolder.offsetLeft - ProblemOffset;
                NextYOffset = (e.clientY + root.scrollTop) - ImageHolder.offsetTop - ProblemOffset;
                if (NextXOffset > 0 && NextYOffset > 0) {
                    width = (NextXOffset - SquareX);
                    height = (NextYOffset - SquareY);
                    if (width >= 0) {
                        CurrentSquare.style.left = SquareX + 'px';
                        CurrentSquare.style.width = width + 'px';
                    }
                    else
                    {
                        CurrentSquare.style.left = NextXOffset + 'px';
                        CurrentSquare.style.width = (SquareX - NextXOffset) + 'px';
                    }
                    if (height >= 0) {
                        CurrentSquare.style.top = SquareY + 'px';
                        CurrentSquare.style.height = height + 'px';
                    }
                    else
                    {
                        CurrentSquare.style.top = NextYOffset + 'px';
                        CurrentSquare.style.height = (SquareY - NextYOffset) + 'px';
                    }
                }
            }
        }
        else
        {
            LastX = -1;
            LastY = -1;
        }
    }
}

function DrawPixel(x, y) {
    
    if (DrawingPixel == false) {
        DrawingPixel = true;
        var Width = 0.0;
        Width = document.getElementById(_LineThickness).value.replace('px','');
        var Height = 0.0;
        Height = document.getElementById(_LineThickness).value.replace('px','');
        MakePixel(x,y,Width,Height);
        //fill in between
        if (LastX > -1 && LastY > -1) {
            var XDiff = 0.0;
            XDiff = x - LastX;
            var YDiff = 0.0;
            YDiff = y - LastY;
            var NumPoints = 0.0;
            var XDiffAbs = 0.0;
            XDiffAbs = Math.abs(XDiff);
            var YDiffAbs = 0.0;
            YDiffAbs = Math.abs(YDiff);
            if (XDiffAbs >= YDiffAbs) {
                var WidthForMath = Width;
                if (Width > 1 ) {
                    WidthForMath = WidthForMath - 1;
                }
                NumPoints = XDiffAbs / WidthForMath;
                if (XDiff < 0) {                
                    for (Xincrement = 1.0; Xincrement <= NumPoints; Xincrement++) {
                        MakePixel(x - 0 + (Xincrement*WidthForMath),y - ((YDiff/NumPoints)*Xincrement),Width,Height);
                    }
                }
                else
                {
                    for (Xincrement = 1.0; Xincrement <= NumPoints; Xincrement++) {
                        MakePixel(x - (Xincrement*WidthForMath),y - ((YDiff/NumPoints)*Xincrement),Width,Height);
                    }
                }
            }
            else if (XDiffAbs < YDiffAbs) {
                var HeightForMath = Height;
                if (Height > 1 ) {
                    HeightForMath = HeightForMath - 1;
                }
                NumPoints = YDiffAbs / HeightForMath;
                if (YDiff < 0) {
                    for (Yincrement = 1.0; Yincrement <= NumPoints; Yincrement++) {
                        MakePixel(x - ((XDiff/NumPoints)*Yincrement),y - 0 + (Yincrement*HeightForMath),Width,Height);
                    }
                }
                else
                {
                    for (Yincrement = 1.0; Yincrement <= NumPoints; Yincrement++) {
                        MakePixel(x - ((XDiff/NumPoints)*Yincrement),y - (Yincrement*HeightForMath),Width,Height);
                    }
                }
            }
        }
        LastX = x;
        LastY = y;
        DrawingPixel = false;
    }
    
}

function DrawLine(x1,y1,x2,y2,thickness) {

    var Width = 0.0;
    Width = thickness;
    var Height = 0.0;
    Height = thickness;
    //fill in between
    if (x1 > -1 && y1 > -1) {
        var XDiff = 0.0;
        XDiff = x2 - x1;
        var YDiff = 0.0;
        YDiff = y2 - y1;
        var NumPoints = 0.0;
        var XDiffAbs = 0.0;
        XDiffAbs = Math.abs(XDiff);
        var YDiffAbs = 0.0;
        YDiffAbs = Math.abs(YDiff);
        if (XDiffAbs >= YDiffAbs) {
            var WidthForMath = Width;
            if (Width > 1 ) {
                WidthForMath = WidthForMath - 1;
            }
            NumPoints = XDiffAbs / WidthForMath;
            if (XDiff < 0) {                
                for (Xincrement = 1.0; Xincrement <= NumPoints; Xincrement++) {
                    MakePixel(x2 - 0 + (Xincrement*WidthForMath),y2 - ((YDiff/NumPoints)*Xincrement),Width,Height);
                }
            }
            else
            {
                for (Xincrement = 1.0; Xincrement <= NumPoints; Xincrement++) {
                    MakePixel(x2 - (Xincrement*WidthForMath),y2 - ((YDiff/NumPoints)*Xincrement),Width,Height);
                }
            }
        }
        else if (XDiffAbs < YDiffAbs) {
            var HeightForMath = Height;
            if (Height > 1 ) {
                HeightForMath = HeightForMath - 1;
            }
            NumPoints = YDiffAbs / HeightForMath;
            if (YDiff < 0) {
                for (Yincrement = 1.0; Yincrement <= NumPoints; Yincrement++) {
                    MakePixel(x2 - ((XDiff/NumPoints)*Yincrement),y2 - 0 + (Yincrement*HeightForMath),Width,Height);
                }
            }
            else
            {
                for (Yincrement = 1.0; Yincrement <= NumPoints; Yincrement++) {
                    MakePixel(x2 - ((XDiff/NumPoints)*Yincrement),y2 - (Yincrement*HeightForMath),Width,Height);
                }
            }
        }
    }
        
}

function MakeSquare(x,y) {
    
    x = parseInt(x);
    y = parseInt(y);
    
    //var PixelString = x + ',' + y + ',' + PixelColor + ';';
    //if (PixelsDrawn.indexOf(';' + PixelString,0) <= 0) {
        //PixelsDrawn = PixelsDrawn + PixelString;
        CurrentSquare = document.createElement('div');
        CurrentSquare.style.width = '1px';
        CurrentSquare.style.height = '1px';
        CurrentSquare.style.left = x + 'px';
        CurrentSquare.style.top = y + 'px';
        CurrentSquare.style.position = 'absolute';
        CurrentSquare.style.overflow = 'hidden';
        CurrentSquare.style.fontSize = '0px';
        CurrentSquare.style.backgroundColor = '';
        CurrentSquare.style.border = document.getElementById(_LineThickness).value + ' solid ' + PixelColor;
        document.getElementById(_Slate).appendChild(CurrentSquare);
    //}

}

function MakePixel(x,y,width,height) {
    
    x = parseInt(x);
    y = parseInt(y);
    
    //var PixelString = x + ',' + y + ',' + PixelColor + ';';
    //if (PixelsDrawn.indexOf(';' + PixelString,0) <= 0) {
        //PixelsDrawn = PixelsDrawn + PixelString;
        var newpixel = document.createElement('div');
        newpixel.style.width = width + 'px';
        newpixel.style.height = height + 'px';
        newpixel.style.left = x + 'px';
        newpixel.style.top = y + 'px';
        newpixel.style.position = 'absolute';
        newpixel.style.overflow = 'hidden';
        newpixel.style.fontSize = '0px';
        newpixel.style.backgroundColor = PixelColor;
        document.getElementById(_Slate).appendChild(newpixel);
    //}
    SerialDrawing(newpixel);

}

function MakeTextBox(x,y,text) {
    x = parseInt(x);
    y = parseInt(y);
    
    //var PixelString = x + ',' + y + ',' + PixelColor + ';';
    //if (PixelsDrawn.indexOf(';' + PixelString,0) <= 0) {
        //PixelsDrawn = PixelsDrawn + PixelString;
        var newpixel = document.createElement('span');
        newpixel.style.width = ( text.length * 7 ) + 'px';
        newpixel.style.left = x + 'px';
        newpixel.style.top = y + 'px';
        newpixel.style.position = 'absolute';
        if( document.getElementById(_Color).value != 'Black' )
            newpixel.style.background = '#000000';
        newpixel.style.overflow = 'hidden';
        newpixel.style.fontSize = '12px'; //document.getElementById(_AddText).style.fontSize;
        newpixel.style.fontFamily = 'Arial';
        newpixel.style.color = PixelColor;
        newpixel.style.border = '1px dashed #000000';
        newpixel.style.cursor = 'move';
        newpixel.style.fontWeight = 'bold'; //document.getElementById(_AddText).style.fontWeight;
        if (newpixel.innerText != undefined) 
            newpixel.innerText = text; 
        else  
            newpixel.textContent = text;
        document.getElementById(_Slate).appendChild(newpixel);
    //}

}