<!doctype html>
<head>
    <title>{%block title %}souma{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" media="screen" >
    <link rel="stylesheet" type="text/css" href="/static/css/jasny-bootstrap.css" media="screen" >
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
    <script src="{{ url_for('static', filename='js/less.js') }}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/jquery-1.8.2.min.js') }}" type="text/javascript"></script>
    <script src="{{ url_for('static', filename='js/jasny-bootstrap.js') }}" type="text/javascript"></script>
    <script>
    function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {

    var result = { width: 0, height: 0, fScaleToTargetWidth: true };

    if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
        return result;
    }

    // scale to the target width
    var scaleX1 = targetwidth;
    var scaleY1 = (srcheight * targetwidth) / srcwidth;

    // scale to the target height
    var scaleX2 = (srcwidth * targetheight) / srcheight;
    var scaleY2 = targetheight;

    // now figure out which one we should use
    var fScaleOnWidth = (scaleX2 > targetwidth);
    if (fScaleOnWidth) {
        fScaleOnWidth = fLetterBox;
    }
    else {
       fScaleOnWidth = !fLetterBox;
    }

    if (fScaleOnWidth) {
        result.width = Math.floor(scaleX1);
        result.height = Math.floor(scaleY1);
        result.fScaleToTargetWidth = true;
    }
    else {
        result.width = Math.floor(scaleX2);
        result.height = Math.floor(scaleY2);
        result.fScaleToTargetWidth = false;
    }
    result.targetleft = Math.floor((targetwidth - result.width) / 2);
    result.targettop = Math.floor((targetheight - result.height) / 2);

    return result;
}

function OnImageLoad(evt, scale) {

    var img = evt.currentTarget;

    // what's the size of this image and it's parent
    var w = $(img).width();
    var h = $(img).height();
    var tw = $(img).parent().width();
    var th = $(img).parent().height();

    // compute the new size and offsets
    var result = ScaleImage(w, h, tw, th, scale);
    console.log(result)

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    $(img).css("left", result.targetleft);
    if (result.targettop < 0) {
        $(img).css("top", result.targettop);
    }
}
    </script>
</head>
<body>
    <header>
        <div class="logo">
            <a href="{{ url_for('universe') }}">
                <img src="/static/images/logo_2X.png" alt="Souma"   >
            </a>
        </div>

        <ul>
            {% for persona in controlled_personas %}
            <li>
                {% if persona.id == session.active_persona %}
                <a href="{{ url_for('universe') }}" class="active">
                    <p><i class="fa fa-circle fa-2xd"></i> <span class="caption">{{persona.username}}</span></p>
                </a>
                <ul>
                    <li><a href="{{ url_for('persona', id=persona.id) }}">
                    <p><i class="fa fa-user"></i> <span class="caption">Your stuff</span></p></a></li>
                    <li><a href="{{url_for('create_star')}}">
                    <p><i class="fa fa-star"></i> <span class="caption">Create star</span></p></a></li>
                    <li><a href="{{url_for('create_group')}}">
                    <p><i class="fa fa-magic"></i> <span class="caption">Create group</span></p></a></li>
                    <li><a href="{{url_for('find_people')}}">
                    <p><i class="fa fa-search"></i> <span class="caption">Find people</span></p></a></li>
                    <li><a href="{{url_for('groups')}}">
                    <p><i class="fa fa-group"></i> <span class="caption">Show Groups</span></p></a></li>
                </ul>
                {% else %}
                <a href="{{ url_for('activate_persona', id=persona.id) }}">
                    <p><i class="fa fa-circle-blank fa-2xd"></i> <span class="caption">{{persona.username}}</span></p>
                </a>
                {% endif %}
            </li>
            {% endfor %}
            <a href="{{ url_for('create_persona') }}"><li>
                <p><i class="fa fa-plus-circle fa-2xd"></i> <span class="caption">New</span></p>
            </li></a>
        </ul>

        <ul>
            <a href="{{url_for('debug')}}"><li>
                <p><i class="fa fa-cogs fa-2xd"></i> <span class="caption">Debug</span></p>
            </li></a>
            <a href="{{url_for('logout')}}"><li>
                <p><i class="fa fa-power-off fa-2xd"></i> <span class="caption">Logout</span></p>
            </li></a>
        </ul>
    </header>

    <article class="{% block layout_name %}{% endblock %}">
        {% for message in get_flashed_messages() %}
            <div class='flash'><span>{{message}}</span></div>
        {% endfor %}
        <div id="container">
        {% block content %}{% endblock %}
        </div>
    </article>

    <!-- Load scripts after content -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script src="/static/js/main.js"></script>
</body>
