var f_this = null;
var f_timer = null;
var auto_list = true;
var auto_timer = null;
var loadingTimer = null;
var cornerFrame = 0;
var stopMove = false;
var param = 30;
var href = 1;

// moving background
function changeBg(i){
	$('.description').hide();
	for(k = 0, f_length = $('.faces').length; k < f_length; k++) {
		$(f_this).parents('#faces').removeClass('active_face'+k);
	}
	$(f_this).parents('#faces').addClass('active_face'+i);
	$(f_this).find('.description').show();
}
// return background to the start position
function clearBg(){
	$('.description').hide();
	$(f_this).parents('#faces').removeClass();
}
// moving the corner
function cornerAnimate() {
	if (stopMove){
		clearInterval(loadingTimer);
		return;
	}
	$(".corner_move").css({'background-position':'right ' + (cornerFrame * -39) + 'px'});
	/*--- back */
	if ( (cornerFrame > 20) && (cornerFrame < 26) ){param = 32;}
	else if (cornerFrame == 27){param = 33;}
	else {param = 30;}
	$(".corner_back").css({'width': param, 'height': param });
	/* back ---*/
	cornerFrame = (cornerFrame + 1) % 27;
};
// animation
function cornerMove() {
	clearInterval(loadingTimer);
	loadingTimer = setInterval("cornerAnimate()", 100);
}
// change corner on hover, stop animation
function cornerReplace(){
	$(".corner_move").mouseover(
		function(){
			$(this).css({"width":60,"height":70,"background":"url(/images/faces/corner_big.png)"});
			$(this).parent(".faces").find(".corner_back").css({"width":60, "height":60});
			stopMove = true;
		}
	);
	$(".corner_move").mouseout(
		function(){
			$(this).css({"width":34,"height":39,"background":"url(/images/faces/corner_move.png)"});
			$(this).parent(".faces").find(".corner_back").css({"width":30, "height":30});
			stopMove = false;
			cornerMove();
		}
	);
}

/*function AutoClick(m){
	m++;
	if (m==5){m=1;}
	$(".title_"+m).click();
	setTimeout("AutoClick("+m+")", 10000);
}*/

// DOM ready
$(document).ready(
	function(){
		
		//AutoClick(0);
		cornerMove();
		cornerReplace();
		// for each block with face
		
		$("#content div.faces div.pattern").css({"opacity":0});
		$(".description").css({"opacity":0});
		$("#content div.faces").hover(
			function(){
				$(this).children("div.pattern").animate({"opacity":1}, {duration: 360, queue: false});
				$(this).find(".description").animate({"opacity":1}, {duration: 360, queue: false});
			},
			function(){
				$(this).children("div.pattern").animate({"opacity":0}, {duration: 360, queue: false});
				$(this).find(".description").animate({"opacity":0}, {duration: 360, queue: false});
			}
		);
		
		// faces hover change bg animation small -> big
		/*$('.faces').each(
			function(i){
				$(this).mouseover(
					function(){
						f_this = this;
						if (f_timer) { clearTimeout(f_timer); };
						f_timer = setTimeout("changeBg("+i+")", 100);
					}
				);
				$(this).mouseout(
					function(){
						f_this = this;
						if (f_timer) { clearTimeout(f_timer); };
						f_timer = setTimeout("clearBg()", 100);
					}
				);
			}
		);*/
		$(".corner_move").toggle(
			function(){
				// this is the dom element clicked
				var index = $(".corner_move").index(this) + 1;
				//$(this).parent(".faces").find(".banner_full").show();
				$(this).parent(".faces").find(".banner_full").fadeIn("slow");
				$(this).parent(".faces").find(".corner_back img.back_bnr").attr('src','../../images/faces/block'+index+'.jpg');
			},function(){
				var new_src = $(this).parent(".faces").find(".banner_full img.back_bnr").attr("src");
				//$(this).parent(".faces").find(".banner_full").hide();
				$(this).parent(".faces").find(".banner_full").fadeOut("slow");
				$(this).parent(".faces").find(".corner_back img.back_bnr").attr('src',new_src);
			}
		);
		
		$(".info_tabs li a").click(
			function(){
				$(".info_tabs li").removeClass('active');
				$(this).parents("li").addClass('active');
				href = $(this).attr("href");
				
				for (i=1;i<4;i++){
					$(".main_info").removeClass("active"+i);
					$("#more_info"+i).hide();
					$("#info_"+i).hide();
					$("#more_info"+i).removeClass("active")
				}
				
				$(".main_info").addClass("active"+href);
				$("#more_info"+href).show();
				$("#info_"+href).show();
				$("#more_info"+href).addClass("active");
				
				//AutoClick(0);
				
				$("#info_"+href).find("span").each(
				function(i){
					$(this).click(
						function(){
							$("#info_"+href).find("p").removeClass("active");
							$("#info_"+href).children("p").eq(i).addClass("active");
							$("#more_info"+href).find(".frame").removeClass("active");
							$("#more_info"+href).find(".frame").eq(i).addClass("active");
						}
					);
				}
				);
				
				return false;
			}
		);
		
		$("#click_1").click();
		//AutoClick(0);
	}
);