var pageName = "";
var url = "";
var decodedUrl = "";
var userId = "";
var company = "";
var topic = "";
var encodedCompany = "";
var encodedTopic = "";
var encodedUrl = "";
var loadingImageUrl = "https://wikirate-production-storage.fra1.cdn.digitaloceanspaces.com/files/20531/12604360-large.gif";
var markedIrrelevant = false;
function escapeHtml(string) {
  return String(string).replace(/[&<>"'\/]/g, function(s) {
    return entityMap[s];
  });
}

function unescapeHtml(string) {
  return $("<div/>").html(string).text();
}

function testSameOrigin(testUrl) {
  $.getJSON("Source.json?view=check_iframable&url=" + testUrl, function(data) {
    if (!data.result) { //remove iframe and show redirection message
      $('#webpage-preview').html("");
       $redirectNotice = $("<div>", {
        "class": "redirect-notice"
      });
      if(pageName==="")
      {
        //from certh
      }else
      {
        //locally
        //Page_000001545?view=content&slot[structure]=source%20item%20preview
        $.ajax("/"+pageName+"?view=content&slot[structure]=source%20item%20preview")
        .done(function(noteFormHtml) {
          $redirectNotice.append(noteFormHtml);
          $redirectNotice.trigger('slotReady');
        })
        .fail(function(xhr, ajaxOptions, thrownError) {
          var html = $(xhr.responseText);
          html.find('.card-header').remove();
          $redirectNotice.append(html);
        });
      }
      $('#webpage-preview').append($redirectNotice);
      $('#webpage-preview').addClass("non-previewable");
    }
  });

}
function getPopup(popupId)
{
  var $popupWindow = $('#'+popupId);
  if($popupWindow.length===0){
    $("#main").prepend('<div id="'+popupId+'" style="display:none;"></div>');//create one
    $popupWindow = $('#'+popupId);
  }
  return $popupWindow;
}
function enableMakeNoteButton() {
  $("#make-a-note-button").removeAttr("disabled");
}
//=====for note ====
var makeNoteButtonOnClicked = function() {
  var $img = $('<img id="make_note_loading_image_div">'); //Equivalent: $(document.createElement('img'))
  $img.attr('src', loadingImageUrl);

  $popupWindow = getPopup("note-form");

  $makeNoteButton = $(this);
  $makeNoteButton.attr("disabled", "disabled");

  //show loading dialog
  if($popupWindow.html().trim().length===0)
  {
    $popupWindow.html($img);
    //create the source, get the html in source preview structure
    if(pageName === "")
    {
      sendFeedback("relevant", function() {
        createSource(sourceCreatedWithHtml, sourceCreatedFailCallback);
      }, function(xhr, ajaxOptions, thrownError) {
        if (xhr.responseText == "Permission Denied") {
          showPermissionDenial("note-form");
        } else {
          showErrorMsg(xhr.responseText);
        }
        enableMakeNoteButton();
      });
    }else
    {
      getSource(pageName,sourceCreatedWithHtml, sourceCreatedFailCallback);
    }

  }
  $popupWindow.dialog({
    height: 'auto',
    minWidth: 500,
    position: {
      of: $(".navbar"),
      my: "right top",
      at: "right bottom",
      collision: "none none"
    },
    title: '<i class="fa fa-arrows"></i>',
    closeOnEscape: false,
    resizable: false
  });
}
function handleSourceHtmlAndNewNoteHtml(sourceHtml, newNoteFormHtml) {


  var _sourceHtml = $(sourceHtml);

  var html = $(newNoteFormHtml);

  var $noteForm = $('#note-form');
  $noteForm.html(newNoteFormHtml);
  $noteForm.find('.card-header').remove();
  $noteForm.find('form:first').find('.create-cancel-button:first').on('click', function() {
    $noteForm.empty();
    $noteForm.dialog("close");
  });
  $noteForm.prepend(_sourceHtml);
  if($("#source-name").html().trim().length===0)
    $noteForm.prepend("<span>Source added.</span>");

  //handle comapny and topic name
  if ($('.RIGHT-company select option[value="' + unescapeHtml(decodeURIComponent(company)) + '"]').length === 0) { //add company to select
    $companySelect = $('.RIGHT-company select');
    $companySelect.append('<option selected >' + decodeURIComponent(decodeURIComponent(company)) + '</option>');
    $companySelect.trigger("chosen:updated");

  }
  if ($('.RIGHT-topic select option[value="' + unescapeHtml(decodeURIComponent(topic)) + '"]').length === 0) { //add company to select
    $topicSelect = $('.RIGHT-topic select');
    $topicSelect.append('<option selected >' + decodeURIComponent(decodeURIComponent(topic)) + '</option>');
    $topicSelect.trigger("chosen:updated");
  }
  wagn.initializeEditors($noteForm.find(".new-view:first"));
  $('<input class="card-content" id="card_subcards__Source_content" name="card[subcards][+Source][content]" value="' + pageName + '" type="hidden" />')
    .insertAfter("#card_type_id");

}
var sourceCreatedFailCallback = function(xhr, ajaxOptions, thrownError) {
  var html = $(xhr.responseText);
  html.find('.card-header').remove();
  $('#note-form').html(html);
  $('#note-form').find('div:first').trigger('slotReady');
  enableMakeNoteButton();
};

function createSource(callback, failCallback) {
  var url = "/card/create?";
  url += "success[view]=content";
  url += "&slot[structure]=source+preview";
  url += "&sourcebox=true";
  url += "&card[type_code]=source";
  url += "&card[subcards][" + encodeURIComponent("+") + "Link][content]=" + encodedUrl;
  if (!markedIrrelevant) {
    url += "&card[subcards][" + encodeURIComponent("+") + "Company][content]=" + encodedCompany;
    url += "&card[subcards][" + encodeURIComponent("+") + "Topic][content]=" + encodedTopic;
  }
  var jqxhr = $.ajax(url)
    .done(callback)
    .fail(function(xhr, ajaxOptions, thrownError) {
      if (failCallback)
        failCallback(xhr, ajaxOptions, thrownError);
    });
}

function getSource(pageName,callback, failCallback) {
  var url = pageName;
  url += "?view=content";
  url += "&slot[structure]=source+preview";

  var jqxhr = $.ajax(url)
    .done(callback)
    .fail(function(xhr, ajaxOptions, thrownError) {
      if (failCallback)
        failCallback(xhr, ajaxOptions, thrownError);
    });
}

var sourceCreatedWithHtml = function(data) {
  //get the note form html

  var sourceHtml = data;
  $.ajax("/new/Note?view=new&main=note&slot[structure]=note_source_preview&is_main=true&slot%5Bhome_view%5D=open&slot%5Binc_name%5D=_main&slot%5Binc_syntax%5D=_main" + (!markedIrrelevant ? ("&_Companies=" + encodedCompany + "&_Topics=" + encodedTopic) : ""))
    .done(function(noteFormHtml) {
      gotNewNoteHtml(sourceHtml, noteFormHtml);
    })
    .fail(function(xhr, ajaxOptions, thrownError) {
      var html = $(xhr.responseText);
      html.find('.card-header').remove();
      $('#note-form').html(html);
      $('#note-form').find('div:first').trigger('slotReady');
      enableMakeNoteButton();
    });

};
var gotNewNoteHtml = function(sourceHtml, newNoteFormHtml) {

  //show the source and new note form
  //override the note form buttons
  //override the cancel button on click event to dismiss the dialogue only
  var pageNumer = sourceHtml.match(/data-card-name="Page-(\d+)"/)[1];
  pageName = "Page-" + pageNumer;
  if (!markedIrrelevant)
  {
    reloadTopBarAsExisitingSource(sourceHtml,newNoteFormHtml);
    $("#company-and-topic-detail-link").show();
  }

};

function refreshNoteNumber(pageName) {
  var jqxhr = $.ajax("/" + pageName + decodeURIComponent("+") + "note count?view=core")
    .done(function(data) {
      if (data > 0) {
        $("#note-count-number").html(data);
        $('#note-count').show();
        $('.show-link-in-popup').each(function(){
          $(this).off("click").click(linkOnClick);
        });
      }
    })
    .fail(function(xhr, ajaxOptions, thrownError) {
    });
}
var reloadTopBarAsExisitingSource = function(sourceHtml,newNoteFormHtml) {
  var url = pageName+"?view=preview_options"

  var jqxhr = $.ajax(url)
    .done(function(data) {
      $('.menu-options:first').replaceWith(data);
      rebindAllOnClickListener();
      handleSourceHtmlAndNewNoteHtml(sourceHtml, newNoteFormHtml);
      $('#note-form').find('div:first').trigger('slotReady');
      $('#note-form').find('.TYPE-note:first').trigger('slotReady');
      existingSource = true;
      $('#note-form').find('form:first').on('ajax:success', function(_event, data, xhr) {
        if (!markedIrrelevant)
          refreshNoteNumber(pageName);
        //remove the note
        //show success
        var $html = $(data);


        $('.card-slot.new-view.card-frame.ALL.TYPE-note:first').remove();
        var $noteSuccess = $("<div id='note-success'></div>");
        $noteSuccess.append("<span>Success! Thanks for making a note.</span>");
        $noteSuccess.append("<a target='_blank' href='/" + $html.attr('id') + "'>Visit the note.</a>");
        $noteSuccess.append("<a id='keep-reading' href='#'>Keep Reading.</a>");
        $('#note-form').append($noteSuccess);

        $('#keep-reading').click(function() {
          $('#note-form').dialog("close");
        });
        return true;
      });

      enableMakeNoteButton();
    })
    .fail(function(xhr, ajaxOptions, thrownError) {
      showErrorMsg(xhr.responseText);
    });
};
var createNote = function(pageName) {

  $('<input class="card-content" id="card_subcards__Source_content" name="card[subcards][+Source][content]" value="' + pageName + '" type="hidden" />')
    .insertAfter("#card_type_id");
  $_form = $('#note-form').find('form:first');
  $_form.setContentFieldsFromMap();
  var result = "";
  var url = "/card/create/";
  $.ajax({
      type: "POST",
      url: url,
      data: $_form.serialize()
    })
    .done(function(data) {
      $('#note-form').empty();
      if (!markedIrrelevant)
        refreshNoteNumber(pageName);
      $('#note-form').dialog("close");
    }).fail(function() {

      $_submitButton = $_form.find('.create-submit-button:first');
      $_submitButton.removeAttr("disabled");
      $_submitButton.html("Submit");

    });
};
//=====for irrelevant
function prepareForAfterIrrelevantFeedback() {
  $('#irrelevant-options').dialog("close");
  var $img = $('<img id="feedback_loading_image_div">'); //Equivalent: $(document.createElement('img'))
  $img.attr('src', loadingImageUrl);

  var $feedbackOptions = getPopup('after-irrelevant-options');
  $feedbackOptions.html($img);
  $feedbackOptions.css('maxHeight', $(window).height() - $('#logo-bar').height());
  $feedbackOptions.dialog({
    height: 'auto',
    width: '400',

    position: {
      of: $("#logo-bar"),
      my: "right top",
      at: "right bottom",
      collision: "none none"
    },
    title: '<i class="fa fa-arrows"></i>',
    closeOnEscape: false,
    resizable: false
  });
}
var irrelevantClicked = function() {
  //update the name of buttons
  markedIrrelevant = true;




  var $irrelevantDialog = getPopup('irrelevant-options');
  $irrelevantDialog.html('<span>This source is not related to:</span> \
    <br /> \
    <div id="company-irrelevant" class="button-primary  button-secondary"> \
      <a href="#" id="company-irrelevant-button">Company</a> \
    </div> \
    <div id="topic-irrelevant" class="button-primary  button-secondary"> \
      <a href="#" id="topic-irrelevant-button">Topic</a> \
    </div> \
 \
    <div id="either-irrelevant" class="button-primary  button-secondary"> \
      <a href="#" id="either-irrelevant-button">Either</a> \
    </div>');
  $('#company-irrelevant-button').html(company);
  $('#topic-irrelevant-button').html(topic);
  //bind the click events
  $('#company-irrelevant-button').click(function() {
    prepareForAfterIrrelevantFeedback();
    sendFeedback("company", afterSendingIrrelevantFeedback, sendingIrrelevantFeedbackFailCallback);

  });
  $('#topic-irrelevant-button').click(function() {
    prepareForAfterIrrelevantFeedback();
    sendFeedback("topic", afterSendingIrrelevantFeedback, sendingIrrelevantFeedbackFailCallback);
  });
  $('#either-irrelevant-button').click(function() {
    prepareForAfterIrrelevantFeedback();
    sendFeedback("either", afterSendingIrrelevantFeedback, sendingIrrelevantFeedbackFailCallback);
  });
  $irrelevantDialog.dialog({
    height: 'auto',
    width: '300',
    position: {
      of: $("#logo-bar"),
      my: "right top",
      at: "right bottom",
      collision: "none none"
    },
    title: '<i class="fa fa-arrows"></i>',
    closeOnEscape: false,
    resizable: false
  });
  return false;
}

var sendingIrrelevantFeedbackFailCallback = function(xhr, ajaxOptions, thrownError) {

  if (xhr.responseText == "Permission Denied")
    showPermissionDenial("after-irrelevant-options");
  else {
    showErrorMsg(xhr.responseText);
  }
}
var afterSendingIrrelevantFeedback = function() {
  $('#irrelevant-options').dialog("close");
  var $irrelevantButton = $('#mark-irrelevant-button');
  $irrelevantButton.find("span:first").html("Marked irrelevant");
  $irrelevantButton.replaceWith($irrelevantButton.html());
  $('#mark-irrelevant').attr('disabled', 'disabled');
  $('#mark-irrelevant').css("pointer-events", "none");
  $('#mark-irrelevant').css("cursor", "default");
  $('#mark-relevant').hide();


  var $afterIrrelevantOption = $('#after-irrelevant-options');
  var noteButtonHtml = $('#make-note').html();
  var $noteButton = $('<button class="create-submit-button" id="make-note-after-irrelevant" name="button">Make a note</button>');
  $afterIrrelevantOption.html($noteButton);
  $noteButton = $('#make-note-after-irrelevant');
  $afterIrrelevantOption.prepend("<br /><span>You can still make a cliam on this source:</span><br />");
  // $afterIrrelevantOption.append("<br /><span>Try other sources:</span><br />");
  // $afterIrrelevantOption.append("<img id='loading_gif' src='https://wikirate-production-storage.fra1.cdn.digitaloceanspaces.com/files/20531/12604360-medium.gif' />");

  $noteButton.click(function() {
    makeNoteButtonOnClicked();
    $('#after-irrelevant-options').dialog("close");
  });

  //refer to suggested source script
  //addSuggestedSource($afterIrrelevantOption, userId, company, topic);

}
function sendFeedback(type, successCallback, failcallback) {

  var jqxhr = $.ajax("/Source.json?view=feedback&url=" + encodedUrl + "&company=" + encodedCompany + "&topic=" + encodedTopic + "&type=" + type)
    .done(function(data) {
      if (successCallback)
        successCallback();
    })
    .fail(function(xhr, ajaxOptions, thrownError) {
      // console.log("Fail to send feedback");
      if (failcallback)
        failcallback(xhr, ajaxOptions, thrownError);
    });
}
var showPermissionDenial = function(elementId) {
  var jqxhr = $.ajax("/"+pageName+"?view=denial")
    .done(function(data) {
      //not possible i guess
    })
    .fail(function(xhr, ajaxOptions, thrownError) {
      var $elementToShowPermissionDenial = $('#' + elementId);
      $denialHtml = $(xhr.responseText);
      $denialHtml.find('.card-header').remove();
      $elementToShowPermissionDenial.html($denialHtml);

    });
}
//=====for company and topic detail
var comapnyAndTopicDetailLinkClicked = function(event) {
  event.preventDefault();
  var img = $('<img id="company_and_topic_detail_loading_image_div">'); //Equivalent: $(document.createElement('img'))
  img.attr('src', loadingImageUrl);



  var $popupWindow = getPopup("company-and-topic-detail");

  $popupWindow.html(img);
  $popupWindow.dialog({
    height: 'auto',
    minWidth: 500,
    position: {
      of: $("#company-and-topic"),
      my: "center top",
      at: "center bottom",
      collision: "none none"
    },
    title: '<i class="fa fa-arrows"></i>',
    closeOnEscape: false,
    resizable: false
  });

  $.ajax($("#company-and-topic-detail-link").attr("href"))
    .done(companyAndTopicHtmlGot)
    .fail(companyAndTopicHtmlErrorGot);
}
var companyAndTopicHtmlErrorGot = function(xhr, ajaxOptions, thrownError) {
  var html = $(xhr.responseText);
  html.find('.card-header').remove();
  $('#company-and-topic-detail').html(html);
  $("#company-and-topic-detail").find("div:first").trigger('slotReady');
}
var companyAndTopicHtmlGot = function(_html) {
  var html = $(_html);
  html.find('.card-header').remove();
  var $companyAndTopicDetail = $("#company-and-topic-detail");
  $companyAndTopicDetail.html(html);
  $companyAndTopicDetail.find('.cancel-button:first').on('click', function() {

  $companyAndTopicDetail.empty();
  $companyAndTopicDetail.dialog("close");

  });

  $companyAndTopicDetail.find('form:first').on('ajax:success', function(data, c, d) {
    $companyAndTopicDetail.empty();
    refreshCompanyAndTopic();
    $companyAndTopicDetail.dialog("close");
    return true;
  });

  $companyAndTopicDetail.find("div:first").trigger('slotReady');

}
function refreshCompanyAndTopic(){
  var jqxhr = $.ajax("/"+pageName+"?view=company_and_topic_detail")
    .done(function(data) {
      $('#company-and-topic').replaceWith(data);
      $("#add-company-link").click(comapnyAndTopicDetailLinkClicked);
      $("#add-topic-link").click(comapnyAndTopicDetailLinkClicked);
      $("#company-and-topic-detail-link").click(comapnyAndTopicDetailLinkClicked);
    })
    .fail(function(xhr, ajaxOptions, thrownError) {
      showErrorMsg(xhr.responseText);
    });
}
function rebindAllOnClickListener(){

  $("#add-company-link").off("click").click(comapnyAndTopicDetailLinkClicked);
  $("#add-topic-link").off("click").click(comapnyAndTopicDetailLinkClicked);
  $("#company-and-topic-detail-link").off("click").click(comapnyAndTopicDetailLinkClicked);
  $('#mark-irrelevant-button').off("click").click(irrelevantClicked);
  $("#make-a-note-button").off("click").click(makeNoteButtonOnClicked);
  $("#mark-relevant-button").off("click").click(makeNoteButtonOnClicked);
  $('.show-link-in-popup').each(function(){
    $(this).off("click").click(linkOnClick);
  });
}

function resizeIframe() {
  $(".webpage-preview").height($(window).height() - $('.navbar').height()-1);
  //$(".webpage-preview").css('margin-top',$('.navbar').height()+1);
}
$(document).ready(function() {

  if($("body").attr("id")=="source-preview-page-layout"){
    $('[data-toggle="source_preview_tab_ajax"]').click(function(e) {
      var $this = $(this),
          loadurl = $this.attr('href'),
          targ = $this.attr('data-target');
      if (undefined != loadurl){
          $.get(loadurl, function(data) {
              $(targ).html(data);
          });
      }

      $this.tab('show');
      return false;
    });

    $("#logo-bar").dblclick(function() {
      return false;
    });

    pageName = $("#source-name").html();
    userId = $("#user-id").html();
    url = $("#source_url").html();
    company = $("#source_company").html();
    topic = $("#source_topic").html();

    encodedUrl = encodeURIComponent(url);
    encodedCompany = encodeURIComponent(company);
    encodedTopic = encodeURIComponent(topic);

    if (url) {
      testSameOrigin(url);
      decodedUrl = decodeURIComponent(url);
    }

    rebindAllOnClickListener();
    resizeIframe();
    // $('.show-link-in-popup').each(function(){
    //   $(this).off("click").click(linkOnClick);
    // });
    $(window).resize(function() {
      resizeIframe();
    });
  }

});