$(function(){
	$("#servise").hide();		
	$("#about").hide();	
	$("#work").hide();	
	$("#contact").hide();
	$("#cat").hide();
	
	$("#topnav li").prepend("<span></span>"); 
	$("#topnav li").each(function() { 
		var linkText = $(this).find("a").html(); 
		$(this).find("span").show().html(linkText); 
	}); 

	$(".what").click(function(){
		$(".slide").slideUp(600);
		$("#servise").slideDown(600);
		$("ul#topnav li").removeClass("activeButton");
		$("ul#topnav li.what").addClass("activeButton");
	});
	
	$(".who").click(function(){
		$(".slide").slideUp(600);
		$("#about").slideDown(600);
		$("ul#topnav li").removeClass("activeButton");
		$("ul#topnav li.who").addClass("activeButton");
	});	
	
	$(".how").click(function(){
		$(".slide").slideUp(600);
		$("#work").slideDown(600);
		$("ul#topnav li").removeClass("activeButton");
		$("ul#topnav li.how").addClass("activeButton");
	});	
	
	$(".order").click(function(){
		$(".slide").slideUp(600);
		$("#contact").slideDown(600);
		$("ul#topnav li").removeClass("activeButton");
		$("ul#topnav li.order").addClass("activeButton");
	});

		$("h1").click(function(){
		$("#topnav li").removeClass("activeButton");
		$(".slide").slideUp(600);
		$("#main").slideDown(600);
	});
	
		$(".valid").click(function(){
		$("#topnav li").removeClass("activeButton");
		$(".slide").slideUp(600);
		$("#cat").slideDown(600);
	});
	
	$("ul#topnav li a").click(function() {
		$("ul#topnav li").removeClass("activeButton");
		$(this).parent().addClass("activeButton");
	});
	

	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({	marginTop: "-40"}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({	marginTop: "0"}, 250);
	});
	
	$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ //Animate and expand the image and the msg_block (Width + height)
			width: '520px',
			height: '400px'
		}, 250);
	} , function() {
	$("#pageflip img").stop() //On hover out, go back to original size 50x52
		.animate({
			width: '30px',
			height: '32px'
		}, 110);
	$(".msg_block").stop() //On hover out, go back to original size 50x50
		.animate({
			width: '30px',
			height: '30px'
		}, 100); //Note this one retracts a bit faster (to prevent glitching in IE)
  });
	
;  
});