# Copyright (c) 2004 Divmod.
# See LICENSE for details.


"""
Easy to use box layout model. Works cross-browser on IE 6, Safari, Opera, and Mozilla (using Evil Hack(tm)).
Until a known bug in Mozilla is fixed, the Evil Hack will be in place. This evil hack prevents text inside of a Block from
being selected.

 - line: a horizontal box grouping
 - block: a vertical, flowing box grouping

Example::

  text = "Hello lots of text " * 20

  line(width='100%')[
    box(width='50%')[text],
    box(width='50%')[text]]
  # Note there is a mozilla bug right now where the second, flowing percentage is calculated using only
  # the empty space, so the second value here would have to be 100%; This module will soon add browser
  # sniffing to detect if mozilla is being used and adjust percentages accordingly. For now, use pixel, em, or
  # point values instead.

Experimental feature: Keyword arguments to the line and box protos are converted into css styles:
box(color='red') => <span style="color: red" />

Known Mozilla bugs
==================

If you use border, padding, or margin, mozilla shows weird rendering artifacts. background color and
background images generally appear to be safe.

It doesn't appear to be possible to set the vertical-align in some cases in mozilla.
"""

from nevow import stan
from nevow import static
from nevow import inevow
from nevow.tags import *

boxStyle = xml("""
span.nevow-blocks-block {
    display: inline-block;
    -moz-binding: url('/mozbinding#inlineblock'); }

div.nevow-blocks-line {
    margin: 0px; padding: 0px }

.expanded {
    display: block; }

.collapsed {
    display: none; }

.visibilityImage {
    margin-right: 5px; }
""")

js =xml( """
function collapse(node, collapsedText, expandedText) {
    for (var i = 0; i < node.childNodes.length; i++) {
        var childNode = node.childNodes[i]
        if (childNode.className == 'visibilityImage') {
            var img = childNode;
        } else if (childNode.className == 'headText') {
            var head = childNode;
        }
    }
    for (var i = 0; i < node.parentNode.childNodes.length; i++) {
        var childNode = node.parentNode.childNodes[i]
        if (childNode.className == 'collapsed' || childNode.className == 'expanded') {
            var next = childNode;
        }
    }
    if (next.className == 'collapsed') {
        img.src = '/images/outline-expanded.png';
        next.className = 'expanded';
        head.innerHTML = expandedText;
    } else {
        img.src = '/images/outline-collapsed.png';
        next.className = 'collapsed';
        head.innerHTML = collapsedText;
    }
}//""")

blocks_glue = [
    style(type="text/css")[ boxStyle ],
    script(type="text/javascript")[ comment[js] ]]


mozBinding = """<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:html="http://www.w3.org/1999/xhtml"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<binding id="inlineblock">
  <content>
  <html:style type="text/css">
    .nevow-inline-table { display: inline-table; }
    .nevow-inline-table-row { display: table-row; }
    .nevow-inline-table-cell { display: table-cell; }
  </html:style>
    <html:span class="nevow-inline-table">
    <html:span class="nevow-inline-table-row">
     <html:span class="nevow-inline-table-cell" xbl:inherits="style">
          <children/>
     </html:span>
     </html:span>
     </html:span>
  </content>
</binding>

</bindings>
"""

blocks_child = static.Data(mozBinding, 'text/xml; name="inline-block.xml"')


class _Blocks(object):
    def __init__(self, tag, className):
        self.tag = tag
        self.className = className

    def __call__(self, **kw):
        """Make and return a new block. If height or width is specified, they may be
        of any css-supported measurement format, such as '200px' or '50%'.
        
        If height or width is not specified, the block will "shrink wrap".
        
        Interesting experiment: kw arguments to __call__ are treated like css style key
        value pairs. For example, block(color='blue', background_color='red') will translate
        to style="color: blue; background-color: red". _ is mapped to -. Not sure if this will
        work but it will be interesting to see if it is useful to use.
        """
        return self.tag(
            _class=self.className,
            style='; '.join(
                [': '.join((k.replace('_', '-'), v))
                for (k, v) in kw.items()]))


block = _Blocks(span, 'nevow-blocks-block')
line = _Blocks(div, 'nevow-blocks-line')


class collapser(object):
    """Render a fragment of html with a head and a body.
    The body can be in two states, expanded and collapsed.
    When the body is in collapsed state, it is not visible in the browser.
    Clicking on the head area causes the visibility state of the body
    to toggle.

    TODO: This should be rewritten to check for patterns and slots so you
    could have it use table or paragraph tags or whatever instead of a span
    and a div, and you can omit the visibility image if desired (js would have 
    to change too)
    """
    __implements__ = inevow.IRenderer,

    def __init__(self, headCollapsed, headExpanded, body, collapsed=True):
        self.headCollapsed = headCollapsed
        self.headExpanded = headExpanded
        self.body = body
        if collapsed:
            self.collapsed = 'collapsed'
        else:
            self.collapsed = 'expanded'

    def rend(self, ctx, data):
        return (span(
            _class="collapser-line",
            onclick=(
                "collapse(this, '",
                self.headCollapsed,
                "', '",
                self.headExpanded,
                "');"))[
            img(_class="visibilityImage", src="/images/outline-%s.png" % self.collapsed),
            span(_class="headText", style="color: blue; text-decoration: underline; cursor: pointer;")[
                self.collapsed == 'collapsed' and self.headCollapsed or self.headExpanded ]
        ],
        xml('&nbsp;'),
        div(_class=self.collapsed)[
            self.body
        ])