/**
 * 
 * @namespace
 */
gm.widget.InstructionDialog = {
	/**
	 * Function opens the dialog showing instructions
	 * @param {HTMLElement} el (optional) element that was clicked to show the dialog
	 */
	open : function(el) {
		if (el) {
			el.blur();
		}

		// set the 
		var instructionDialog = new YAHOO.widget.SimpleDialog("dlg", {
			width: "650px",
			effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
			modal:true,
	    	visible:false,
			draggable:false,
			zIndex:10,
			x: (document.body.clientWidth / 2) - 298,
			y: 20
		});

		// render the dialog
		instructionDialog.setBody('<img src="images/instructions.jpg" alt="" style="width:640px;height:380px;" />');
		instructionDialog.render(document.body); 
		instructionDialog.show();

		// add background click listener to the dialog
		YAHOO.util.Event.addListener($('dlg_mask'), "click", function(){
			self.dialog.hide();
			YAHOO.util.Event.removeListener($('dlg_mask'),"click",self.dialog.hide());
		});
	}
}