<!DOCTYPE html>
<html>
    <head>
        <title>Cardhop Help</title>
        <link rel="stylesheet" href="../help-ios.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.loadTheme.postMessage({});
    window.webkit.messageHandlers.finishedLoading.postMessage({});

    document.addEventListener('touchstart', function(){}, true);
}

function setTheme(theme) {
    var elements = document.querySelectorAll('body *');
    Array.prototype.forEach.call(elements, function(element) {
        if (theme === 'light') {
            element.classList.remove('theme-dark');
            element.classList.add('theme-light');
        } else if (theme === 'dark') {
            element.classList.remove('theme-light');
            element.classList.add('theme-dark');
        }
    });
}

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="help-icon" class="data-image" data-icon="help-icon" alt="Tips" width="96" height="96" />
                <p class="title">{{Did you know...}}</p>
            </header>

            <div id="intro-container">
                <span>{{Cardhop lets you search, add, edit, and act on your contacts in a fun and interactive way. Just type what you want and Cardhop will figure it out!}}</span>
            </div>

            <div class="section" id="section-examples">
                <img id="example-search" class="section-icon data-image" data-icon="iconSearch-Tint" width="24" height="24" alt="Search" />
                <span>{{Search for a contact}}</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>

                <img id="example-add" class="section-icon data-image" data-icon="iconAddContact-Tint" width="24" height="24" alt="Add or edit" />
                <span>{{Add or edit a contact}}</span>
                <ul class="example-list">
                    <li><code>{{William Robinson arobinson@cardhopapp.com}}</code></li>
                    <li><code>{{Ariel bday 04/15/2005}}</code></li>
                    <li><code>{{Stephanie Brooks home 315 Buckingham Ave, Syracuse NY, 13210}}</code></li>
                </ul>

                <img id="example-act" class="section-icon data-image" data-icon="iconCall-Tint" width="24" height="24" alt="Act" />
                <span>{{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 class="section" id="section-tips">
                <img id="icon-tips" class="section-icon data-image" data-icon="iconTip-Tint" width="24" height="24" alt="Tips & Tricks" />
                <span>{{Tips &amp; Tricks}}</span>
                <p>{{Add contacts to a list by typing <code>/list</code> when searching for a contact (e.g. <code>Olivia Lopez /coworkers</code>).}}</p>
                <p>{{Quickly add actions to Siri by typing <code>siri</code> before entering an action (e.g. <code>siri call Matthew home</code> or <code>siri mail friends</code>).}}</p>
            </div>

            <div id="actions-container">
                <p class="title">{{Actions}}</p>
                <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 id="footer">
                <a href="#" id="close-button" onclick="window.webkit.messageHandlers.close.postMessage({}); return false;" draggable="false">{{Done}}</a>
                <a href="flexibits://cardhop-ios/help" draggable="false">{{Show Help Book}}</a>
            </div>
        </div>
    </body>
</html>
