// TODO: Aufräumen!
// Möglichst das Abrufen der Bilder in einer einzelnen Funktion,
// Schwierigkeiten bereitet lediglich der Titel, der übersetzt werden können muss
// und das sollte vom Server aus geschehen, also auch per AJAX-Aufruf.
// Eventuell wird Block 0 abgefragt, und dabei der Titel mit übergeben?
// upanker sollte richtig gesetzt werden und muss deshalb wohl von Javascript
// kommen, da PHP nicht auf #-Anker zugreifen kann.


// Code zur Bild-Suche über Ajax
// (c) Februar 2007 Steffen Bock


var searchContainer = new SearchContainer();

function SearchContainer() {
  var me = this;
}

SearchContainer.G = {
  mapLatMin:0,
  mapLatMax:0,
  mapLngMin:0,
  mapLngMax:0,
  initialLatMin:0,
  initialLatMax:0,
  initialLngMin:0,
  initialLngMax:0,
  ajaxSearcher:null,
  UpdateMarkers:null,
  onHideMarkerPictures:null,
  LastRetrievalNumber:0,
  ImageSize:"tiny",
  CurrentBlock:1,
  LastBlock:0,
  PrefixH2:"<img src=\"/img/trans1x1.gif\" style=\"width:200px;height:1px;border:0px;margin:0px;padding:0px;\" alt=\"\"/><br/>"
};

/*
To Use:
var pos = acl.getElementPosition(element);
var left = pos.left;
var top = pos.top;
*/
function sbtools_getElementPosition(eElement) {
  var nLeftPos = eElement.offsetLeft;          // initialize var to store calculations
  var nTopPos = eElement.offsetTop;            // initialize var to store calculations
  var eParElement = eElement.offsetParent;     // identify first offset parent element
  while (eParElement != null ) {                // move up through element hierarchy
    nLeftPos += eParElement.offsetLeft;      // appending left offset of each parent
    nTopPos += eParElement.offsetTop;
    eParElement = eParElement.offsetParent;  // until no more offset parents exist
  }
  return {left:nLeftPos, top:nTopPos};
};

// Entfernt die Grossansicht des Bildes
function CloseLargePictureView() {
  var DisplayDIV = document.getElementById("PictureLargeView");
  var PictureIFrame = document.getElementById("LargeViewIFrame");
  PictureIFrame.src = "";
  DisplayDIV.style.display='none';
}

function ShowImage() {
  var SearchForm = document.getElementById("FormSearchPictures");
  var DisplayDIV = document.getElementById("PictureLargeView");
  var PictureIFrame = document.getElementById("LargeViewIFrame");
  var pos = sbtools_getElementPosition(SearchForm);
  DisplayDIV.style.display = 'inline';
  DisplayDIV.style.left = pos.left+"px";
  DisplayDIV.style.top = pos.top+"px";
  DisplayDIV.style.width  = Math.max(SearchForm.clientWidth, 550)+"px";
  DisplayDIV.style.height = SearchForm.clientHeight+"px";
  PictureIFrame.style.width = Math.max(SearchForm.clientWidth-2,548)+"px";
  PictureIFrame.style.height = (SearchForm.clientHeight-22)+"px";
  PictureIFrame.style.left = '0px';
//  PictureIFrame.style.top = '22px';
//  PictureIFrame.style.right = '0px';
//  PictureIFrame.style.bottom = '0px';
}

// Liefert das Zoom-Image entsprechend aktueller Einstellung von ImageSize.
function GetZoomImage() {
  var test = "";
  if ((SearchContainer.G.CurrentBlock==1) || (SearchContainer.G.LastBlock==0)) {
    test+= "<img align=\"top\" src=\"img/first-disabled.gif\" width=\"17\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\">";
    test+= "<img align=\"top\" src=\"img/previous-disabled.gif\" width=\"13\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\">";
  } else {
    test+= "<a href=\"javascript:RetrievePictures(1)\"><img align=\"top\" src=\"img/first.gif\" width=\"17\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\"></a>";
    test+= "<a href=\"javascript:RetrievePictures("+(SearchContainer.G.CurrentBlock-1)+")\"><img align=\"top\" src=\"img/previous.gif\" width=\"13\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\"></a>";
  }
  if (SearchContainer.G.LastBlock==0) {
    test+= "&nbsp;0/0&nbsp;";
  } else {
    test+= "&nbsp;"+SearchContainer.G.CurrentBlock+"/"+SearchContainer.G.LastBlock+"&nbsp;";
  }
  if ((SearchContainer.G.LastBlock==0) || (SearchContainer.G.CurrentBlock==SearchContainer.G.LastBlock)) {
    test+= "<img align=\"top\" src=\"img/next-disabled.gif\" width=\"13\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\">";
    test+= "<img align=\"top\" id=\"last\" src=\"img/last-disabled.gif\" width=\"17\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\">";
  } else {
    test+= "<a href=\"javascript:RetrievePictures("+(SearchContainer.G.CurrentBlock+1)+")\"><img align=\"top\" src=\"img/next.gif\" width=\"13\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\"></a>";
    test+= "<a href=\"javascript:RetrievePictures("+SearchContainer.G.LastBlock+")\"><img align=\"top\" id=\"last\" src=\"img/last.gif\" width=\"17\" height=\"17\" style=\"border:0px;margin-left:3px;margin-right:3px;\"></a>";
  }
  test+= "&nbsp;&nbsp;";
  //  test = "";
  if (SearchContainer.G.ImageSize=="small") {
    test+="<a href=\"javascript:ChangeImageSize()\"><img id=\"img_ImageSize\" src=\"img/zoom_out.gif\" width=\"16\" height=\"16\" style=\"border:0px;\" alt=\"Change Image Size\" title=\"Change Image Size\" align=\"top\"/></a>";
  } else {
    test+="<a href=\"javascript:ChangeImageSize()\"><img id=\"img_ImageSize\" src=\"img/zoom_in.gif\" width=\"16\" height=\"16\" style=\"border:0px;\" alt=\"Change Image Size\" title=\"Change Image Size\" align=\"top\"/></a>";
  }
  return test;
}

// Setzt das globale ImageSize und lädt die Bilder erneut (in geänderter Größe)
// herunter
function ChangeImageSize() {
  var img = document.getElementById("img_ImageSize");
  if (SearchContainer.G.ImageSize=="tiny") {
    SearchContainer.G.ImageSize="small";
    img.src="img/zoom_out.gif";
  } else {
    SearchContainer.G.ImageSize="tiny";
    img.src="img/zoom_in.gif";
  }
  var ResultDIV = document.getElementById('ResultPictures');
  var ResultH2 = document.getElementById('ResultTitle');
  if (ResultH2.ListId && (ResultH2.RetrievalNumber==SearchContainer.G.LastRetrievalNumber)) {
    ResultDIV.innerHTML = "";
    ResultDIV.ListId = 0;
    SearchContainer.G.LastRetrievalNumber++;
    ResultH2.RetrievalNumber = SearchContainer.G.LastRetrievalNumber;
    RetrievePictures(1);
  }
}

// Analysiert den Anker und füllt die Controls mit den dort
// übergebenen Werten.
// Das ViewRect der Maps wird zunächst in SearchContainer.G
// festgehalten.
function UpdateFormDataFromAnker(defaultLatMin,defaultLatMax,defaultLngMin,defaultLngMax) {
  window.name="EUCC-CoastalPictures";
  var anker = window.location.hash.substring(1);
  var values = anker.split("&");
  var data = [];
  for (i=0;i<values.length;i++) {
    var parts = values[i].split("=");
    if (parts[0]=="kw") {
      var kws = parts[1].split(",");
      for (j=0;j<kws.length;j++) {
        data["kw"+(j+1)]=kws[j];
      }
    } else {
      data[parts[0]] = parts[1];
    }
  }
  var oSearch = document.getElementById('search');
  var oKW1 = document.getElementById('kw1');
  var oKW2 = document.getElementById('kw2');
  var oKW3 = document.getElementById('kw3');
  var oKW4 = document.getElementById('kw4');
  var oResolution = document.getElementById('resolution');
  var oAreaCheck = document.getElementById('areafilter');
  if (data["search"]!=null) {
    oSearch.value = data["search"];
  }
  oKW1.value = (data["kw1"]>0) ? data["kw1"] : 0;
  oKW2.value = (data["kw2"]>0) ? data["kw2"] : 0;
  oKW3.value = (data["kw3"]>0) ? data["kw3"] : 0;
  oKW4.value = (data["kw4"]>0) ? data["kw4"] : 0;
  oResolution.value = (data['resolution']>0) ? data['resolution'] : 0;
  oAreaCheck.checked = (data["useMap"]==1);
  if (data["latmin"]==null) {
    data["latmin"] = defaultLatMin;
    data["latmax"] = defaultLatMax;
    data["lngmin"] = defaultLngMin;
    data["lngmax"] = defaultLngMax;
  }
  SearchContainer.G.initialLatMin = data["latmin"];
  SearchContainer.G.initialLatMax = data["latmax"];
  SearchContainer.G.initialLngMin = data["lngmin"];
  SearchContainer.G.initialLngMax = data["lngmax"];
}

// Ermittelt aus den Input-Elementen die aktuellen Searchparameter,
// setzt den Anker entsprechend und liefert den Query-String zurück
function GetSearchParameter() {
  var oSearch = document.getElementById('search');
  var searchstring = oSearch.value;
  var keywords = [];
  var oKW1 = document.getElementById('kw1');
  var oKW2 = document.getElementById('kw2');
  var oKW3 = document.getElementById('kw3');
  var oKW4 = document.getElementById('kw4');
  if (oKW1.value>0) {
    keywords.push(oKW1.value);
  }
  if (oKW2.value>0) {
    keywords.push(oKW2.value);
  }
  if (oKW3.value>0) {
    keywords.push(oKW3.value);
  }
  if (oKW4.value>0) {
    keywords.push(oKW4.value);
  }
  var oAreaCheck = document.getElementById('areafilter');
  var useMap = (oAreaCheck.checked) ? 1 : 0;
  var parameter = [];
  if (searchstring.length>0) {
    parameter.push("search="+searchstring);
  }
  var oResolution = document.getElementById('resolution');
  if (oResolution.value>0) {
    parameter.push("resolution="+oResolution.value);
  }
  if (keywords.length>0) {
    parameter.push("kw="+keywords);
  }
  parameter.push("useMap="+useMap);
  parameter.push("latmin="+SearchContainer.G.mapLatMin);
  parameter.push("latmax="+SearchContainer.G.mapLatMax);
  parameter.push("lngmin="+SearchContainer.G.mapLngMin);
  parameter.push("lngmax="+SearchContainer.G.mapLngMax);
  var result = parameter.join("&");
  window.location.hash = result;
  return result;
}

// Suche mit Kartenausschnitt bzw. ohne, falls latmin=latmax oder lonmin=lonmax
function UpdateSearchResults(newmarker) {
  var parameter = GetSearchParameter();
  if (newmarker && (SearchContainer.G.UpdateMarkers!=null)) {
    // Map informieren, dass neue Icons geladen werden müssen
    SearchContainer.G.UpdateMarkers(parameter);
  }
  var myAjax = SearchContainer.G.ajaxSearcher;
  if (myAjax!=null) {
    myAjax.Abort();
  }
  SearchContainer.G.LastRetrievalNumber++;
  myAjax = new Ajax();
  SearchContainer.G.ajaxSearcher = myAjax;
  myAjax.url="ajaxGetImageIDs.php";
  myAjax.onSuccess = function(txt) {
    try {
      // Suche abgeschlossen: Daten in ResultH2 übernehmen, anschließend
      // die Bilder abrufen.
      // Bilder-DIV löschen
      var ResultDIV = document.getElementById('ResultPictures');
      var ResultH2 =  document.getElementById('ResultTitle');
      result = eval("("+txt+")");
      ResultH2.innerHTML = SearchContainer.G.PrefixH2+result['title'];
      ResultH2.UpAnker = result['upanker'];
      ResultH2.ListId = result['listid'];
      ResultH2.RetrievalNumber = result['LastRetrievalNumber'];
      if (ResultDIV.ListId!=ResultH2.ListId) {
        ResultDIV.ListId = 0;
        ResultDIV.innerHTML = "";
        RetrievePictures(1);
      }
    } catch(e) {
      myAjax.onError(e.name+": "+e.message);
      return null;
    }
  }
  myAjax.params = parameter+"&LastRetrievalNumber="+SearchContainer.G.LastRetrievalNumber+"&upanker="+
  encodeBase64(parameter);
  myAjax.doRequest();
}

// Funktion zum Abrufen von Bildern per AJAX für ResultDIV.
// Wird mehrfach aufgerufen, es wird immer nur ein Block von Bildern
// geladen.
function RetrievePictures(block) {
  var ResultH2 = document.getElementById('ResultTitle');
  var ResultDIV = document.getElementById('ResultPictures');
// würde funktionieren, macht aber wenig Sinn:
//  window.onresize=function() {
//    RetrievePictures(SearchContainer.G.CurrentBlock);
//  }
  if (ResultH2.RetrievalNumber && (ResultH2.RetrievalNumber==SearchContainer.G.LastRetrievalNumber)) {
    var ResultControls = document.getElementById('ResultControls');
    var ResultControlsContainer = document.getElementById('ResultControlsContainer');
    var myRetrieveAjax = new Ajax();
    myRetrieveAjax.url = "ajaxGetImageIDs.php";
    myRetrieveAjax.onSuccess = function(txt) {
      try {
        //        var ResultDIV = document.getElementById('ResultPictures');
        result = eval("("+txt+")");
        if (result['LastRetrievalNumber']==SearchContainer.G.LastRetrievalNumber) {
          SearchContainer.G.CurrentBlock = result['block'];
          SearchContainer.G.LastBlock = result['lastblock'];
          ResultControlsContainer.style.visibility="visible";
          ResultControls.innerHTML = GetZoomImage();
          var orgtemplate = result['template'];
          var resultHTML = "";
          for (i=0;i<result['pictures'].length;i++) {
            var template=orgtemplate;
            template = template.replace(/__ID__/g, result['pictures'][i][0])
            template = template.replace(/__URL__/,result['pictures'][i][1]);
            template = template.replace(/__WIDTH__/, result['pictures'][i][2]);
            template = template.replace(/__HEIGHT__/, result['pictures'][i][3]);
            template = template.replace(/__MARGINTOP__/, result['pictures'][i][4]);
            template = template.replace(/__MARGINRIGHT__/, result['pictures'][i][5]);
            template = template.replace(/__MARGINBOTTOM__/, result['pictures'][i][6]);
            template = template.replace(/__MARGINLEFT__/, result['pictures'][i][7]);
            template = template.replace(/__ALT__/, result['pictures'][i][8]);
            template = template.replace(/__ALT__/, result['pictures'][i][8]);
            resultHTML+= template;
          }
          ResultDIV.innerHTML = resultHTML;
          ResultDIV.ListId = result['listid'];
        }
      } catch(e) {
        myRetrieveAjax.onError("RetrievePictures\n"+e.name+": "+e.message);
        return null;
      }
    }
    myRetrieveAjax.params = "listid="+ResultH2.ListId+"&block="+block+"&size="+SearchContainer.G.ImageSize+
    "&LastRetrievalNumber="+ResultH2.RetrievalNumber+"&upanker="+ResultH2.UpAnker+
    "&clientWidth="+ResultDIV.clientWidth+"&clientHeight="+ResultDIV.clientHeight;
    myRetrieveAjax.doRequest();
  }
}

// Bei jeder Änderung der Map werden die Bounds an das Script hier
// übergeben.
function SetMapBounds(latmin, lngmin, latmax, lngmax, updateMarkers) {
  SearchContainer.G.UpdateMarkers = updateMarkers;
  SearchContainer.G.mapLatMin = latmin;
  SearchContainer.G.mapLatMax = latmax;
  SearchContainer.G.mapLngMin = lngmin;
  SearchContainer.G.mapLngMax = lngmax;
  SearchContainer.G.onHideMarkerPictures = null; // zurücksetzen, weil sonst "alte" Marker restauriert werden könnten.
  var oAreaCheck = document.getElementById('areafilter');
  if (oAreaCheck.checked) {
    UpdateSearchResults(true);
  } else if (SearchContainer.G.UpdateMarkers!=null) {
    SearchContainer.G.UpdateMarkers(GetSearchParameter());
  }
}

// Wird von GoogleMaps abgefragt, um den Start-Bereich
// festzulegen.
function GetInitialMapBounds() {
  var result = new Object();
  result["latmin"] = parseFloat(SearchContainer.G.initialLatMin);
  result["latmax"] = parseFloat(SearchContainer.G.initialLatMax);
  result["lngmin"] = parseFloat(SearchContainer.G.initialLngMin);
  result["lngmax"] = parseFloat(SearchContainer.G.initialLngMax);
  //  alert("GetInitialMapBounds.latmin="+result["latmin"]);
  return result;
}

// Bei Klick auf einen Marker wird diese Funktion aufgerufen, ihr werden
// die zugehörigen pictureids übergeben.
// Es wird eine Ajax-Anfrage zum Server ausgeführt und die gefilterten
// Bilder werden angezeigt.
// Id der DB-gespeicherten Liste der Bilder des Markers
// Problem: Download vieler Bilder dauert etwas lange. Deshalb werden
// immer nur 10er Blöcke übertragen und anschließend ein zusätzlicher
// AJAX-Request gestartet um weitere 10 Bilder zu holen (bis zum Ende).
// picturecount: Gesamtzahl der Bilder dieses Markers
function ShowMarkerPictures(listid, picturecount, onHideMarkerPictures) {
  if (SearchContainer.G.onHideMarkerPictures!=null) {
    SearchContainer.G.onHideMarkerPictures(false);
  }
  SearchContainer.G.onHideMarkerPictures = onHideMarkerPictures;
  SearchContainer.G.LastRetrievalNumber++;
  var upanker = encodeBase64(GetSearchParameter());
  // erster Ajax-Aufruf im Prinzip nur für den Titel in H2
  var myAjax = new Ajax();
  myAjax.onSuccess = function(txt) {
    // Suche abgeschlossen: Daten in ResultH2 übernehmen, anschließend
    // die Bilder abrufen.
    // Bilder-DIV löschen
    var ResultDIV = document.getElementById('ResultPictures');
    var ResultH2 =  document.getElementById('ResultTitle');
    var ResultControls = document.getElementById('ResultControls');
    result = eval("("+txt+")");
    ResultControls.innerHTML =GetZoomImage();
    ResultH2.innerHTML = SearchContainer.G.PrefixH2+result['title'];
    ResultH2.UpAnker = result['upanker'];
    ResultH2.ListId = result['listid'];
    ResultH2.RetrievalNumber = result['LastRetrievalNumber'];
    if (ResultDIV.ListId!=ResultH2.ListId) {
      ResultDIV.ListId = 0;
      ResultDIV.innerHTML = "";
      RetrievePictures(1);
    }
  }
  myAjax.url = "ajaxGetImageIDs.php";
  myAjax.params = "markerlistid="+listid+"&LastRetrievalNumber="+SearchContainer.G.LastRetrievalNumber+
  "&size="+SearchContainer.G.ImageSize+"&upanker="+upanker;
  myAjax.doRequest();
}

// Bei Klick auf die Map o.ä. wird der Filter wieder gelöscht und
// der ursprüngliche Text wieder hergestellt.
function HideMarkerPictures(forceUpdate) {
  if (SearchContainer.G.onHideMarkerPictures!=null) {
    SearchContainer.G.onHideMarkerPictures();
    SearchContainer.G.onHideMarkerPictures = null;
    if (forceUpdate) {
      UpdateSearchResults(false);
    }
  }
}

// Benutzung von Lytebox fuer Großansicht der Bilder
function iframe_OpenLytebox(id) {
  var iframe = document.getElementById('iframecontroller');
  var anchor = document.getElementById(id);
  if ((iframe!=null) && (iFrameControllerUrl!=null)) {
    iframe.src = iFrameControllerUrl+'?lytebox='+escape(anchor.getAttribute('href'));
  } else if (myLytebox!=null) {
    anchor.setAttribute('rel', 'lyteframe');
    anchor.setAttribute('rev', 'width: 570px; height:500px;');
    myLytebox.start(anchor, false, true);
  }
}


//http://ostermiller.org/calc/encode.html
var base64Chars = new Array(
'A','B','C','D','E','F','G','H',
'I','J','K','L','M','N','O','P',
'Q','R','S','T','U','V','W','X',
'Y','Z','a','b','c','d','e','f',
'g','h','i','j','k','l','m','n',
'o','p','q','r','s','t','u','v',
'w','x','y','z','0','1','2','3',
'4','5','6','7','8','9','+','/'
);
var END_OF_INPUT = -1;
var base64Str;
var base64Count;
function setBase64Str(str){
  base64Str = str;
  base64Count = 0;
}
function readBase64(){
  if (!base64Str) return END_OF_INPUT;
  if (base64Count >= base64Str.length) return END_OF_INPUT;
  var c = base64Str.charCodeAt(base64Count) & 0xff;
  base64Count++;
  return c;
}
function encodeBase64(str){
  setBase64Str(str);
  var result = '';
  var inBuffer = new Array(3);
  var lineCount = 0;
  var done = false;
  while (!done && (inBuffer[0] = readBase64()) != END_OF_INPUT){
    inBuffer[1] = readBase64();
    inBuffer[2] = readBase64();
    result += (base64Chars[ inBuffer[0] >> 2 ]);
    if (inBuffer[1] != END_OF_INPUT){
      result += (base64Chars [(( inBuffer[0] << 4 ) & 0x30) | (inBuffer[1] >> 4) ]);
      if (inBuffer[2] != END_OF_INPUT){
        result += (base64Chars [((inBuffer[1] << 2) & 0x3c) | (inBuffer[2] >> 6) ]);
        result += (base64Chars [inBuffer[2] & 0x3F]);
      } else {
        result += (base64Chars [((inBuffer[1] << 2) & 0x3c)]);
        result += ('=');
        done = true;
      }
    } else {
      result += (base64Chars [(( inBuffer[0] << 4 ) & 0x30)]);
      result += ('=');
      result += ('=');
      done = true;
    }
    lineCount += 4;
    if (lineCount >= 76){
      result += ('\n');
      lineCount = 0;
    }
  }
  return result;
}