document.bgColor='#000000';

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;

resetflag=false;
helpflag=0;
quitflag=false;

score=0;
carry=0;

drag=-1;


total_items=20;

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(resetflag==true) {reset();return;}
if(helpflag==1) {showhelp();return;}
if(helpflag==2) {hidehelp();return;}
if(quitflag==true) {quit();return;}

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

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

offsetX=clickX-leftedge;
offsetY=clickY-topedge;
eval(doc_ref+mapbit+style_ref+'.zIndex=1000');
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(mapbit,window.event.x-offsetX+document.body.scrollLeft,window.event.y-offsetY+document.body.scrollTop);
}

function dragNS(e) {
moveLayer(mapbit,e.pageX-offsetX,e.pageY-offsetY);
}

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;
thisitem=drag;
drag=-1;
drop_check();
}
return false;
}

function start_dragIE() {
drag=click_check(window.event.x+document.body.scrollLeft,window.event.y+document.body.scrollTop);
}

function start_dragNS(e) {
drag=click_check(e.pageX,e.pageY);
if (drag>-1){
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;
thisitem=drag;
drag=-1;
drop_check();
}
return false;
}

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


function drop_check() {
eval(doc_ref+mapbit+style_ref+'.zIndex=20');

leftedge=parseInt(eval(doc_ref+mapbit+style_ref+'.left'));
topedge=parseInt(eval(doc_ref+mapbit+style_ref+'.top'));

xfixed=qpos[thisitem*2];yfixed=qpos[thisitem*2+1];

if((leftedge>(xfixed-52))&&(leftedge<(xfixed+6))&&(topedge>(yfixed-16))&&(topedge<(yfixed+16))) {

hideLayer(mapbit);
for(g=0;g<5;g++) {showLayer("textback"+thisitem+g);}

eval(doc_ref+mapbit+style_ref+'.zIndex=100');
hideLayer("query"+thisitem);
score++;
if(score==total_items) showLayer('welldone');
}
else moveLayer(mapbit,start_pos[thisitem*2],start_pos[thisitem*2+1]);
}



makelayer('map','visible',2,2,910,474,10);
w('<img src="images/count1.gif" width="910" height="474">');
endbit();

makelayer('welldone','hidden',188,132,165,100,1000);
w('<img src="images/welldone2.gif" width="165" height="100">');
endbit();

makelayer('help1','visible',4,224,65,43,40);
w('<a href="javascript:showhelp()" onMouseover="helpflag=1" onMouseout="helpflag=0"><img src="images/help1.gif" width="65" height="43" border="0"></a>');
endbit();

makelayer('help2','hidden',4,224,65,43,41);
w('<a href="javascript:hidehelp()" onMouseover="helpflag=2" onMouseout="helpflag=0"><img src="images/help2.gif" width="65" height="43" border="0"></a>');
endbit();

makelayer('reset1','visible',4,262,65,43,42);
w('<a href="javascript:reset()" onMouseover="resetflag=true" onMouseout="resetflag=false"><img src="images/reset1.gif" width="65" height="43" border="0"></a>');
endbit();

makelayer('reset2','hidden',4,262,65,43,43);
w('<img src="images/reset2.gif" width="65" height="43">');
endbit();

makelayer('quit1','visible',4,300,65,43,44);
w('<a href="javascript:quit()" onMouseover="quitflag=true" onMouseout="quitflag=false"><img src="images/quit1.gif" width="65" height="43" border="0"></a>');
endbit();

makelayer('quit2','hidden',4,300,65,43,45);
w('<img src="images/quit2.gif" width="65" height="43">');
endbit();


makelayer('helppage','hidden',120,60,400,220,5000);
w('<table border="1" cellpadding="6" cellspacing="0" bgcolor="#7ED3FF" width="400"><tr><td valign="top" align="center">');
w('<img src="images/blank.gif" WIDTH="10" HEIGHT="6">');

w('<table border="0" cellpadding="3" cellspacing="0" bgcolor="#7ED3FF"><tr><td colspan="2">');
w('<p id="helpstyle">Can you name the countries?<br>Drag the names to where they belong.<br>&nbsp; </td></tr><tr><td>');
w('<img src="images/reset1.gif" WIDTH="65" HEIGHT="43"></td><td><p id="helpstyle">This button lets you (or someone else) start again.');
w('</td></tr><tr><td><img src="images/quit1.gif" WIDTH="65" HEIGHT="43"></td><td><p id="helpstyle">Press this button to close the map window.');
w('</td></tr></table>');

w('<a href="javascript:hidehelp()" onMouseover="helpflag=2" onMouseout="helpflag=0"><img src="images/close.gif" width="47" height="21" border="0"></a>');

w('<br><img src="images/blank.gif" WIDTH="10" HEIGHT="6">');
w('</td></tr></table>');
endbit();


z=100;
zz=50;
for(i=0;i<total_items;i++) {
tpos[i*2]+=8;
e="yel";
if(i>6) e="pnk";
if(i>13) e="grn";


makelayer('labels'+i,'visible',start_pos[i*2],start_pos[i*2+1],iwidth,18,z);
w('<img src="'+folder+(i+1)+'.gif" name="lab'+i+'"  width="'+iwidth+'" height="18" border="0">');
endbit();

makelayer('query'+i,'visible',qpos[i*2],qpos[i*2+1],33,34,zz);
w('<img ID="q'+i+'" SRC="images/q'+e+'.gif" width="33" height="34" border="0">');
endbit();

for(g=0;g<4;g++) {
tx=-1;if((g==1)||(g==3))tx=1;
ty=-1;if(g>1)ty=1;
makelayer('textback'+i+g,'hidden',tpos[i*2]+tx,tpos[i*2+1]+ty,40,20,20);
w('<span class="white">'+names[i]+'</span>');
endbit();
}
makelayer('textback'+i+'4','hidden',tpos[i*2],tpos[i*2+1],40,20,50);
w('<span class="black">'+names[i]+'</span>');
endbit();
z+=10;
zz++;
}


//-------------------------


function showhelp() {
showLayer("help2");
showLayer("helppage");
}

function hidehelp() {
hideLayer("help2");
hideLayer("helppage");
}

function quit() {
showLayer("quit2");
setTimeout("quitnext()", 400);
}

function quitnext() {
window.close();
hideLayer("quit2");
}

function reset() {
showLayer("reset2");
setTimeout("resetnext()", 400);
}

function resetnext() {
score=0;
hideLayer('welldone')
for(i=0;i<total_items;i++) {
showLayer("query"+i);
showLayer("labels"+i);
moveLayer("labels"+i,start_pos[i*2],start_pos[i*2+1]);
for(g=0;g<5;g++) {hideLayer("textback"+i+g);}
}
hideLayer("reset2");
}

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

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>');
}