{% extends "common/email_listing.html" %}
{% load i18n %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/webmail/webmail.css" />
{% endblock %}
{% block js %}
  quota_pb = new ProgressBar({
    container: $("quotabox"),
    startPercentage: 0,
    boxID: "box",
    percentageID: "perc",
    displayText: true,
    displayID: "quotatext"
  });

  wm_updatelisting = function(resp) {
    window.removeEvents("resize");
    updatelisting(resp);
    if ($defined(resp.folders)) {
      $("folders").set("html", resp.folders);
    }
    select($$("a[href=" + current_anchor.getbaseurl() + "]"));
    $$("li[class*=clickable]").removeEvents();
    $$("li[class*=clickable]").addEvent("click", function(evt) {
      $$("ul[name=" + evt.target.get("name") + "]").each(function(item) {
        if (item.hasClass("hidden")) {
          evt.target.setStyle("background", 
			      "url('{{ MEDIA_URL }}pics/folder-open.png') no-repeat");
          item.removeClass("hidden").addClass("visible");
        } else {
          evt.target.setStyle("background", 
			      "url('{{ MEDIA_URL }}pics/subfolders.png') no-repeat");
          item.removeClass("visible").addClass("hidden");
        }
      });
      evt.stop();
    });
    if ($defined(resp.quota) && resp.quota != "-1") {
      quota_pb.set(resp.quota);
      $("quotabox").setStyle("display", "block");
      $("quotalabel").setStyle("display", "block");
    }
    $$("a[name=loadfolder]").addEvent("click", foldercallback);
    $$("a[name=compose]").addEvent("click", loadCompose);
  };

  select = function(obj) {
    $$("a[name=loadfolder]").each(function(item) {
      item.getParent().removeClass("selected");
      item.getParent().addClass("droppable");
    });
    obj.getParent().removeClass("droppable");
    obj.getParent().addClass("selected");

    $$(obj.getParents("ul[class*=hidden]")).each(function(item) {
      item.removeClass("hidden");
      item.addClass("visible");
      $$("li[name=" + item.get("name") + "]").each(function(item) {
        item.setStyle("background", "url('{{ MEDIA_URL }}pics/folder-open.png') no-repeat");
      });
    });
  };

  register_callback("viewmail", function(resp) {
    wm_updatelisting(resp, "hidden");
    $$("a[name=back]").addEvent("click", loadFolder);
    $$("a[name=reply]").addEvent("click", reply);
    $$("a[name=replyall]").addEvent("click", replyall);
    $$("a[name=forward]").addEvent("click", forward);
    $$("a[name=delete]").addEvent("click", function(event) {
      var lnk = event.target;

      event.stop();
      new Request.JSON({url: lnk.get("href"), onSuccess: function(resp) {
                          current_anchor.parse_string(resp.next).update();
                          select($$("a[href=" + current_anchor.getbaseurl() + "]"));
                        }}).get();
    });
    $$("a[name=activate_links]").addEvent("click", function(evt) {
	evt.stop();
	current_anchor.setparam("links", "1").update();
    });
     $$("a[name=disable_links]").addEvent("click", function(evt) {
	evt.stop();
	current_anchor.setparam("links", "0").update();
    });
    setDivHeight("mailcontent", 5, 0);
  });

  compose_callback = function(resp) {
    wm_updatelisting(resp);
    window.addEvent("resize", function(evt) {
      setDivHeight("id_body", $("mailheader").getSize().y, 0);
    });
    window.fireEvent("resize");

    var editormode = resp.editor;
    var editorid = "id_body";
    if (editormode == "html") {
      var instance = CKEDITOR.instances[editorid];
      if (instance) {
        CKEDITOR.remove(instance);
      }
      CKEDITOR.replace(editorid, {
        customConfig: "{{ MEDIA_URL }}/js/editor_config.js",
        height: $(editorid).getSize().y
      });
    }
    $$("a[name=back]").addEvent("click", loadFolder);
    $$("a[name=sendmail]").addEvent("click", function(evt) {
      evt.stop();
      $("composemail").set("send", {
        onSuccess: function(resp) {
          resp = JSON.decode(resp);
          if (resp.status == "ko") {
            wm_updatelisting(resp);
            window.fireEvent("resize");
            if ($defined(resp.error)) {
              infobox.error(resp.error);
            }
            return;
          }
          current_anchor.parse_string(resp.url, true).setparams(navparams);
          current_anchor.update();
        }
      });
      if (editormode == "html") {
        CKEDITOR.instances[editorid].updateElement();
      }
      $("composemail").send();
    });
  };

  loadCompose = function(event) {
    event.stop();
    current_anchor.baseurl("compose").update();
  };
  register_callback("compose", compose_callback);

  reply = function(event) {
    event.stop();
    location.hash += event.target.get("href");
  };
  register_callback("reply", compose_callback);
  replyall = function(event) {
    event.stop();
    location.hash += event.target.get("href") + "?all=1";
  };
  register_callback("replyall", compose_callback);
  forward = function(event) {
    event.stop();
    location.hash += event.target.get("href");
  };
  register_callback("forward", compose_callback);

  var rtimer = null;

  window.addEvent("pageRefresh", function() {
    if (rtimer) {
      clearInterval(rtimer);
      rtimer = null;
    }
  });

  refreshFolder = function() {
    var query = current_anchor.serialized.substring(1);
    clearInterval(rtimer);
    infobox.show('{% trans "Reloading..." %}', {
        profile : "gray",
        spinner : true
    });
    new Request.JSON({url: query, noCache : true, onSuccess: function(resp) {
        callback = ($defined(resp.callback)) ? resp.callback : "default";
        callbacks[callback](resp);
        infobox.info('{% trans "Done" %}');
        infobox.hide(1);
    }}).get();
  };

  loadFolder = function(event, obj) {
    event.stop();
    if (!$defined(obj)) {
      obj = $(event.target);
    }
    current_anchor.parse_string(gethref(obj), true).setparams(navparams);
    current_anchor.update();
  };

  register_callback("folder", function(resp) {
    wm_updatelisting(resp);
    rtimer = refreshFolder.periodical({{ refreshrate }});
    searchbox_init();
    if (navparams.has("order")) {
      src = navparams.get("order").charAt(0) == "-" ? "down_arrow.png" : "up_arrow.png";
      th = $$("th[id=" + navparams.get("order").substring(1) + "]");
      th.getElement("img").set("src", "{{ MEDIA_URL }}pics/" + src);
      th.getElement("img").setStyle("display", "block");
      th.addClass("selected");
    }

    var emails_table = new HtmlTable($("emails"), {
	selectable: true,
	shiftForMultiSelect: true
    }).addEvents({
	rowFocus: function(tr) {
	    clearInterval(rtimer);
	},
	rowUnfocus: function(tr) {
	    if (this._selectedRows.length == 0) {
		rtimer = refreshFolder.periodical({{ refreshrate }});
	    }
	}
    });

    /* The IE way for disabling default selection */
    /* Actually it doesn't work :p */
    $$("tbody>tr").set("unselectable", "on");

    bstart_dragging = function(item) {
        var block = new Element("div", {id: "draggeditems"})
	    .setStyles({"position" : "absolute",
			"opacity" : 0.8,
                        "width" : "200px",
                        "padding" : "5px",
                        "text-align" : "center",
                        "height" : "25px",
                        "border" : "1px solid #333",
                        "background" : "white",
			display: "none",
                        "z-index" : 3,
		        top : this.element.getCoordinates()['top'],
		        left : this.element.getCoordinates()['left']})
	    .inject(document.body);
	block.store("parent", this.element);
        this.element = block;
	clearInterval(rtimer);
    };

    start_dragging = function(item) {
	var tr = this.element.retrieve("parent").getParent();

	if (!emails_table.isSelected(tr)) {
	    emails_table.selectNone();
	    emails_table.selectRow(tr);
	}
	item.set("html", "Moving " + emails_table._selectedRows.length + " messages");
	this.element.setStyle("display", "block");
    };

    enter_droppable = function(item, droppable) {
	droppable.addClass("dragging");
    };

    leave_droppable = function(item, droppable) {
	droppable.removeClass("dragging");
    };

    restore_parent = function(item) {
	var parent = item.retrieve("parent");

	this.element = parent;
	rtimer = refreshFolder.periodical({{ refreshrate }});
    };

    drop_element = function(item, droppable, event) {
	this.element.dispose();
        delete(this.element);
        if (!droppable) {
	    restore_parent(item);
	    return;
        }
        droppable.removeClass("dragging");
        dest = gethref(droppable.getFirst("a"));
        msgset = new Array();
        emails_table._selectedRows.each(function(item, index) {
	    msgset.include(item.get("id"));
	});
        {% url extensions.webmail.views.move as moveurl %}
        simple_request("{{ moveurl }}", {msgset : msgset.join(), to : dest});
    };

    cancel_dragging = function(item) {
	this.element.dispose();
        delete(this.element);
	restore_parent(item);
    };

    $$("td[class*=draggable]").each(function(item) {
	new Drag.Move(item, {
	    droppables: ".droppable"
	}).addEvents({
	    beforeStart: bstart_dragging,
	    start: start_dragging,
            enter: enter_droppable,
	    leave: leave_droppable,
            drop: drop_element,
	    cancel: cancel_dragging
	});
    });

    simple_request = function(url, params) {
      infobox.show(gettext("Waiting..."), {
          profile: "gray",
          spinner: true
      });
      new Request.JSON({url : url,
                        onSuccess : function(response) {
                          get_callback("folder")(response);
                          infobox.info(gettext("Done"));
                          infobox.hide(1);
                        }
      }).get(params);
    };

    buildmarkrequest = function(evt) {
      evt.stop();
      if (!selectedRows.length) {
        return;
      }
      var ids = new Array();
      selectedRows.each(function(item, index) {
        ids.include(item.get("id"));
      });
      simple_request(evt.target.get("href"), {ids : ids.join()});
    };
    $$("a[name=mark-read]").addEvent("click", buildmarkrequest);
    $$("a[name=mark-unread]").addEvent("click", buildmarkrequest);

    $$("a[name=fdaction]").addEvent("click", function(evt) {
      simple_request(evt.target.get("href"), {});
      evt.stop();
    });

    if ($("toggleselect")) {
	$("toggleselect").addEvent("click", function(evt) {
	    if (evt.target.checked) {
		emails_table.selectAll();		
	    } else {
		emails_table.selectNone();
	    }
	});
    }

    $$("tbody>tr").addEvent("dblclick", viewmail);
    $$("th[class*=sortable]").addEvent("click", function(evt) {
        var tmp = "?";
        var order = (navparams.has("order")) ? navparams.get("order") : "";

        if (order == "") {
            order = current_anchor.getparam("order");
        }
        if (order.substring(1) == evt.target.id) {
            var sign = (order.charAt(0) == '+') ? '-' : '+';
            order = sign + evt.target.id;
        } else {
            order = "-" + evt.target.id;
        }
        navparams.set("order", order);
        current_anchor.setparams(navparams).update();
    });
  });

  foldercallback = function(event) {
    select(event.target);
    loadFolder(event, event.target);
  };

{% endblock %}
{% block middletitle %}{% trans "Webmail" %}{% endblock %}
{% block leftcol %}
<div id="folders" class="box">
</div>
{% endblock %}
{% block footer %}
<div id="quotalabel">{% trans "Mailbox quota" %}</div>
<div id="quotabox"></div>
{{ block.super }}
{% endblock %}