/**

 * Adds CPO logo pop-over and CobaltPixelTag event management.

 *

 * Documentation: https://cobalt.onconfluence.com/display/DEV/133941+-+CPO+Benefits+as+Mouseover

 *

 */

 

 

;(function() {

    /**

     * Short circuit if jQuery is not loaded.

     */

     

    if (typeof jQuery !== 'function') {

        return;

    }

    

    jQuery(document).ready(function() {



      var body = jQuery('body');

      

      /**

       * Standard markup for use with lexus_tooltip.css. 

       * Use with: P4 //Java/Websites/br_wbst_0300/implementation/src/websitesEar/websitesWebApp/css/lexus/lexus_tooltip.css

       */ 

      var markup = '<div id="tooltip" style="display: none;" class="">' +

                   '<h3 style="display: none;"></h3>' +

                   '<div class="body">' +

                   '<div class="tooltip-header">' +

                   '<span class="tooltip-header-left"></span>' +

                   '<span class="tooltip-header-right"></span>' +

                   '</div>' +

                   '<div class="tooltip-body">' +

                   '<div class="tooltip-body-content">' +

                   'Because every Lexus Certified Pre-Owned Vehicle is thoroughly reconditioned and meticulously inspected, we can comfortably sell them with a Lexus three-year, 100,000 total vehicle mile limited warranty [<a href="CPOStory" target="_blank">1</a>]. This, of course, is fully included in the purchase price.' +

                   '<br/><br/>For more information on the benefits of Lexus Certified Pre-Owned <a href="CPOStory" target="_blank">click here</a>.' +

                   '</div>' +

                   '</div>' +

                   '<div class="tooltip-footer">' +

                   '<span class="tooltip-footer-left"></span>' +

                   '<span class="tooltip-footer-right"></span>' +

                   '</div>' +

                   '<span class="tooltip-arrow tooltip-arrow-right"></span>' +

                   '<span class="tooltip-close"></span>' +

                   '</div>' +

                   '</div>';



      var eventManagerParamOb = {

        eventName: 'com.cobaltgroup.ws.action.click.lcpologo',

        publisherData: {

          eventName: 'com.cobaltgroup.ws.action.click.lcpologo',

          clickedElementId: '',

          timesClicked: 0,

          paramSet: ['eventName', 'clickedElementId', 'timesClicked']

        }

      };



      markup = jQuery(markup);

      body.append(markup);

       

      /**

       * Here's the logic for handling a click event on one of the LCPO logos.

       */

      jQuery('.certified_logo_image').css('cursor','pointer').click(function() {

      

        var parent = jQuery(this);

        var ox = parent.offset().left - 476 + 'px';

        var oy = parent.offset().top - 20 + 'px';

        

        // The pop-over is urrently visible, so let's check to see which logo is being clicked...

        if (jQuery('#tooltip:visible').length > 0 && parent.attr('id') === eventManagerParamOb.publisherData.clickedElementId) {

          markup.hide();

          return false

        }

        

        // Otherwise just show it...

        markup.css('left',ox).css('top',oy).show();

        eventManagerParamOb.publisherData.clickedElementId = parent.attr('id');

        eventManagerParamOb.publisherData.timesClicked++;

        EventManager.publish(eventManagerParamOb);

        return false;

        

      });

      

      // The close button is a bit easier...

      jQuery('#tooltip .tooltip-close').click(function() {  

        markup.hide();    

        return false;    

      });



    });

})();