<!DOCTYPE html>
<html>
    <head>
        <title>Cardhop Help</title>
        <link rel="stylesheet" href="../help-mac.css" type="text/css">
    </head>
    <script type="text/javascript">
function load() {
    var images = document.getElementsByClassName('data-image');

    Array.prototype.forEach.call(images, function(element) {
        var icon = element.getAttribute('data-icon');
        var id = element.getAttribute('id');
        var width = element.getAttribute('width');
        var height = element.getAttribute('height');

        window.webkit.messageHandlers.loadImage.postMessage({icon: icon, id: id, width: width, height: height});
    });

    window.webkit.messageHandlers.loadActions.postMessage({});
    window.webkit.messageHandlers.finishedLoading.postMessage({});
}

function setImage(elementID, src) {
    document.getElementById(elementID).setAttribute('src', src);
}

function addAction(name, example, help, imgsrc, available) {
    var actionElement = document.createElement('div');
    var titleElement = document.createElement('div');
    var exampleElement = document.createElement('p');
    var helpElement = document.createElement('p');
    var imageElement = document.createElement('img');
    var string = name;

    imageElement.setAttribute('src', imgsrc);
    imageElement.setAttribute('width', '32');
    imageElement.setAttribute('height', '32');

    if (!available) {
        string += ' (' + '{{App not installed}}' + ')';

        actionElement.setAttribute('class', 'action unavailable');
    } else {
        actionElement.setAttribute('class', 'action');
    }

    imageElement.setAttribute('alt', string);

    titleElement.appendChild(imageElement);
    titleElement.appendChild(document.createTextNode(string));
    titleElement.setAttribute('class', 'title');

    var codeElement = document.createElement('code');

    codeElement.appendChild(document.createTextNode(example));
    exampleElement.appendChild(codeElement);
    exampleElement.setAttribute('class', 'example');

    helpElement.appendChild(document.createTextNode(help));
    helpElement.setAttribute('class', 'help');

    actionElement.appendChild(titleElement);
    actionElement.appendChild(exampleElement);
    actionElement.appendChild(helpElement);

    document.getElementById('actions').appendChild(actionElement);
}
    </script>
    <body onload="load()">
        <div id="container">
            <header>
                <img id="background-pattern" class="data-image" data-icon="about-header-narrow" alt="Background image" width="440" height="160" />
                <div class="app-title"><span>Card</span>hop</div>
                <div class="help-title">{{Help}}</div>
                <img id="app-icon" class="data-image" data-icon="application-icon" alt="Cardhop icon" width="128" height="128" />
            </header>
            <div class="section intro-section">
                {{Cardhop lets you <b>search, add, edit, and act on your contacts</b> in a fun and interactive way. Just type what you want and Cardhop will figure it out!}}
            </div>
            <div class="section example-section" id="section-examples">
                <div>
                    <img id="example-search" class="example-icon data-image" data-icon="iconSearch-Tint" width="24" height="24" alt="Search" /><span class="title">{{Search for a contact by name or contents}}</span>
                    <ul class="example-list">
                        <li><code>{{J Smith}}</code></li>
                        <li><code>{{janice@cardhopapp.com}}</code></li>
                        <li><code>{{608 Oak Ridge Ave}}</code></li>
                        <li><code>{{Alice Chu birthday}}</code></li>
                    </ul>
                </div>
                <div>
                    <img id="example-add" class="example-icon data-image" data-icon="iconAddContact-Tint" width="24" height="24" alt="Add or edit" /><span class="title">{{Add or edit a contact}}</span>
                    <ul class="example-list">
                        <li><code>{{William Robinson arobinson@cardhopapp.com}}</code></li>
                        <li><code>{{M Simmons twitter macguitar}}</code></li>
                        <li><code>{{Ariel bday 04/15/2005}}</code></li>
                        <li><code>{{Stephanie Brooks home 315 Buckingham Ave, Syracuse NY, 13210 work s.brooks@cardhopapp.com}}</code></li>
                    </ul>
                </div>
                <div>
                    <img id="example-act" class="example-icon data-image" data-icon="iconCall-Tint" width="24" height="24" alt="Act" /><span class="title">{{Act on a contact}}</span>
                    <ul class="example-list">
                        <li><code>{{Call Matthew home}}</code></li>
                        <li><code>{{Dial 408-996-1010}}</code></li>
                        <li><code>{{Email Zoe Lunch tomorrow?}}</code></li>
                        <li><code>{{Copy Natalie J address}}</code></li>
                    </ul>
                </div>
            </div>
            <div class="section" id="section-tips">
                <h2><img id="icon-tips" class="section-icon data-image" data-icon="iconTip" width="32" height="32" alt="Tips & Tricks" />{{Tips &amp; Tricks}}</h2>
                <ul>
                    <li>{{Add contacts to a list by typing <code>/list</code> when searching for a contact (e.g. <code>Olivia Lopez /coworkers</code>).}}</li>
                    <li>{{Pair your phone with your Mac using Bluetooth so Cardhop can directly dial your phone.}}</li>
                    <li>{{Cardhop shines your shoes periodically.}}</li>
                </ul>
            </div>
            <div class="section" id="section-actions">
                <h2><img id="icon-actions" class="section-icon data-image" data-icon="iconActions" width="32" height="32" alt="Actions" />{{Actions}}</h2>
                <p>{{Cardhop has a variety of actions you can perform on your contacts. Below is a reference of how to use each action.}}</p>
                <div id="actions">
                </div>
            </div>
        </div>
        <div id="footer">
            <p>{{<b>Want to learn more?</b> Check out our <a href="flexibits://cardhop/help" draggable="false">Help Book</a>}}</p>
            <a href="#" id="close" onclick="window.webkit.messageHandlers.close.postMessage({}); return false;" draggable="false">{{Close}}</a>
        </div>
    </body>
</html>
