jQuery.noConflict();

jQuery(document).ready(function(){
    
    // 1
	
    jQuery("#a-tl").click(function(){
	  jQuery("#quad-tl").css({'background-color' : 'white', 'overflow' : 'auto', 'z-index' : '9' });
      jQuery("#quad-tl").animate({ 
        width: "780px",
		height: "520px", 
		top: "0px",
		left: "0px"
      }, 250 );
    });
	
    jQuery("#back-tl").click(function(){
	  jQuery("#quad-tl").animate({
        width: "260px",
		height: "260px",  
		top: "0px",
		left: "0px"
      }, 350, function(){
	  	jQuery("#quad-tl").css({'background-color' : 'transparent', 'overflow' : 'hidden', 'z-index' : '5' })
		});
	});
	
	// 2
	
    jQuery("#a-tc").click(function(){
	  jQuery("#quad-tc").css({'background-color' : 'white', 'overflow' : 'auto', 'z-index' : '9' });
      jQuery("#quad-tc").animate({ 
        width: "780px",
		height: "520px", 
		top: "0px",
		left: "0px"
      }, 250 );
    });
	
    jQuery("#back-tc").click(function(){
	  jQuery("#quad-tc").animate({
        width: "260px",
		height: "260px",  
		top: "0px",
		left: "260px"
      }, 350, function(){
	  	jQuery("#quad-tc").css({'background-color' : 'transparent', 'overflow' : 'hidden', 'z-index' : '5' })
		});
	});
		
	// 3

    jQuery("#a-tr").click(function(){
	  jQuery("#quad-tr").css({'background-color' : 'white', 'overflow' : 'auto', 'z-index' : '9' });
      jQuery("#quad-tr").animate({ 
        width: "780px",
		height: "520px", 
		top: "0px",
		left: "0px"
      }, 250 );
    });
	
    jQuery("#back-tr").click(function(){
	  jQuery("#quad-tr").animate({
        width: "260px",
		height: "260px",  
		top: "0px",
		left: "520px"
      }, 350, function(){
	  	jQuery("#quad-tr").css({'background-color' : 'transparent', 'overflow' : 'hidden', 'z-index' : '5' })
		});
	});
	
	// 4
	
    jQuery("#a-bl").click(function(){
	  jQuery("#quad-bl").css({'background-color' : 'white', 'overflow' : 'auto', 'z-index' : '9' });
      jQuery("#quad-bl").animate({ 
        width: "780px",
		height: "520px", 
		top: "0px",
		left: "0px"
      }, 250 );
    });
	
    jQuery("#back-bl").click(function(){
	  jQuery("#quad-bl").animate({
        width: "260px",
		height: "260px",  
		top: "260px",
		left: "0px"
      }, 350, function(){
	  	jQuery("#quad-bl").css({'background-color' : 'transparent', 'overflow' : 'hidden', 'z-index' : '5' })
		});
	});
	
	// 5
	
    jQuery("#a-bc").click(function(){
	  jQuery("#quad-bc").css({'background-color' : 'white', 'overflow' : 'auto', 'z-index' : '9' });
      jQuery("#quad-bc").animate({ 
        width: "780px",
		height: "520px", 
		top: "0px",
		left: "0px"
      }, 250 );
    });
	
    jQuery("#back-bc").click(function(){
	  jQuery("#quad-bc").animate({
        width: "260px",
		height: "260px",  
		top: "260px",
		left: "260px"
      }, 350, function(){
	  	jQuery("#quad-bc").css({'background-color' : 'transparent', 'overflow' : 'hidden', 'z-index' : '5' })
		});
	});
	
	// 6
	
    jQuery("#a-br").click(function(){
	  jQuery("#quad-br").css({'background-color' : 'white', 'overflow' : 'auto', 'z-index' : '9' });
      jQuery("#quad-br").animate({ 
        width: "780px",
		height: "520px", 
		top: "0px",
		left: "0px"
      }, 250 );
    });
	
    jQuery("#back-br").click(function(){
	  jQuery("#quad-br").animate({
        width: "260px",
		height: "260px",  
		top: "260px",
		left: "520px"
      }, 350, function(){
	  	jQuery("#quad-br").css({'background-color' : 'transparent', 'overflow' : 'hidden', 'z-index' : '5' })
		});
	});			

  });