/*
 * f8p.UI 
 */
 
if ( typeof f8p == 'undefined' ) {
	f8p = {};
}


function Erro( msg ) {
	new f8p.ui.Erro(msg).show();
}

function show( div ) {
//	alert(window.document.scrollTop);
	var eff = new fx.Opacity(div, {});
	eff.setOpacity(0);
	eff.now = 0;
	eff.toggle();	
	$(div).style.display = '';
}



function hide( div ) {
	new fx.Opacity(div, {}).custom(1, 0);
}


/*
var wnd = new fotolog.ui.Alert("Ok", true);
wnd.addEventListener('cancel', function() {
});
*/


f8p.ui = {};
f8p.ui.util = {};
/* static funcions */

f8p.ui.util.createButton = function( text ) {
	var a = document.createElement('a');
	a.className = 'botao3';
	a.appendChild(document.createTextNode(text));
	a.href = 'javascript:;';
	return a;
};


f8p.ui.Window = function() {}
f8p.ui.Window.prototype.init = function( width, height ) {
	this._listener = [];
	
	if (navigator.userAgent.indexOf("MSIE") == -1 ) {
		var scrolly = document.documentElement.scrollTop-100;
	} else {
		var scrolly = document.documentElement.scrollTop;
	}
	
	var div = document.createElement('div');
	div.className = 'popup';
	div.id = 'popup';

	if ( height == null ) {
		div.style.height = "auto";
		div.style.marginTop = -(Math.floor(25)-scrolly)+'px';

	} else {
		height -= 31;
		div.style.height = height + 'px';
		div.style.marginTop = -(Math.floor(height/2)-scrolly)+'px';
	}
	
	width -= 15;
	div.style.width = width + 'px';
	div.style.zIndex = 1000;
	
	div.style.marginLeft = -Math.floor(width/2)+'px';
	this._div = div;
	this.addEventListener('close', this.hide.bind(this));	

}

f8p.ui.Window.prototype.addEventListener = function( eventName, func ) {
	this._listener.push([eventName, func.bind(this)]);
}

f8p.ui.Window.prototype.dispatchevent = function( name, aux ) {
	for( var i in this._listener ) {
		if ( this._listener[i][0] == name && typeof this._listener[i][1] == 'function' ) {
			this._listener[i][1](aux||null);
		}
	}
	if ( name == "confirm" ) {
		this.hide();
	}
}

f8p.ui.Window.prototype.show = function() {
	var eff = new fx.Opacity(this._div, {duration:400});
	eff.now = 0;
	eff.setOpacity(0);
	document.body.appendChild(this._div);
	eff.toggle();	
	document.onkeyup = this.onKeyUp.bind(this);
}

f8p.ui.Window.prototype.onKeyUp = function( ev ) {
	var ev = ev || window.event;
	if ( ev.keyCode == 27 || ev.keyCode == 13 ) {
		this.hide();
		f8p.background.hide();
		document.onkeyup = null;
	}	
}

f8p.ui.Window.prototype.hide = function() {
	var eff = new fx.Opacity(this._div, {duration:400, onComplete:function() {
		glb.dom.remove(this.el);
	}});
	eff.now = 1;
	eff.setOpacity(100);
	eff.toggle();
}

f8p.ui.Window.prototype.bindAsEvent = function( event ) {
	var instance = this;
	return function() {
		instance.dispatchevent(event);
		return false;
	}
}

/*
 * Message box Otimizado
 *
 */
 
function showAlert(msg)
{
	var a = new f8p.ui.Alert(msg);
	a.show();
}

//////////////////////

f8p.ui.Alert = function( message ) {
	this.init(285, 46);
	var a = f8p.ui.util.createButton('FECHAR');
	a.className = 'botao3 right';
	a.onclick = this.bindAsEvent('close');
	
	this._div.appendChild(a);
	this._div.appendChild(document.createTextNode(message));
}
f8p.ui.Alert.prototype = new f8p.ui.Window();


f8p.ui.Erro = function( message, noheight ) {
	this.init(285, null);
	var a = f8p.ui.util.createButton('FECHAR');
	a.className = 'botao3 right';
	a.onclick = this.bindAsEvent('close');
	this.addEventListener('close', f8p.background.hide.bind(f8p.background));	
	this._div.appendChild(a);
	var span = document.createElement("span");
	span.innerHTML = message
	this._div.appendChild(span); //document.createTextNode(message));
	this._div.style.backgroundColor =  '#FFF0B5';
	f8p.background.show(); 
}
f8p.ui.Erro.prototype = new f8p.ui.Window();

//////////////////////

f8p.ui.Confirm = function( mensagem, confirm_label, cancel_label ) {
	this.init(285, 65);

	this._div.appendChild(document.createTextNode(mensagem));
	this._div.appendChild(document.createElement('br'));
	this._div.appendChild(document.createElement('br'));

	var a = f8p.ui.util.createButton(confirm_label || 'CONFIRMAR');
	a.onclick = this.bindAsEvent('confirm');
	a.style.marginTop = '10px';
	a.style.marginRight = '5px';
	this._div.appendChild(a);

	var a = f8p.ui.util.createButton(cancel_label || 'CANCELAR');
	a.style.marginTop = '10px';
	a.onclick = this.bindAsEvent('close');
	this._div.appendChild(a);
}

f8p.ui.Confirm.prototype = new f8p.ui.Window();



f8p.ui.ConfirmForm = function( mensagem, confirm_label, cancel_label, action, params ) {
	this.init(255, 70);

	var form = document.createElement('form');
	form.action = action;
	form.method = 'post';
	
	for ( var i in params ) {
		if ( typeof params[i] != 'object' ) {
			params[i] = [params[i]];
		}
		for ( var j = 0; j < params[i].length; j++ ) {
			var h = document.createElement('input');
			h.type = 'hidden';
			h.name = i;
			h.value = params[i][j];
			form.appendChild(h);
		}
	}

	form.appendChild(document.createTextNode(mensagem));
	form.appendChild(document.createElement('br'));

	var submit = document.createElement("input");
	submit.type = 'submit';
	submit.className = 'botao3';
	submit.value = confirm_label || 'CONFIRMAR';
	
	submit.style.marginTop = '10px';
	submit.style.marginRight = '5px';
	form.appendChild(submit);


	var submit = document.createElement("input");
	submit.type = 'button';
	submit.className = 'botao3';
	submit.value = cancel_label || 'CANCELAR';
	submit.style.marginTop = '10px';
	submit.onclick = this.bindAsEvent('close');
	
	form.appendChild(submit);

	form.appendChild(document.createElement('br'));
	
	this._div.appendChild(form);

}

f8p.ui.ConfirmForm.prototype = new f8p.ui.Window();


/////////////////WAIT///////////////////


f8p.ui.Wait = function( text ) {
	this.init(285, 44);
	var img = document.createElement('img');
	img.height = img.width = 19;
	img.title = img.alt = "Carregando";
	img.className = 'load';
	img.src = '/fotolog/estatico/imagens/carregando_gif.gif';
	this._div.appendChild(img);
	this._div.appendChild(document.createTextNode(text));
};
f8p.ui.Wait.prototype = new f8p.ui.Window();


////LOGIN////
var Login = {
	_action:null, //action pendente.
	open:function( action ) {
		this.action = action;
		var container = document.createElement('div');
		container.id = 'containerLogin';
		document.body.appendChild(container);
		new glb.Ajax('/fotolog/home/login_popup.jsp', {update:'containerLogin',onComplete:function(){
			document.getElementById("popLogin").focus();
		}});
		f8p.background.show();
		document.onkeyup = this.onKeyUp.bind(this);
	},

	onLogin:function( json ) {
		if ( json.STATUS == 'ERRO' ) {
			document.getElementById('popErro').innerHTML = json.ERROR;
		} else {
			this.close( true );		
			try {
				new glb.Ajax('/users/Header.ssp', {update:'hd'});
				this.action.send();
			}
			catch (e) {}
		}
	},
	onKeyUp:function( ev ) {
		var ev = ev || window.event
		if ( ev.keyCode == 27 ) {
			this.close();
		} else if ( ev.keyCode == 13 ) {
			this.post( 'popLogin', 'popSenha' )
		}	
	},

	post:function( login, senha ) {
		var loginU = document.getElementById(login).value;
		var loginP = document.getElementById(senha).value;
	
		Util.login( loginU, loginP, this.onLogin.bind(this));
	},
	close:function( error ) {
		if ( !error ) {
			try {
				this.action._completeHandler( {'STATUS':'ABORT'} );
			}
			catch (e) {}
		}
		
		var eff = new fx.Opacity('containerLogin', {onComplete:function() {
			Element.remove(this.el);
		}});
		eff.toggle();
		f8p.background.hide();
		document.onkeyup = null;
	}
};




/*
f8p.ui.Login = function() {
	var div = document.createElement('div');
	div.id = 'ajaxErrosLogin';
	{
		var div2 = document.createElement('div');
		div2.className = 'box';
	
		var div3 = document.createElement('div');
		div3.className = 'logo';
		var span = document.createElement('span');
		span.appendChild(document.createTextNode('8P - Flog'));
		div3.appendChild(span);

		var div4= document.createElement('div');
		div4.className = 'fechar';
		var a = document.createElement('a');
		a.innerHTML = 'x';
		div4.appendChild(a);
		
		div2.appendChild(div3);
		div2.appendChild(div4);
		div.appendChild(div2);
	}
	
	var span = document.createElement('span');
	span.className = 'txt';
	span.appendChild(document.createTextNode('Você precisa estar logado para realizar esta ação.'));
	div.appendChild(span);	


	{
		var div2 = document.createElement('div');
		div2.className = 'boxForm';

		var span = document.createElement('span');
		span.className = 'txtform';
		span.appendChild(document.createTextNode('Você já faz parte do Flog?'));
		div2.appendChild(span);
		
		var div3 = document.createElement('div');
		div3.className = 'boxForm1';
		div3.appendChild(document.createTextNode('Login/E-mail'));
		var input = document.createElement('input');
		input.type = 'text';
		div3.appendChild(input);
		div2.appendChild(div3);

		var div3 = document.createElement('div');
		div3.className = 'boxForm2';
		div3.appendChild(document.createTextNode('Senha ('));
		var a = document.createElement('a');
		a.href = '#';
		a.className = 'esq';
		a.appendChild(document.createTextNode('esqueceu?'));
		div3.appendChild(a);
		div3.appendChild(document.createTextNode(')'));
		
		var input = document.createElement('input');
		input.type = 'text';
		div3.appendChild(input);

		var a = document.createElement('a');
		a.href = '#';
		a.className = 'btAjax';
		a.appendChild(document.createTextNode('OK'));
		div2.appendChild(div3);
		
		
		var div3 = document.createElement('div');
		div3.className = 'lnk';
		div3.appendChild(document.createTextNode('Ainda não faz parte? '));
		var a = document.createElement('a');
		a.href = '#';
		a.appendChild(document.createTextNode('Conheça o 8P Flog »'));
		div3.appendChild(a);

		div2.appendChild(div3);
		div.appendChild(div2);
	}
	document.body.appendChild(div);
}
*/



/* ------------------------- */


f8p.background = {
	show:function() {
		if ( glb.dom.$('bg') == null ) {
			var div = document.createElement('div');
			div.id = 'bg';
			div.style.height = document.documentElement.scrollHeight + 'px';
			document.body.appendChild(div);	
		}
	},
	hide:function() {
		//document.body.style.overflow = 'auto';
		try {
			glb.dom.remove('bg');
		}catch (e) {}
	}
};

f8p.UI = {
	CUSTOM1:0,
	CUSTOM2:1,
	CUSTOM3:2,

	/* div que recebe o popup */
	_container:function(width, height) {
		var div = document.createElement('div');
		div.className = 'popup';
		div.id = 'popup';
		//box model.
		//padding: 12px 0 12px 8px
		//border-width:2px 5px 5px 2px

		height -= 31;
		width -= 15;
		div.style.width = width + 'px';
		div.style.height = height + 'px';
		div.style.marginTop = -Math.floor(height/2)+'px';
		div.style.marginLeft = -Math.floor(width/2)+'px';
		return div;
	},
	_modal:function() {
	
	
	},
	
	
	
	aviso:function( aviso ) {
		var div = this._container(285, 44);
		var a = this._new_botao('FECHAR');
		a.className = 'botao3 right';
		a.onclick = this.hide.bind(div);
		div.appendChild(a);
		div.appendChild(document.createTextNode('Foto definida com sucesso.'));
		f8p.background.show();
		this.show( div );
	},


	confirm:function( aviso ) {
		var div = this._container(285, 61);
		
		div.appendChild(document.createTextNode('Deseja realmente excluir essas 13 fotos?'));
		div.appendChild(document.createElement('br'));
		
		var a = this._new_botao('EXCLUIR');
		a.onclick = this.hide.bind(div);
		a.style.marginTop = '10px';
		a.style.marginRight = '5px';
		div.appendChild(a);
		
		var a = this._new_botao('CANCELAR');
		a.style.marginTop = '10px';
		a.onclick = this.hide.bind(div);
		div.appendChild(a);

		f8p.background.show();
		this.show( div );
	},

	show:function( div ) {
		var eff = new fx.Opacity(div, {duration:400});
		eff.now = 0;
		eff.setOpacity(0);
		document.body.appendChild(div);
		eff.toggle();
	},
	hide:function(flag) {
		var eff = new fx.Opacity(this, {duration:400, onComplete:function() {
			glb.dom.remove(this.el);
			if(!flag){
				f8p.background.hide();
			}
		}});
		eff.now = 1;
		eff.setOpacity(100);
		eff.toggle();
	},


	wait:function( text ) {
		var img = document.createElement('img');
		img.height = img.width = 19;
		img.title = img.alt = "Carregando";
		img.className = 'load';
		img.src = '/fotolog/estatico/imagens/carregando_gif.gif';
		var div = this._container(285, 44);
		div.appendChild(img);
		div.appendChild(document.createTextNode(text));
		f8p.background.show();
		this.show( div );
		//retorna a função
		return this.hide.bind(div);
	
	},
	
	
	inserirPalavraChave:function() {

		var div = this._container(285, 63);
		
		div.appendChild(document.createTextNode('Inserir nova palavra-chave (tag)'));
		div.appendChild(document.createElement('br'));
		
		var input = document.createElement('input');
		input.style.marginRight = '5px';
		input.txt = 'txt';
		div.appendChild(input);


		var a = this._new_botao('SALVAR');
		a.onclick = this.hide.bind(div);
		a.style.marginTop = '10px';
		a.style.marginRight = '5px';
		div.appendChild(a);
		
		var a = this._new_botao('CANCELAR');
		a.style.marginTop = '10px';
		a.onclick = this.hide.bind(div);
		div.appendChild(a);

		f8p.background.show();
		this.show( div );
	},	
	
	escolherAlbum:function( ) {

		var div = this._container(285, 84);
		
		div.appendChild(document.createTextNode('Escolha o álbum'));
		div.appendChild(document.createElement('br'));
		
		var select = document.createElement('select');
		select.marginRight = '5px';
		div.appendChild(select);
		
		var select = document.createElement('select');
		div.appendChild(select);
		
		div.appendChild(document.createElement('br'));

		var a = this._new_botao('COPIAR');
		a.onclick = this.hide.bind(div);
		a.style.marginTop = '10px';
		a.style.marginRight = '5px';
		div.appendChild(a);
		
		var a = this._new_botao('CANCELAR');
		a.style.marginTop = '10px';
		a.onclick = this.hide.bind(div);
		div.appendChild(a);

		f8p.background.show();
		this.show( div );
	},	
		
		
	escolherGrupo:function( ) {

		var div = this._container(285, 63);
		
		div.appendChild(document.createTextNode('Escolha o grupo'));
		div.appendChild(document.createElement('br'));
		
		var select = document.createElement('select');
		select.marginRight = '5px';
		div.appendChild(select);
		setTimeout( function(){select.focus();}, 100);
		
		var a = this._new_botao('COPIAR');
		a.onclick = this.hide.bind(div);
		a.style.marginTop = '10px';
		a.style.marginRight = '5px';
		div.appendChild(a);
		
		var a = this._new_botao('CANCELAR');
		a.style.marginTop = '10px';
		a.onclick = this.hide.bind(div);
		div.appendChild(a);

		f8p.background.show();
		this.show( div );

		document.onkeydown = function( event ) {
			var event = event || window.event;
			if ( event.keyCode == 27 ) {
				a.onclick();
			}
		}

	},		
	
	
	erro:function() {
		
	},
	login:function() {
	},
	info:function() {
		
	},
	custom:function() {
		
	},
	escolhaAlbum:function() {
		
	},
	
	_new_botao:function( text ) {
		var a = document.createElement('a');
		a.className = 'botao3';
		a.appendChild(document.createTextNode(text));
		a.href = 'javascript:;';
		return a;
	},
	
	//da foto.
	personalizarFoto:function(){
	},
	
	loadAlbum: function( albumId, elementId ) {
		var uri = '/action?albumId=' + albumId
		new glb.Ajax( uri, {update:elementId} );
	},
	
	
	_clean_all:function() {
		/*var foo = document.getElementById("foo");
		if (foo.hasChildNodes()) { 
			foo.removeChild(foo.childNodes[0]);
		}*/
	}
	
		
}; //f8p.UI


f8p.UI.ExcluirFoto = function( fotoId ) {
	//mostra "Deseja realmente excluir essa foto?"

	

}


f8p.UI.ExcluirFoto.prototype = {
	onBegin:function() {
		//muda para "Excluindo foto..."
	},
	onComplete:function() {
		// - some com a tela -
	},
	onError:function() {
		//muda para "Erro. Tente novamente."
	}
}