function pa(e) {$(e).animate({top: (h-ph)/2,left: (w-pw)/2}, 500)}
function pa2(e) {$(e).animate({top: (h-ph)/2,left: (w-pw)/2}, 500, function() {setButtons()} )}
function pa3(e) {$(e).animate({top: (h-ph)/2,left: (w-pw)/2, height: '+=200'}, 500)}

function setButtons() {
	os = $('.p1').offset();
	$('.btnP1').css({top: os.top, left: os.left+42});
	$('.btnP2').css({top: os.top, left: os.left+180});
	$('.btnP3').css({top: os.top, left: os.left+311});
	$('.btnP4').css({top: os.top, left: os.left+440});
}
$(function() {
	w = $(window).width();
	h = $(window).height();
	
	pw = 657;
	ph = 551;

	pa('.p4');	
	setTimeout("pa('.p3')", 100);
	setTimeout("pa('.p2')", 100);
	setTimeout("pa2('.p1')", 100);

	page='p1';
	
	ch = '-=200';
	vt = '-=20';
	tt = 500;

	

	$('.btnP1').click(function(e) {
		if(page!='p1') {
			$('.p1').animate({top: vt , left: '+=130' , height: ch}, tt, function() { 
				$('.p1').css('z-index','10');
				if(page=='p2') {
					$('.p2').css('z-index', '9') ;
					$('.p3').css('z-index', '2') ;					
					$('.p4').css('z-index', '1') ;
				};
				if(page=='p3') {
					$('.p2').css('z-index', '5') ;
					$('.p3').css('z-index', '9') ;
					$('.p4').css('z-index', '5') ;
				};
				if(page=='p4') {
					$('.p2').css('z-index', '6') ;
					$('.p3').css('z-index', '5') ;
					$('.p4').css('z-index', '9') ;
				};
				pa3('.p1');  
				page='p1';				
				setTimeout("$('#feed').load('What-We-Do.php');",700);
			});			
		} else {
			$("#feed").load("What-We-Do.php");
		}
	});
	$('.btnP2').click(function(e) {
		if(page!='p2') {
			$('.p2').animate({top: vt  , left: '+=130' , height: ch}, tt, function() { 				
				$('.p2').css('z-index','10');
				if(page=='p1') {
					$('.p1').css('z-index', '9') ;
					$('.p3').css('z-index', '2') ;					
					$('.p4').css('z-index', '1') ;
				};
				if(page=='p3') {
					$('.p1').css('z-index', '5') ;
					$('.p3').css('z-index', '9') ;
					$('.p4').css('z-index', '5') ;
				};
				if(page=='p4') {
					$('.p1').css('z-index', '6') ;
					$('.p3').css('z-index', '5') ;
					$('.p4').css('z-index', '9') ;
				};
				pa3('.p2'); 
				page='p2';
				setTimeout("$('#feed').load('Our-Products.php');",700);
			});	
		} else {
			$('#feed').load('Our-Products.php');
		}
	});
	$('.btnP3').click(function(e) {
		if(page!='p3') {
			$('.p3').animate({top: vt , left: '+=100' , height: ch}, tt, function() { 				
				$('.p3').css('z-index','10');				
				if(page=='p1') {
					$('.p1').css('z-index', '9') ;
					$('.p2').css('z-index', '2') ;					
					$('.p4').css('z-index', '1') ;
				};
				if(page=='p2') {
					$('.p1').css('z-index', '5') ;
					$('.p2').css('z-index', '9') ;
					$('.p4').css('z-index', '5') ;
				};
				if(page=='p4') {
					
					$('.p1').css('z-index', '6') ;
					$('.p2').css('z-index', '5') ;
					$('.p4').css('z-index', '9') ;
				};
				pa3('.p3'); 
				page='p3';
				setTimeout("$('#feed').load('Our-Brands.php');",700);
			});						
		} else {
			$('#feed').load('Our-Brands.php');
		}
	});
	$('.btnP4').click(function(e) {
		if(page!='p4') {
			$('.p4').animate({top: vt , left: '+=110'  , height: ch}, tt, function() { 				
				$('.p4').css('z-index','10');
				if(page=='p1') {
					$('.p1').css('z-index', '3') ;
					$('.p2').css('z-index', '2') ;					
					$('.p3').css('z-index', '1') ;
				};
				if(page=='p2') {
					$('.p1').css('z-index', '5') ;
					$('.p2').css('z-index', '9') ;
					$('.p3').css('z-index', '5') ;
				};
				if(page=='p3') {
					$('.p1').css('z-index', '6') ;
					$('.p2').css('z-index', '5') ;
					$('.p3').css('z-index', '9') ;
				};
				pa3('.p4');  
				page='p4';
				setTimeout("$('#feed').load('Contact-Us.php');",700);
			});						
		} else {
			$('#feed').load('Contact-Us.php');
		}
	});
});

$(window).ready(function() {
	$('#feed').append('<div style="display:none"><img src="Images/bg_hdr_products.jpg" alt="" /><img src="Images/bg_hdr.jpg" alt="" /><img src="Images/bg_hdr_brands.jpg" alt="" /><img src="Images/bg_hdr_contacts.jpg" alt="" /><img src="Images/bg_content.gif" alt="" /></div>');
});