/**
 * Projekt         : Ostsee-Ferienwohnungen.de
 * Dateiname       : javascript/index.js
 * Letzte Akt.     : 08.12.2010 (RP)
 * 
 * (c) Copyright SECRA GmbH
 */

var content = null;
window.aregion   = []; // Klickbereiche der Basiskarte (=dauerhaft sichtbare Karte)
window.greybox = null; // Hintergrundobjekt
window.showreg = null; // gewünschte Karten Nummer

//window.onload = initPage;

function initPage() {

  // Rollover Effekte der Basiskarte installieren
  var i;
  secra.Rollover.baseimagepath  = "/bitmaps/map_index/";
  secra.Rollover.postfix        = "_hover";
  secra.Rollover.fileext        = ".gif";
  for(i=0; i<4; i+=1) {
    new secra.Rollover("region_"+(i+1));
    // Klick-Verhalten bestimmen
    window.aregion[i] = document.getElementById("a_region_"+(i+1));
    window.aregion[i].regnr = i;    
    window.aregion[i].onclick = function(){
    	show_reg(this.regnr + 1);
    	return false;
    };
  }

  // Ladegrafik vorladen damit sie bereits im Cache ist
  var loadimg = new Image();
  loadimg.src = 'bitmaps/indicator.gif';  

  // Hintergrund einrichten
  window.greybox = new secra.Overlayer('/bitmaps/');
  window.greybox.addClose(closeDiv); // Aktion bei Klick in grauen Bereich festlegen
};

Handler.add(window, 'load', initPage);

function installEvents(nr){
	// installiert die Hover Events für die neu geladenen Bereiche
	
    // Schliessen Button installieren
    document.getElementById('close_'+nr).onclick = closeDiv;
    
    // Hover Effekte je nach Map installieren
    // die jeweiligen Fälle sind nach Regionen getrennt
	switch(nr){
		case 1:
			  document.getElementById('showhs1').onmouseover = function(){ showHoverRegion('boxhs1'); };
			  document.getElementById('hidehs1').onmouseout  = function(){ hideHoverRegion('boxhs1'); };
			  document.getElementById('showhs2').onmouseover = function(){ showHoverRegion('boxhs2'); };
			  document.getElementById('hidehs2').onmouseout  = function(){ hideHoverRegion('boxhs2'); };
			  document.getElementById('showhs3').onmouseover = function(){ showHoverRegion('boxhs3'); };
			  document.getElementById('hidehs3').onmouseout  = function(){ hideHoverRegion('boxhs3'); };
			  document.getElementById('showhs4').onmouseover = function(){ showHoverRegion('boxhs4'); };
			  document.getElementById('hidehs4').onmouseout  = function(){ hideHoverRegion('boxhs4'); };
			  document.getElementById('showhs21').onmouseover = function(){ showHoverRegion('boxhs21'); };
			  document.getElementById('hidehs21').onmouseout  = function(){ hideHoverRegion('boxhs21'); };
			  document.getElementById('showhs5').onmouseover = function(){ showHoverRegion('boxhs5'); };
			  document.getElementById('hidehs5').onmouseout  = function(){ hideHoverRegion('boxhs5'); };
			  break;
		case 2:
		    document.getElementById('showhs21_1').onmouseover = function(){ showHoverRegion('boxhs21_1'); };
			  document.getElementById('hidehs21_1').onmouseout  = function(){ hideHoverRegion('boxhs21_1'); };
			  document.getElementById('showhs5_1').onmouseover = function(){ showHoverRegion('boxhs5_1'); };
			  document.getElementById('hidehs5_1').onmouseout  = function(){ hideHoverRegion('boxhs5_1'); };
			  document.getElementById('showhs6').onmouseover = function(){ showHoverRegion('boxhs6'); };
			  document.getElementById('hidehs6').onmouseout  = function(){ hideHoverRegion('boxhs6'); };
			  document.getElementById('showhs7').onmouseover = function(){ showHoverRegion('boxhs7'); };
			  document.getElementById('hidehs7').onmouseout  = function(){ hideHoverRegion('boxhs7'); };
			  document.getElementById('showhs8').onmouseover = function(){ showHoverRegion('boxhs8'); };
			  document.getElementById('hidehs8').onmouseout  = function(){ hideHoverRegion('boxhs8'); };
			  document.getElementById('showhs9').onmouseover = function(){ showHoverRegion('boxhs9'); };
			  document.getElementById('hidehs9').onmouseout  = function(){ hideHoverRegion('boxhs9'); };
			  document.getElementById('showhs10').onmouseover = function(){ showHoverRegion('boxhs10'); };
			  document.getElementById('hidehs10').onmouseout  = function(){ hideHoverRegion('boxhs10'); };
			  document.getElementById('showhs11').onmouseover = function(){ showHoverRegion('boxhs11'); };
			  document.getElementById('hidehs11').onmouseout  = function(){ hideHoverRegion('boxhs11'); };
			  document.getElementById('showhs12').onmouseover = function(){ showHoverRegion('boxhs12'); };
			  document.getElementById('hidehs12').onmouseout  = function(){ hideHoverRegion('boxhs12'); };
			  document.getElementById('showhs13').onmouseover = function(){ showHoverRegion('boxhs13'); };
			  document.getElementById('hidehs13').onmouseout  = function(){ hideHoverRegion('boxhs13'); };
			  document.getElementById('showhs14').onmouseover = function(){ showHoverRegion('boxhs14'); };
			  document.getElementById('hidehs14').onmouseout  = function(){ hideHoverRegion('boxhs14'); };		
			  break;
		case 3:
			  document.getElementById('showhs14_1').onmouseover = function(){ showHoverRegion('boxhs14_1'); };
			  document.getElementById('hidehs14_1').onmouseout  = function(){ hideHoverRegion('boxhs14_1'); };
			  document.getElementById('showhs15').onmouseover = function(){ showHoverRegion('boxhs15'); };
			  document.getElementById('hidehs15').onmouseout  = function(){ hideHoverRegion('boxhs15'); };
			  document.getElementById('showhs16').onmouseover = function(){ showHoverRegion('boxhs16'); };
			  document.getElementById('hidehs16').onmouseout  = function(){ hideHoverRegion('boxhs16'); };
			  break;
		case 4:
			  document.getElementById('showhs17').onmouseover = function(){ showHoverRegion('boxhs17'); };
			  document.getElementById('hidehs17').onmouseout  = function(){ hideHoverRegion('boxhs17'); };
			  document.getElementById('showhs18').onmouseover = function(){ showHoverRegion('boxhs18'); };
			  document.getElementById('hidehs18').onmouseout  = function(){ hideHoverRegion('boxhs18'); };
			  document.getElementById('showhs19').onmouseover = function(){ showHoverRegion('boxhs19'); };
			  document.getElementById('hidehs19').onmouseout  = function(){ hideHoverRegion('boxhs19'); };
			  document.getElementById('showhs20').onmouseover = function(){ showHoverRegion('boxhs20'); };
			  document.getElementById('hidehs20').onmouseout  = function(){ hideHoverRegion('boxhs20'); };
			  document.getElementById('showhs22').onmouseover = function(){ showHoverRegion('boxhs22'); };
        document.getElementById('hidehs22').onmouseout  = function(){ hideHoverRegion('boxhs22'); };
			  break;
	}
}

function add_map(code){
  // klinkt das neue Code Fragment in den DOM Baum ein
  
  content.appendChild(this.toDOM(code));

  // vorsicht mit dem Aktualisieren des innerHTML Wertes hier: führt zu Fehlern!
  
  openDiv();
}

function toDOM(HTMLContent) {
  // wandelt ein HTML Fragment in eine verwendbare und einhängbare Struktur um
	
  var docFrag = document.createDocumentFragment();
  var d = document.createElement('div');
  d.innerHTML = HTMLContent;
  while(d.firstChild) {
    docFrag.appendChild(d.firstChild);
  }
  return docFrag;
}

function show_reg(regnr){
	// zeigt die gewünschte Region an (wird vom Click Event der Grundkarte
	// aufgerufen)
	// lädt das neue Code Fragment vom Server, jedoch nur beim erstenmal

  content = window.greybox.getContainer();
  content.innerHTML = '<span class="loadingNotice"></span>';

	window.greybox.show();            // Hintergrund ausgrauen

	window.showreg = regnr; // diese Region anzeigen
	if(document.getElementById("region"+(regnr))){
	  // bereits geladen, direkt anzeigen
	  openDiv();
	  return false;	  
	} else {
	  // noch nicht geladen -> Anfrage senden
	  getDataReturnText("/templates_main/map_div_reg_"+(regnr)+"_cont.php", add_map);
	}
}

function openDiv() {
  // zeigt eine Divbox mit der Karte an, nachdem sie geladen wurde
  // (diese Funktion wird automatisch nach dem Laden aufgerufen)

  var obj = document.getElementById("region"+window.showreg);
  if(obj){
      //
    var node = toDOM(obj.innerHTML);
    content.innerHTML = '';
    content.appendChild(node);
    
    window.greybox.centerContent();

  	installEvents(window.showreg);  // Hover und Close Events einrichten
  }
  return false;
}

function closeDiv() {
  // ALLE Karten ausblenden, wenn sie existieren und das Ausgrauen beenden
	
  var obj;
  for(i=1; i<5; i+=1) {
  	obj = document.getElementById("region"+i);
  	if(obj){
	    obj.style.display = "none";
  	}
  }
  if(window.greybox){
    window.greybox.hide();
  }
}

function showHoverRegion(id){
	// schaltet zunächst alle anderen Regionen unsichtbar und dann
	// die gewünschte Region sichtbar
	
	if(document.getElementById(id)){
		document.getElementById(id).style.visibility = 'visible';
	}
	// für alle anderen Bereiche die verstecken Funktion aufrufen
	var lid, slid;
	for(var i = 1; i < 30; i++){
		lid = 'boxhs'+i;
		// die folgende Schleife ist wichtig, da sonst (optische) Fehler auftreten könnten!
		if(document.getElementById(lid) && lid!=id){
			hideHoverRegion(lid);
		}
		for(var h = 1; h < 6; h++){
			slid = lid + '_' + h;
			if(document.getElementById(slid) && slid!=id){
				hideHoverRegion(slid);
			}
		}
	}
}

function hideHoverRegion(id){
	// blendet das angegebene Objekt aus
	
	if(document.getElementById(id)){
		document.getElementById(id).style.visibility = 'hidden';
	}
}

function positionMap(){
  // orientiert die Karte 100px vom oberen Rand aus und beachtet
  // dabei die Scrollposition
  // (wird vom Scroll Event und bei Erzeugung aufgerufen)
  // was sie nicht tut: horizontal ausrichten

  var obj;
  for(i=1; i<5; i+=1) {
    obj = document.getElementById("region"+i);
    if(obj){
	  obj.style.top = (Geometry.getVerticalScroll() + 100)+"px";
    }
  }
}