function createChangeTooltip(tagname, myid, serviceID) {
  $("#tagedit_"+myid).tooltip({
      events: {
        def:     "click,mouseout",
        tooltip: "mouseover,mouseout",
      },
      delay: 300,
      relative:true,
      position: 'center right',
      fadeOutSpeed: 300,
      effect: 'fade',
      onBeforeShow: function() {
        if( $('#changeTooltip_'+myid+" ul").children().size() == 0 ) {
          $.ajax({  
              type: "GET",
              url: 'ConceptsForLemma',
              data: "term="+tagname,
              success: function(data){  
                var concepts = jQuery.parseJSON(data);
                for (var i=0;i<concepts.length;i++) {
                  var conceptid= concepts[i]['id'];
                  var concepthtmlid = "changeconcept_"+conceptid;
                  var conceptcontent= concepts[i]['summary'];
                  var cdescription= concepts[i]['description'];
                  var cname = concepts[i]['name'];
                  $("#changeTooltip_"+myid+" ul").append("<li class=\"ctip\" title=\""+cname+"|"+cdescription+"\" id=\""+concepthtmlid+"\">"+conceptcontent+"</li>");
                  $("#"+concepthtmlid).cluetip({splitTitle: '|', arrows: true, cluetipClass: 'jtip', dropShadow: false, clickThrough: true});
                  // $("#"+concepthtmlid).click(function() {
                  // var index = i;
                  // var concepts = concepts;
                  // or use bind to forward keep context
                  $("#"+concepthtmlid).bind("click", {mid: myid, index: i, sid: serviceID, conc: concepts}, function(event) {
                    $(document).trigger('hideCluetip');
                    var myArray = new Object();
                    myArray['id'] = event.data.conc[event.data.index]['id'];
                    myArray['name'] = event.data.conc[event.data.index]['name']; 
                    myArray['summary'] = event.data.conc[event.data.index]['summary']; 
                    myArray['description'] = event.data.conc[event.data.index]['description']; 

                    var api = $("#tagedit_"+event.data.mid).data("tooltip");
                    api.hide();

                    $.ajax({  
                        type: "POST",
                        url: 'ChangeTag',
                        data: "tagData="+escape($.toJSON(myArray))+"&oldTagID="+event.data.mid+"&serviceID="+event.data.sid,
                        success: function(data){  
                          $.n.defaults.timeout = 3000;
                          $.n.success("Tag changed, thanks a lot for your contribution!");

                          var newTagEl = '<span id="tagcontainer_'+myArray['id']+'" class="existingtag">';
                          newTagEl += '<strong>'+myArray['name']+'</strong><br />';
                          newTagEl += '('+myArray['summary']+')';
                          newTagEl += '<img class="tagremove" id="tagremove_'+myArray['id']+'" src="images/remove.png" />';
                          newTagEl += '<img class="tagedit" id="tagedit_'+myArray['id']+'" src="images/edit.png" />';
                          newTagEl += '</span>';

                          $("#tagcontainer_" + event.data.mid).replaceWith(newTagEl);

                          $("#tagcontainer_" + myArray['id']).hover(
                            function () {
                              var thisid = myArray['id'];
                              $("#tagremove_"+thisid).show();
                              $("#tagedit_"+thisid).show();
                            }, 
                            function () {
                              var thisid = myArray['id'];
                              $("#tagremove_"+thisid).hide();
                              $("#tagedit_"+thisid).hide();
                            }
                          );

                          var newTTEl = '<div class="tooltip" id="changeTooltip_'+myArray['id']+'">';
                          newTTEl += '<strong>Wrong meaning for "'+myArray['name']+'"?</strong>';
                          newTTEl += '<br /><span style="display:block;margin-top:5px;margin-bottom:10px">Select to change:</span><br />';
                          newTTEl += '<ul class="changetag" id="testlist"></ul></div>';

                          $("#tagedit_"+myArray['id']).after(newTTEl);

                          addDel(myArray['id'], event.data.sid);
                          createChangeTooltip(myArray['name'], myArray['id'], event.data.sid);

                        }  
                    });  

                  });
                }  
              }
          });  
        }
      }
  });
  }

  function addDel(myid, serviceID) {
    var tagremoveid = "#tagremove_"+myid;
    var tagcontainerid = "#tagcontainer_"+myid;
    $(tagremoveid).click(function() {
      var mid = myid;
      var contid = tagcontainerid;
      if(confirm("Are you sure you want to remove this Tag?")) {

        $.ajax({  
            type: "POST",
            url: 'RemoveTag',
            data: "tagID="+mid+"&serviceID="+serviceID,
            success: function(data){  
              $.n.defaults.timeout = 3000;
              $.n.success("Tag removed, thanks a lot for your contribution!");
              $(tagcontainerid).fadeOut(500, function() { $(contid).remove(); });
            }  
        });  

      }
    });
    }


  // TODO make generic for mashups and services
  function addDelMashup(myid, mashupID) {
    var tagremoveid = "#tagremove_"+myid;
    var tagcontainerid = "#tagcontainer_"+myid;
    $(tagremoveid).click(function() {
      var mid = myid;
      var contid = tagcontainerid;
      if(confirm("Are you sure you want to remove this Tag?")) {

        $.ajax({  
            type: "POST",
            url: 'RemoveTagMashup',
            data: "tagID="+mid+"&serviceID="+mashupID,
            success: function(data){  
              $.n.defaults.timeout = 3000;
              $.n.success("Tag removed, thanks a lot for your contribution!");
              $(tagcontainerid).fadeOut(500, function() { $(contid).remove(); });
            }  
        });  

      }
    });
    }

function createChangeTooltipBootstrap(tagname, myid, serviceID) {
  $("#tagedit_"+myid).tooltip({
      events: {
        def:     "click,mouseout",
        tooltip: "mouseover,mouseout",
      },
      delay: 300,
      relative:true,
      position: 'center right',
      fadeOutSpeed: 300,
      effect: 'fade',
      onBeforeShow: function() {
        if( $('#changeTooltip_'+myid+" ul").children().size() == 0 ) {
          $.ajax({  
              type: "GET",
              url: 'ConceptsForLemma',
              data: "term="+tagname,
              success: function(data){  
                var concepts = jQuery.parseJSON(data);
                for (var i=0;i<concepts.length;i++) {
                  var conceptid= concepts[i]['id'];
                  var concepthtmlid = "changeconcept_"+conceptid;
                  var conceptcontent= concepts[i]['summary'];
                  var cdescription= concepts[i]['description'];
                  var cname = concepts[i]['name'];
                  $("#changeTooltip_"+myid+" ul").append("<li class=\"ctip\" title=\""+cname+"|"+cdescription+"\" id=\""+concepthtmlid+"\">"+conceptcontent+"</li>");
                  $("#"+concepthtmlid).cluetip({splitTitle: '|', arrows: true, cluetipClass: 'jtip', dropShadow: false, clickThrough: true});
                  //                         $("#"+concepthtmlid).click(function() {
                  //                           var index = i;
                  //                           var concepts = concepts;
                  // or use bind to forward keep context
                  $("#"+concepthtmlid).bind("click", {mid: myid, index: i, sid: serviceID, conc: concepts}, function(event) {
                    $(document).trigger('hideCluetip');
                    var myArray = new Object();
                    myArray['id'] = event.data.conc[event.data.index]['id'];
                    myArray['name'] = event.data.conc[event.data.index]['name']; 
                    myArray['summary'] = event.data.conc[event.data.index]['summary']; 
                    myArray['description'] = event.data.conc[event.data.index]['description']; 

                    var api = $("#tagedit_"+event.data.mid).data("tooltip");
                    api.hide();

                          var newTagEl = '<span id="tagcontainer_'+myArray['id']+'" class="tag">';
                          newTagEl += '<strong>'+myArray['name']+'</strong><br />';
                          newTagEl += '('+myArray['summary']+')';
                          newTagEl += '<img class="tagremove" id="tagremove_'+myArray['id']+'" src="images/remove.png" />';
                          newTagEl += '<img class="tagadd" id="tagadd_'+myArray['id']+'" src="images/add-round.png" />';
                          newTagEl += '<img class="tagedit" id="tagedit_'+myArray['id']+'" src="images/edit.png" />';
                          newTagEl += '</span>';

                          $("#tagcontainer_" + event.data.mid).replaceWith(newTagEl);

                          var newTTEl = '<div class="tooltip" id="changeTooltip_'+myArray['id']+'">';
                          newTTEl += '<strong>Wrong meaning for "'+myArray['name']+'"?</strong>';
                          newTTEl += '<br /><span style="display:block;margin-top:5px;margin-bottom:10px">Select to change:</span><br />';
                          newTTEl += '<ul class="changetag" id="testlist"></ul></div>';

                          $("#tagedit_"+myArray['id']).after(newTTEl);

                          $("#taginput_"+event.data.mid).attr("id", "taginput_"+myArray['id']);
                          $("#taginput_"+myArray['id']).attr("name", "concepts");
                          $("#taginput_"+myArray['id']).attr("value", escape($.toJSON(myArray)) );

                          addConfBootstrapped(myArray['id']);
                          createChangeTooltipBootstrap(myArray['name'], myArray['id'], event.data.sid);

                          $("#tagadd_"+myArray['id']).hide();
                          $("#tagremove_"+myArray['id']).show();
                          $("#tagedit_"+myArray['id']).show();

                          $("#tagcontainer_"+myArray['id']).removeClass("tag_unconfirmed");
                          $("#tagcontainer_"+myArray['id']).addClass("tag");
                  });
                }  
              }
          });  
        }
      }
  });
  }

// TODO make generic for services and mashups
function createChangeTooltipMashup(tagname, myid, mashupID) {
  $("#tagedit_"+myid).tooltip({
      events: {
        def:     "click,mouseout",
        tooltip: "mouseover,mouseout",
      },
      delay: 300,
      relative:true,
      position: 'center right',
      fadeOutSpeed: 300,
      effect: 'fade',
      onBeforeShow: function() {
        if( $('#changeTooltip_'+myid+" ul").children().size() == 0 ) {
          $.ajax({  
              type: "GET",
              url: 'ConceptsForLemma',
              data: "term="+tagname,
              success: function(data){  
                var concepts = jQuery.parseJSON(data);
                for (var i=0;i<concepts.length;i++) {
                  var conceptid= concepts[i]['id'];
                  var concepthtmlid = "changeconcept_"+conceptid;
                  var conceptcontent= concepts[i]['summary'];
                  var cdescription= concepts[i]['description'];
                  var cname = concepts[i]['name'];
                  $("#changeTooltip_"+myid+" ul").append("<li class=\"ctip\" title=\""+cname+"|"+cdescription+"\" id=\""+concepthtmlid+"\">"+conceptcontent+"</li>");
                  $("#"+concepthtmlid).cluetip({splitTitle: '|', arrows: true, cluetipClass: 'jtip', dropShadow: false, clickThrough: true});
                  // $("#"+concepthtmlid).click(function() {
                  // var index = i;
                  // var concepts = concepts;
                  // or use bind to forward keep context
                  $("#"+concepthtmlid).bind("click", {mid: myid, index: i, maid: mashupID, conc: concepts}, function(event) {
                    $(document).trigger('hideCluetip');
                    var myArray = new Object();
                    myArray['id'] = event.data.conc[event.data.index]['id'];
                    myArray['name'] = event.data.conc[event.data.index]['name']; 
                    myArray['summary'] = event.data.conc[event.data.index]['summary']; 
                    myArray['description'] = event.data.conc[event.data.index]['description']; 

                    var api = $("#tagedit_"+event.data.mid).data("tooltip");
                    api.hide();

                    $.ajax({  
                        type: "POST",
                        url: 'ChangeTagMashup',
                        data: "tagData="+escape($.toJSON(myArray))+"&oldTagID="+event.data.mid+"&serviceID="+event.data.maid,
                        success: function(data){  
                          $.n.defaults.timeout = 3000;
                          $.n.success("Tag changed, thanks a lot for your contribution!");

                          var newTagEl = '<span id="tagcontainer_'+myArray['id']+'" class="existingtag">';
                          newTagEl += '<strong>'+myArray['name']+'</strong><br />';
                          newTagEl += '('+myArray['summary']+')';
                          newTagEl += '<img class="tagremove" id="tagremove_'+myArray['id']+'" src="images/remove.png" />';
                          newTagEl += '<img class="tagedit" id="tagedit_'+myArray['id']+'" src="images/edit.png" />';
                          newTagEl += '</span>';

                          $("#tagcontainer_" + event.data.mid).replaceWith(newTagEl);

                          $("#tagcontainer_" + myArray['id']).hover(
                            function () {
                              var thisid = myArray['id'];
                              $("#tagremove_"+thisid).show();
                              $("#tagedit_"+thisid).show();
                            }, 
                            function () {
                              var thisid = myArray['id'];
                              $("#tagremove_"+thisid).hide();
                              $("#tagedit_"+thisid).hide();
                            }
                          );

                          var newTTEl = '<div class="tooltip" id="changeTooltip_'+myArray['id']+'">';
                          newTTEl += '<strong>Wrong meaning for "'+myArray['name']+'"?</strong>';
                          newTTEl += '<br /><span style="display:block;margin-top:5px;margin-bottom:10px">Select to change:</span><br />';
                          newTTEl += '<ul class="changetag" id="testlist"></ul></div>';

                          $("#tagedit_"+myArray['id']).after(newTTEl);

                          addDelMashup(myArray['id'], event.data.maid);
                          createChangeTooltipMashup(myArray['name'], myArray['id'], event.data.maid);

                        }  
                    });  

                  });
                }  
              }
          });  
        }
      }
  });
  }