properties.images.prevMark=
{
	"tag":"img",
	"attributes":
	{
		"id":"imgPrevMark",
		"src":"images/jsconnect/prevmark.png",
		"title":"Go back to the previous marked state."
	},
	"styles":
	{
		"position":"absolute",
		"top":"0px",
		"left":"0px"
	}
};
properties.images.prevMove=
{
	"tag":"img",
	"attributes":
	{
		"id":"imgPrevMove",
		"src":"images/jsconnect/prevmove.png",
		"title":"Go back to the previous move."
	},
	"styles":
	{
		"position":"absolute",
		"top":"0px",
		"left":"16px"
	}
};
properties.images.nextMove=
{
	"tag":"img",
	"attributes":
	{
		"id":"imgNextMove",
		"src":"images/jsconnect/nextmove.png",
		"title":"Go forward to the next move."
	},
	"styles":
	{
		"position":"absolute",
		"top":"0px",
		"left":"32px"
	}
};
properties.images.nextMark=
{
	"tag":"img",
	"attributes":
	{
		"id":"imgNextMark",
		"src":"images/jsconnect/nextmark.png",
		"title":"Go forward to the next marked state."
	},
	"styles":
	{
		"position":"absolute",
		"top":"0px",
		"left":"48px"
	}
};
properties.images.mark=
{
	"tag":"img",
	"attributes":
	{
		"id":"imgMark",
		"src":"images/jsconnect/markdisabled.png",
		"title":"Mark or unmark this board state."
	},
	"styles":
	{
		"position":"absolute",
		"top":"0px",
		"left":"64px"
	}
};
properties.images.menu=
{
	"tag":"img",
	"attributes":
	{
		"id":"imgMenu",
		"src":"images/jsconnect/menudisabled.png",
		"title":""
	},
	"styles":
	{
		"position":"absolute",
		"top":"0px",
		"right":"0px"
	}
};
function createNavigatorButton(id,parent,nameBase,callBackName)
{
	var temp = new ImageHandler();
	temp.parent = parent;
	temp.enabled = false;
	temp.nameBase=nameBase;
	temp.disable =function(){this.enabled=false;this.image.src="images/jsconnect/"+this.nameBase+"disabled.png";};
	temp.enable=function(){this.enabled=true;this.image.src="images/jsconnect/"+this.nameBase+".png";};
	temp.attach(document.getElementById(id));
	temp.addEvent("onmouseover",function(_this){if(_this.enabled)_this.image.src="images/jsconnect/"+_this.nameBase+"hover.png";});
	temp.addEvent("onmouseout",function(_this){if(_this.enabled)_this.image.src="images/jsconnect/"+_this.nameBase+".png";});
	temp.addEvent("onmousedown",function(_this){if(_this.enabled)_this.image.src="images/jsconnect/"+_this.nameBase+"down.png";});
	temp.addEvent("onmouseup",function(_this){if(_this.enabled)_this.image.src="images/jsconnect/"+_this.nameBase+".png";});
	temp.callBackName=callBackName
	temp.addEvent("onclick",function(_this){if(_this.enabled)_this.parent[_this.callBackName]();});
	temp.disable();
}
function createNavigatorCheckBox(id,parent,nameBase,callBackName)
{
	var temp = new ImageHandler();
	temp.parent = parent;
	temp.enabled = false;
	temp.checked = false;
	temp.nameBase=nameBase;
	temp.disable =function(){this.enabled=false;this.image.src="images/jsconnect/"+this.nameBase+"disabled.png";};
	temp.enable=function(){this.enabled=true;this.image.src="images/jsconnect/"+this.nameBase+((this.checked)?("checked"):("unchecked"))+".png";};
	temp.attach(document.getElementById(id));
	temp.addEvent("onmouseover",function(_this){if(_this.enabled)_this.image.src="images/jsconnect/"+_this.nameBase+((_this.checked)?("checked"):("unchecked"))+"hover.png";});
	temp.addEvent("onmouseout",function(_this){if(_this.enabled)_this.image.src="images/jsconnect/"+_this.nameBase+((_this.checked)?("checked"):("unchecked"))+".png";});
	temp.callBackName=callBackName
	temp.addEvent("onclick",function(_this){if(_this.enabled){_this.checked=!_this.checked;_this.parent[_this.callBackName]();_this.image.src="images/jsconnect/"+_this.nameBase+((_this.checked)?("checked"):("unchecked"))+"hover.png";}});
	temp.disable();
}
properties.frames.navigator=
{
	"tag":"div",
	"attributes":
	{
		"id":"frmNavigator"
	},
	"styles":
	{
		"position":"absolute",
		"left":"0px",
		"width":"100%"
	}
};
function NavigatorFrame(id,parent)
{
	this.parent = parent;
	this.frame = document.getElementById(id);
	var temp="";
	temp+=htmlGenerator.createTag(properties.images.prevMark);
	temp+=htmlGenerator.createTag(properties.images.prevMove);
	temp+=htmlGenerator.createTag(properties.images.nextMove);
	temp+=htmlGenerator.createTag(properties.images.nextMark);
	temp+=htmlGenerator.createTag(properties.images.mark);
	temp+=htmlGenerator.createTag
	(
		{
			"tag":"div",
			"attributes":
			{
				"id":"frmMove"
			},
			"styles":
			{
				"position":"absolute",
				"left":"80px",
				"top":"0px",
				"width":"88px",
				"height":"16px"
			},
			"content":"0/0"
		}
	);
	temp+=htmlGenerator.createTag(properties.images.options);
	temp+=htmlGenerator.createTag(properties.images.menu);
	this.frame.innerHTML=temp;

	this.moveDiv = document.getElementById("frmMove");
	createNavigatorButton("imgPrevMark",this,"prevmark","onPrevMark");
	createNavigatorButton("imgPrevMove",this,"prevmove","onPrevMove");
	createNavigatorButton("imgNextMove",this,"nextmove","onNextMove");
	createNavigatorButton("imgNextMark",this,"nextmark","onNextMark");
	createNavigatorButton("imgMenu",this,"menu","onMenu");
	createNavigatorCheckBox("imgMark",this,"mark","onMark");
	this.prevMarkImageHandler = handlers.images.imgPrevMark;
	this.prevMoveImageHandler = handlers.images.imgPrevMove;
	this.nextMoveImageHandler = handlers.images.imgNextMove;
	this.nextMarkImageHandler = handlers.images.imgNextMark;
	this.menuImageHandler = handlers.images.imgMenu;
	this.markImageHandler = handlers.images.imgMark;
	
	this.update = function()
	{
		this.frame.style.top = this.parent.boardFrame.frame.style.height;
		this.menuImageHandler.enable();
		if(board!=null) 
		{
			this.moveDiv.innerHTML=board.undoIndex+"/"+board.undoList.length;
			if(board.undoIndex>0&&!board.solved)
			{
				this.prevMarkImageHandler.enable();
				this.prevMoveImageHandler.enable();
				this.markImageHandler.checked = board.undoMarks[board.undoIndex-1];
				this.markImageHandler.enable();
			}
			else
			{
				this.prevMarkImageHandler.disable();
				this.prevMoveImageHandler.disable();
				this.markImageHandler.disable();
			}
			if(board.undoIndex<board.undoList.length&&!board.solved)
			{
				this.nextMarkImageHandler.enable();
				this.nextMoveImageHandler.enable();
			}
			else
			{
				this.nextMarkImageHandler.disable();
				this.nextMoveImageHandler.disable();
			}
		}
		else
		{
			this.prevMarkImageHandler.disable();
			this.prevMoveImageHandler.disable();
			this.nextMoveImageHandler.disable();
			this.nextMarkImageHandler.disable();
			this.markImageHandler.disable();
			this.moveDiv.innerHTML="0/0";
		}
	}
	this.onPrevMark = function()
	{
		board.prevMark();
	}
	this.onPrevMove = function()
	{
		board.prevMove();
	}
	this.onNextMove = function()
	{
		board.nextMove();
	}
	this.onNextMark = function()
	{
		board.nextMark();
	}
	this.onMark = function()
	{
		board.undoMarks[board.undoIndex-1]=this.markImageHandler.checked;
	}
	this.onMenu = function()
	{
		if(mainFrame.menuFrame.frame.style.visibility=="hidden")
		{
			mainFrame.menuFrame.frame.style.visibility="visible";
		}
		else
		{
			mainFrame.menuFrame.frame.style.visibility="hidden";
		}
		mainFrame.newGameFrame.frame.style.visibility="hidden";
	}
}