// JavaScript Document

var _target;
var _time;
var halfs;
var mainDivide;
var marcoDivide;
var page_visible = 0;
var init_buton;
var _wraper;
var paginaAnterior = 0;
var tecladoOn = false;

function Transition(trigger, wraper, target, time){

	init_buton = trigger;
	_wraper = wraper;
	_target = $(target);
	_time = time;
	
    this.inicio = showInicio;
	this.final = showFinal;
	
	$(init_buton[0]).click(function(){
		if(page_visible != 0)_init('pag1');
	});
	$(init_buton[1]).click(function(){
		_init('teclado');
		tecladoOn = true;
	});
	$(init_buton[2]).click(function(){recordar()});
	$(init_buton[3]).click(function(){recordar()});
	$(init_buton[4]).click(function(){
		if(page_visible != 4)_init('pag3');
	});
	$(init_buton[5]).click(function(){
		if(page_visible != 3)_init('pag2');
	});
	$(init_buton[6]).click(function(){
		if(page_visible != 6)_init('legales');
	});
	$(init_buton[7]).click(function(){
		recordar();
	});
	
		
	halfs = new Array();
}
function recordar(){
	if(tecladoOn == true){
		_init("teclado2");
	}else{
		_init("pag1");
		tecladoOn = false;
	}	
}
function _init(seccion){

	mainDivide = divide($(_target), false);
	marcoDivide = divide($('#marco'), false);
	var ancho = 50;
	
	switch(seccion){
		case 'pag1':
			tecladoOn = false;
			visible_inbisible();
			page_visible = 0;
			changeID($('#si2'),"si",si);
			changeID($('#no'),"no2", no);
		break;
		case 'pag2':
			visible_inbisible();
			page_visible = 3;
		break;
		case 'teclado':
			preguntas.outsideIndex(1);
			visible_inbisible();
			page_visible = 1;
		break;
		
		case 'teclado2':
			visible_inbisible();
			page_visible = 1;
		break;
		case 'pag3':
			visible_inbisible();
			page_visible = 4;
		break;
	
		case 'final':
			visible_inbisible();
			page_visible = 2;
		break;
		case 'legales':
			visible_inbisible();
			page_visible = 5;
		break;
	}
	
	$('#marco #arriba').animate({marginTop: 210, marginLeft: 340, width:0}, _time);
	$('#marco #abajo').animate({marginTop: -210, marginLeft: 340, width:0}, _time);
	
	$('#marco #izquierda').animate({marginLeft: 340, marginTop: 210, height:0}, _time);
	$('#marco #derecha').animate({marginLeft: -340, marginTop: 210, height:0}, _time);
	
	$('#marco #e1').animate({marginTop: 210, marginLeft: 340}, _time);
	$('#marco #e2').animate({marginTop: 210, marginLeft: -340}, _time);
	$('#marco #e3').animate({marginTop: -210, marginLeft: 340}, _time);
	$('#marco #e4').animate({marginTop: -210, marginLeft: -340}, _time);
	
	$(_wraper[page_no_visible]).animate({left: -350, top:0}, _time);
	$(_target).css('overflow', 'hidden');
	$(_target).stop().animate({opacity: 0, left: mainDivide[0] , top: mainDivide[1] , width: 0, height: 0}, _time, changeContent);
	
};
function visible_inbisible(){
	switch(page_visible){
		case 0:
			page_no_visible = 0;
		break;	
		case 1:
			page_no_visible = 1;
		break;	
		case 2:
			page_no_visible = 2;
		break;
		case 3:
			page_no_visible = 3;
		break;
		case 4:
			page_no_visible = 4;
		break;	
		case 5:
			page_no_visible = 5;
		break;	
	};	
}
function changeContent(){
	
	$(_wraper[page_no_visible]).css('display', 'none');
	
	$(_wraper[page_visible]).css('display', 'block');	
	$(_wraper[page_visible]).css('left', '-350px');
	
	openAnimation()
}
function openAnimation(){
	
	$(_target).css('left', mainDivide[0])
			  .css('top', mainDivide[1])
			  .css('width', '80px')
			  .css('height', '60px');
	 

	$('#marco #arriba').animate({marginTop: 0, marginLeft: 0, width:681}, _time);
	$('#marco #abajo').animate({marginTop: 0, marginLeft: 0, width:681}, _time);
	
	$('#marco #izquierda').animate({marginLeft: 0, marginTop: 0, height:423}, _time);
	$('#marco #derecha').animate({marginLeft: 0, marginTop: 0, height:423}, _time);

	$('#marco #e1').animate({marginTop: 0, marginLeft: 0}, _time);
	$('#marco #e2').animate({marginTop: 0, marginLeft: 0}, _time);
	$('#marco #e3').animate({marginTop: 0, marginLeft: 0}, _time);
	$('#marco #e4').animate({marginTop: 0, marginLeft: 0}, _time);

	$(_wraper[page_visible]).animate({left: 0, top:0}, _time);
	$(_target).animate({opacity: 1, width: '750px', height: '484px', top: '15px', left: '20px'}, _time, changeTrigger)

};
function changeTrigger(){
	//$(init_buton[3]).click(function(){_init()});	
};
function showFinal(){
	_init('final');	
}
function showInicio(){
	_init('pag1');	
}
//util
function divide(divide_target, full){
	
	halfs = [];
	
	if(full == true){
		var xPos = ($(divide_target).width());
		var yPos = ($(divide_target).height());
		halfs = [xPos, yPos];
	}else{	
		var xPos = ($(divide_target).width()) / 2;
		var yPos = ($(divide_target).height()) / 2;	
		halfs = [xPos, yPos];
	}
	return halfs;
};