﻿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) {
   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 { 
     data = $.parseJSON(loc.description);
    }
    catch(err){
        data = null;
    } 
    if (data){
      var info = data.data;
      if (info.photo)
      {
        var dPhoto= $('#popup_photo',this.container);
        
        dPhoto.empty();
        
        var w = dPhoto.css('width');
        var h = dPhoto.css('height');
        if (info.url){
           var a = $('<a href="'+info.url+'"  target="_blank"></a>');
           a.append('<img src="'+info.photo+'" alt="" style="width:'+w+'; height:'+h+'; border: 0px none;"/>');
           dPhoto.append(a); 
        }
        else {
           var a = $('<img src="'+info.photo+'" alt="" style="width:'+w+'; height:'+h+'; border: 0px none;"/>');
           dPhoto.append(a); 
        }
      }
      else {
        $('#popup_photo',this.container).empty();
      }
            
      var Btn = $("#popup_specialBtn");
      if (info.special){
        Btn.attr('href',validUrl(info.special));
        Btn.css('visibility','visible');
      }
      else{
        Btn.css('visibility','hidden');
      }
      
      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){
        $("#popup_www").html(info.WWW);
        $("#popup_www").attr('href',validUrl(info.WWW));
      }
      else{
        $("#popup_www").empty();
      }
      
      if (info.extra){
        $("#popup_extra").html(info.extra);
      }
      else{
        $("#popup_extra").empty();
      }
    }
    else
    {
        $('#popup_photo',this.container).empty();
        $("#popup_specialBtn").css('visibility','hidden');
        $("#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);});      
    }  
}
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;                                        
    }

}
