<!--
 Speed Dial head template for Midori.
 Copyright (C) 2009 Jean-François Guchens <zcx000@gmail.com>
 This file is licensed under the terms of the expat license, see the file EXPAT.
-->

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>{title}</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        cursor: default;
        font-size: 13px;
        color: #4d4d4d;
    }

    html, body {
        font-family: sans-serif;
        width: 100%;
        height: 100%;
        outline: 0;
    }

    #content {
        width: 100%;
        height: 95%;
        margin: 0 auto;
        padding: 0;
    }

    div.shortcut {
        width: 25%;
        height: 33%;
        float: left;
    }

    div.shortcut .preview {
        width: 70%;
        height: 60%;
        margin: 20% auto;
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.25), 0 0 2px #fff inset;
        box-shadow: 0 1px 6px rgba(0,0,0,.25), 0 0 2px #fff inset;
        background-image: -webkit-gradient(
            linear, center top, center bottom,
            from(#f6f6f6), to(#e3e3e3));
        border: 1px solid #bebebe;
        border-bottom-color: #a0a0a0;
        position: relative;
    }

    div.shortcut .preview img {
        width: 100%;
        height: 98%;
        cursor: pointer;
    }

    div.shortcut .preview.new .add {
        display: block;
        height: 100%;
        width: 50%;
        margin: 0 auto;
        cursor: pointer;
    }

    .title {
        text-align: center;
        margin-top: -12%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: text;
    }

    .cross {
        display: block;
        width: 27px;
        height: 27px;
        top: -14px;
        left: -14px;
        background: url(res://close.png);
        position: absolute;
        cursor: pointer;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity 0.15s;
    }

    div.shortcut:hover .cross {
        visibility: visible;
        opacity: 1;
        -webkit-transition-delay: 0.5s;
    }

    .box.added {
        display:none;
    }

    div.osd {
        top: 9px;
        position: fixed;
        width: 100%;
        text-align: right;
    }

    div.osd span {
        border: 1px solid #999;
        background-color: #f5f5f5;
        padding: 8px;
        color: #999;
        -webkit-border-bottom-left-radius: 10px;
        visibility: hidden;
    }
    </style>

    <script type="text/javascript">

    var getAction = function (id)
    {
        var host = document.getElementById(id).childNodes[0].childNodes[0].host;
        if (host)
            return true;

        var url = prompt ("{enter_shortcut_address}", "http://");
        if (!url) return false;
        if (url.indexOf ("://") == -1)
            url = "http://" + url;

        console.log ("speed_dial-save-add " + id + " " + url + " ");
        return false;
    }

    var renameShortcut = function (id)
    {
        var old_name = document.getElementById(id).childNodes[1].textContent;

        var name = prompt ("{enter_shortcut_name}", old_name);
        if (!name) return;

        console.log ("speed_dial-save-rename " + id + " " + name);
    }

    var clearShortcut = function (id)
    {
        if(!confirm("{are_you_sure}"))
            return;

        console.log ("speed_dial-save-delete " + id);
    }

    var key_id = 's';
    var key_timeout;

    document.onkeypress = function ()
    {
        key_id = key_id + String.fromCharCode (event.which);

        clearTimeout (key_timeout);

        document.getElementById('dialing').innerText = key_id.substr(1);
        document.getElementById('dialing').style.visibility = 'visible';

        var div = document.getElementById(key_id);
        if (div)
        {
            if (key_id.substr(1) > 9)
            {
                if (getAction (key_id))
                    document.location = div.childNodes[0].childNodes[0].href;
                key_id = 's';
            }
            else
                key_timeout = setTimeout ('if (getAction (key_id)) document.location = document.getElementById(key_id).childNodes[0].childNodes[0].href; key_id = \'s\'', 1000);
        }
        else
            key_id = 's';

        if (key_id.length <= 1)
            document.getElementById('dialing').style.visibility = 'hidden';

        return false;
    }

    </script>
</head>
<body>
    <div class="osd" >
        <span id="dialing"></span>
    </div>
    <div id="content">