var c=0;
var t;
var timer_is_on=0;
var countLi = $("#myList").children().length;
function FLIP_in(obj){	
	var currentId = $(obj).attr('id');
	$('#myhidden').val(currentId);
	doTimer();
	var BTN_ancho = $(obj).width();
    var BTN_marg  = Math.round(BTN_ancho/2) +"px"; 
	$('img.A1', obj)
		.stop(true,false)
		.animate({width:0,marginLeft: BTN_marg},150),
	$('img.A2', obj)
		.stop(true,false)
		.delay(150)
		.animate({width:"100%",marginLeft:0},150)
}
function FLIP_out(obj){	
	document.getElementById('cuenta').value=0;
	$('#myhidden').val('');
	var BTN_ancho = $(obj).width();
    var BTN_marg  = Math.round(BTN_ancho/2) +"px"; 
	$('img.A2', obj)
		.stop(true,false)
		.animate({width:0,marginLeft:BTN_marg},150),
	$('img.A1', obj)
		.stop(true,false)
		.delay(150)
		.animate({width: "100%",marginLeft:0},150);
	BTN_close(obj);
	stopCount();
}

function BTN_open(obj){	
	$(obj)	.animate(
			{marginRight:'30px',marginLeft:'30px'},
			{duration:'slow',easing:'easeOutBounce', queue: true}
			,200)	
}
function BTN_close(obj){	
	if( $('#topscreen').is(":hidden") ) {
		$(obj).stop(true,false)
			  .animate({marginRight:'3px',marginLeft:'3px'})
	}
}

function PAD_open(obj){
	var elMargen=[0,60,52,44,36,30,22,20,20,20,10];
	var elBtn="#btn"+obj;
	var elPad="#pad"+obj;

	var countLi=$('ul',elPad).children().length;
	var elTop=elMargen[countLi]+"px";

	$('.padTop',elPad).css({'margin-top':elTop})


	$(elPad).fadeIn('slow')
	$('#topscreen').show()	
}
function PADS_close(){
	$('#pad01').fadeOut()	
	$('#pad02').fadeOut()	
	$('#pad03').fadeOut()	
	$('#pad04').fadeOut()	
	$('#pad05').fadeOut()
	$('#btn01').animate({marginRight:'3px',marginLeft:'3px'})
	$('#btn02').animate({marginRight:'3px',marginLeft:'3px'})
	$('#btn03').animate({marginRight:'3px',marginLeft:'3px'})
	$('#btn04').animate({marginRight:'3px',marginLeft:'3px'})
	$('#btn05').animate({marginRight:'3px',marginLeft:'3px'})
}

function timedCount(){
	document.getElementById('cuenta').value=c;
	c=c+1;
	t=setTimeout("timedCount()",100);
	if (c==15){
		var idVal= "#"+document.getElementById('myhidden').value;
		BTN_open(idVal);
	}
	if (c==19){
		var btnVal= document.getElementById('myhidden').value.substr(3,2);
		PAD_open(btnVal);
	}
}
function doTimer(){
	if (!timer_is_on){
		timer_is_on=1;
		timedCount();
	} 
}
function stopCount() {
	clearTimeout(t);
	timer_is_on=0;
	c=0;
}

// JQUERY READY
$(document).ready(function(){
	$('.pad').mouseover(function(){
		var elBtn = "#btn"+$(this).attr('id').substr(3,2);
		$(elBtn).animate({marginRight:'30px',marginLeft:'30px'})

	});
	$('#topscreen').mouseover(function(){
		$(this).hide()
		PADS_close()
	});
});