Memory Games With Back Ground Image

Thursday 4 February 2016

Memory Games With Back Ground Image

----------------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE AND SAVE AS HTML
WHEN MATCH IMAGE IT REMOVE BOTH IMAGES AND SHOW BACK GROUND
JUST CLICK YOUR MOUSE
-----------------------------------------------------------------------------------------------------------------------



<html>
<head>
<style type="text/css">
body,tr,table,td,th,li,input,textarea{font-family:Verdana,Arial,Helvetica,sans-serif;}
a { color:black }
h1,h2,h3,h4 { padding: 0px; margin: 0px; }
.paddedTD { padding-left: 6px; padding-right: 6px; }
.headerTD { font-size:smaller; }
a.headerLink, a.headerLink:link, a.headerLink:visited, a.headerLink:active { text-decoration:none; }
a.headerLink:hover { text-decoration:underline; }
.subHeader { font-size:smaller; padding:2px; }
.subHeader a, .subHeader a:link, .subHeader a:visited, .subHeader a:active { text-decoration:underline; }
.subHeader a:hover { text-decoration:underline; }
a.footerLink, a.footerLink:link, a.footerLink:visited, a.footerLink:active { text-decoration:none }
a.footerLink:hover { text-decoration:underline; }
table, img { border:0;}
.highlightStarImg { width:10px; height:10px; margin-left:3px;}
</style>
<script>

</script>

</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor="white" onload="asbody_onload();asbody_regHandlers();">
<table style="background-image:url(http://aaa.allstarpuzzles.netdna-cdn.com/impl_img/bg.gif); background-repeat:repeat-y;" border="0" cellpadding="0" cellspacing="0" width="728">
<tbody>
<tr>
<td>
<table style="margin-left:13px;margin-top:7px;margin-bottom:7px;" border="0" cellpadding="0" cellspacing="0" width="715">
<tbody>
<tr valign="top">
<td align="left"> <b>F Is for Fun</b>
<br>
<table border="0" cellspacing="0" cellpadding="0" style="margin-left:0px;margin-right:35;">
<tbody>
<tr>
<td class="puzDesc">... in this concentration puzzle of people, places, and things beginning whose names begin with F.</td>
</tr>
</tbody>
</table>
</td>
<td nowrap="" class="subHeader" style="padding:2px" align="right" rowspan="2">
<table cellspacing="0" cellpadding="0" border="0" class="subHeaderInner">
<tbody>
<tr valign="top">
<td align="right" width="100%">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td nowrap="" align="right"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="5" style="padding-top:0px;padding-left:0" width="728" onselectstart="return false;" onmousedown="return false;" bgcolor="white">
<tbody>
<tr>
<td>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<script type="text/javascript">
function addToPrototype(p,o){for(var k in o)
p[k]=o[k];}
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1;}
var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}
else{date=options.expires;}
expires='; expires='+date.toUTCString();}
var path=options['path']?'; path='+(options['path']):'';var domain=options['domain']?'; domain='+(options['domain']):'';var secure=options['secure']?'; secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}
else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}
return cookieValue;}};var gDebug=false;var Escape={html:function(str){return str.replace(/&/g,'&').replace(/>/g,'>').replace(/</g,'<').replace(/"/g,'"');}};function randomInt(min,maxExcl){var range=maxExcl-min;var res=Math.floor(Math.random()*range)+min;if(res==maxExcl)
res--;return res;}
function shuffle(arr){for(var i=0;i<arr.length;i++){var j=randomInt(i,arr.length);var t=arr[i];arr[i]=arr[j];arr[j]=t;}}
var ImageLoader=function(idPrefixForHtml,imgLoadCallback,imgErrorCallback){this.imgLoadCallback=imgLoadCallback;this.imgErrorCallback=imgErrorCallback;this.batchNumber=0;this.idPrefixForHtml=idPrefixForHtml;this.reset();};ImageLoader.everLoaded=new Object();ImageLoader.prototype={loadImage:function(elem,src){if(!this.toLoadThisBatch[src]&&!ImageLoader.everLoaded[src]){if(elem.attr("src")==src){throw"src already set to "+src;}
elem.unbind("load");elem.unbind("error");elem.load(this.loadFn);elem.error(this.errorFn);this.numImagesToLoad++;this.toLoadThisBatch[src]=true;}
elem.attr("src",src);},doneAddingLoadRequests:function(){this.isDoneAddingLoadRequests=true;if(this.imgLoadCallback&&this.isFinished())
this.imgLoadCallback();},isFinished:function(){return this.isDoneAddingLoadRequests&&this.numImagesLoaded>=this.numImagesToLoad;},getProgressPct:function(){return this.numImagesToLoad==0?100:(100*this.numImagesLoaded/this.numImagesToLoad);},getProgressHtml:function(){var pct=this.numImagesToLoad==0?100:Math.round(100*this.numImagesLoaded/this.numImagesToLoad);pct=""+pct;for(var toAdd=3-pct.length;toAdd>0;toAdd--)
pct="<span style='visibility:hidden'>0</span>"+pct;return pct+"%"+(gDebug?" "+this.numImagesLoaded+" of "+this.numImagesToLoad:"");},writeLoadingBar:function(containerWidth,containerHeight){var idPrefix=this.idPrefixForHtml;var d=document;d.writeln("<div id="+idPrefix+"_loading style='text-align:center;width:"+containerWidth+"px;height:"+containerHeight+"px;'>");d.writeln(" <div style='position:relative;width:66%;left:16%;top:"+Math.round(containerHeight/3)+"px;border:1px solid black;'>");d.writeln(" <div style='position:absolute;z-index:-1;top:0;left:0;width:0;height:100%;background-color:#EEEEEE' id="+idPrefix+"_loadingBar></div>");d.writeln(" <div style='font-size:117%;padding:10px;z-index:10;' id="+idPrefix+"_loadingMsg>Loading Images ...<span id="+idPrefix+"_loadingPct>   </span></div>");d.writeln(" </div>");d.writeln("</div>");},hideOrShowImageLoadArea:function(showIt){$("#"+this.idPrefixForHtml+"_loading").css("display",showIt?'block':'none');},renderLoadProgress:function(){$("#"+this.idPrefixForHtml+"_loadingPct").html(this.getProgressHtml());$("#"+this.idPrefixForHtml+"_loadingBar").css("width",this.getProgressPct()+"%");},renderImageLoadFailed:function(){$("#"+this.idPrefixForHtml+"_loadingMsg").html("Unable to load an image. Please try again later.");$("#"+this.idPrefixForHtml+"_loadingBar").css("width","0");},reset:function(){var me=this;me.isDoneAddingLoadRequests=false;me.numImagesToLoad=me.numImagesLoaded=0;me.toLoadThisBatch=new Object();var curBatch=++me.batchNumber;var hasError=false;me.loadFn=function(e){ImageLoader.everLoaded[$(e.target).attr("src")]=true;if(me.batchNumber!=curBatch){return;}
if(hasError){return;}
me.numImagesLoaded++;me.renderLoadProgress();if(me.imgLoadCallback&&me.isFinished())
me.imgLoadCallback();};me.errorFn=function(e){if(me.batchNumber!=curBatch){return;}
hasError=true;me.renderImageLoadFailed();if(me.imgErrorCallback){me.imgErrorCallback();}};}};var Star={rootPrefix:"http://allstarpuzzles.com/",writeStarStylesIfNeeded:function(){var out=function(s){document.write(s);};out("<style type=\"text/css\">");out(" .asPuzzlesCopyrightString { "+"font-size:smaller;"+"}");out(" .asPuzzlesStar { "+"vertical-align:middle;"+"text-align:center;"+"display:none;"+"background:url("+this.rootPrefix+"img/puzzle_solved_star.png);"+"z-index:100;"+"position:absolute;"+"}");out(" .asPuzzlesStar span { "+"font-size:93%;"+"position:relative;"+"top:84px;"+"left:0;"+"height:110px;"+"width:210px;"+"}");out(" .asCompletionMessage {"+"background-color:white;"+"vertical-align:middle;"+"text-align:center;"+"display:none;"+"z-index:100;"+"position:absolute;"+"border:1px solid black;"+"padding:10px;"+"overflow:scroll;"+"}");out(" .asCompletionMessage span {"+"font-size:93%;"+"position:relative;"+"}");out("</style>");},writeCopyrightString:function(width,leftHtml){var h=document.location.hostname;var doLink=!h||h.indexOf("allstarpuzzles.com")!=h.length-"allstarpuzzles.com".length;var open=doLink?"<a href='http://www.allstarpuzzles.com/' target=_blank>":"";var close=doLink?"</a>":"";document.writeln("<div class='asPuzzlesCopyrightString' style='width:"+width+"px;'>");if(leftHtml){document.writeln(leftHtml);}
document.writeln("");},writePuzzleSolvedStar:function(idPrefix,containerW,containerH){var solvedW=210;var solvedH=210;document.writeln("<div id="+idPrefix+"_solved class='asPuzzlesStar' "+"style='width:210px;height:210px;top:"+Math.round((containerH-solvedH)/2)+"px;left:"+Math.round((containerW-solvedW)/2)+"px;'>");document.writeln("<span></span></div>");},writeCompletionSolvedMessage:function(idPrefix,containerW,containerH){var solvedW=containerW/3*2;var solvedH=containerH/3*2;document.writeln("<div id="+idPrefix+"_solved class='asCompletionMessage' style='"+"width:"+solvedW+"px;"+"height:"+solvedH+"px;"+"top:"+Math.round((containerH-solvedH)/2)+"px;"+"left:"+Math.round((containerW-solvedW)/2)+"px;'>");document.writeln("<span></span></div>");},hideStar:function(idPrefix){$("#"+idPrefix+"_solved").css("display","none");},showStar:function(idPrefix,htmlStr){var elem=$("#"+idPrefix+"_solved");$("span",elem).html(htmlStr.replace(/\n/g,"<br>"));elem.css("display","block");},toggleStar:function(idPrefix){var elem=$("#"+idPrefix+"_solved");var isHidden=elem.css("display")=="none";elem.css("display",isHidden?"block":"none");},isInsideStar:function(idPrefix,elem){var id=idPrefix+"_solved";return elem.id==id||$(elem).parents("#"+id).length>0;},launchSavedGameAndPreferences:function(saveGameKey,userName,saveToken,prefNames,prefDefaults){function stripTimestamp(s){return s.substring(s.indexOf("_")+1);}
var res={};res.ready=false;var prefValues={};if(prefDefaults){for(var i=0;i<prefNames.length;++i){prefValues[prefNames[i]]=prefDefaults[i];}}
if(userName!=null&&saveToken!=null){var toFetch="";if(saveGameKey!=null)
toFetch+="s"+saveGameKey;for(var i=0;i<prefNames.length;i++){if(toFetch.length>0)
toFetch+=";";toFetch+="p"+prefNames[i];}
$.ajax({cache:false,url:"/mem/getSavedValue.html",data:{a:userName,b:saveToken,i:toFetch},success:function(data){var saveGameValue=null;if(data.length>0&&data.indexOf("<html")!==0){var index=0;var start=saveGameKey==null?0:-1;for(var i=start;i<prefNames.length;i++){var sizeStr=data.substring(index,index+5);while(sizeStr.charAt(0)=='0'){sizeStr=sizeStr.substring(1);}
var cnt=parseInt(sizeStr);index+=5;if(cnt!=0){var val=data.substring(index,index+cnt);index+=cnt;if(i==-1)
saveGameValue=stripTimestamp(val);else prefValues[prefNames[i]]=val;}}}
res.saveGameValue=saveGameValue;res.prefValues=prefValues;res.ready=true;},error:function(){res.saveGameValue=null;res.prefValues=prefValues;res.ready=true;}});return res;}
else{res.prefValues=prefValues;res.saveGameValue=$.cookie('z_'+saveGameKey);if(res.saveGameValue){res.saveGameValue=stripTimestamp(res.saveGameValue);}
for(var j=0;j<prefNames.length;j++){if($.cookie('z_'+prefNames[j])!=null){res.prefValues[prefNames[j]]=$.cookie('z_'+prefNames[j]);}}
res.ready=true;}
return res;},save:function(key,value,msgDivId,userName,saveToken,isPreference){if(userName!=null&&saveToken!=null){var requestData={a:userName,b:saveToken,i:key,v:value};if(isPreference){requestData['isPref']='y';}else{$("#"+msgDivId).text("Saving Puzzle...").stop().css("visibility","visible");}
$.ajax({cache:false,url:"/mem/savePuz.html",data:requestData,success:isPreference?null:function(data){if(/SUCCEEDED$/.test(data)){Star.pSaved(msgDivId,"Puzzle Saved");}else{Star.pSaved(msgDivId,"Puzzle Save Failed");}},error:isPreference?null:function(){Star.pSaved(msgDivId,"Puzzle Save Failed");}});}
else{var options={expires:180,domain:'.allstarpuzzles.com'};var valueToSave=isPreference?value:(Math.floor(new Date().getTime()/1000)+'_'+value);$.cookie('z_'+key,valueToSave,options);if(!isPreference){this.pSaved(msgDivId,"Puzzle Saved");}}},pSaved:function(msgDivId,message){$("#"+msgDivId).text(message).stop().css("visibility","visible").animate({opacity:1.0},2000,null,function(){$("#"+msgDivId).css("visibility","hidden");});}};var MoveHistory=function(){this.redo=[];this.undo=[];};addToPrototype(MoveHistory.prototype,{addAction:function(cmd){var undo=this.undo;undo[undo.length]=cmd;var max=100;if(undo.length>max){var delta=undo.length-max;for(var i=0;i<max;i++)
undo[i]=undo[i+delta];undo.length=max;}
this.redo.length=0;},hasRedo:function(){return this.redo.length>0;},hasUndo:function(){return this.undo.length>0;},getActionToApply:function(isUndo){return isUndo?this.getUndoActionToApply():this.getRedoActionToApply();},getUndoActionToApply:function(){if(this.undo.length==0)
return null;var res=this.undo[this.undo.length-1];this.undo.length--;this.redo[this.redo.length]=res;return res;},getRedoActionToApply:function(){if(this.redo.length==0)
return null;var res=this.redo[this.redo.length-1];this.redo.length--;this.undo[this.undo.length]=res;return res;}});(function(jQuery){jQuery.hotkeys={version:"0.8",specialKeys:{8:"backspace",9:"tab",13:"return",16:"shift",17:"ctrl",18:"alt",19:"pause",20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"insert",46:"del",96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9",106:"*",107:"+",109:"-",110:".",111:"/",112:"f1",113:"f2",114:"f3",115:"f4",116:"f5",117:"f6",118:"f7",119:"f8",120:"f9",121:"f10",122:"f11",123:"f12",144:"numlock",145:"scroll",191:"/",224:"meta"},shiftNums:{"`":"~","1":"!","2":"@","3":"#","4":"$","5":"%","6":"^","7":"&","8":"*","9":"(","0":")","-":"_","=":"+",";":": ","'":"\"",",":"<",".":">","/":"?","\\":"|"}};function keyHandler(handleObj){if(typeof handleObj.data!=="string"){return;}
var origHandler=handleObj.handler,keys=handleObj.data.toLowerCase().split(" ");handleObj.handler=function(event){if(this!==event.target&&(/textarea|select/i.test(event.target.nodeName)||event.target.type==="text")){return true;}
var special=event.type!=="keypress"&&jQuery.hotkeys.specialKeys[event.which],character=String.fromCharCode(event.which).toLowerCase(),key,modif="",possible={};if(event.altKey&&special!=="alt"){modif+="alt+";}
if(event.ctrlKey&&special!=="ctrl"){modif+="ctrl+";}
if(event.metaKey&&!event.ctrlKey&&special!=="meta"){modif+="meta+";}
if(event.shiftKey&&special!=="shift"){modif+="shift+";}
if(special){possible[modif+special]=true;}else{possible[modif+character]=true;possible[modif+jQuery.hotkeys.shiftNums[character]]=true;if(modif==="shift+"){possible[jQuery.hotkeys.shiftNums[character]]=true;}}
for(var i=0,l=keys.length;i<l;i++){if(possible[keys[i]]){return origHandler.apply(this,arguments);}}
return true;};}
jQuery.each(["keydown","keyup","keypress"],function(){jQuery.event.special[this]={add:keyHandler};});})(jQuery);
</script>

<script type="text/javascript">
/* (c) 2009-2011 All-Star Puzzles */
var MemoryGame=function(id,rows,cols,backgroundImage,cellWidth,cellHeight,data)
{var me=this;if(data.length<rows*cols/2)
throw"Not enough items to make a "+rows+" by "+cols+" puzzle.";this.lastStartDate=null;this.id=id;this.backgroundImage=backgroundImage;this.numRows=rows;this.numCols=cols;this.data=data;this.grid=new Array();this.beenShown=new Array();this.cellWidth=cellWidth;this.cellHeight=cellHeight;for(var r=0;r<this.numRows;r++)
{var a=this.grid[r]=new Array();var b=this.beenShown[r]=new Array();for(var c=0;c<this.numCols;c++)
{a[c]=-1;b[c]=false;}}
this.currentOpenID=null;this.currentSecondOpenID=null;this.timeoutID=null;this.efficDenom=this.efficNumer=this.numDistinctShown=0;this.incorrectGuesses=this.luckyGuesses=this.correctGuesses=0;this.pageStartDate=new Date().getTime();this.imgLoader=new ImageLoader(this.id,function(){me.allImagesLoaded();},function(){me.imageLoadFailed();});};function addToPrototype(p,o)
{for(var k in o)
p[k]=o[k];}
addToPrototype(MemoryGame.prototype,{render:function()
{var imgPrefix=Star.rootPrefix+"memory/";var w=this.numCols*this.cellWidth;var h=this.numRows*this.cellHeight;var d=document;d.writeln("<div id='"+this.id+"_container' style='width:"+w+"px;position:relative;'>");Star.writeStarStylesIfNeeded();this.imgLoader.writeLoadingBar(this.id,w,h);d.writeln("<div id="+this.id+"_statsWrapper style='position:absolute;left:0;top:0;text-align:center;display:none;width:"+w+"px;height:"+h+"px;'>");d.writeln(" <div style='position:relative;width:80%;left:10%;background-color:#e7ecff;top:"+Math.round(h/5)+"px;border:1px solid black;'>");d.writeln(" <div style='text-align:left;font-size:smaller;padding:10px;' id="+this.id+"_stats></div>");d.writeln(" </div>");d.writeln("</div>");Star.writePuzzleSolvedStar(this.id,w,h);var textBgUrl=imgPrefix+"text_image.gif";d.writeln("<img style='display:none' src='"+textBgUrl+"'>");d.writeln("<div id="+this.id+"_images style='display:none;'>");for(var i=0;i<this.data.length;i++)
{var val=this.data[i].split(":");if(val.length==1)
val=new Array(val[0],val[0]);for(var j=0;j<2;j++)
{var id=this.id+"_images_"+i+"_"+j;var v=val[j];var ch=v.substring(0,1);if(ch==='!')
d.write("<div id='"+id+"' style='font-size:108%;word-wrap:break-word;background:url("+textBgUrl+");width:"+this.cellWidth+"px;height:"+this.cellHeight+"px;overflow:hidden;'><div style='word-wrap:break-word;padding-top:"+(this.cellHeight/4)+"px;'>"+Escape.html(v.substring(1))+"</div></div>");else if(ch==='@')
d.write("<span id='"+id+"' style='width:"+this.cellWidth+"px;height:"+this.cellHeight+"px;background-color:#"+v.substring(1)+"'> </span>");else d.write("<img title='' alt='' id='"+id+"' mysrc='"+imgPrefix+v+"'>");}}
d.writeln("</div>");var bgURL=this.backgroundImage===null?null:imgPrefix+this.backgroundImage;d.writeln("<table id="+this.id+"_puzzle style='display:none;margin-bottom:3px;"+
(bgURL===null?"":("background: url("+bgURL+");"))+"' cellspacing=0 cellpadding=0 width="+w+" height="+h+">");for(var r=0;r<this.numRows;r++)
{d.write("<tr>");for(var c=0;c<this.numCols;c++)
{d.write("<td style='overflow:hidden;"+
(bgURL===null?"background: url(/memory/answered_image_tile.gif);":"")+"height:"+this.cellHeight+"px;width:"+this.cellWidth+"px;' align=center valign=middle>");d.write("<div><img title='' alt='' width="+this.cellWidth+" height="+this.cellHeight+" alt='?' id='"+this.getQuestionID(r,c)+"' src="+imgPrefix+"question_mark.gif style='border:0;margin:0;padding:0;background-color:white'></div>");d.write("</td>");}
d.write("</tr>");}
d.writeln("</table>");Star.writeCopyrightString(w);d.writeln("<div>");d.writeln("<button title='Click to show statistics about your correct and incorrect guesses' style='display:none;float:left;' id='"+this.id+"_showFullStats'>Show Stats</button>");d.writeln("<button title='Hide the statistics' style='display:none;float:left;' id='"+this.id+"_hideFullStats'>Hide Stats</button>");d.writeln("<div style='display:block;float:right;text-align:right'><button id='"+this.id+"_restart'>Restart</button></div>");d.writeln("</div>");d.writeln("</div>");var me=this;$(function()
{$("#"+me.id+"_restart").click(function(evt)
{window.location.reload();});$("#"+me.id+"_puzzle").add("#"+me.id+"_solved").mousedown(function(evt)
{return me.onMouseDown(evt);});$("#"+me.id+"_showFullStats").click(function(evt)
{me.showFullStats();});$("#"+me.id+"_hideFullStats").click(function(evt)
{me.hideFullStats();});$("#"+this.id+"_puzzle").bind("selectstart",null,function(evt){evt.preventDefault();});me.startPuzzle();});},addToEffic:function(firstR,firstC,secondR,secondC,gotRight)
{var msg="no effect on score";var initialDenom=this.efficDenom;var initialNumer=this.efficNumer;if(this.numDistinctShown==this.numRows*this.numCols)
{this.efficDenom++;if(gotRight)
{this.efficNumer++;msg="good one!";}
else msg="bad one!";}
else if(this.beenShown[firstR][firstC])
{this.efficDenom++;if(gotRight)
{this.efficNumer++;msg="good two!";}
else msg="bad two!";}
else
{if(this.beenShown[secondR][secondC])
{this.efficDenom++;if(gotRight)
{this.efficNumer++;msg="good three!";}
else msg="bad three!";}
else
{var isMatchShown=false;for(var r=0;r<this.numRows;r++)
for(var c=0;c<this.numCols;c++)
if(this.grid[r][c]==this.grid[firstR][firstC]&&r!=firstR&&c!=firstC&&this.beenShown[r][c])
{isMatchShown=true;}
if(isMatchShown)
{if(!gotRight)
{this.efficDenom++;msg="should have picked the right answer!";}}}}
if(this.efficDenom==initialDenom)
{if(gotRight)
this.luckyGuesses++;else this.okayGuesses++;}
else if(this.efficNumer==initialNumer)
this.incorrectGuesses++;else this.correctGuesses++;$("#debugMessage").html(msg+"<br>Numer: "+this.efficNumer+" denom: "+this.efficDenom+" numDistinct: "+this.numDistinctShown).show();},getClueID:function(r,c)
{return this.id+"_"+r+"_"+c+"_image";},getQuestionID:function(r,c)
{return this.id+"_"+r+"_"+c+"_question";},getRowOrCol:function(id,getRow)
{for(var i=0;i<2;i++)
{var suffix=i==0?"_image":"_question";if(id&&id.lastIndexOf(suffix)==id.length-suffix.length)
{var arr=id.split("_");return arr[arr.length-(getRow?3:2)];}}
return-1;},startPuzzle:function()
{this.incorrectGuesses=this.luckyGuesses=this.correctGuesses=this.okayGuesses=0;$("#"+this.id+"_solved").css("display","none");this.closeCurrent();if(new Date().getTime()-this.pageStartDate>1000*60*10)
{window.location.reload();}
var imgContainerElem=$("#"+this.id+"_images");for(var r=0;r<this.numRows;r++)
{for(var c=0;c<this.numCols;c++)
{var elem=$("#"+this.getClueID(r,c));elem.attr("id",elem.attr("coreID"));imgContainerElem.append(elem);}}
var arr=new Array(),useFirst=new Array();for(var i=0;i<this.data.length;i++)
{arr[i]=i;useFirst[i]=0;}
shuffle(arr);var arrUse=new Array();for(var i=0;i<this.numRows*this.numCols/2;i++)
arrUse[i*2]=arrUse[i*2+1]=arr[i];shuffle(arrUse);this.imgLoader.reset();var index=0;var me=this;for(var r=0;r<this.numRows;r++)
{for(var c=0;c<this.numCols;c++)
{var whichData=this.grid[r][c]=arrUse[index++];var elem=$("#"+this.id+"_images_"+whichData+"_"+useFirst[whichData]);useFirst[whichData]++;this.beenShown[r][c]=false;elem.css("display","none");elem.attr("coreID",elem.attr("id"));elem.attr("id",this.getClueID(r,c));if(elem.attr("mysrc"))
{this.imgLoader.loadImage(elem,elem.attr("mysrc"));}
var qElem=$("#"+this.getQuestionID(r,c));qElem.css("display","block");qElem.parent().append(elem);}}
this.currentOpenID=this.currentSecondOpenID=null;if(this.timeoutID!=null)
window.clearTimeout(this.timeoutID);this.timeoutID=null;this.imgLoader.doneAddingLoadRequests();this.showPuzzleArea(this.imgLoader.isFinished());return true;},showPuzzleArea:function(showIt)
{$("#"+this.id+"_puzzle").css("display",showIt?'block':'none');this.imgLoader.hideOrShowImageLoadArea(!showIt);},imageLoadFailed:function()
{$("#"+this.id+"_restart").remove();},getEfficiencyWording:function()
{if(this.efficDenom==0)
return"Total Luck";else if(this.efficDenom==this.efficNumer)
return"Perfect";return Math.round(100*this.efficNumer/this.efficDenom)+"%";},allImagesLoaded:function()
{this.showPuzzleArea(true);},isSolved:function()
{return 2*(this.luckyGuesses+this.correctGuesses)==this.numRows*this.numCols;},onMouseDown:function(e)
{e.stopPropagation();e.preventDefault();if(this.isSolved())
{Star.hideStar(this.id);return;}
var elem=e.srcElement?e.srcElement:e.target;var r=this.getRowOrCol(elem.id,true);if(r==-1)
return true;var c=this.getRowOrCol(elem.id,false);var isClickOnOpen=this.currentOpenID==this.getClueID(r,c)||this.currentSecondOpenID==this.getClueID(r,c);if(isClickOnOpen&&(this.currentSecondOpenID==null||this.currentIsCorrect))
{return true;}
if(this.currentSecondOpenID!=null)
this.closeCurrent();this.toggleTile(r,c,false,true);if(!this.beenShown[r][c])
this.numDistinctShown++;if(this.currentOpenID==null)
{this.currentOpenID=this.getClueID(r,c);}
else
{var curR=this.getRowOrCol(this.currentOpenID,true);var curC=this.getRowOrCol(this.currentOpenID,false);this.currentIsCorrect=this.grid[curR][curC]==this.grid[r][c];this.addToEffic(curR,curC,r,c,this.currentIsCorrect);this.currentSecondOpenID=this.getClueID(r,c);if(this.isSolved())
{this.closeCurrent();this.puzzleSolved();}
else
{var me=this;this.timeoutID=window.setTimeout(function()
{me.closeCurrent();},1500);}}
return true;},puzzleSolved:function()
{Star.showStar(this.id,"Solved in "+(this.incorrectGuesses+this.okayGuesses+this.luckyGuesses+this.correctGuesses)+" moves<br>Efficiency: "+this.getEfficiencyWording());},hideFullStats:function()
{Star.hideStar(this.id);$("#"+this.id+"_statsWrapper").css("display","none");$("#"+this.id+"_showFullStats").css("display","block");$("#"+this.id+"_hideFullStats").css("display","none");},showFullStats:function()
{$("#"+this.id+"_solved").css("display","none");$("#"+this.id+"_stats").html("<div>Right: "+this.correctGuesses+"</div>"+"<div>Wrong: "+this.incorrectGuesses+"</div>"+"<div>Efficiency: "+this.getEfficiencyWording()+"</div>"+"<div style='font-style:italic;'>efficiency is <b>right / (right + wrong)</b></div>"+"<div style='margin-top:20px;'>Lucky: "+this.luckyGuesses+"</div>"+"<div style='font-style:italic;'>lucky guesses do not count toward efficiency</div>"+"<div style='margin-top:20px;'>Other guesses: "+this.okayGuesses+"</div>"+"<div style='font-style:italic;'>for guesses where you have never seen either one, and have not seen the match for the first revealed</div>");$("#"+this.id+"_statsWrapper").css("display","block").css("z-index","100000");$("#"+this.id+"_showFullStats").css("display","none");$("#"+this.id+"_hideFullStats").css("display","block");},closeCurrent:function()
{if(this.currentSecondOpenID)
{var r1=this.getRowOrCol(this.currentOpenID,true);var c1=this.getRowOrCol(this.currentOpenID,false);this.toggleTile(r1,c1,!this.currentIsCorrect,false);var r2=this.getRowOrCol(this.currentSecondOpenID,true);var c2=this.getRowOrCol(this.currentSecondOpenID,false);this.toggleTile(r2,c2,!this.currentIsCorrect,false);this.beenShown[r1][c1]=this.beenShown[r2][c2]=true;this.currentOpenID=this.currentSecondOpenID=null;}
if(this.timeoutID!=null)
{window.clearTimeout(this.timeoutID);this.timeoutID=null;}},isQuestionShown:function(r,c)
{return $("#"+this.getQuestionID(r,c)).css("display")!='none';},toggleTile:function(r,c,showQuestion,showClue)
{var clueElem=$("#"+this.getClueID(r,c));clueElem.css("display",showClue?'block':'none');clueElem.parent().parent().css("background-color",showClue?"white":"transparent");$("#"+this.getQuestionID(r,c)).css("display",showQuestion?'block':'none');}});
</script>

<script>
var m = new MemoryGame("mem", 4, 4, '00051/Background_400_400.jpg', 100, 100, new Array('00051\/Fairy.jpg', '00051\/Fajitas.jpg', '00051\/Falcon.jpg', '00051\/Falls.jpg', '00051\/Fan.jpg', '00051\/Fangs.jpg', '00051\/Faucet.jpg', '00051\/Feather.jpg', '00051\/Fence.jpg', '00051\/Fern.jpg', '00051\/FerrisWheel.jpg', '00051\/Fiddle.jpg', '00051\/Figs.jpg', '00051\/Fingerprint.jpg', '00051\/Fingers.jpg', '00051\/Fire.jpg', '00051\/Firefighter.jpg', '00051\/Firetruck.jpg', '00051\/Fireworks.jpg', '00051\/Fish.jpg', '00051\/Fisherman.jpg', '00051\/Fist.jpg', '00051\/Five.jpg', '00051\/Flag.jpg', '00051\/Flamingo.jpg', '00051\/Flashlight.jpg', '00051\/Flask.jpg', '00051\/Float.jpg', '00051\/FloppyDisk.jpg', '00051\/Flour.jpg', '00051\/Flower.jpg', '00051\/Flute.jpg', '00051\/Fly.jpg', '00051\/Foot.jpg', '00051\/Football.jpg', '00051\/Fork2.jpg', '00051\/Fort.jpg', '00051\/Fossil.jpg', '00051\/Fountain.jpg', '00051\/Fox.jpg', '00051\/Fraction.jpg', '00051\/France.jpg', '00051\/Frankenstein.jpg', '00051\/Franklin.jpg', '00051\/Frappe.jpg', '00051\/FredFlintstone.jpg', '00051\/FrenchFries.jpg', '00051\/FrenchHorn.jpg', '00051\/FrenchToast.jpg', '00051\/Frisbee.jpg', '00051\/Frog.jpg', '00051\/Fruitcake.jpg', '00051\/Funnel.jpg'));
m.render();
</script>
<div id="mem_container" style="width:400px;position:relative;">
<style type="text/css">
.asPuzzlesCopyrightString {
font-size: smaller;
}
.asPuzzlesStar {
vertical-align: middle;
text-align: center;
display: none;
background: url(http://allstarpuzzles.com/img/puzzle_solved_star.png);
z-index: 100;
position: absolute;
}
.asPuzzlesStar span {
font-size: 93%;
position: relative;
top: 84px;
left: 0;
height: 110px;
width: 210px;
}
.asCompletionMessage {
background-color: white;
vertical-align: middle;
text-align: center;
display: none;
z-index: 100;
position: absolute;
border: 1px solid black;
padding: 10px;
overflow: scroll;
}
.asCompletionMessage span {
font-size: 93%;
position: relative;
}
</style>
<div id="mem_loading" style="text-align: center; height: 400px; display: none;">
<div style="position:relative;width:66%;left:16%;top:133px;border:1px solid black;">
<div style="position: absolute; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(238, 238, 238);" id="mem_loadingBar"></div>
<div style="font-size:117%;padding:10px;z-index:10;" id="mem_loadingMsg">Loading Images ...<span id="mem_loadingPct">100%</span>
</div>
</div>
</div>
<div id="mem_statsWrapper" style="position:absolute;left:0;top:0;text-align:center;display:none;width:400px;height:400px;">
<div style="position:relative;width:80%;left:10%;background-color:#e7ecff;top:80px;border:1px solid black;">
<div style="text-align:left;font-size:smaller;padding:10px;" id="mem_stats"></div>
</div>
</div>
<div id="mem_solved" class="asPuzzlesStar" style="width: 210px; height: 210px; top: 95px; left: 95px; display: none;">
<span></span>
</div>

----------------------------------------------------------------------------------------------------------------------