{% extends "common/email_listing.html" %}
{% load i18n %}
{% block html_head %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}webmail/css/webmail.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}webmail/css/folders.css" />
<script type="text/javascript" src="{{ MEDIA_URL }}js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}webmail/js/fdmenu.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}webmail/js/webmail.js"></script>
{{ block.super }}
<script type="text/javascript">
function wm_updatelisting(resp) {
  window.removeEvents("resize");
  updatelisting(resp);
  if ($defined(resp.folders)) {
    $("folders").set("html", resp.folders);
    $$("li[class*=clickable]").removeEvents();
    SqueezeBox.assign($("folders").getElements('a[class=boxed]'), {
      parse: 'rel'
    });

    var fdbuttons = $$("img[class*=footer]");
    var fdmenu = new FdMenu({
      modify_url: "{% url extensions.webmail.views.editfolder %}",
      delete_url: "{% url extensions.webmail.views.delfolder %}"
    });

    fdbuttons.addEvents({
      click: function(evt) {
        var parent = this.getParent();
        var fdname = parent.getFirst("a[name=loadfolder]").get("href");

        fdmenu.toggle(this, fdname);
        evt.stop();
      }
    });
  }
  select_folder($$("a[href=" + current_anchor.getbaseurl() + "]"));
  init_folders_browsing();

  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", compose_loader);
}

</script>
{% endblock %}
{% block js %}
  quota_pb = new ProgressBar({
    container: $("quotabox"),
    startPercentage: 0,
    boxID: "box",
    percentageID: "perc",
    displayText: true,
    displayID: "quotatext"
  });

  current_anchor.register_callback("viewmail", viewmail_cb);
  current_anchor.register_callback("compose", compose_callback);
  current_anchor.register_callback("reply", compose_callback);
  current_anchor.register_callback("replyall", compose_callback);
  current_anchor.register_callback("forward", compose_callback);

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

  current_anchor.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", static_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(drag, item) {
	var parent = item.retrieve("parent");

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

    drop_element = function(item, droppable, event) {
	this.element.dispose();
        delete(this.element);
        if (!droppable) {
	    restore_parent(this, 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(this, 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
	});
    });

    buildmarkrequest = function(evt) {
      evt.stop();
      if (!emails_table._selectedRows.length) {
        return;
      }
      var ids = new Array();
      emails_table._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();
    });
  });
{% 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 %}