total_items=10;
orgx=28;orgy=438;
finished=0;
checkflag=0;
helpflag=1;
docheckflag=false;
dohelpflag=false;
quitflag=false;
closeflag=false;
yesnoflag=0;


app="I";
if(navigator.appName=="Netscape") app="N";
if(app=="N" && parseInt(navigator.appVersion)>4) app="N6";
mac=1;if(navigator.appVersion.indexOf("Macintosh")==-1) mac=0;

if (app=="N")  {
doc_ref='document.layers["';
style_ref='"]';
}
else {
if (app=="N6") {
doc_ref='document.getElementById("';
style_ref='").style';
}
else {
doc_ref='document.all["';
style_ref='"].style';
}
}

function hideLayer(layerName){eval(doc_ref+layerName+style_ref+'.visibility="hidden"');}
function showLayer(layerName){eval(doc_ref+layerName+style_ref+'.visibility="visible"');}

function moveLayer(layerName,left,top){
eval(doc_ref+layerName+style_ref+'.top=top');
eval(doc_ref+layerName+style_ref+'.left=left');
return false;
}

// *****************


function click_check(clickX,clickY) {
if(app=="N") {
if(docheckflag==true) {manual_check();return;}
if(dohelpflag==true) {help();return;}
if(quitflag==true) {quit();return;}
if(closeflag==true) {close_speech();return;}
if(yesnoflag==1) {noquit();return;}
if(yesnoflag==2) {yesquit();return;}
}

// *** large symbol ***
for(i=0;i<total_items;i++){
mapbit='symbol'+i;
leftedge=parseInt(eval(doc_ref+mapbit+style_ref+'.left'));
topedge=parseInt(eval(doc_ref+mapbit+style_ref+'.top'));

if(clickX>leftedge && clickX<(leftedge+51) && clickY>topedge && clickY<(topedge+29)) {

offsetX=clickX-leftedge;
offsetY=clickY-topedge;
eval(doc_ref+mapbit+style_ref+'.zIndex=1000');
return i;
}
}

// *** small symbol ***
for(i=0;i<total_items;i++){
mapbit='smallsymbol'+i;
leftedge=parseInt(eval(doc_ref+mapbit+style_ref+'.left'));
topedge=parseInt(eval(doc_ref+mapbit+style_ref+'.top'));

if(clickX>leftedge && clickX<(leftedge+14) && clickY>topedge && clickY<(topedge+14)) {

offsetX=clickX-leftedge;
offsetY=clickY-topedge;
eval(doc_ref+mapbit+style_ref+'.zIndex=1000');
moveLayer(mapbit,-100,0);
return i;
}
}


return (-1);
}

if (app=="I") {
document.ondragstart = drag_initIE;
document.onmousedown = start_dragIE;
document.onmousemove = dragIE;
document.onmouseup = end_dragIE;
}

if (app=="N") {
document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
document.onmousedown=start_dragNS;
document.onmouseup=end_dragNS;
}

if (app=="N6") {
window.onmousedown=start_dragNS;
window.onmouseup=end_dragNS;
}

function drag_initIE() {
event.returnValue=false;
}

function dragIE() {
if(drag>-1) {
moveLayer("carry_symbol",window.event.x,window.event.y);
lx=window.event.x;ly=window.event.y+14;
coords();
}
}

function dragNS(e) {
moveLayer("carry_symbol",e.pageX,e.pageY);
lx=e.pageX;ly=e.pageY+14;
coords();
}

function start_dragIE() {
drag=click_check(window.event.x,window.event.y);
if(drag>-1) {
str='<img src="symbig/'+syms[drag]+'.gif" width="51" height="29">';
write_to_layer("carry_symbol");
}
}

function start_dragNS(e) {
drag=click_check(e.pageX,e.pageY);
if (drag>-1){
str='<img src="symbig/'+syms[drag]+'.gif" width="51" height="29">';
write_to_layer("carry_symbol");

if (app=="N") {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=dragNS;
}
else window.onmousemove=dragNS;
oldX=e.pageX;
oldY=e.pageY;
return false;
}
return false;
}

function end_dragNS(e) {
if (app=="N") {
document.onmousemove=0; 
document.releaseEvents(Event.MOUSEMOVE);
}
else window.onmousemove=0;
if(drag>-1) {
dragpointX=e.pageX;
dragpointY=e.pageY;
this_symbol=drag;
drag=-1;
drop_check();
}
return false;
}

function end_dragIE() {
if(drag>-1) {
dragpointX=window.event.x;
dragpointY=window.event.y;
this_symbol=drag;
drag=-1
drop_check();
}
}


function drop_check() {
symstatus[this_symbol]=1;
symplaced[this_symbol*2]=mx;symplaced[this_symbol*2+1]=mmy;
moveLayer("carry_symbol",-100,-100);
moveLayer("smallsymbol"+this_symbol,lx-(symdims[symorder[this_symbol]*2]/2),ly-14-(symdims[symorder[this_symbol]*2+1]/2));
eval('document.im'+this_symbol+'.src="symgrey/'+syms[this_symbol]+'.gif"');
auto_check();
}




// *****************


function coords() {
if((lx>=orgx)&&(lx<588)&&(ly<=orgy)&&(ly>=38)) {
mmx=gridx+Math.round((lx-orgx)/8);
mmy=gridy+Math.round((orgy-ly)/8);
if(mmx<100) mx="0"+mmx;
else mx=mmx;
if(mmy<100) my="0"+mmy;
else my=mmy;
dx=(mmx-gridx)*8+orgx;
dy=ybit-(mmy*8);
str='<span class="coordstyle">'+mx+my+'</span>';
write_to_layer("coords");
}
}

// *** DATA ***


symdims=new Array(13,13,5,9,11,11,11,11,6,5,9,13,8,8,14,9,10,11,11,8,14,14,13,10,11,11,11,8,6,9,9,11,24,12,7,11);
symstatus=new Array(9);
symplaced=new Array(19);

// *** LAYERS ***


makelayer('quitmessage','visible',-500,-500,140,100,2000);
w('<table border="1" cellpadding="6" cellspacing="0" bgcolor="#C8E7A8"><tr><td align="center"><p id="quitstyle">Are you sure you want to quit?<br>&nbsp;<br>');
w('<a href="javascript:noquit()" onmouseover="yesnoflag=1" onmouseout="yesnoflag=0"><img src="images/no.gif" width="24" height="20" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:yesquit()" onmouseover="yesnoflag=2" onmouseout="yesnoflag=0"><img src="images/yes.gif" width="24" height="20" border="0"></a>');
w('</td></tr></table>');
endbit();


makelayer('map','visible',0,0,609,440,100);
w('<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF"><tr><td>');
w('<img src="images/'+mappic+'.gif" width="599" height="430" border="0"></td></tr></table>');
endbit();

makelayer('title','visible',638,10,109,30,120);
w('<img src="images/stitle.gif" width="109" height="30">');
endbit();

makelayer('helpbut','visible',624,424,54,24,300);

w('<a href="javascript:help()" onmouseover="hlpbut.src=\'images/help2.gif\';dohelpflag=true" onmouseout="hlpbut.src=\'images/help1.gif\';dohelpflag=false"><img name="hlpbut" src="images/help1.gif" width="54" height="24" border="0"></a>');
endbit();

makelayer('quitbut','visible',704,424,54,24,300);
w('<a href="javascript:quit()" onmouseover="kwitbut.src=\'images/quit2.gif\';quitflag=true" onmouseout="kwitbut.src=\'images/quit1.gif\';quitflag=false"><img name="kwitbut" src="images/quit1.gif" width="54" height="24" border="0"></a>');
endbit();


makelayer('checkbut','visible',618,256,54,24,300);
w('<a href="javascript:manual_check()" onmouseover="chckbut.src=\'images/check2.gif\';docheckflag=true" onmouseout="chckbut.src=\'images/check1.gif\';docheckflag=false"><img name="chckbut" src="images/check1.gif" width="54" height="24" border="0"></a>');
endbit();

if(mac==0) makelayer('coords','visible',38,27,50,50,120);
else makelayer('coords','visible',46,30,50,50,120);
w('<span class="coordstyle">000000</span>');
endbit();

makelayer('dragon','visible',630,210,128,205,210);
w('<img src="images/dragonb.gif" width="128" height="205">');
endbit();

makelayer('balloon','visible',512,158,154,93,220);
w('<img src="images/speech.gif" width="154" height="93">');
endbit();

abit='<br><a href="javascript:close_speech()"onmouseover="closeflag=true" onmouseout="closeflag=false"><font color="#FF0000">ok</font></a>';
makelayer('speech','visible',533,174,112,82,230);
w('<p id="dragonstyle" align="center">Can you put the symbols on the map?'+abit);
endbit();

makelayer('badge','hidden',608,52,167,167,180);
w('<img src="images/badge.gif" width="167" height="167">');
endbit();

for(i=0;i<total_items;i++) {
symstatus[i]=0;

makelayer('cell'+i,'visible',10+i*60,450,53,45,20);
w('<img src="images/cell.gif" width="53" height="45" border="0">');
endbit();

makelayer('symbol'+i,'visible',11+i*60,458,51,29,200);
w('<img name="im'+i+'" src="symbig/'+syms[i]+'.gif" width="51" height="29" border="0">');
endbit();

makelayer('smallsymbol'+i,'visible',-20,0,symdims[symorder[i]*2],symdims[symorder[i]*2+1],110);
w('<a href="javascript:move_sym('+i+')"><img src="symsmall/'+syms[i]+'.gif" width="'+symdims[symorder[i]*2]+'" height="'+symdims[symorder[i]*2+1]+'" border="0"></a>');
endbit();
}


makelayer('carry_symbol','visible',-100,-100,51,29,300);
endbit();

makelayer('list','visible',612,50,164,200,200);
w('<table border="1" cellpadding="4" cellspacing="0" bgcolor="#C8E7A8"><tr><td>');
w('<table border="0" cellpadding="0" cellspacing="0"><tr><td><p id="liststyle">'+list1);
w('</td><td>&nbsp; </td><td><p id="liststyle">'+list2+'</td></tr></table></td></tr></table>');
endbit();


hbit1='<table border="1" cellpadding="0" cellspacing="0" width="250"><tr><td><table border="0" cellpadding="6" cellspacing="0" width="250" bgcolor="#FF0000"><tr><td width="40">';
hbit2='</td><td width="170"><p id="helptitle" align="center">Step ';
hbit3='</td></tr><tr><td colspan="3" width="250" bgcolor="#FFFF00"><p id="helpstyle">'; 

makelayer('help1','hidden',356,50,260,100,2000);
w(hbit1+'&nbsp; ');
w(hbit2+'1</td><td align="right" width="40"><img src="images/arrowr.gif" width="16" height="19">'+hbit3);
w('Look at the coordinates list which shows where the symbols need to be positioned.');
helpbit(1);

makelayer('help2','hidden',220,256,260,130,2000);
w(hbit1+'<img src="images/arrowd.gif" width="19" height="16">');
w(hbit2+'2</td><td width="40">&nbsp; '+hbit3);
w('Choose one of the symbols. Click on it to pick it up.<br>Move the symbol onto the map and use the grid to get as close as possible to the coordinates shown in the list.');
helpbit(2);

makelayer('help3','hidden',44,50,260,120,2000);
w(hbit1+'<img src="images/arrowu.gif" width="19" height="16">');
w(hbit2+'3</td><td width="40">&nbsp; '+hbit3);
w('The coordinates display shows you exactly where you are on the map. Move the symbol slowly to its precise location and then click to drop it on the map.');
helpbit(3);

makelayer('help4','hidden',360,250,260,130,2000);
w(hbit1+'&nbsp; ');
w(hbit2+'4</td><td align="right" width="40"><img src="images/arrowr.gif" width="16" height="19">'+hbit3);
w('At any time you can press the <img src="images/check1.gif" width="54" height="24" align="absmiddle"> button to see how well you are doing. Symbols which are in the wrong place will be removed.');
helpbit(4);



function helpbit(hp) {
w('</p><p align="center"><a href="javascript:help()" onmouseover="hbut'+hp+'.src=\'images/ok2.gif\';dohelpflag=true" onmouseout="hbut'+hp+'.src=\'images/ok1.gif\';dohelpflag=false">');
w('<img name="hbut'+hp+'" src="images/ok1.gif" width="54" height="25" border="0"></a></td></tr></table></td></tr></table>');
endbit();
}
// *** HELP ***

function help() {
if(helpflag<5) showLayer("help"+helpflag);
if(helpflag>1) hideLayer("help"+(helpflag-1));
helpflag++;
if(helpflag==6) helpflag=1;
}


// *** AUTO CHECK ***

function auto_check() {
score=0;
for(i=0;i<10;i++) {
if((symstatus[i]==1)&&(symplaced[i*2]==symxy[i*2])&&(symplaced[i*2+1]==symxy[i*2+1])) score++;
}
if(score<10) return;
finished=1;
badgex=608;
message('Well done.You\'ve completed the map.',0)
write_to_layer("speech");
showLayer("badge");
move_badge();
}

function move_badge() {
moveLayer("badge",badgex,52);
badgex-=10;
if(badgex>210) setTimeout('move_badge()',40);
}

function close_speech(){
hideLayer("balloon");hideLayer("speech");
checkflag=0;
}


//**** QUIT ****

function quit() {
moveLayer("quitmessage",630,320);
}

function noquit(){
moveLayer("quitmessage",-500,-500);
}

function yesquit(){
moveLayer("quitmessage",-500,-500);
history.back();
}



// *** MANUAL CHECK ***

function manual_check() {
if(checkflag==1) {close_speech();return;}
checkflag=1;
score=0;
wrong=0;
for(i=0;i<10;i++) {
if(symstatus[i]==1) {
if((symplaced[i*2]==symxy[i*2])&&(symplaced[i*2+1]==symxy[i*2+1])) score++;
else {
symstatus[i]=0;
moveLayer("smallsymbol"+i,-20,0);
eval('document.im'+i+'.src="symbig/'+syms[i]+'.gif"');
wrong++;
}
}
}
if(wrong>0) {
zz=" was";if(wrong>1) zz="s were"; 
message(wrong+" symbol"+zz+" at the wrong coordinates.",1)
}
else if(score==0) message("There are no symbols on the map.",1)
else {
zz=" is";if(score>1) zz="s are";
message(score+" symbol"+zz+" at the right coordinates.",1)
}
}

function message(bit,ok) {
str='<p id="dragonstyle" align="center">'+bit;
if(ok==1) str+=abit;
write_to_layer("speech");
showLayer("balloon");showLayer("speech");
}

// *** GET SYMBOL ***

function get_symb(sm) {
if(symstatus[sm]==1) return;
this_symbol=sm;
str='<img src="symbig/'+syms[sm]+'.gif" width="51" height="29">';
write_to_layer("carry_symbol");
moveLayer("carry_symbol",lx,ly);
showLayer("carry_symbol");
}


function move_sym(sm) {
if(finished==1) return;
this_symbol=sm;
moveLayer("smallsymbol"+sm,-20,0);
str='<img src="symbig/'+syms[sm]+'.gif" width="51" height="29">';
write_to_layer("carry_symbol");
moveLayer("carry_symbol",lx,ly);
showLayer("carry_symbol");
}


// *****************

function write_to_layer(layer) {
if (app=="N") {with (document.layers[layer].document) {open();write(str);close();}}
else
if (app=="N6") {
eval(doc_ref+layer+'").innerHTML=str');
}
else document.all[layer].innerHTML=str;
}

function makelayer(name,vis,left,top,width,height,z) {
if(app=="N") w('<layer id="'+name+'" position=absolute visibility='+vis+' left='+left+' top='+top+' width='+width+' height='+height+' z-index='+z+';>');
else w('<div id="'+name+'" STYLE="position:absolute;visibility:'+vis+';left:'+left+';top:'+top+';width:'+width+';height:'+height+';z-index:'+z+';">');
}

function w(cont) {
document.write(cont);
}

function endbit() {
if (app=="N") w('</layer>');
else w('</div>');
}