// EBubble.js 
//
//   This Javascript is provided by Mike Williams
//   Blackpool Community Church Javascript Team
//   http://www.commchurch.freeserve.co.uk/   
//   http://econym.googlepages.com/index.htm
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0  13/07/2007 Initial version
// Version 0.1  14/07/2007 Bugfix: Was failing to apply the position offset.
// Version 0.2  30/07/2007 Bugfix: Wasn't clearingout the old contents.
// Version 0.3  21/09/2007 Added noCloseOnClick parameter
// version 0.4  25/12/2007 Bugfix: Problem with offset

      function EBubbleD(map,image,image2,image3,size,insize,inset,anchor,noCloseOnClick) {
        // parameters
        var teller=0;
        var that=this;
        
        
        this.map = map;
        this.image=image;
		this.image2=image2;
		this.image3=image3;
        this.size=size;
        this.insize=insize;
        this.inset=inset;
        this.anchor=anchor;
//	GLog.write("noCloseOnClick="+noCloseOnClick);

        this.noCloseOnClick=noCloseOnClick;
        // internal variables
        this.visible = false;
        // browser - specific variables
        this.ie = false;
        var agent = navigator.userAgent.toLowerCase();
        if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){ this.ie = true} else {this.ie = false}

        this.div1 = document.createElement("div");
        this.div1.style.position = "absolute";
        this.div1.style.display="none";
        this.div1.id = "planning";  
        document.body.appendChild(this.div1);
	
		//GLog.write("created div1");
        this.div3 = document.createElement("div");
        this.div3.style.position = "absolute";
        this.div3.style.display="none";
        this.div3.id = "analyse";  
        document.body.appendChild(this.div3);
		//GLog.write("created div3");
		
		this.div9 = document.createElement("div");
        this.div9.style.position = "absolute";
        this.div9.style.display="none";
        this.div9.id = "panel3";  
        document.body.appendChild(this.div9);
		
        
        if (this.ie && this.image.indexOf(".png")>-1 && this.image2.indexOf(".png")>-1) {
			if (debug) GLog.write("png>-1");
          var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image+"', sizingMethod='scale');";
		  var loader1 = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image2+"', sizingMethod='scale');";
		  var loader2 = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image3+"', sizingMethod='scale');";
          this.div1.innerHTML = '<div style="height:' +this.size.height+ 'px; width:'+this.size.width+'px; ' +loader+ '" ></div>';
          this.div3.innerHTML = '<div style="height:' +this.size.height+ 'px; width:'+this.size.width+'px; ' +loader1+ '" ></div>';
          this.div9.innerHTML = '<div style="height:' +this.size.height+ 'px; width:'+this.size.width+'px; ' +loader2+ '" ></div>';
		
		} else {
			if (debug) GLog.write("png=-1");
			this.div1.innerHTML = '<img src="' + this.image + '" width="' + this.size.width +'" height="' + this.size.height +'">';
			this.div3.innerHTML = '<img src="' + this.image2 + '" width="' + this.size.width +'" height="' + this.size.height +'">';
			this.div9.innerHTML = '<img src="' + this.image3 + '" width="' + this.size.width +'" height="' + this.size.height +'">';
           }
		   if (debug) GLog.write("innerhtml1="+this.div1.innerHTML);
		   if (debug) GLog.write("innerhtml3="+this.div3.innerHTML);
		   if (debug) GLog.write("innerhtml9="+this.div9.innerHTML);
		   //GLog.write("image="+this.image);
		   //GLog.write("image2="+this.image2);
		
		
        // === Close the bubble if the map moves ===
        GEvent.addListener(map, "dragstart", function() {
 				if (debug) GLog.write("dragstart event");
          		that.hide();
        } );
        GEvent.addListener(map, "moveend", function() {
          //that.hide();
          if (debug) GLog.write("moveend");
        } );
        
        GEvent.addListener(map, "movestart", function() {
          that.hide();
          if (debug) GLog.write("movestart");
        } );

		GEvent.addListener(map, "click", function() {
		//var p = map.getCurrentMapType().getProjection().fromLatLngToPixel(point,map.getZoom());
		 	teller = teller + 1;
	    	if (debug) GLog.write("map click from ebubble, aantal " + teller);
	    	if (teller == 2) that.hide();
                //that.hide();
        } );

        // === Listen for clicks and mousedowns ===
        

//===============CREATE PANELS============================

// panel 1        
		this.div7 = document.createElement("div");
		this.div1.appendChild(this.div7);   
 //      	this.div3.appendChild(this.div7);   
 //      	this.div9.appendChild(this.div7);   
 		this.div7.id = "cl1";
        this.div7.style.position = "absolute";
        this.div7.style.left = "340px"; 
        this.div7.style.top = "55px";
		this.div7.style.width = "10px";
        this.div7.style.height = "10px";
		this.div7.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';
if (debug) 	GLog.write("div7 Panel1 close button created");

		GEvent.addDomListener(this.div7,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.hide();
		  if (debug) GLog.write("mousedown div7");
          GEvent.trigger(that,"click");
        });

		this.div5 = document.createElement("div");
        this.div1.appendChild(this.div5);   
 //       this.div3.appendChild(this.div5);   
 //       this.div9.appendChild(this.div5);   
		this.div5.id = "sw1";
        this.div5.style.position = "absolute";
        this.div5.style.left = "130px"; 
        this.div5.style.top = "20px";
		this.div5.style.width = "125px";
        this.div5.style.height = "20px";
//if (debug)  this.div5.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';
if (debug) 	GLog.write("div5 Panel2 navbutton created");

	  GEvent.addDomListener(this.div5,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.show(2);
		  if (debug) GLog.write("div5 mousedown navbutton panel1");
          GEvent.trigger(that,"click");
        });	

		this.div11 = document.createElement("div");
 	    this.div1.appendChild(this.div11);   
		this.div11.id = "sw3";
        this.div11.style.position = "absolute";
        this.div11.style.left = "260px"; 
        this.div11.style.top = this.div5.style.top;
		this.div11.style.width = this.div5.style.width;
        this.div11.style.height = this.div5.style.height;
//if (debug)  this.div11.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';

if (debug) 	GLog.write("div11 Panel3 navbutton created on panel1");
		GEvent.addDomListener(this.div11,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.show(3);
		  if (debug) GLog.write("mousedown div11");
          GEvent.trigger(that,"click");
        });
  
		GEvent.addDomListener(this.div1,"click", function() {
          if (!that.noCloseOnClick)  that.hide();
	    		//that.show(2);
				if (debug) GLog.write("click div1");
				GEvent.trigger(that,"click");
    	    });

        GEvent.addDomListener(this.div1,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  //that.hide();
		  if (debug) GLog.write("mousedown div1");
          GEvent.trigger(that,"click");
        });


        this.div2 = document.createElement("div");
        this.div1.appendChild(this.div2);    
        this.div2.style.position = "absolute";
        this.div2.style.left = this.inset.x + "px"; 
        this.div2.style.top = this.inset.y + "px";
        this.div2.style.width = this.insize.width + "px";
        this.div2.style.height = this.insize.height + "px";
if (debug) 	GLog.write("div2 panel1 innerhtml created");


if (debug) 	GLog.write("div7 Panel1 close click listener created");

//panel 2
        GEvent.addDomListener(this.div3,"click", function() {
          if (!that.noCloseOnClick) that.hide();
				if (debug) GLog.write("click div3");
				GEvent.trigger(that,"click");
        });
		GEvent.addDomListener(this.div3,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  if (debug) GLog.write("mousedown div3");
          GEvent.trigger(that,"click");
        });
		this.div4 = document.createElement("div");  
        this.div4.style.position = "absolute";
        this.div4.style.left = this.inset.x + "px"; 
        this.div4.style.top = this.inset.y + "px";
        this.div4.style.width = this.insize.width + "px";
        this.div4.style.height = this.insize.height + "px";
        this.div3.appendChild(this.div4);	
if (debug) 	GLog.write("div4 panel2 innerhtml created");
	   
		this.div8 = document.createElement("div");
	    this.div3.appendChild(this.div8);   
		this.div8.id = "cl1";
        this.div8.style.position = "absolute";
        this.div8.style.left = this.div7.style.left; 
        this.div8.style.top = this.div7.style.top;
		this.div8.style.width = this.div7.style.width;
        this.div8.style.height = this.div7.style.height;
		this.div8.innerHTML=this.div7.innerHTML;
		
if (debug) 	GLog.write("div8 Panel2 closebutton created");
// closeclick panel 2
		GEvent.addDomListener(this.div8,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.hide();
		  if (debug) GLog.write("mousedown div8");
          GEvent.trigger(that,"click");
        });

if (debug) 	GLog.write("div8 Panel2 close click listener created");



		this.div6 = document.createElement("div");
        this.div3.appendChild(this.div6);   
		this.div6.id = "sw1";
        this.div6.style.position = "absolute";
        this.div6.style.left = "0px"; 
        this.div6.style.top = this.div5.style.top;
		this.div6.style.width = this.div5.style.width;
        this.div6.style.height = this.div5.style.height;
//if (debug)  this.div5.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';
if (debug) 	GLog.write("div6 Panel1 navbutton created in panel 2");

	  GEvent.addDomListener(this.div6,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.show(1);
		  if (debug) GLog.write("div6 mousedown navbutton panel1");
          GEvent.trigger(that,"click");
        });	

		this.div14 = document.createElement("div");
 	    this.div3.appendChild(this.div14);   
		this.div14.id = "sw3";
        this.div14.style.position = "absolute";
        this.div14.style.left = "260px"; 
        this.div14.style.top = this.div5.style.top;
		this.div14.style.width = this.div5.style.width;
        this.div14.style.height = this.div5.style.height;
//if (debug)  this.div11.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';

if (debug) 	GLog.write("div14 Panel3 navbutton created on panel1");
		GEvent.addDomListener(this.div14,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.show(3);
		  if (debug) GLog.write("mousedown div14");
          GEvent.trigger(that,"click");
        });




// panel 3

        GEvent.addDomListener(this.div9,"click", function() {
          if (!that.noCloseOnClick)  that.hide();
	    		//that.show(2);
				if (debug) GLog.write("click div9");
				GEvent.trigger(that,"click");
    	    });


		GEvent.addDomListener(this.div9,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  //var p = map.fromLatLngToDivPixel(point);
		  //that.show(1);
		  if (debug) GLog.write("mousedown div9");
          GEvent.trigger(that,"click");
        });


        this.div10 = document.createElement("div");
        this.div9.appendChild(this.div10);    
        this.div10.style.position = "absolute";
        this.div10.style.left = this.inset.x + "px"; 
        this.div10.style.top = this.inset.y + "px";
        this.div10.style.width = this.insize.width + "px";
        this.div10.style.height = this.insize.height + "px";
if (debug) 	GLog.write("div10 Panel3 innerhtml created");


		this.div11 = document.createElement("div");
  //      this.div9.appendChild(this.div11);   
		this.div11.id = "sw3";
        this.div11.style.position = "absolute";
        this.div11.style.left = "300px"; 
        this.div11.style.top = "20px";
		this.div11.style.width = "50px";
        this.div11.style.height = "20px";
//if (debug)  this.div11.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';

if (debug) 	GLog.write("div11 Panel3 navbutton created");
		GEvent.addDomListener(this.div11,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.show(1);
		  if (debug) GLog.write("mousedown div11");
          GEvent.trigger(that,"click");
        });

  		this.div13 = document.createElement("div");
        this.div9.appendChild(this.div13);   
 //       this.div3.appendChild(this.div5);   
 //       this.div9.appendChild(this.div5);   
		this.div13.id = "sw1";
        this.div13.style.position = "absolute";
        this.div13.style.left = this.div5.style.left; 
        this.div13.style.top = this.div5.style.top;
		this.div13.style.width = this.div5.style.width;
        this.div13.style.height = this.div5.style.height;
//if (debug)  this.div5.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';
if (debug) 	GLog.write("div5 Panel2 navbutton created");

	  GEvent.addDomListener(this.div13,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.show(2);
		  if (debug) GLog.write("div13 mousedown navbutton panel2");
          GEvent.trigger(that,"click");
        });	


		this.div15 = document.createElement("div");
        this.div9.appendChild(this.div15);   
		this.div15.id = "sw1";
        this.div15.style.position = "absolute";
        this.div15.style.left = "0px"; 
        this.div15.style.top = this.div5.style.top;
		this.div15.style.width = this.div5.style.width;
        this.div15.style.height = this.div5.style.height;
//if (debug)  this.div5.innerHTML='<img src="http://www.hosting.niebeek.nl/rijnland/afbeeldingen/close.png">';
if (debug) 	GLog.write("div15 Panel1 navbutton created in panel 3");

	  GEvent.addDomListener(this.div15,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.show(1);
		  if (debug) GLog.write("div15 mousedown navbutton panel1");
          GEvent.trigger(that,"click");
        });	




		this.div12 = document.createElement("div");
	    this.div9.appendChild(this.div12);   
		this.div12.id = "cl1";
        this.div12.style.position = "absolute";
        this.div12.style.left = this.div7.style.left; 
        this.div12.style.top = this.div7.style.top;
		this.div12.style.width = this.div7.style.width;
        this.div12.style.height = this.div7.style.height;
		this.div12.innerHTML=this.div7.innerHTML;
if (debug) 	GLog.write("div12 Panel3 close created");
// closeclick panel 3
		GEvent.addDomListener(this.div12,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
		  that.hide();
		  if (debug) GLog.write("mousedown div12");
          GEvent.trigger(that,"click");
        });

if (debug) 	GLog.write("div12 Panel3 close click listener created");

      
          
} 
      

      EBubbleD.prototype.openOnMap = function(point, html, html1, html2, offset) {
        this.offset = offset||new GPoint(0,0);
        this.point = point;


        //div2.style.backgroundColor = "#0000ff"; 
        this.div2.innerHTML = html;
        this.div4.innerHTML = html1;
        this.div10.innerHTML = html2;

        // pixel relative to map world
        var p = this.map.fromLatLngToDivPixel(point);

        // map world relative to map container
        var dragObject = this.map.getPane(G_MAP_MAP_PANE).parentNode;
        var x = p.x + parseInt(dragObject.style.left);
        var y = p.y + parseInt(dragObject.style.top);

        // map container relative to the page
        y += this.map.getContainer().offsetTop;
        x += this.map.getContainer().offsetLeft;
        
        // offset by the requested anchor position
        y -= this.anchor.y;
        x -= this.anchor.x;

        // offset by the specified offset position
        y -= this.offset.y;
        x -= this.offset.x;


        // Apply those values 
        this.div1.style.left = x+"px";
        this.div1.style.top = y+"px";

        this.div3.style.left = x+"px";
        this.div3.style.top = y+"px";

        this.div9.style.left = x+"px";
        this.div9.style.top = y+"px";
        
        // make it visible
        this.visible = true;
        this.show(1);
      }
      
      EBubbleD.prototype.openOnMarker = function(marker,html,html1,html2) {
        var vx = marker.getIcon().iconAnchor.x - marker.getIcon().infoWindowAnchor.x;
        var vy = marker.getIcon().iconAnchor.y - marker.getIcon().infoWindowAnchor.y;
		//GLog.write("calling openonmap");
		this.openOnMap(marker.getPoint(), html, html1, html2, new GPoint(vx,vy));
      }
 
 
      EBubbleD.prototype.remove = function() {
  			this.div.parentNode.removeChild(this.div);
  			this.div = null;
  			EBubbleD.prototype.remove.call(this);
		}
      EBubbleD.prototype.show = function(disppage) {
		
		//GLog.write("dispage=:"+disppage);
       
		if (disppage == 1) {
		//GLog.write("showing:---1");
        this.div1.style.display="";
        //this.div2.style.display="";
		this.div3.style.display="none";
		this.div9.style.display="none";
		//this.div4.style.display="none";
        this.visible = true;
		};
		if (disppage == 2) {
		//GLog.write("showing:----2");
        this.div1.style.display="none";
        //this.div2.style.display="none";
		this.div3.style.display="";
		this.div9.style.display="none";

		//this.div4.style.display="";
        this.visible = true;
		};

		if (disppage == 3) {
		//GLog.write("showing:----2");
        this.div1.style.display="none";
        //this.div2.style.display="none";
		this.div3.style.display="none";
		this.div9.style.display="";
		//this.div4.style.display="";
        this.visible = true;
		};
		
      }
      
      EBubbleD.prototype.hide = function() {
        if (this.div1 ) {
        this.div1.style.display="none";
		//this.div2.style.display="none";
        this.div3.style.display="none";
        //this.div4.style.display="none";
        this.div9.style.display="none";

        this.visible = false;
  		this.div1.parentNode.removeChild(this.div1);
  		this.div1 = null;
		if (debug) GLog.write("div1 removed");
        };
     if (debug) GLog.write("Hidden");


     }
      
      EBubbleD.prototype.isHidden = function() {
        return !this.visible;
      }
      
      EBubbleD.prototype.supportsHide = function() {
        return true;
      }