<!-- include files -->
<script src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/jquery.min.js"></script>
<link rel="stylesheet" href="/resource/1400648652000/dupedetector__menu_resources/menu-resources/menu.css">

<!-- HTML Menu -->

<div class="dropdown-menu" id="dropdown-menu">
<a href="/003?rlid=RelatedContactList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/application_view_detail.png" />
Sync Contacts
</a>
<a href="/006?rlid=RelatedOpportunityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/calendar-disabled.png">
Export Orders</a>
<a href="/005?rlid=RelatedCaseList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/zip.png"/> 
View Cases
</a>
<div class="break"></div>
<a href="/_ui/core/chatter/ui/ChatterPage" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/connect_light_small_short.gif"/> 
Sync Feeds</a>
<a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/phone.png"/>
Calls History
</a>
<a href="/002?parent_id=001900000054UZ7&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/3668432.png"/>
Box.Net Documents
</a>
<a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/feature_gmail_icon.gif"/>
Google Mails
</a>
<div class="break"></div>
<a href="00T?rlid=RelatedActivityList&amp;id=" target="_BLANK">
<img src="/resource/1400648652000/dupedetector__menu_resources/menu-resources/delete.png"/>
Delete Logs
</a>
</div> 


<!-- JS Part -->
<script>
    function init_sfdc_menu(){
        $('.x-grid3-col-00N9000000A4pIp').click(function(event){
            event.stopPropagation();
            var id = $(this).attr("id").split("_")[0];
            
            $('.dropdown-menu').css( {position:"absolute", top:event.pageY-100, left: event.pageX-30});
            
            $('.dropdown-menu').find('a').each(function(){
                var oldhref = $(this).attr("href");
                oldhref = oldhref.substring(0,oldhref.lastIndexOf('=')+1);
                $(this).attr("href", oldhref + id);
            });
            $('.dropdown-menu').show();
        });
        
        $(document).click(function(){
            $('.dropdown-menu').hide();
        });
    }

    $(document).ready(function(e) {
        $('#bodyCell').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
            setTimeout(init_sfdc_menu(),500);
        });

    });
</script>

<apex:component>
  <apex:attribute  name="accountId" type="string" description="passed account id"/>
  <script src="{!URLFOR($Resource.ckeditor,'ckeditor/jquery-1.4.2.min.js')}"></script>
  <script>
      //Event Handler for ShowContacts button 
      //Fetch and prepares the contact table in editor
      function showContacts(){
              // invoke your sfdc method here
      }
      
      //Event Handler for ShowOpportunities button
      //Fetch and show the opportunities in RTE
      function showOpportunities(){
             // invoke your sfdc method here
        }
      
      /****
          Custom buttons configuration
          Provide name, label, command (js function), and Image for the button
      */
      var config = {
            "Buttons": [
                {
                    "Name" : "Contacts",
                    "Label" : "Show Contacts",
                    "Command": "showContacts",
                    "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/16-cube-green.png')}"
                },
                    {"Name" : "Opportunities",
                    "Label" : "Show Opportunities",
                    "Command": "showOpportunities",
                    "Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/contact.png')}"
                }
            ]
       }
       
       
       function initialize(){
             for(var i=0; i<config.Buttons.length;i++){
                addButton(config.Buttons[i].Name,
                          config.Buttons[i].Image,
                          config.Buttons[i].Command,
                          config.Buttons[i].Label);
             }
        }
       function addButton(name,image,command,label){
            $('#cke_21').append('<span class="cke_toolbar_start"></span>'+
                                '<span role="presentation" class="cke_toolgroup">'+
                                    '<span class="cke_button">'+
                                        '<a onclick="'+command+'();" onblur="this.style.cssText = this.style.cssText;"  role="button" hidefocus="true"  title="'+label+'" class="cke_button_outdent cke_disabled" id="'+name+'" aria-disabled="true">'+
                                            '<span class="cke_icon" style="background-image:url('+image+');background-position:center;">&nbsp;</span>'+
                                            '<span class="cke_label" id="'+name+'">'+label+'</span>'+
                                        '</a>'+
                                    '</span>'+
                                '</span>'+
                                '<span class="cke_toolbar_end"></span>'
                                );
       }

        
        var defaultFunc = window.onload;
        window.onload = function() {
            if(defaultFunc)
                defaultFunc ();
            setTimeout("initialize()",1000);
        }
   </script> 
</apex:component>

<ul id="menu" class="custom-menu">
        <li><a href="javascript:alert('Clicked Add Notes');"  onclick="addnote();">Add Notes</a></li>
        <li><a href="javascript:alert('Clicked Add Memos');" id="menu_2">Add Memos</a></li>
        <hr style="clear:both;color:#E6E6E6" />        
        <li><a href="javascript:alert('Clicked View Order');" id="menu_4">View Order</a></li>
        <li><a href="javascript:alert('Clicked View Invoice');" id="menu_5">View Invoice</a></li>
    <li><a href="javascript:alert('Clicked View Employee');" id="menu_3">View Employee</a></li>
</ul>

<script>
$(function() {
    $(".emp").bind("contextmenu", function(event) {
            event.preventDefault();
            $("#menu").show();
            $("#menu").css({top: event.pageY + "px", left: event.pageX + "px"});
    });
        
    $(document).bind("click", function(event) {
        $("#menu").hide();
    });
});
</script>

<style>
.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#FFF;
    border: 1px solid black;
    padding: 5px;
    list-style: none;
    width:150px;
    display:none;
}
.custom-menu a{
    text-decoration: none;
    padding:5px;
    font-size:13px;
    width:100px;
    display:block;
    color:#000;
}
.custom-menu a:hover{
    text-decoration: none;
    border:1px solid #ccc;
    background-color:greenyellow;
    
}
.custom-menu li{
    margin:5px;
}
</style>