Bubble = function(bubble_element,tooltip_element, thumbtack) {
    if (arguments.length > 0) {
        this.initialize(bubble_element,tooltip_element, thumbtack);
    }
}

Bubble.prototype = {
    element: null,
    tooltip:null,
    options: {
        distance: -5,
        time: 150,
        hideDelay: 0
    },
    gridEtablissements : {
    AIG : "Parc national d'Aiguebelle",
    PAN : "Parc national d'Anticosti",
    BIC : "Parc national du Bic",
    FRO : "Parc national de Frontenac",
    GAS : "Parc national de la Gaspésie",
    GRJ : "Parc national des Grands-Jardins",
    HGO : "Parc national des Hautes-Gorges-de-la-Rivière-Malbaie",
    BON : "Parc national de l'Île-Bonaventure-et-du-Rocher-Percé", 
    BOU : "Parc national des Îles-de-Boucherville",
    JAC : "Parc national de la Jacques-Cartier",
    MIG : "Parc national de Miguasha",
    MME : "Parc national du Mont-Mégantic",
    MOR : "Parc national du Mont-Orford",
    MSB : "Parc national du Mont-Saint-Bruno",
    MOT : "Parc national du Mont-Tremblant",
    MVA : "Parc national des Monts-Valin",
    OKA : "Parc national d'Oka",
    PIN : "Parc national des Pingualuit",
    PLA : "Parc national de Plaisance",
    PTA : "Parc national de la Pointe-Taillon",
    SAG : "Parc national du Fjord-du-Saguenay",
    SSL : "Parc marin du Saguenay-Saint-Laurent",
    TEM : "Parc national du Lac-Témiscouata",
    YAM : "Parc national de la Yamaska",
    ASH : "Réserve faunique Ashuapmushuan",
    AMW : "Réserve faunique des Lacs-Albanel-Mistassini-et-Waconichi",
    CHC : "Réserve faunique des Chic-Chocs",
    LAU : "Réserve faunique des Laurentides",
    LVY : "Réserve faunique La Vérendrye",
    MAS : "Réserve faunique Mastigouche",
    MAT : "Réserve faunique de Matane",
    PAL : "Réserve faunique de Papineau-Labelle",
    SPC : "Réserve faunique de Port-Cartier-Sept-Îles",
    POD : "Réserve faunique de Port-Daniel",
    POR : "Réserve faunique de Portneuf",
    RIM : "Réserve faunique de Rimouski",
    ROM : "Réserve faunique Rouge-Matawin",
    STM : "Réserve faunique du Saint-Maurice",
    PRE : "Auberge et Golf Fort-Prével",
    BDP : "Camping de la Baie-de-Percé",
    VOL : "Camping des Voltigeurs",
    KEN : "Centre touristique du Lac-Kénogami",
    SIM : "Centre touristique du Lac-Simon",
    AQU : "Aquarium du Québec",
    PCM : "Parc de la Chute-Montmorency",
    DUC : "Station touristique Duchesnay",
    VAL : "Village historique de Val-Jalbert",
    AMC : "Auberge de montagne des Chic-Chocs",
    SAN : "Sépaq Anticosti",
    PAQ : "Aquarium du Québec",
    ASN : "Réserve faunique Assinica"
  },
    
    hideDelayTimer: null,
    beingShown: false,
    shown: false,
    ttTimer:null,
    ttBeingShown:false,
    ttShown:false,

    initialize: function(bubble_element,tooltip_element, thumbtack) {
        this.element = bubble_element.clone();
        this.tooltip = tooltip_element.clone();
        
        this.element.removeAttr("id");
        this.tooltip.removeAttr("id");
        this.tooltip.css({'display':'none'})
        
        jQuery("body").append(this.element);
        jQuery("body").append(this.tooltip);

        var logo_element = this.element.find(".logo_overlay_image");
        
        logo_element.attr("src", "/resources/images/logos/" + thumbtack.data.establishment_code.toLowerCase() + ".gif")
      //logo_tooltip.attr("src", "/resources/images/logos/" + thumbtack.data.establishment_code.toLowerCase() + ".gif")
      var currentEstablishmentCode = thumbtack.data.establishment_code.toUpperCase();
      this.tooltip.append(this.gridEtablissements[currentEstablishmentCode]);
    
        var view_button = this.element.find("#view_button");
        var viewBtn = jQuery(view_button);
        
        if (null != thumbtack.data.view_button_url) {
            var hrefTemplate = thumbtack.data.view_button_url;
            viewBtn.attr("href", hrefTemplate.replace(/\[eta_id\]/g, thumbtack.data.establishment_code.toLowerCase()).replace(/\[net_id\]/g, thumbtack.data.network_code.toLowerCase()));
        } else {
            viewBtn.remove();
        }
        
        var reserve_button = this.element.find("#reserve_button");
        var reserveBtn = jQuery(reserve_button);
        
        if (null != thumbtack.data.reserve_button_url) {
            var hrefTemplate = thumbtack.data.reserve_button_url;
            reserveBtn.attr("href", hrefTemplate.replace(/\[eta_id\]/g, thumbtack.data.establishment_code.toUpperCase()).replace(/\[net_id\]/g, thumbtack.data.network_code.toUpperCase()));
        } else {
            reserveBtn.remove();
        }
        

        this.attachTo(thumbtack.image);
    },
    
    attachTo: function(image) {
        var self = this;
        if (jQuery("body.forfaits").length) {
          jQuery([image.get(0), this.element.get(0)]).click(showForfait);

        }
        else {
          jQuery([image.get(0), this.element.get(0)]).click(handleClick);
          jQuery("#map").click(handleClick)
        }
        jQuery([image.get(0), this.element.get(0)]).hover(toolOn,toolOut);
        
        function handleClick(e) {
          if($(e.currentTarget).next().css('display')=="none") {
            jQuery('.bubble').each(hideMe);
            rollOn();
          }
          else {
            jQuery('.bubble').each(hideMe);
          }
            
        }

        function showForfait(e) {
                 jQuery("#liste_forfaits div.establishmentCode").hide();
                 jQuery('div#'+jQuery(this).attr('class')+'.establishmentCode').show();
        }

        
        function toolOn(){
          if($(self.element).css('display')!="block") {
            if (self.ttTimer) clearTimeout(self.ttTimer);
              if (self.ttBeingShown || self.ttShown) {
                  // don't trigger the animation again
                  return;
              } else {
                  // reset position of tooltip
                  self.ttBeingShown = true;
                  self.tooltip.css({
                      top: image.position().top + 5,
                      left: image.position().left + image.width() + 5,
                      display: "block"
                  }).animate({
                      opacity: 1
                  }, self.options.time, "swing", function() {
                      self.ttBeingShown = false;
                      self.ttShown = true;
                  });
             }
          }
        return false;
        }
        
        function toolOut() {
          if (self.ttTimer) clearTimeout(self.ttTimer);
            self.ttTimer = setTimeout(function() {
                self.ttTimer;
                self.tooltip.animate({
                    opacity: 0
                }, self.options.time, "swing", function() {
                    self.ttShown = false;
                    self.tooltip.css("display", "none");
                });
            }, self.options.hideDelay);
            return false;
        }
        
        function rollOn() {
            if (self.hideDelayTimer) clearTimeout(self.hideDelayTimer);
           /*
 if (self.beingShown || self.shown) {
                // don't trigger the animation again
                return;
            } else {
*/
        $(self.tooltip).hide();
                // reset position of info box
                self.beingShown = true;
                self.element.css({
                    top: image.position().top - self.element.height(),
                    left: image.position().left - (self.element.width() / 2) + (image.width() / 2)-1,
                    display: "block"
                }).animate({
                    top: "-=" + self.options.distance + "px",
                    opacity: 1
                }, self.options.time, "swing", function() {
                    self.beingShown = false;
                    self.shown = true;
                });
           // }
            return false;
        }
        
        function rollOut() {
            if (self.hideDelayTimer) clearTimeout(self.hideDelayTimer);
            self.hideDelayTimer = setTimeout(function() {
                self.hideDelayTimer;
                self.element.animate({
                    top: "+=" + self.options.distance + "px",
                    opacity: 0
                }, self.options.time, "swing", function() {
                    self.shown = false;
                    self.element.css("display", "none");
                });
            }, self.options.hideDelay);
            return false;
        }
        
        function hideMe(e) {
          jQuery(this).hide();
        }
    }
};