/**
 * Dateiname       : javascript/hotspot_map.js
 * Letzte Akt.     : 08.12.2010 (MA)
 * 
 * (c) Copyright SECRA GmbH
 */

/*global secra, openDiv, closeDiv */

var content = null;
//window.secra = null;

window.showreg = null; // gewünschte Karten Nummer

window.aregion   = [];
window.divregion = [];
window.divclose  = [];
window.greybox = null;

window.MAXHOTSPOTS = 30;

function initPage() {
  var i;
  secra.Rollover.baseimagepath  = "/bitmaps/map_hotspot/";
  secra.Rollover.postfix        = "_hover";
  secra.Rollover.fileext        = ".gif";

  for(i=0;i<window.MAXHOTSPOTS;i+=1) {
    (new secra.Rollover("hotspot_"+i));
  }

  for(i=0; i<4; i+=1) {
    new secra.Rollover("region_"+(i+1));
    
//    window.divregion[i] = document.getElementById("region"+(i+1));
//    window.divregion[i].regnr = i;
//
//    window.divclose[i] = document.getElementById("close_"+(i+1));
//    window.divclose[i].regnr = i;
//    window.divclose[i].onclick = closeDiv;

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

  window.greybox = new secra.Overlayer('/bitmaps/');
  window.greybox.addClose(closeDiv);
};


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() {

  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){
	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;
		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){
	if(document.getElementById(id)){
		document.getElementById(id).style.visibility = 'hidden';
	}
}