<!--
 Speed Dial head template for Midori.
 Copyright (C) 2009 Jean-François Guchens <zcx000@gmail.com>
 Copyright (C) 2011 Paweł Forysiuk <tuxator@o2.pl>
 Copyright (C) 2011 Cassidy James <email@cassidyjames.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>

    /* Animations */

    @-webkit-keyframes popin {
        0%   { opacity: 0.0; -webkit-transform: scale(0.00); }
        75%  { opacity: 0.5; -webkit-transform: scale(1.15); }
        100% { opacity: 1.0; -webkit-transform: scale(1.00); }
    }

    /* Styles */

    * {
        margin: 0;
        padding: 0;
        cursor: default;
        font-size: 13px;
        color: #4d4d4d;
    }

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

    #content {
        width: 96%;
        height: 85%;
        margin: 0 auto;
        padding-top: 5%;
        padding-left: 2%;
    }

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

    div.shortcut .preview {
        width: 85%;
        height: 75%;
        margin: auto;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 0 0px #fff inset;
        border: 1px solid #bcbcbc;
        border-bottom-color: #a0a0a0;
        position: relative;
        -webkit-border-radius: 3px;
    }

    div.shortcut .preview img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        -webkit-border-radius: 3px;
    }

    div.shortcut .preview.new .add {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        cursor: pointer;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3), 0 0 0px #fff inset;
        background-image: -webkit-gradient(
            linear, center top, center bottom,
            from(#f6f6f6), to(#e3e3e3));
        background-repeat: repeat-x;
        -webkit-border-radius: 3px;
    }

    .title {
        text-align: center;
        margin: 8px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: text;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    }

    .cross {
        display: block;
        width: 27px;
        height: 27px;
        top: -14px;
        right: -14px;
        background: url(res://close.png);
        position: absolute;
        cursor: pointer;
        opacity: 0;
    }

    div.shortcut .preview:hover .cross {
        -webkit-animation: popin 250ms ease-in-out;
        opacity: 1;
    }

    .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;
    }

    .selected {
        outline: 1px dotted black;
        background-color: #eef;
    }
    </style>

    <script type="text/javascript">

    var getAction = function (id)
    {
        var s = document.getElementById(id).childNodes[0];
        if (s.className == 'preview')
            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[1].href;
                key_id = 's';
            }
            else
                key_timeout = setTimeout ('if (getAction (key_id)) document.location = document.getElementById(key_id).childNodes[0].childNodes[1].href; key_id = \'s\'', 1000);
        }
        else
            key_id = 's';

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

        return false;
    }

    var firstNode, secondNode;
    var cursor;
    var dial = document.getElementsByClassName("shortcut");

    var get_dial_div = function (ele) {
        var dial_div;
        if (ele.nodeName == 'IMG')
            dial_div = ele.parentNode.parentNode.parentNode;
        if (ele.className == 'title')
            dial_div = ele.parentNode;
        if (ele.className.indexOf ('shortcut') != -1)
            dial_dir = ele;
        return dial_div;
    }
    var click = function (ev) {
        ev.preventDefault();
        var ele = ev.target;
        cursor = ele.style.cursor;
        ele.style.cursor = 'move';

        var eparent = get_dial_div (ele);
        if (eparent != undefined) {
            eparent.className = 'shortcut selected';
            firstNode = eparent.id;
        }
        document.RemoveEventListener('click', click, false);
    };

    var up = function (ev) {
        ele = ev.target;
        var eparent = get_dial_div (ele);

        ele.style.cursor = cursor;
        secondNode = eparent.id;

        /* ommit just mere clicking the dial */
        if (firstNode != secondNode && firstNode != undefined)
            swap();
    };

    var over = function (ev) {
        if (ev == undefined)
            return;

        var ele = ev.target;
        var eparent = get_dial_div (ele);

        if (firstNode != undefined)
        {
            eparent.className = 'shortcut selected';
            for (var i = 0; i <= dial.length; i++) {
                if (eparent.id != firstNode.id && dial[i].id != eparent.id) {
                    dial[i].className = 'shortcut';
                }
            }
        }
        ele.style.cursor = cursor;
    }

    function swap () {
        console.log ("speed_dial-save-swap " + firstNode + " " + secondNode);
    };

    document.addEventListener('mousedown', click, false);
    document.addEventListener('mouseup', up, false);
    document.addEventListener('mouseover', over, false);
    </script>
</head>
<body>
    <div class="osd" >
        <span id="dialing"></span>
    </div>
    <div id="content">