function brpPopupWidget(container,map) {
    var me = this;
    me.container = $(container);
    me.map = map;
    me.delayed = false;
    $('#popup_close',me.container).click(function(){
        me.container.hide();
        $('#popup_addRoute').unbind();      
    });
}

brpPopupWidget.prototype.show = function(x,y,loc) {
 
 	//implement google tracking
	if ((_gaq !== undefined)&&(loc)&&(!this.delayed))
	    _gaq.push(['_trackEvent', 'Bezienswaardigheden', 'Toon popup', loc.name]);

   this.setupData(x,y,loc);
   this.detPosition(x,y); 
}

brpPopupWidget.prototype.hide = function() {
    this.container.hide();
}
brpPopupWidget.prototype.setupData = function(x,y,loc) {
    
    function validUrl(val) {

     if(!/^(https?|ftp):\/\//i.test(val)) {
        val = 'http://'+val;
     }
     return val;   
    }
    var me = this;
    var data = null;
    try { 
       if (loc.description.data)
        data = loc.description;
       else  
        data = $.parseJSON(loc.description);
    }
    catch(err){
        data = null;
    } 
    if (data){
      var info = data.data;

      $('#popup_default').show();
      $('#popup_simple').hide();
      
      if (info.logo)
      {
        var dLogo = $('#popup_logo',this.container);
        dLogo.attr('src',info.logo);
      }
      
      if (info.photo)
      {
        var dPhoto= $('#popup_photo',this.container);
        
        dPhoto.empty();
        
        var w = "150";
        var h = "132";
        if (info.url){
           var a = $('<a href="'+info.url+'"  target="_blank"></a>');
           a.append('<img src="'+info.photo+'" alt="'+info.title+'" width="'+w+'" height="'+h+'" style="border: 0px none;"/>');
           dPhoto.append(a); 
        }
        else {
           var a = $('<img src="'+info.photo+'" alt="'+info.title+'" width="'+w+'" height="'+h+'" style="border: 0px none;"/>');
           dPhoto.append(a); 
        }
        $('#popup_photo',this.container).show();
      }
      else {      
        $('#popup_photo',this.container).empty();
        $('#popup_photo',this.container).hide();
      }
            
      if (info.title){
        $("#popup_title").html(info.title);
      }
      else{        
        $("#popup_title").html(loc.name);
      }
      
      if (info.subtitle){
        $("#popup_subtitle").html(info.subtitle);
      }
      else{
        $("#popup_subtitle").empty();
      } 
       
      if (info.description){
        $("#popup_description").html(info.description);
      }
      else{
        $("#popup_description").empty();
      }
      
      if (info.adres){
        if (info.tel) 
          $("#popup_adres").html(info.adres + "<br>" + info.tel);
        else
          $("#popup_adres").html(info.adres);
      }
      else{
        $("#popup_adres").empty();
      }  
      
      if (info.email){
        $("#popup_mail").html(info.email);
        $("#popup_mail").attr('href','mailto:'+info.email);
      }
      else{
        $("#popup_mail").empty();
      }             
      
      if (info.WWW){
        var pWWW = $("#popup_www");
        pWWW.attr('href',validUrl(info.WWW));
        var wTitle = info.WWW.replace("http://","");
        if (wTitle.length > 36)
        {
            wTitle = pWWW.attr('hostname');
        }
        pWWW.html(wTitle);
      }
      else{
        $("#popup_www").empty();
      }
      
      if (info.extra){
        $("#popup_extra").html(info.extra);
      }
      else{
        $("#popup_extra").empty();
      }
    }
    else
    {
        $('#popup_default').hide();
        $('#popup_simple').show();
        $('#popup_simple_content').html(loc.description);
        $('#popup_photo',this.container).empty();
        $("#popup_title").empty();
        $("#popup_subtitle").empty();
        $("#popup_adres").empty();
        $("#popup_mail").empty();
        $("#popup_www").empty();
        $("#popup_extra").empty();
        
        $('#popup_description',this.container).html(loc.description);
        var img = $('img',$('#popup_description',this.container));
        if ((img)&&(!me.delayed)){
            me.delayed = true;
            img.load(function(){
                me.show(x,y,loc);
                me.delayed = false;
            });
            return;
        }
    }	

    if (this.map.onIconClicked) {
      $('#popup_addRoute').click(function(){me.map.onIconClicked(loc);});      
      $('#popup_simple_addRoute').click(function(){me.map.onIconClicked(loc);});      
    }  
}
brpPopupWidget.prototype.detPosition = function(x,y) {
	$('#top_balloon_container').removeClass();
	$('#bottom_balloon_container').removeClass();
	$('#left_balloon_container').removeClass();
	$('#right_balloon_container').removeClass();

    this.container.css({'width': 10,'height':10}); 
	this.container.css({'left': x,'top': y});


	this.container.show();
	var ml = ($('.mapzoomer',this.container).css('margin-left'))?$('.mapzoomer',this.container).css('margin-left'):0;
	var mr = ($('.mapzoomer',this.container).css('margin-right'))?$('.mapzoomer',this.container).css('margin-right'):0;
	var mt = ($('.mapzoomer',this.container).css('margin-top'))?$('.mapzoomer',this.container).css('margin-top'):0;
	var mb = ($('.mapzoomer',this.container).css('margin-bottom'))?$('.mapzoomer',this.container).css('margin-bottom'):0;
	var realW = $('.mapzoomer',this.container).width()+1*ml.replace('px','')+1*mr.replace('px','')+30;
	var realH = $('.mapzoomer',this.container).height()+1*mt.replace('px','')+1*mb.replace('px','');
    var balloonsize = 35;
    
	this.container.css({'width': realW +'px','height':realH+'px'}); 
	//find best position
	//try top-left top-middle top-right
	/*
	    1       3         2
	    ------------------
	    |                 |
	   7|                 |8
	    |                 |
	    -------------------
	    4       6         5 
	*/
    var w = $( window );
    var screenH = w.height();
    var screenW = w.width();
    var xl,yl;
    if (x+realW < screenW){
        xl=1;
    }
	else if ((x+(realW/2) < screenW)&&
	         (x-(realW/2) > 0)){
	    xl=3;
	}
	else 
	    xl=(x-realW <0)? 1 :2;
	
	if (y+realH < screenH){
        yl=0;
    }
	else if ((y+(realH/2) < screenH)&&
	         (y-(realH/2) >0)){  
	    yl= (xl==3)? 0 : 2;
	}
	else
	    yl=(y-realH < 0)? 0:1; 
	
	var cornerpos = yl*3 +xl;

	/*
	    1       3         2
	    ------------------
	    |                 |
	   7|                 |8
	    |                 |
	    -------------------
	    4       6         5 
	*/
    switch(cornerpos) {
    case 1:
            this.container.css({'left': x ,'top': y});	            
            $('#top_balloon_container').addClass('mapzoom_balloontop');
            this.container.css({'width': realW +'px','height':realH+balloonsize+'px'}); 
            break;
    case 2:
            this.container.css({'left': x - realW ,'top': y});	
            $('#top_balloon_container').addClass('mapzoom_balloontopinverse');
            this.container.css({'width': realW +'px','height':realH+balloonsize+'px'}); 
            break;
    case 3:
            this.container.css({'left': x - Math.round(realW /2) ,'top': y});	
            $('#top_balloon_container').addClass('mapzoom_balloontopmiddle');
            this.container.css({'width': realW +'px','height':realH+balloonsize+'px'}); 
            break;
    case 4:
            this.container.css({'left': x ,'top': y - realH});	
            $('#bottom_balloon_container').addClass('mapzoom_balloon');
            this.container.css({'width': realW +'px','height':realH+balloonsize+'px'}); 
            break;
    case 5:
            this.container.css({'left': x - realW ,'top': y - realH});	
            $('#bottom_balloon_container').addClass('mapzoom_ballooninverse');
            this.container.css({'width': realW +'px','height':realH+balloonsize+'px'}); 
            break;
    case 6:
            this.container.css({'left': x - Math.round(realW /2) ,'top': y - realH});	
            $('#bottom_balloon_container').addClass('mapzoom_balloonmiddle');
            this.container.css({'width': realW +'px','height':realH+balloonsize+'px'}); 
            break;
    case 7:
            this.container.css({'left': x ,'top': y - Math.round(realH/2)});	
            $('#left_balloon_container').addClass('mapzoom_balloonleftmiddle');
			$("td.mapzoom_left").addClass("valigncenter");
            this.container.css({'width': realW+balloonsize +'px','height':realH+'px'}); 
            break;
    case 8:
            this.container.css({'left': x - realW ,'top': y - Math.round(realH/2)});	
            $('#right_balloon_container').addClass('mapzoom_balloonrightmiddle');
			$("td.mapzoom_right").addClass("valigncenter");
            this.container.css({'width': realW+balloonsize +'px','height':realH+'px'}); 
            break;                                        
    }

}