var providers=[
{name:'OpenID', url:'', img:'/skins/default/images/icons/openid/openid32.png'},
{name:'Яндекс', url:'http://openid.yandex.ru/', img:'/skins/default/images/icons/openid/yandex32.png'},
{name:"Google", url:'https://www.google.com/accounts/o8/id', img:'/skins/default/images/icons/openid/google32.png'},
{name:"Rambler", url:'http://rambler.ru/', img:'/skins/default/images/icons/openid/rambler32.png'},
{name:"Blogger", url:'http://{username}.blogspot.com/', img:'/skins/default/images/icons/openid/blogger32.png'},
{name:"Livejournal", url:'http://{username}.livejournal.com/', img:'/skins/default/images/icons/openid/livejournal32.png'},
//{name:"Twitter", url:'http://rambler.ru/{username}', img:'/skins/default/images/icons/openid/twitter32.png'}
];

var username='имя_пользователя';

function openIdSelector(elmnt)
{
	list=createList(elmnt);
	elmnt.parentNode.appendChild(list);
}

function createList(elmnt)
{
	var i=0;
	div=document.createElement('div');
	div.className='oid_list';
	for(i=0;i<providers.length;i++)
	{
		item=providers[i];
		img=document.createElement('img');
		img.src=item.img;
		img.alt=item.name;
		img.title=item.name;
		img.addEventListener('click', function(iurl, el){return function () {setOidValue(iurl, el);	}}(item.url, elmnt), false);
		div.appendChild(img);
	}
	return div;
}

function setOidValue(value, elmnt)
{
	value=value.replace(/\{username\}/, '{'+username+'}');
	elmnt.value=value;
	if (begin = value.indexOf('{'))
	{
		var end = value.indexOf('}')+1;
		createSelection(begin, end, elmnt);
	}
}

function createSelection(start, end, field)
{

    if ( field.createTextRange )
	{
        var newend = end - start;
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart("character", start);
        selRange.moveEnd("character", newend);
        selRange.select();
    } 
    else if( field.setSelectionRange )
	{
        field.setSelectionRange(start, end);
    } 

    field.focus();
}

function setSelectors()
{
	var i=0;
	inputs=document.getElementsByTagName('input');
	for (i=0; i<inputs.length;i++)
	{
		if ((/(^| )openid_input($| )/).test(inputs[i].className)) openIdSelector(inputs[i]);
	}
}

if (window.addEventListener) { // W3C standard
	window.addEventListener('load', setSelectors, false); // NB **not** 'onload'
}    
else if (window.attachEvent) { // Microsoft
	window.attachEvent('onload', setSelectors);
}