{*<!--

+---------------------------------------------------------------------------+
| Revive Adserver                                                           |
| http://www.revive-adserver.com                                            |
|                                                                           |
| Copyright: See the COPYRIGHT.txt file.                                    |
| License: GPLv2 or later, see the LICENSE.txt file.                        |
+---------------------------------------------------------------------------+

-->*}
{view_before_content}

<form id="zoneLinkingForm">
<div id="campaign-zone" class="new-form">
  <input id="csrf-token" type="hidden" value="{$csrfToken|escape}" />
  <input id="advertiser-id" type="hidden" value="{$advertiserId}" />
  <input id="campaign-id" type="hidden" value="{$campaignId}" />

  <div id="filters">
    <div id="filters-available">
      <h3 class="filter-panel-title">{t str=AvailableZones}</h3>
      <div class="filter-panel">
	      <div class="bg-left"></div>
	      <div class="bg-right"></div>

	      <div class="filter-content">
          <div id="status-available">&nbsp;</div>
	        {include file=campaign-zone-panel-filters.html
	                 panelId=available categories=$aCategories}
	      </div>
	      &nbsp;
	    </div>
    </div>

    <div id="filters-linked">
      <h3 class="filter-panel-title">{t str=LinkedZones}</h3>
      <div class="filter-panel">
        <div class="bg-left"></div>
        <div class="bg-right"></div>

        <div class="filter-content">
          <div id="status-linked">&nbsp;</div>
	        {include file=campaign-zone-panel-filters.html
	                 panelId=linked categories=$aCategories}
	      </div>
	    </div>
    </div>
  </div>

  &nbsp;

  <div id="select-zones">
    <div id="available">
      <div class="zones-container new-table-container">
        <div id="zones-available-loading" class="ajax-loading panel-loading hide"></div>
        <div id="zones-available-container">
          <table id="zones-available" class="zones new-table">
            <tbody>
              <tr class="header hide">
                <th class="name"><label><input type="checkbox" id="available-select-all" class="checkbox select-all" /> {t str=SelectUnselectAll}</label></th>
                <th class="link"></th>
                <th class="ctr">{t str=FinanceCTR}</th>
                <th class="cr">{t str=FinanceCR}</th>
                <th class="ecpm last">{t str=FinanceCPM}</th>
              </tr>
            </tbody>

            <tbody id="zones-available-rows">
              <tr class="hide"><td></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div id="linked">
      <div class="zones-container new-table-container">
        <div id="zones-linked-loading" class="ajax-loading panel-loading hide"></div>
        <div id="zones-linked-container">
          <table id="zones-linked" class="zones new-table">
            <tbody>
              <tr class="header hide">
                <th class="name"><label><input type="checkbox" id="linked-select-all" class="checkbox select-all" /> {t str=SelectUnselectAll}</label></th>
                <th class="link"></th>
                <th class="ctr">{t str=FinanceCTR}</th>
                <th class="cr">{t str=FinanceCR}</th>
                <th class="ecpm last">{t str=FinanceCPM}</th>
              </tr>
            </tbody>

            <tbody id="zones-linked-rows">
              <tr class="hide"><td></td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div id="linking-buttons">
      <button accesskey="l" id="link-button" class="flat button" type="button" ><u>L</u>ink <span class="arrow-right"></span></button><br />
      <button accesskey="u" id="unlink-button" class="flat button" type="button"><span class="arrow-left"></span> <u>U</u>nlink</button>

      <div style="margin-top: 2ex; text-align: center">
        <span id="linking-indicator" class="ajax-loading-big hide"></span>
        <span id="linking-status"></span>
        <span id="error-indicator" class="ajax-error hide">{t str=LinkingNotSuccess}</span>
      </div>
    </div>
  </div>

  <div class="accurate-info"><div class="accurate-box"></div>{t str=CalculatedForThisCampaign}</div>
  <div class="estim-info"><div class="estim-box"></div>{t str=CalculatedForAllCampaigns}</div>

	<script type="text/javascript"><!--
{literal}
  $(document).ready(function() {
    // Multicheckbox selections, selection by row clicks
    $("#zones-available-container, #zones-linked-container").multicheckboxes({
      toSelectClass: "to-link",
      toUselectClass: "",
      selectAllSelector: ".select-all",
      updateElement: "tr"
    });

    addMultiselectListeners("available");
    addMultiselectListeners("linked");

    $("#zones-linked-container, #zones-available-container").bind("filter", function() {
      var panel = this.id.substring("zones-".length).replace(/-container/, '');
      var $quickSearch = $("#quick-search-" + panel);
      var postData = {
        "clientid": $("#advertiser-id").val(),
        "campaignid": $("#campaign-id").val(),
        "status": panel,
        "text": $quickSearch.is(".example-search") ? "" : $quickSearch.val()
      };

      sendZonesRequest(panel, "campaign-zone-zones.php", postData);
    });

    // Link/Unlink buttons
    $("#link-button").bind("click", [ "link" ], sendLinkingRequest);
    $("#unlink-button").bind("click", [ "unlink" ], sendLinkingRequest);

    // Quick search fields
    $("#quick-search-available, #quick-search-linked")
      .example("zone name, website name", { class_name: 'example-search'})
      .typeWatch({
        callback: function() {
          var panelId = this.el.id.substring("quick-search-".length);
          $("#zones-" + panelId + '-container').trigger("filter");
        },
        wait: 500,
        captureLength: 1
      });

    $("#zones-available-container, #zones-linked-container").trigger("filter").trigger("multichange");
  });

  function sendZonesRequest(panel, url, params) {
    $.ajax({
      url: url,
      type: "GET",
      data: params,
      cache: false,
      complete: function() {
        $("#zones-" + panel + "-loading").hide();
      },
      success: function(data) {
        if (!checkReload(data)) {
          updatePanel(data, panel);
        }
      },
      error: function() {
        $("#error-indicator").show();
      }
    });
    $("#error-indicator").hide();
    $("#zones-" + panel + "-loading").show();
  }

  // Performs linking/unlinking and refreshes panels on completion
  function sendLinkingRequest(event) {
    var action = event.data[0];

    $("#link-button, #unlink-button").attr("disabled", true);

    var $checkboxContainer;
    if (action == "link") {
      $checkboxContainer = $("#zones-available");
    } else {
      $checkboxContainer = $("#zones-linked");
    }

    var checkedNames = $.map($checkboxContainer.find(":checked").not(".select-all"), function(val) {
      return val.name;
    });

    // Data from all filters
    var quickSearchLinked = $("#quick-search-linked").is(".example-search") ? "" : $("#quick-search-linked").val();
    var quickSearchAvailable = $("#quick-search-available").is(".example-search") ? "" : $("#quick-search-available").val();
    if (action == "link") {
        if (quickSearchLinked  != "" && quickSearchLinked != quickSearchAvailable) {
           quickSearchLinked = "";
           $("#quick-search-linked").val("");
        }
    }
    else {
      if (quickSearchAvailable  != "" && quickSearchLinked != quickSearchAvailable) {
         quickSearchAvailable = "";
         $("#quick-search-available").val("");
      }
    }

    var postData = {
      "token": $("#csrf-token").val(),
      "clientid": $("#advertiser-id").val(),
      "campaignid": $("#campaign-id").val(),
      "text-linked": quickSearchLinked,
      "text-available": quickSearchAvailable,
      "action": action,
      "ids[]": checkedNames,
      "allSelected": $checkboxContainer.data("allSelected"),
      "page-linked": $("#page-linked").text(),
      "page-available": $("#page-available").text()
    };

    $.ajax({
      url: "campaign-zone-link.php",
      type: "POST",
      data: postData,
      cache: false,
      complete: function() {
        $(".select-all").attr("checked", false);
        $("#linking-indicator").hide();
      },
      success: function(data) {
        if (!checkReload(data)) {
          updatePanel(data, "available");
          updatePanel(data, "linked");

          // Refresh token
          $("#csrf-token").val(extractPart(data, "value", "token"));

	        $("#linking-status").html(extractPart(data, "info", "result")).stop().show().css("opacity", "1");
	        if (window.linkingTimout) {
	          window.linkingTimout.clearTimeout();
	        }
	        window.linkingTimeout = window.setTimeout(function() {
	          $("#zones-available").find("tr.just-linked").removeClass("just-linked", $("#zones-available-rows tr").size() <= 100 ? 5000 : 0);
	          $("#zones-linked").find("tr.just-linked").removeClass("just-linked",  $("#zones-linked-rows tr").size() <= 100 ? 5000 : 0);
	          $("#linking-status").fadeOut(5000);
	        }, 2000);
	      }

{/literal}{if $runMPE}
	      // Run MPE
	      $.get('run-mpe.php');
{/if}{literal}

      },
      error: function() {
        $("#error-indicator").show();
      }
    });

    $("#error-indicator").hide();
    $("#linking-indicator").show();
    $("#linking-status").hide();
  }

  function updatePanel(data, panel) {
    var panelRows = extractPart(data, panel, "rows");
    $("#zones-" + panel + "-container").get(0).innerHTML = panelRows;
    $("#zones-" + panel + " tr.header").visible(!$("#zones-" + panel + "-rows tr:eq(0)").is(".empty"));
    var panelStatus = extractPart(data, panel, "status");
    $("#status-" + panel).html(panelStatus);
    $("#zones-" + panel + "-container").trigger('dataUpdate');
    $("#zones-" + panel + "-container a.page").click(function() {
      sendZonesRequest(panel, this.href, {})
      return false;
    });

    if ($("#page-" + panel).size() > 0) {
      $("#zones-" + panel + "-loading").addClass("has-paging");
    } else {
      $("#zones-" + panel + "-loading").removeClass("has-paging");
    }
    addSelectAllListeners(panel);
  }

  function addMultiselectListeners(panel) {
    $("#zones-" + panel + "-container").bind("multichange", function() {
      var $selectAll = $("#zones-" + panel + " .select-all");
      var selectAllChecked = $selectAll.size() > 0 && $selectAll.is(":checked");
      $("#zones-" + panel + "-select-all, #select-all-container-" + panel).setElementVisible(selectAllChecked);
      if (!selectAllChecked) {
        cancelAllZonesSelection(panel);
      }

      $("#" + (panel == "available" ? "link" : "unlink") + "-button")
        .attr("disabled", $("#zones-" + panel + " :checked").not(".select-all").size() == 0);
    });
  }

  function addSelectAllListeners(panel) {
    $("#zones-" + panel + "-select-all a").click(function() {
      $("#zones-" + panel + "-select-all").hide();
      $("#zones-" + panel + "-all-selected").show();
      $("#zones-" + panel).data("allSelected", true);
      return false;
    });
    $("#zones-" + panel + "-all-selected a").click(function() {
      cancelAllZonesSelection(panel);
      $("#zones-" + panel + " :checkbox").attr("checked", false);
      $("#zones-" + panel + "-rows tr").removeClass("to-link");
      return false;
    });
  }

  function cancelAllZonesSelection(panel) {
    $("#select-all-container-" + panel).hide();
    $("#zones-" + panel + "-select-all").hide();
    $("#zones-" + panel + "-all-selected").hide();
    $("#zones-" + panel).data("allSelected", false);
  }

  function checkReload(data) {
    if (data.indexOf("<!-- install -->") >= 0 || data.indexOf("<!-- login -->") >= 0) {
      document.location.reload();
      return true;
    }
    return false;
  }

  function extractPart(data, status, part) {
    var startMarker = "<!--" + part + "-" + status + "-start-->";
    var endMarker = "<!--" + part + "-" + status + "-end-->";
    return data.substring(data.indexOf(startMarker) + startMarker.length, data.indexOf(endMarker));
  }
{/literal}
  //--></script>

</div>
</form>
{view_after_content}