$load.js("page-titles.js");

$(window).load(function() {
	$("title").text(page_title[Math.floor(Math.random()*page_title.length)]);
	
	$("div.answering-machine").slideDown("slow").children().each(function(){
	$(this).fadeIn("slow");
	});
	
	$("a.leave-a-message").click(function(e){
		e.preventDefault();
		$(this).replaceWith('<div class="message-timer"><p>you are now recording. please speak into your mic.</p><div class="timer-bar"></div><div class="second-timer">:00</div><a href="finish-message" class="save-message">when finished, click here</a></div>');
		$("div.answering-machine").animate({ "height": "+=10%"}, 200);
		$("div.message-timer").slideDown();
		second_timer(0);
		message_timer(0);
		
		$("a.save-message").click(function(e){
				e.preventDefault();
				save_message();
				clearTimeout(second__timer);
		});
	});
	
});

function bg(url) {
	$("body").css({ backgroundImage: "url(/app/themes/default/images/ifl/"+url+")" });
}

function message_timer(timer_width) {
	if (timer_width < 84) {
		$("div.timer-bar").animate({ width: timer_width+"%"},700);
		$(".second-timer").animate({ marginLeft: (timer_width + 1)+"%" },700);
		message__timer = setTimeout("message_timer("+(timer_width+2)+")", 100);
		}
}

function second_timer(time) {
	if (time <= 30) {
			if (time == 25)	$(".second-timer").css({ color: "red"});
			percentage = Math.floor($("div.timer-bar").width() / $("div.timer-bar").parent().width() * 124);
			$(".second-timer").text(":" + ((time < 10) ? "0"+ time : time) + " / " + ((percentage > 100) ? 100 : percentage) + "%");
			second__timer = setTimeout("second_timer("+(time+1)+")",1000);
	} else {
			save__message = setTimeout("save_message()",1000);
	}
}

function save_message() {
		$("div.message-timer").slideUp("slow").before('<p class="message-saved">your message has been saved. thank you.</p>').prev().fadeIn("slow")
		.after('<p class="note">note: we do not really receive these messages</p>').next().fadeIn("slow").parent().animate({ "height": "-=10%"}, 200);
}