% Define node group background
% The first 4 arguments are nodes that define the group borders in (left,
% top, right, bottom) order, the last argument is a text label
\usetikzlibrary{shapes,arrows}
\pgfdeclarelayer{background}
\pgfdeclarelayer{foreground}
\pgfsetlayers{background,main,foreground}  % Layer order
\newcommand{\grouppadding}{0.5}
\newcommand{\group}[5]{
    \begin{pgfonlayer}{background}
        % Left top corner
        \path (#1.west |- #2.north)+(-0.7, 0.7)
            node (lefttop) {};
        % Right bottom corner
        \path (#3.east |- #4.south)+(0.7, -0.4)
            node (rightbottom) {};
        % Draw rectangle
        \path[draw, rounded corners, dashed] (lefttop) rectangle (rightbottom);
        % Text label
        \path (rightbottom.west |- lefttop.south)+(-1.2, -0.3) node {\emph{#5}};
    \end{pgfonlayer}
}
\tikzstyle{block} = [
    rectangle,
    draw=black,
    fill=white,
    thick,
    minimum height=2em,
    text centered,
    rounded corners,
    text width=6em
]
\tikzstyle{lineto} = [
    ->,
    thick,
    shorten <= 2pt,
    shorten >= 2pt
]
\tikzstyle{linefrom} = [
    <-,
    thick,
    shorten <= 2pt,
    shorten >= 2pt
]
\newcommand{\architecture}[1]{
    \begin{tikzpicture}[node distance=6em, auto]
        \node[block] (driver) {Driver};
        #1
    \end{tikzpicture}
}

\newcommand{\basicdiagram}[1]{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, dashed, below of=driver] (arch) {Architecture}
                edge[linefrom] node[right] {driver-specific messages} (driver);
            \node[block, below of=arch] {Application}
                edge[linefrom] node[right] {gestures} (arch);
        }
        \caption{#1}
        \label{fig:basicdiagram}
    \end{figure}
}

\newcommand{\driverdiagram}[1]{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {driver-specific messages} (driver);
            \node[block, below of=eventdriver, dashed] (analysis) {Event analysis}
                edge[linefrom] node[right] {events} (eventdriver);
            \node[block, below of=analysis] {Application}
                edge[linefrom] node[right, near start] {gestures} (analysis);

            \node[right of=eventdriver, xshift=2em] (dummy) {};
            \group{eventdriver}{eventdriver}{dummy}{analysis}{Architecture}
        }
        \caption{#1}
        \label{fig:driverdiagram}
    \end{figure}
}

\newcommand{\areadiagram}[1]{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {driver-specific messages} (driver);
            \node[block, below of=eventdriver] (area) {Areas}
                edge[linefrom] node[right] {events} (eventdriver);
            \node[block, right of=area, xshift=7em, dashed] (analysis) {Gesture detection}
                edge[linefrom, bend right=10] node[above] {events} (area)
                edge[lineto, bend left=10] node[] {gestures} (area);
            \node[block, below of=area] {Application}
                edge[linefrom] node[right, near start] {gestures} (area);

            \group{eventdriver}{eventdriver}{analysis}{area}{Architecture}
        }
        \caption{#1}
        \label{fig:areadiagram}
    \end{figure}
}

\newcommand{\trackerdiagram}[1]{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {driver-specific messages} (driver);
            \node[block, below of=eventdriver] (area) {Area tree}
                edge[linefrom] node[right] {events} (eventdriver);
            \node[block, right of=area, xshift=7em] (tracker) {Gesture trackers}
                edge[linefrom, bend right=10] node[above] {events} (area)
                edge[lineto, bend left=10] node[] {gestures} (area);
            \node[block, below of=area] {Application}
                edge[linefrom] node[right, near start] {gestures} (area);

            \group{eventdriver}{eventdriver}{tracker}{area}{Architecture}
        }
        \caption{#1}
        \label{fig:trackerdiagram}
    \end{figure}
}

\newcommand{\examplediagram}[1]{
    \begin{figure}[h]
        \center
        \architecture{
            \node[block, below of=driver] (eventdriver) {Event driver}
                edge[linefrom] node[right, near end] {driver-specific messages} (driver);

            \node[block, below of=eventdriver] (rootarea) {Root area}
                edge[linefrom] (eventdriver);

            \node[block, below of=rootarea] (subarea) {Button area}
                edge[linefrom] (rootarea)
                edge[lineto, bend right=45] node[right=3] {event propagation} (rootarea);
            \node[block, right of=rootarea, xshift=5em] {\emph{pinch} tracker}
                edge[lineto, dotted, bend left=10] (rootarea)
                edge[linefrom, bend right=10] (rootarea);

            \node[block, right of=subarea, xshift=5em] (tracker) {\emph{tap} tracker}
                edge[lineto, dotted, bend left=10] (subarea)
                edge[linefrom, bend right=10] (subarea);
            \node[block, below of=subarea, yshift=-.5em] {Application}
                edge[linefrom, dotted, bend left=60] (rootarea)
                edge[linefrom, dotted] (subarea);

            \group{subarea}{eventdriver}{tracker}{subarea}{Architecture}
        }
        \caption{#1}
    \end{figure}
}

\newcommand{\examplefigureone}{
    \begin{figure}[h]
        \center
        % TODO: draw finger touch points as circles with rotating arrow
        \begin{tikzpicture}
            \draw node[draw, black, minimum width=190, minimum height=140] at (0,0) {};
            \draw node[fill=gray!50, draw=black!70, minimum height=40, minimum width=40] at (-1,-1) {};
            \draw node[draw=black!80, diamond, minimum height=50, minimum width=50] at (1.2,1) {};
        \end{tikzpicture}
        \caption{Two squares on the screen both listen to rotation.  The user
        should be able to ``grab'' each of the squares independently and rotate
        them at the same time.}
        \label{fig:ex1}
    \end{figure}
}

\newcommand{\examplefiguretwo}{
    \begin{figure}[h]
        \center
        \begin{tikzpicture}
            \draw node[draw, black, minimum width=190, minimum height=140] at (0,0) {};
            \draw node[draw=black!80, diamond, minimum height=50, minimum width=50] at (0.5, 0.3) {};

            \draw node[draw=black, diamond, dotted, minimum height=53, minimum width=53] at (0.5, 0.3) {};
            \draw node[draw=black, dotted, circle, minimum height=80, minimum width=80] at (0.5, 0.3) {};

            \fill (-0.3, -0.4) circle (0.15)
                    (-0.4, 0.8) circle (0.15)
                    (-0.1, 1.1) circle (0.15)
                    (1.3, 0.9) circle (0.15);

            \draw (0.15, 0.55) circle (0.15) -- (-0.3, -0.4);
            \draw (0.15, 0.55) -- (-0.4, 0.8);
            \draw (0.15, 0.55) -- (-0.1, 1.1);
            \draw (0.15, 0.55) -- (1.3, 0.9);
        \end{tikzpicture}
        \caption{A square on the screen listens to rotation. The user can grab
        and rotate the square by positioning fingers around (but not in) it and
        and performing a rotating motion. An example pose of four fingers is
        shown by the filled black circles. While the events all occur in the
        dotted \emph{area}, the centroid of the rotation gesture is located in
        the square.}
        \label{fig:ex2}
    \end{figure}
}

\newcommand{\examplefigurethree}{
    \begin{figure}[h]
        \center
        \begin{tikzpicture}
            \draw node[draw=black, minimum width=190, minimum height=140] (screen) at (0,0) {};
            \draw node[fill=gray!50, draw=black!70, minimum height=100, minimum width=100] (screen) at (-0.1,-0.1) {};
            \draw node[fill=white, draw=black!80, diamond, minimum height=50, minimum width=50] (screen) at (0.3,0.4) {};
        \end{tikzpicture}
        \caption{Two overlapping squares that listen to rotation. When the
        white square is rotated, the gray square should keep its current
        orientation and vice-versa.}
        \label{fig:ex3}
    \end{figure}
}