{% extends 'base.html' %}
{% load i18n %}
{% load auth_openid_extras %}

{% block body_class %}b_login{% endblock %}

{% block head %}{% endblock %}

{% block content %}
		<form action="" class="login" id="reglog" method="post">
		<table>
		<tr class="corners"><td class="tl">
			<img src="/static/img/t.gif">
		</td><td class="td_line">
			<img src="/static/img/t.gif">
		</td><td class="tr">
			<img src="/static/img/t.gif">
		</td></tr>
		<tr class="cont"><td colspan="3">
                <img src="/static/img/ico_close.gif" class="ico_close" onclick="location.href = '{% url settings %}';">
            <h3>{% trans "Choose authentication" %}</h3>
            <fieldset class="select_account"><label for="id3">{% trans "Login with" %}:</label>
			<select onChange="switchForm(this)" id="account" class="auth-method" name="auth_method">
                <option value="google">{% trans "Google account" %}</option>
			    <option value="yahoo">{% trans "Yahoo account" %}</option>
                <option value="openid">{% trans "OpenID" %}</option>
                <option value="facebook">{% trans "Facebook" %}</option>
            </select>
            </fieldset>
            
            <!-- google -->
            <div class="login-form" id="google-form"></div>

            <!-- openid -->
            <div style="display: none" id="openid-form" class="s_login login-form">
                <fieldset><label for="id1">OpenID url:</label><input type="text" id="openid_url" name="openid_url" class="text" /></fieldset>
            </div>
            
            <!-- facebook -->
            <div style="display: none" id="facebook-form" class="s_login login-form">
                <fieldset><label for="id1">Facebook id:</label><input type="text" id="facebook_id" name="facebook_id" class="text" /></fieldset>
            </div>

            <!-- filmfeed -->
            <div style="display: none" id="filmfeed-form" class="s_login login-form">
                <fieldset><label for="id1">{% trans "Login" %}:</label><input type="text" name="username" id="id_username" class="text" /></fieldset>
                <fieldset><label for="id2">{% trans "Password" %}:</label><input type="password" name="password" id="id_password" class="text pass" /></fieldset>
            </div>
            
            {% if error %}
                <fieldset>
                <ul class="errorlist"><li>{{ error }}</li></ul>
                </fieldset>
            {% endif %}
            
            <fieldset class="submit"><input type="image" src="/static/img/form_submit_ok_{{ LC }}.gif" class="submit" /></fieldset>
        </td></tr>

		<tr class="corners"><td class="bl">
			<img src="/static/img/t.gif">
		</td><td>
			<img src="/static/img/t.gif">
		</td><td class="br">
			<img src="/static/img/t.gif">
		</td></tr>
		</table>
		
		</form>
        
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.cookie.js"></script>
<script type="text/javascript">
$('input.submit').click(function() {
    $(this).parents('form').submit();
});

var formActions = {
    'google': '{% url openid_login_custom "google" %}',
    'yahoo': '{% url openid_login_custom "yahoo" %}',
    'openid': '{% url openid_login %}',
    'filmfeed': '{% url login_password %}',
    'facebook': '{% url facebook_login %}'
}

function setupAction() {
    var select = $('.auth-method');
    var name = $(select).val();
    $(select).parents('form').attr('action', formActions[name]);
}

function switchForm(select) {
    var name = $(select).val();
    $('.login-form').hide();
    var form = $('#' + name + '-form');
    form.show()
    $($('input', form)[0]).focus()
    setupAction();

}


$(function() {
    var method = '{{ method }}';
    if (!method || method=='None') {
        method = $.cookie('filmfeed_auth_method');
    }
    if (method) {
        $('.auth-method option').attr('selected', false);
        $('.auth-method option[@value="' + method + '"]').attr('selected', true);
    }    
    if (method) {
        $('.auth-method').val(method);
    }
    $('form.login').submit(function() {
        // remember the choice
        var name = $('.auth-method').val();
        $.cookie('filmfeed_auth_method', name, {expires: 356, path: '/'});
        return true;
    });
    setupAction();
});
</script>
{% endblock %}