// JScript File
$(document).ready(function() {            
            $(".open").click(function () {
                $("#panel_container").animate({
                    width: '730px'
                }, 1, 'linear', function() {
                              
                $("#panel_1").animate({
                    width: '240px'
                }, 1000, 'linear', function() {
                
                    $("#panel_1 div.panel_bg").animate({
                        opacity: '1'
                    }, 1000, 'linear', function() {
                        // Animation complete.                            
                    });
                
                    // Animation complete.
                    $("#panel_3").animate({
                        width: '248px'
                    }, 1000, 'linear', function() {
                    
                        $("#panel_3 div.panel_bg").animate({
                            opacity: '1'
                        }, 1500, 'linear', function() {
                            // Animation complete.                            
                        });
                    
                        // Animation complete.
                        $("#panel_2").animate({
                            top: '0px',
                            width: '240px',
                            height: '550px'
                        }, 1000, 'linear', function() {
                            // Animation complete.                            
                          });
                          
                          $("#panel_2 div.panel_bg").animate({
                            opacity: '1'
                            }, 500, 'linear', function() {
                                // Animation complete.                            
                            });
                          
                          $("#panel_3").animate({
                                height: '550px',
                                top: '0px',
                                left: '480px'
                            }, 1000, 'linear', function() {
                            
                                $("#panel_1 div.content").animate({
                                opacity: '1'
                                }, 1000, 'linear', function() {
                                    // Animation complete.                            
                                });
                              
                                $("#panel_2 div.content").animate({
                                    opacity: '1'
                                }, 1500, 'linear', function() {
                                    // Animation complete.                            
                                });
                            
                                $("#panel_3 div.content").animate({
                                    opacity: '1'
                                }, 2000, 'linear', function() {
                                    // Animation complete.
                                });
                          
                                $("#close").animate({
                                    width:"42px",
                                    opacity:"1"
                                }, 1000, 'linear', function() {
                                    // Animation complete.
                                });                            
                            
                            });
                        
                      });
                  });
                  
                });
            });
            
            $("#close").click(function () {
            
                $("#panel_3 div.content").animate({
                opacity: '0'
                }, 1000, 'linear', function() {
                    // Animation complete.                            
                });
              
                $("#panel_2 div.content").animate({
                    opacity: '0'
                }, 1000, 'linear', function() {
                    // Animation complete.                            
                });
            
                $("#panel_1 div.content").animate({
                    opacity: '0'
                }, 1000, 'linear', function() {
                    // Animation complete.
                });
                          
            
                $("#close").animate({
                    width:"0px",
                    opacity:"0"
                    }, 500, 'linear', function() {
                    // Animation complete.
                    
                    $("#panel_2 div.panel_bg").animate({
                            opacity: '0'
                            }, 500, 'linear', function() {
                                // Animation complete.                            
                            });
                
                    $("#panel_2").animate({
                        top: '50px',
                        width: '0px',
                        height: '450px'
                    }, 1000, 'linear', function() {
                        // Animation complete.                            
                      });
                      
                      $("#panel_3 div.panel_bg").animate({
                            opacity: '0'
                        }, 1500, 'linear', function() {
                            // Animation complete.                            
                        });
                    
                    $("#panel_3").animate({
                            height: '450px',
                            top: '50px',
                            left: '240px'
                        }, 990, 'linear', function() {
                            // Animation complete.
                          });
                     
                        
                        $("#panel_3").animate({
                            width: '0px'
                        }, 1000, 'linear', function() {
                        
                        $("#panel_1 div.panel_bg").animate({
                            opacity: '1'
                        }, 1000, 'linear', function() {
                            // Animation complete.                            
                        });
                            // Animation complete.
                            $("#panel_1").animate({
                                width: '0px'
                            }, 1000, 'linear', function() {
                                // Animation complete.
                                $("#panel_container").animate({
                                    width: '0px'
                                }, 1, 'linear', function() {   
                                });
                            }); 
                   }); 
                });               
            });
        });