var posx;
var posy;
var ox;
var oy;
var standaard1 = 100;
var standaard2 = 200;
var actievetag = 0;
var aantaltags = 0;
var blokje = 7;
var blokjeafstand = 10;
var border = 1;
var rekken = 0;
var verplaatsen = 0;
var links = [];
var rechts = [];
var boven = [];
var onder = [];
var tag = [];
var hoogte = 0;
var breedte = 0;
var h = 0;
var b = 0;
var lbox = 0;
var lboy = 0;
var lbox = 0;
var lboy = 0;
var lmox = 0;
var lmoy = 0;
var loox = 0;
var looy = 0;
var bmox = 0;
var bmoy = 0;
var omox = 0;
var omoy = 0;
var rbox = 0;
var rboy = 0;
var rmox = 0;
var rmoy = 0;
var roox = 0;
var rooy = 0;
var actieveO = '';
var fhoogte = 0;
var fbreedte = 0;
var taggegevens = [];
var tagextra =[];
var rx = 224;
var ry = 48;
var rekafstand = 0;
var tagging = 0;
var headerhoogte = 70;
var fotonummer = 0;
var tagpin = [];
var tagachternaam = [];
tagachternaam[0] = 'niets';
var tagextra = [];
var pad = location.href;



function getMouse(e){
var ev=(!e)?window.event:e;
if (ev.pageX){ posx=ev.pageX;posy=ev.pageY } else if(ev.clientX){ posx=ev.clientX;posy=ev.clientY } else { return false }
//document.getElementById('info1').innerHTML='X='+posx+' Y='+posy+ " rx = "+rx+" ry = "+ry ;
//document.getElementById('info2').innerHTML="links = "+(links[actievetag])+" , rechts = "+rechts[actievetag]+" , boven = "+(boven[actievetag])+" , onder = "+(onder[actievetag])+" , hoogte = "+hoogte+" , breedte = "+breedte ;

if ( rekken == 1 ){ berekenrekking();}
if ( verplaatsen == 1 ){ verplaats();}
}

function nieuwetag(fotonr){
if(document.getElementById( 'name' ).innerHTML != "guest"){
pad += "&fotonummer="+fotonr;
if ( tagachternaam[actievetag] ){
fhoogte = document.getElementById('photo1').offsetHeight - 10;
fbreedte = document.getElementById('photo1').offsetWidth - 20;
//document.getElementById('info3').innerHTML="fbreedte ="+fbreedte+" fhoogte = "+fhoogte;
aantaltags++;
actievetag = aantaltags;
//alert(actievetag);
tag[actievetag] = 'tag'+actievetag;
document.getElementById('photo').innerHTML+="<img id='"+tag[actievetag]+"' style='position: absolute; padding: 0px; top: 25px; left: 25px;' src='../images/leeg.gif' width=100% height=100% >";
document.getElementById('photo').innerHTML+="<div id='lbo"+actievetag+"' onmousedown ='JavaScript: verander(\"lbo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;' ><\/div>";
document.getElementById('photo').innerHTML+="<div id='lmo"+actievetag+"' onmousedown ='JavaScript: verander(\"lmo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;'><\/div>";
document.getElementById('photo').innerHTML+="<div id='loo"+actievetag+"' onmousedown ='JavaScript: verander(\"loo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;'><\/div>";
document.getElementById('photo').innerHTML+="<div id='rbo"+actievetag+"' onmousedown ='JavaScript: verander(\"rbo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;'><\/div>";
document.getElementById('photo').innerHTML+="<div id='rmo"+actievetag+"' onmousedown ='JavaScript: verander(\"rmo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;'><\/div>";
document.getElementById('photo').innerHTML+="<div id='roo"+actievetag+"' onmousedown ='JavaScript: verander(\"roo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;'><\/div>";
document.getElementById('photo').innerHTML+="<div id='bmo"+actievetag+"' onmousedown ='JavaScript: verander(\"bmo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;'><\/div>";
document.getElementById('photo').innerHTML+="<div id='omo"+actievetag+"' onmousedown ='JavaScript: verander(\"omo"+actievetag+"\")' style='position: absolute; background-color:#FFFFFF; width: "+blokje+"px; height: "+blokje+"px; top: -"+blokjeafstand+"px; left: -"+blokjeafstand+"px;'><\/div>";
tagopbouw();
}else{
document.getElementById('info3').innerHTML = "First enter a title for the present tag.";
gettaggegevens();
}
}else{alert("you have to be logged in to use this!");}
}

function tagopbouw(){
if (!rechts[actievetag]>0){rechts[actievetag] = standaard2;} 
if (!links[actievetag]>0){links[actievetag] = standaard1;} 
if (!boven[actievetag]>0){boven[actievetag] = standaard1;} 
if (!onder[actievetag]>0){onder[actievetag] = standaard2;} 
document.getElementById(tag[actievetag]).style.width = rechts[actievetag] - links[actievetag] + "px";
document.getElementById(tag[actievetag]).style.height = onder[actievetag] - boven[actievetag] + "px";
document.getElementById(tag[actievetag]).style.left = links[actievetag] + "px";
document.getElementById(tag[actievetag]).style.top = boven[actievetag] + "px";
document.getElementById(tag[actievetag]).style.border= border + "px solid white";
document.getElementById(tag[actievetag]).style.cursor= "move";
start();
}
function start(){
verplaatsen = 1;
verplaats();
document.getElementById(tag[actievetag]).onmousedown = stop;
}

function plaats(){  // tekent de hoofdtag en de aanwijsblokjes//hoofdtag
document.getElementById(tag[actievetag]).style.width = rechts[actievetag] - links[actievetag] + "px";
document.getElementById(tag[actievetag]).style.height = onder[actievetag] - boven[actievetag]+ "px";
document.getElementById(tag[actievetag]).style.left = links[actievetag] - border + "px";
document.getElementById(tag[actievetag]).style.top = boven[actievetag] - border + "px";

//lbo
document.getElementById('lbo' + actievetag).style.left = lbox + "px";
document.getElementById('lbo' + actievetag).style.top = lboy + "px";
//lmo
document.getElementById('lmo' + actievetag).style.left = lmox + "px";
document.getElementById('lmo' + actievetag).style.top = lmoy + "px"; 
//loo
document.getElementById('loo' + actievetag).style.left = loox + "px";
document.getElementById('loo' + actievetag).style.top = looy + "px";
//bmo
document.getElementById('bmo' + actievetag).style.left = bmox + "px";
document.getElementById('bmo' + actievetag).style.top = bmoy + "px";
//omo
document.getElementById('omo' + actievetag).style.left = omox + "px";
document.getElementById('omo' + actievetag).style.top = omoy + "px";
//rbo
document.getElementById('rbo' + actievetag).style.left = rbox + "px";
document.getElementById('rbo' + actievetag).style.top = rboy + "px"; 
//rmo
document.getElementById('rmo' + actievetag).style.left = rmox + "px";
document.getElementById('rmo' + actievetag).style.top = rmoy + "px";
//roo
document.getElementById('roo' + actievetag).style.left = roox + "px";
document.getElementById('roo' + actievetag).style.top = rooy + "px";  
}

function verplaats(){    //verplaatst de hoofd tag
hoogte = (onder[actievetag] - boven[actievetag]);   
breedte = (rechts[actievetag] - links[actievetag]);
h = hoogte / 2;
b = breedte / 2;

if (rekken == 0 && verplaatsen == 1){
links[actievetag] = posx - b; grenscontrole();  
rechts[actievetag]= links[actievetag] + breedte; grenscontrole();  
boven[actievetag] = posy - h - headerhoogte; grenscontrole(); 
onder[actievetag] = boven[actievetag] + hoogte; grenscontrole(); 
}

lbox = links[actievetag] - border - blokjeafstand;
lboy = boven[actievetag] - border - blokjeafstand;

lmox = lbox;
lmoy = boven[actievetag] + h - blokje/2;
loox = lbox;
looy = onder[actievetag] + border + blokjeafstand - blokje;
bmox = links[actievetag] + b - blokje/2;
bmoy = lboy;
omox = bmox;
omoy = looy;
rbox = rechts[actievetag] + border + blokjeafstand - blokje;
rboy = lboy;
rmox = rbox;
rmoy = lmoy;
roox = rbox;
rooy = looy;
plaats();
}

function grenscontrole(){
    if ( links[actievetag] <  rx  ){ 
      links[actievetag] = rx ; 
    } 
    if ( rechts[actievetag] > rx + fbreedte ){ 
      rechts[actievetag] = rx + fbreedte ; 
      links[actievetag] = rechts[actievetag] - breedte;
    }
    if ( boven[actievetag] < ry ){     //- headerhoogte
      boven[actievetag] = ry ;     // - headerhoogte
    }
    if ( onder[actievetag] > fhoogte + ry ){  // - headerhoogte
      onder[actievetag]  = fhoogte + ry ;    //- headerhoogte
      boven[actievetag] = onder[actievetag] - hoogte;
    }
    
    //if ( links[actievetag] > rechts[actievetag] - blokjeafstand - blokje ){ links[actievetag] = rechts[actievetag] - blokjeafstand - blokje; }
    if ( rechts[actievetag] < links[actievetag] + blokjeafstand ){ rechts[actievetag] = links[actievetag] + blokjeafstand; }
    //if ( boven[actievetag] > onder[actievetag] - blokjeafstand ){ boven[actievetag] = onder[actievetag] - blokjeafstand; }
    if ( onder[actievetag] < boven[actievetag] + blokjeafstand ){ onder[actievetag] = boven[actievetag] + blokjeafstand; }
}



function berekenrekking(){
if (actieveO =='omo'+actievetag){ onder[actievetag] = posy - border - blokjeafstand / 2 ; grenscontrole(); verplaats();}    //headerhoogte - 
if (actieveO =='bmo'+actievetag){ boven[actievetag] = posy + blokjeafstand / 2 + border; grenscontrole(); verplaats();}     // - headerhoogte 
if (actieveO =='lmo'+actievetag){ links[actievetag] = posx + blokjeafstand / 2 + border; grenscontrole(); verplaats();}
if (actieveO =='rmo'+actievetag){ rechts[actievetag] = posx - blokjeafstand / 2 - border; grenscontrole(); verplaats();}

if (actieveO =='roo'+actievetag){ onder[actievetag] = posy - headerhoogte - border - blokjeafstand / 2 ; rechts[actievetag] = posx - blokjeafstand / 2 - border; grenscontrole(); verplaats();}
if (actieveO =='loo'+actievetag){ onder[actievetag] = posy - headerhoogte - border - blokjeafstand / 2 ; links[actievetag] = posx + blokjeafstand / 2 + border; grenscontrole(); verplaats();}
if (actieveO =='rbo'+actievetag){ boven[actievetag] = posy - headerhoogte + blokjeafstand / 2 + border; rechts[actievetag] = posx - blokjeafstand / 2 - border; grenscontrole(); verplaats();}
if (actieveO =='lbo'+actievetag){ boven[actievetag] = posy - headerhoogte + blokjeafstand / 2 + border; links[actievetag] = posx + blokjeafstand / 2 + border; grenscontrole(); verplaats();}
}

function verander(divid){
rekken = 1;
actieveO = divid;

berekenrekking();
document.onmouseup = nieuwewaarden;
}

function nieuwewaarden(){
actieveO = '';
rekken = 0;
document.onmouseup = getMouse;
}

function stop(){
verplaatsen = 0;
document.getElementById(tag[actievetag]).onmousedown = start;
}

function gettaggegevens(){
if (actievetag > 0  ){

document.getElementById('info4').innerHTML = "<BR \/><TABLE><TR><TD>Title: <\/TD><TD><input type=text id='titel' value='' size=15> *<\/TD><TR><TD>EGD pin: <\/TD><TD><input onKeyUp = 'keuzelijst(\"pin\")' type=text id='pin' value='' size=15> * if you want a VIP-point this must be a valid number<\/TD><\/TR><TR><TD>first name: <\/TD><TD><input onKeyUp = 'keuzelijst(\"voornaam\")' type=text id='voornaam' value='' size=15> * search for EGD pin by typing first name here<\/TD><\/TR><TR><TD>middle name(s): <\/TD><TD><input onKeyUp = 'keuzelijst(\"tussenvoegsels\")' type=text id='tussenvoegsels' value='' size=15><\/TD><\/TR><TR><TD>last name: <\/TD><TD><input onKeyUp = 'keuzelijst(\"achternaam\")' type=text id='achternaam' value='' size=15> * search for EGD pin by typing last name here<\/TD><\/TR><TR><TD>grade: <\/TD><TD><input onKeyUp = 'keuzelijst(\"graad\")' type=text id='graad' value='' size=15><\/TD><\/TR><TR><TD>rating: <\/TD><TD><input onKeyUp = 'keuzelijst(\"rating\")' type=text id='rating' value='' size=15><\/TD><\/TR><TR><TD>land code: <\/TD><TD><input onKeyUp = 'keuzelijst(\"landcode\")' type=text id='landcode' value='' size=15><\/TD><\/TR><TR><TD>club: <\/TD><TD><input onKeyUp = 'keuzelijst(\"club\")' type=text id='club' value='' size=15><\/TD><\/TR><TR><TD>Extra: <\/TD><TD><input type=text id='extra' size=15><\/TD><\/TR><TR><TD><input type=button value='submit' onclick='verwerktaggegevens()'><\/TD><\/TR><\/TABLE>";
document.getElementById('achternaam').focus();

if ( tagachternaam[actievetag] ) {
document.getElementById('achternaam').value = tagachternaam[actievetag];
document.getElementById('id').value = tagextra[actievetag];
}

}else{ 
document.getElementById('info4').innerHTML = "You have to place the tag first.";
nieuwetag();
}
document.getElementById('achternaam').focus();
}

function keuzelijst(naam){
var zoekstr = document.getElementById(naam).value;
var knip =  pad.indexOf("index");
var spad = pad.slice( 0 , knip );
haalop( spad + "toonspelerslijst.php?" + naam + "=" + zoekstr , "keuze" );
}

function importeer(data){
data = data.split(",");
document.getElementById('pin').value = data[0];
document.getElementById('voornaam').value = data[1];
document.getElementById('tussenvoegsels').value = data[2];
document.getElementById('achternaam').value = data[3];
document.getElementById('graad').value = data[4];
document.getElementById('rating').value = data[5];
document.getElementById('landcode').value = data[6];
document.getElementById('club').value = data[7];
document.getElementById('keuze').innerHTML = '';
}

function verwerktaggegevens(){
if ( document.getElementById('achternaam').value.length > 0 && document.getElementById('achternaam').value != 'obligated' ) {
tagpin[actievetag] = document.getElementById('pin').value;
tagachternaam[actievetag] = document.getElementById('achternaam').value;
var titel = document.getElementById('titel').value; if (titel == "" ) { titel = document.getElementById('voornaam').value + " " + document.getElementById('tussenvoegsels').value + " " + document.getElementById('achternaam').value + " " + document.getElementById('graad').value}
tagextra[actievetag] = document.getElementById('extra').value;
document.getElementById('keuze').innerHTML = '';
document.getElementById('info4').innerHTML = '';
var lp = ((links[actievetag]) - rx) / (fbreedte / 100) * 100; lp = Math.round( lp ) / 100;
var rp = ((rechts[actievetag]) - rx) / (fbreedte / 100) * 100; rp = Math.round(rp)/100;
var bp = ((boven[actievetag]) - ry ) / (fhoogte / 100) * 100; bp = Math.round(bp)/100;
var op = ((onder[actievetag]) - ry ) / (fhoogte / 100) * 100; op = Math.round(op)/100;
//alert((boven[actievetag])-ry);
//document.getElementById('info2').innerHTML +="<BR>links = " + lp + "% rechts = " + rp + "% boven = " + bp + "% onder = " + op;
//alert("links = " + lp + "% rechts = " + rp + "% boven = " + bp + "% onder = " + op);
var mapnaambegin = pad.indexOf("picasafotomapnaam=") + 18 ;
var mapnaam =  pad.slice( mapnaambegin , -1 );
var knip =  mapnaam.indexOf("&");
var mpad = mapnaam.slice( 0 , knip );
var fotoid = foto[fotonummer];    //alert('test='+fotoid);
var tfotoSID = fotoSID[fotonummer]; //alert('test='+tfotoSID);
var sn = document.getElementById( 'name' ).innerHTML;

var adres = "slatagop.php?map=" + mpad + "&fotoid=" + fotoid + "&fotoSID=" + tfotoSID + "&pin=" + tagpin[actievetag] + "&titel=" + titel + "&achternaam=" + tagachternaam[actievetag] + "&links=" + lp +"&rechts=" + rp + "&boven=" + bp + "&onder=" + op + "&actievetag=" + actievetag + "&extra=" + tagextra[actievetag] + "&plaatser=" + sn +"&bewerker=-";
haalop(adres, "keuze");

}else{
document.getElementById('achternaam').value = 'obligated';
document.getElementById('achternaam').focus();
}
}

function toontags(){
  var tnr = 0;
  var tagdata = '';
  while ( tnr < aantaltags ){
    tnr++;
    tagdata += "<BR>links = "+links[tnr]+" rechts = "+rechts[tnr]+" boven = "+boven[tnr]+" onder = "+onder[tnr]+" achternaam = "+tagachternaam[tnr]+ " EGDpin = "+tagpin[tnr];
  }
  document.getElementById('info4').innerHTML = tagdata;
}

function maaktags(iet){
var svfv = 0;
iets = iet.split("|");
while( svfv < iets.length-1 ){

its = iets[svfv].split(",");
var tsvfv = 0;
while( tsvfv < its.length-1 ){

tsvfv++;
}
var src = "http://eurogotv.com/maaktagjpg.php?fotoid=http://"+its[0]+"&links="+its[1]+"&rechts="+its[2]+"&boven="+its[3]+"&onder="+its[4]+"&titel="+its[5]+"&pin="+its[6];

document.getElementById('info4').innerHTML += "<div id='"+its[5]+"'><BR><TABLE><TR><TD align=center><b>"+its[5]+"</b> <i>placed by "+its[7]+"</i></TD></TR><TR><TD><img src='"+src+"' border=0></TD></TR></TABLE></div>";
svfv++;
}
}

function hand(divid){
document.getElementById(divid).style.cursor = "pointer";
}