var Duration = 300;
var DurationF = 200;
$(document).ready(function(){
    $(".Button").hover(function(){
         $(this).attr("src",$(this).attr("Hover"))
    },function(){
         $(this).attr("src",$(this).attr("UnHover"))
    });
    
    $("#HomePageLink").click(function(){
        $(".ContainerMask[id!=HomePage").animate({height:0},Duration);
        $("#HomePage").animate({height:'554px'},DurationF);
    });
    $("#WebHostingLink").click(function(){
        $(".ContainerMask[id!=WebHosting]").animate({height:0},Duration);
        $("#WebHosting").animate({height:'554px'},DurationF);
    });
    $("#ReferencesLink").click(function(){
        $(".ContainerMask[id!=References]").animate({height:0},Duration);
        $("#References").animate({height:'554px'},DurationF);
    });
    $("#BadExampleLink").click(function(){
        $(".ContainerMask[id!=BadExample]").animate({height:0},Duration);
        $("#BadExample").animate({height:'554px'},DurationF);
    });
    $("#ChooseCarefullyLink").click(function(){
        $(".ContainerMask[id!=ChooseCarefully]").animate({height:0},Duration);
        $("#ChooseCarefully").animate({height:'554px'},DurationF);
    });
    
   
});


//$(document).ready(function(){
//    var options = {};
//    setTimeout(function(){
//         //$("#F1").animate({height:"0px"},{queue:false, duration:450}).show();
//         $("#F1").animate({height:'toggle'},450);
//        setTimeout(function(){
//             //$("#F2").animate({height:"0px"},{queue:false, duration:450}).hide();
//             $("#F2").animate({height:'toggle'},450);
//        },2000)
//    },2000)
//});


// var options = {};
//    setTimeout(function(){
//         //$("#F1").animate({height:"0px"},{queue:false, duration:450}).show();
//         $("#HomePage1").animate({width:'toggle'},200);
//        setTimeout(function(){
//             //$("#F2").animate({height:"0px"},{queue:false, duration:450}).hide();
//             $("#HomePage2").animate({width:'toggle'},200);
//            setTimeout(function(){
//                 $("#HomePage3").animate({width:'toggle'},200);
//                 $("#HomePage2").animate({width:'toggle'},200);
//                setTimeout(function(){
//                     $("#HomePage2").animate({width:'toggle'},200);
//                     $("#HomePage1").animate({width:'toggle'},200);
//                    setTimeout(function(){
//                         //$("#F1").animate({height:"0px"},{queue:false, duration:450}).show();
//                         $("#HomePage").animate({height:'toggle'},450);
//                        setTimeout(function(){
//                             //$("#F2").animate({height:"0px"},{queue:false, duration:450}).hide();
//                             $("#WebHosting").animate({height:'toggle'},450);
//                                setTimeout(function(){
//                                     $("#References1").animate({width:'toggle'},200);
//                            },2000)        
//                        },2000)
//                    },2000)
//                },2000)
//            },2000)
//        },2000)
//    },2000)