var canvas, ctx;
var x;
var y;
var pageOffsetX;  //Used for getting how much a page is scrolled down.
var pageOffsetY;

var HOLE  = 1;
var WALL  = 2;
var START = 3;
var GOAL  = 4;
var ERASE = 5;
var MOVE  = 6;

var selectedTool = HOLE;
var drawingWall = 0;
var drawingStart = 0;
var drawingGoal = 0;
var drawingHole = 0;
var movingWall = 0;

var selectedItem = 0; //Used for move and delete functionality, must be used together with selectedType
var selectedType = 0;
var canvasUpdated = 0;

var idToBeMoved = 0; //Only used to store id while saving.  

//Image values
var imgFrame = new Image();   // Create new Image object
imgFrame.src = './static/images/frame.png'; // Set source path
var imgBkg = new Image();   // Create new Image object
imgBkg.src = './static/images/bkg.jpg'; // Set source path
var imgWallH = new Image();   // Create new Image object
imgWallH.src = './static/images/box_horiz.png'; // Set source path
var imgWallV = new Image();   // Create new Image object
imgWallV.src = './static/images/box_vert.png'; // Set source path
var imgHole = new Image();   // Create new Image object
imgHole.src = './static/images/hole.png'; // Set source path
var imgStart = new Image();   // Create new Image object
imgStart.src = './static/images/ball2.png'; // Set source path
var imgGoal = new Image();   // Create new Image object
imgGoal.src = './static/images/goal.png'; // Set source path

//stored data 
var levelNumber = 1;
var maxLevelID = 1;
var changingLevel = 0; //State for changing level
var showLoginPopup = 0;
var phoneID = -1;
var levelpackTitle = "_CustomLevels_1"
var numberOfLevels = 1;
var holeXCoords = [];
var holeYCoords = [];
var startX = -1;
var startY = -1;
var goalX = -1;
var goalY = -1;
var startWallXCoords = [];
var startWallYCoords = [];
var endWallXCoords = [];
var endWallYCoords = [];
var startWallX = -1;
var startWallY = -1;
var endWallX = -1;
var endWallY = -1;
var tmpHoleX = -1;
var tmpHoleY = -1;
var offsetX = -1;
var offsetY = -1;

//Const
var borderOffsetX = 36;
var borderOffsetY = 120;


function startUp()
{
    if (!isIPhone())
    {
        canvas = document.getElementById("cv");
        ctx = canvas.getContext("2d");
        drawBkg();
        drawFrame();
        
        if(isIE())
        {
            showWarningPopup();   
        }
        else
        {
            showIDPopup();
        }                
    }
    else
    {
    }
}

function detectEnter(e) 
{
  var keynum;
  
  if(window.event) // IE
  {
    keynum = e.keyCode;
  }
  else if(e.which) // Netscape/Firefox/Opera
  {
    keynum = e.which;
  }
  
  if(keynum == 13)
  {
    registerID();
  }
}


function registerID()
{
    inputValue = String(document.getElementById("inputbox").value);
    phoneID = inputValue.toUpperCase(); 
    createCookie("DeviceID",phoneID,365);
    hideIDPopup();       
    server.GetLowestLevelResponse(levelpackTitle, phoneID, onGetLowestLevelIDSuccess);
}

function onGetLowestLevelIDSuccess(response)
{
    if(response[0] == 1)
    {
      server.GetLevel(levelpackTitle, phoneID, response[1], onGetLevelSuccess);
      server.GetLevelHTML(levelpackTitle, phoneID, response[1], onUpdateLevelsTable);    
      levelNumber = response[1]; 
    }
    else
    {
      server.GetLevel(levelpackTitle, phoneID, 1, onGetLevelSuccess);
      server.GetLevelHTML(levelpackTitle, phoneID, 1, onUpdateLevelsTable);    
      levelNumber = 1;     
    }
}

function isIE()
{
  
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
    { //test for MSIE x.x;
        return 1; 
    }
    return 0;
}


function isIPhone()
{
    if ((navigator.userAgent.indexOf('iPhone') != -1) ||  
        (navigator.userAgent.indexOf('iPod') != -1)) 
    {  
        return 1;
    } 
    return 0;
}

function clickCanvas() 
{
    if(showLoginPopup == 1)
        return;
    
    if(selectedTool == ERASE) //Delete
	{
	   itemSelected(x,y,1);
	   if(selectedType == HOLE) //Hole
	   {
	       holeXCoords.splice(selectedItem,1);
	       holeYCoords.splice(selectedItem,1);
	   }
	   else if(selectedType == START) //Start
	   {
	       	startX = -1;
        	startY = -1;
	   }
	   else if(selectedType == GOAL) //Goal
	   {
	       goalX = -1;
           goalY = -1;
	   }
	   else if(selectedType == WALL) //Wall
	   {
	       startWallXCoords.splice(selectedItem,1);
	       startWallYCoords.splice(selectedItem,1);
	       endWallXCoords.splice(selectedItem,1);
	       endWallYCoords.splice(selectedItem,1);
	   }
	}
	
  	drawEverything();
  	drawFrame();
}

function withinBorder(xCenter,yCenter,halfwidth,halfheight)
{
	if(xCenter > borderOffsetX && xCenter < (borderOffsetX+320))
	{
		if(yCenter > borderOffsetY && yCenter < (borderOffsetY+480))
		{
			return 1;
		}
	}	
	
	return 0;
}

function drawHighlights(sx1, sy1, sx2, sy2)
{
    var wid = sx2 - sx1;
    var hei = sy2 - sy1;
    
    var smallWid = wid * 0.2;
    var smallHei = hei * 0.2;
    
    ctx.strokeRect(sx1,sy1, smallWid,smallHei);
    
    ctx.strokeRect(sx2-smallWid,sy1, smallWid,smallHei);

    ctx.strokeRect(sx1,sy2-smallHei, smallWid,smallHei);

    ctx.strokeRect(sx2-smallWid,sy2-smallHei, smallWid,smallHei);

}

function drawEverything()
{
	drawBkg();
	
	for (i in holeXCoords) 
	{
		ctx.drawImage(imgHole,holeXCoords[i],holeYCoords[i]);
	}
	
	if(tmpHoleX != -1)
	{
		ctx.drawImage(imgHole,tmpHoleX,tmpHoleY);
	}
	
	if(startX != -1)
	{
		ctx.drawImage(imgStart,startX,startY);
	}
	
	if(goalX != -1)
	{
		ctx.drawImage(imgGoal,goalX,goalY);
	}

	for (i in startWallXCoords) 
	{ 
		var widthW = endWallXCoords[i] - startWallXCoords[i];
		var heightW = endWallYCoords[i] - startWallYCoords[i];
		
		if(widthW > heightW)
       		ctx.drawImage(imgWallH, 0,0, widthW, heightW, startWallXCoords[i],startWallYCoords[i], widthW, heightW);
		else
			ctx.drawImage(imgWallV, 0,0, widthW, heightW, startWallXCoords[i],startWallYCoords[i], widthW, heightW);
	}
    
	
	WallUpdate();

}

function drawFrame()
{
	ctx.drawImage(imgFrame,0,0);
}

/**
 * Check if the area at x1,y1 with the radius rad is free or occupied with hole, startpos or goalhole
 */
function freeArea(x1,y1,rad)
{

	for (i in holeXCoords) 
	{
		if(collision(x1,y1,rad,holeXCoords[i]+16,holeYCoords[i]+16,12)==1)
		{
			return 0;	
		}	
	}	
	
	if(collision(x1,y1,rad,goalX+16,goalY+16,12)==1)
	{
		return 0;	
	}	
	
	if(collision(x1,y1,rad,startX+16,startY+16,12)==1)
	{
		return 0;	
	}	
	
	return 1;
}

function itemSelected(x1,y1,rad)
{
    selectedType = 0;
    var val = withinWall(x1,y1);
    if(val != -1)
    {
        selectedType = WALL; //Wall
        selectedItem = val;
		return selectedType;  
    }

	for (i in holeXCoords) 
	{
		if(collision(x1,y1,rad,holeXCoords[i]+16,holeYCoords[i]+16,12)==1)
		{
		    selectedType = HOLE; //Hole
			selectedItem = i;
			return selectedType;	
		}	
	}	
	
	if(collision(x1,y1,rad,goalX+16,goalY+16,12)==1)
	{
		selectedType = GOAL;  //Goal
		selectedItem = 1;
		return selectedType;	
	}	
	
	if(collision(x1,y1,rad,startX+16,startY+16,12)==1)
	{		
		selectedType = START;  //Start
		selectedItem = 1;
		return selectedType;	
	}	
	
	return 0;
}


function collision(x1,y1,radius1,x2,y2,radius2)
{
	var diff1 = x1-x2;
	var diff2 = y1-y2;
	
	if(diff1 < 0)
	{
		diff1 = diff1 * -1;
	}
	
	if(diff1 < (radius1+radius2))
	{
		if(diff2 < 0)
		{
			diff2 = diff2 * -1;
		}
		
		if(diff2 < (radius1+radius2))
		{
			return 1;	
		}
	}
	
	return 0;
}

function withinWall(x1,y1)
{
    for (i in startWallXCoords) 
	{
	   	var widthW = endWallXCoords[i] - startWallXCoords[i];
		var heightW = endWallYCoords[i] - startWallYCoords[i];
	   
		if(collisionRect(x1, y1, startWallXCoords[i], startWallYCoords[i], widthW, heightW)==1)
		{
			return i;
		}	
	}	
	
	return -1;
}

function collisionRect(x1,y1,r1x,r1y,rWidth,rHeight)
{
   if(x1 < r1x || x1> r1x+rWidth)
        return 0;
   else if(y1 < r1y || y1> r1y+rHeight)
        return 0;
        
   return 1;
}


function drawBkg() 
{
	ctx.drawImage(imgBkg,0,0);
}

/** 
 * Different for different browsers 
 */
function getScrollPos()
{
    if (window.pageYOffset)
    {
        pageOffsetX = window.pageXOffset;
        pageOffsetY = window.pageYOffset;
        return;
    }
    if(document.documentElement && document.documentElement.scrollTop)
    {
        pageOffsetX = document.documentElement.scrollLeft;
        pageOffsetY = document.documentElement.scrollTop;
        return;
    }
    if(document.body)
    {
        pageOffsetY = document.body.scrollTop;
        pageOffsetX = document.body.scrollLeft;
        return;
     }
    pageOffsetX = 0;
    pageOffsetY = 0;
    return;
}

function mouseDown()
{
    if(showLoginPopup == 1)
        return;
    
    canvasUpdated = 1;
    
    if(selectedTool == HOLE) //Hole
	{
        drawingHole = 1;
        tmpHoleX = x-16;
	    tmpHoleY = y-16;
	    offsetX = -16;
	    offsetY = -16;
	} 
    else if(selectedTool == WALL) //Wall
	{
	   StartWall(); 
	} 
	else if(selectedTool == START) //Start
	{
        drawingStart = 1
		if(withinBorder(x,y,16,16) == 1)
		{
			startX = x-16;
			startY = y-16;
		    offsetX = -16;
	        offsetY = -16;
		}
	}
	else if(selectedTool == GOAL) //Goal
	{
        drawingGoal = 1
		if(withinBorder(x,y,16,16) == 1)
		{
			goalX = x-16;
			goalY = y-16;
		    offsetX = -16;
	        offsetY = -16;
		}
	}
	else if(selectedTool == MOVE) //Move
	{
	   itemSelected(x,y,1);
	   
       if(selectedType == HOLE) //Hole
	   {
	       drawingHole = 1;
	       tmpHoleX = holeXCoords[selectedItem];
	       tmpHoleY = holeYCoords[selectedItem];
	       offsetX = tmpHoleX - x;
	       offsetY = tmpHoleY - y;
	       
	       holeXCoords.splice(selectedItem,1);
	       holeYCoords.splice(selectedItem,1);
	   }
	   else if(selectedType == WALL) //Wall
	   {
	        wid = endWallXCoords[selectedItem] - startWallXCoords[selectedItem];
            hei = endWallYCoords[selectedItem] - startWallYCoords[selectedItem];
    
            smallWid = wid * 0.2;
            smallHei = hei * 0.2;
            resize = 0;
    
           //Resize
	       if(collisionRect(x, y, startWallXCoords[selectedItem], startWallYCoords[selectedItem], smallWid, smallHei) == 1)
	       {
		       endWallX = startWallXCoords[selectedItem];
		       endWallY = startWallYCoords[selectedItem];
		       startWallX = endWallXCoords[selectedItem];
		       startWallY = endWallYCoords[selectedItem];
		       offsetX = endWallX - x;
	           offsetY = endWallY - y;
	      
		       resize = 1;
	       }  //Resize
	       else if(collisionRect(x, y, startWallXCoords[selectedItem], endWallYCoords[selectedItem]-smallHei, smallWid, smallHei) == 1)
	       {
	           endWallX = startWallXCoords[selectedItem];
		       startWallY = startWallYCoords[selectedItem];
		       startWallX = endWallXCoords[selectedItem];
		       endWallY = endWallYCoords[selectedItem];
		       offsetX = endWallX - x;
	           offsetY = endWallY - y;
	           
	           resize = 1;
	       }  //Resize
	       else if(collisionRect(x, y, endWallXCoords[selectedItem]-smallWid, startWallYCoords[selectedItem], smallWid, smallHei) == 1)
	       {
	           startWallX = startWallXCoords[selectedItem];
		       endWallY = startWallYCoords[selectedItem];
		       endWallX = endWallXCoords[selectedItem];
		       startWallY = endWallYCoords[selectedItem];
		       offsetX = endWallX - x;
	           offsetY = endWallY - y;
	           
	           resize = 1;
	       }  //Resize
	       else if(collisionRect(x, y, endWallXCoords[selectedItem]-smallWid, endWallYCoords[selectedItem]-smallHei, smallWid, smallHei) == 1)
	       {
	           
	           startWallX = startWallXCoords[selectedItem];
		       startWallY = startWallYCoords[selectedItem];
		       endWallX = endWallXCoords[selectedItem];
		       endWallY = endWallYCoords[selectedItem];
		       offsetX = endWallX - x;
	           offsetY = endWallY - y;
	           
	           resize = 1;
	       }
	       else //Move instead of resize
	       {
	           startWallX = startWallXCoords[selectedItem];
		       startWallY = startWallYCoords[selectedItem];
		       endWallX = endWallXCoords[selectedItem];
		       endWallY = endWallYCoords[selectedItem];
               movingWall = 1;
               offsetX = x;
               offsetY = y;
	       }
	       
	       if(resize == 1)
	       {
	           drawingWall = 1;
	       }
	       
	       startWallXCoords.splice(selectedItem,1);
	       startWallYCoords.splice(selectedItem,1);
	       endWallXCoords.splice(selectedItem,1);
	       endWallYCoords.splice(selectedItem,1);

	   }
       else if(selectedType == START) //Start
	   {
	       drawingStart = 1;
    	   if(withinBorder(x,y,16,16) == 1)
		   {
		       offsetX = startX - x;
	           offsetY = startY - y;
			   startX = x + offsetX;
			   startY = y + offsetY;
		   }
	   }
	   else if(selectedType == GOAL) //Goal
	   {
	       drawingGoal = 1;
		   if(withinBorder(x,y,16,16) == 1)
		   {
			   offsetX = goalX - x;
	           offsetY = goalY - y;
			   goalX = x + offsetX;
			   goalY = y + offsetY;


		   }
	   }
	}
	drawEverything();
   	drawFrame();
}

function mouseUp()
{
    if(showLoginPopup == 1)
        return;
    
    if(drawingHole == 1) //Hole
	{
	    drawingHole = 0;
	    tmpHoleX = -1;
	    tmpHoleY = -1; 
		if(withinBorder(x,y,16,16) == 1)
		{
			holeXCoords.push(x+offsetX);
			holeYCoords.push(y+offsetY);
		}
		offsetX = 0;
		offsetY = 0;
	}
    else if(drawingStart == 1) //Start
	{
	    drawingStart = 0;
		if(withinBorder(x,y,16,16) == 1)
		{
			startX = x+offsetX;
			startY = y+offsetY;
		}
		offsetX = 0;
		offsetY = 0;
	}
	else if(drawingGoal == 1) //Goal
	{
	    drawingGoal = 0;
		if(withinBorder(x,y,16,16) == 1)
		{
			goalX = x+offsetX;
			goalY = y+offsetY;
		}
		offsetX = 0;
		offsetY = 0;
	} 
	else if(drawingWall == 1 || movingWall == 1)
	{
	   EndWall();
	}
}

function mouseMove()
{
    if(showLoginPopup == 1)
        return;
    
    if(drawingHole == 1) //Hole
	{
	   if(withinBorder(x,y,16,16) == 1)
		{
		    tmpHoleX = x+offsetX;
		    tmpHoleY = y+offsetY;
		}
	   	drawEverything();
	   	drawFrame();
	}
    else if(drawingWall == 1) //Walls
	{
	    endWallX = x + offsetX;
	    endWallY = y + offsetY;
	    drawEverything();
	    drawFrame();
	} 
	else if(drawingStart == 1) //Start
	{
	   if(withinBorder(x,y,16,16) == 1)
		{
		    startX = x+offsetX;
		    startY = y+offsetY;
		}
	   	drawEverything();
	   	drawFrame();
	}
	else if(drawingGoal == 1) //Goal
	{
	   if(withinBorder(x,y,16,16) == 1)
		{
		    goalX = x+offsetX;
		    goalY = y+offsetY;
		}
	   	drawEverything();
	   	drawFrame();
	}
	else if(movingWall == 1)
	{
	   	startWallX = startWallX + (x - offsetX);
	   	startWallY = startWallY + (y - offsetY);
		endWallX = endWallX + (x- offsetX);
		endWallY = endWallY + (y - offsetY);
        offsetX = x;
        offsetY = y;
        
        drawEverything();
	     
	    drawFrame();

	}
	else if(selectedTool == MOVE) //Move
	{
	    itemSelected(x,y,1);
	    
	    drawEverything();
	   
       if(selectedType == WALL) //Wall
	   {
	    drawHighlights(startWallXCoords[selectedItem], startWallYCoords[selectedItem], endWallXCoords[selectedItem], endWallYCoords[selectedItem]);   
	   }
	   
	   drawFrame();
	}
}

function StartWall()
{
    if(startWallX == -1) //Start drawing
	{
		drawingWall = 1;
		
		if(x < borderOffsetX)
		    x = borderOffsetX;
		
		if(y < borderOffsetY)
		    y = borderOffsetY;
		
		startWallX = x;
		startWallY = y;
		endWallX = x;
		endWallY = y;
		offsetX = 0;
		offsetYoffsetY = 0;
	}
}

function WallUpdate()
{
	if(drawingWall == 1 || movingWall == 1) //Only for walls
	{
		if(x != startWallX && y != startWallY)
		{
			var wallW = endWallX-startWallX;
			var wallH = endWallY-startWallY;			
			var drawX = startWallX;
			var drawY = startWallY;
			
			if(wallW < 0)
			{
				wallW = wallW * -1;
				drawX = endWallX;
			}
			
			if(wallH < 0)
			{
				wallH = wallH * -1;
				drawY = endWallY;
			}
			
			if(wallH > 480)
			{
			    wallH = 480; 
			}
		
			if(wallW > 320)
			{
			    wallW = 320; 
			}	
			
			drawTmpWall(drawX, drawY, wallW, wallH);
		}
	}
}

function drawTmpWall(drawX, drawY, wallW, wallH)
{
    if(wallW > wallH)
       	ctx.drawImage(imgWallH, 0, 0, wallW, wallH, drawX, drawY, wallW, wallH);	
    else
    	ctx.drawImage(imgWallV, 0, 0, wallW, wallH, drawX, drawY, wallW, wallH);	 
}

function EndWall()
{
	if(endWallX == startWallX || endWallY == startWallY)
	{	
        resetWallDrawing();
	}   
	else
    {
        var tmp
	
        if(startWallX > endWallX)
		{
			tmp = startWallX;
			startWallX = endWallX;
			endWallX = tmp;	
		}
			
		if(startWallY > endWallY)
		{
			tmp = startWallY;
			startWallY = endWallY;
			endWallY = tmp;	
		}
		
		if(startWallX < borderOffsetX)
		{
			startWallX = borderOffsetX;
		}

		if(startWallY < borderOffsetY)
		{
			startWallY = borderOffsetY;
		}
		
		if(startWallX-borderOffsetX > 320)
		{
			resetWallDrawing();
		}

		if(startWallY-borderOffsetY > 480)
		{
			resetWallDrawing();
		}
			
		if(endWallX-borderOffsetX > 320)
		{
			endWallX = 320+borderOffsetX;
		}

		if(endWallY-borderOffsetY > 480)
		{
			endWallY = 480+borderOffsetY;
		}
			
		if(endWallX < borderOffsetX)
		{
			//endWallX = borderOffsetX;
		    resetWallDrawing();
		}

		if(endWallY < borderOffsetY)
		{
			//endWallY = borderOffsetY;
		    resetWallDrawing();  
		}
			
		startWallXCoords.push(startWallX);
		startWallYCoords.push(startWallY);
		endWallXCoords.push(endWallX);
		endWallYCoords.push(endWallY);			
		drawingWall = 0;
		movingWall = 0;
		endWallX = -1;
		endWallY = -1;
		startWallX = -1;
		startWallY = -1;
	}
	
	offsetXoffsetXoffsetY = 0;
	offsetY = 0;
}

function resetWallDrawing()
{
    drawingWall = 0;
	movingWall = 0;
	endWallX = -1;
	endWallY = -1;
	startWallX = -1;
	startWallY = -1;  
}


function uploadLevel(silent)
{
    if(showLoginPopup == 0)
    {
        if(canvasUpdated != 0)
        {
            if(silent == 1)
            {
                server.AddLevel(levelpackTitle, phoneID, levelNumber,
                        holeXCoords, holeYCoords, startWallXCoords, startWallYCoords, endWallXCoords, endWallYCoords, startX, startY, goalX, goalY, onSavedSuccess);
            }
            else
            {
                server.AddLevel(levelpackTitle, phoneID, levelNumber,
                        holeXCoords, holeYCoords, startWallXCoords, startWallYCoords, endWallXCoords, endWallYCoords, startX, startY, goalX, goalY, onSavedSuccessWithFeedback);
      
            }
        }
        else
        {
            if(silent == 0)
            {
                showSavePopup();
            } 
        }
    }
}	

function changeLevel(toLevel)
{
    if(changingLevel == 0)
    {
        changingLevel = 1;
        uploadLevel(1)
        server.GetLevel(levelpackTitle, phoneID, toLevel, onGetLevelSuccess);
        server.GetLevelHTML(levelpackTitle, phoneID, toLevel, onUpdateLevelsTable); 
        levelNumber = toLevel; 
    }
}

function onSavedSuccess()
{
    canvasUpdated = 0;
}

function onSavedSuccessWithFeedback()
{
    canvasUpdated = 0;
    showSavePopup();
}

function onEmptyCallback()
{
    
}


function onRemoveLevelSuccess(response)
{

    if(response != 0)
    {
        server.GetLevel(levelpackTitle, phoneID, response[0], onGetLevelSuccess);
        
        levelNumber = response[0]; 
        server.GetLevelHTML(levelpackTitle, phoneID, response[0], onUpdateLevelsTable);                 
        numberOfLevels = numberOfLevels - 1;
    }
}

function onNewLevelSuccess()
{
    server.GetLevelHTML(levelpackTitle, phoneID, levelNumber, onUpdateLevelsTable);              
}

function onGetLevelSuccess(response) 
{
    lev = response;

	if (lev == 0)
	{
	    clearLevel();
	}
	else
    {
        holeXCoords = response[0];
        holeYCoords = response[1];
        startWallXCoords = response[2];
        startWallYCoords = response[3];   
        endWallXCoords = response[4];
        endWallYCoords = response[5];
        startX = response[6];
        startY = response[7];
        goalX = response[8];
        goalY = response[9];
        
        canvasUpdated = 0;
	}
	
    drawEverything();
    
    //ChangeLevel needs 2 callbacks. First it updates it counter and on second it will reset into finished state.
    if(changingLevel == 1)
    {
      changingLevel++;    
    }
    else if(changingLevel == 2)
    {
        changingLevel = 0;
    }

}

function clearLevel()
{
	startX = -1;
	startY = -1;
	goalX = -1;
	goalY = -1;
	
	holeXCoords = [];
    holeYCoords = [];
    startWallXCoords = [];
    startWallYCoords = [];
    endWallXCoords = [];
    endWallYCoords = [];
	
	addBorder(startWallXCoords, startWallYCoords, endWallXCoords, endWallYCoords);
	
	drawEverything(); 
}          


//Not used at the moment but could be added if we want a special cursor over the drawing area 
function changeBack() 
{
	document.body.style.cursor="default";
}

//Not used at the moment but could be added if we want a special cursor over the drawing area
function change() 
{
	if(active == 1)
		document.body.style.cursor="url('hole.cur'),active";	
	else
		document.body.style.cursor="url('wall.cur'),active";
}

/**
 *  Main function for retrieving the mouse coords
 */
function mouser(event)
{
    
	getScrollPos();
	//x = event.clientX + pageOffsetX - parseInt(document.getElementById('canvDiv').style.left);
	//y = event.clientY + pageOffsetY - parseInt(document.getElementById('canvDiv').style.top);
	x = event.clientX + pageOffsetX - findPosX(document.getElementById('canvDiv'));
	y = event.clientY + pageOffsetY - findPosY(document.getElementById('canvDiv'));
	
	//document.Show.MouseX.value = x;
	//document.Show.MouseY.value = y;
}