$(document).ready(function() {

$("#click-welcome").click(function(){
$("#work,#about,#shop,#contact").animate({ height: ['hide', 'swing']}, 200, "linear" );
$("#welcome").animate({ height: ['show', 'swing']}, 800, "linear" );

$("#click-work,#click-about,#click-shop,#click-contact").animate({ marginLeft: "0"}, 300);
$("#click-about a").css({'color':'#666'});
$("#click-shop a").css({'color':'#666'});
$("#click-contact a").css({'color':'#666'});
$("#click-work a").css({'color':'#666'});

$("#click-welcome").animate({ marginLeft: "183px"}, 800);
$("#click-welcome a").css({'color':'#7f1f28'});
});
$("#click-work").click(function(){
$("#welcome,#about,#shop,#contact").animate({ height: ['hide', 'swing']}, 200, "linear" );
$("#work").animate({ height: ['show', 'swing']}, 800, "linear" );

$("#click-welcome,#click-about,#click-shop,#click-contact").animate({ marginLeft: "0"}, 300);
$("#click-about a").css({'color':'#666'});
$("#click-shop a").css({'color':'#666'});
$("#click-contact a").css({'color':'#666'});
$("#click-welcome a").css({'color':'#666'});

$("#click-work").animate({ marginLeft: "183px"}, 800);
$("#click-work a").css({'color':'#7f1f28'});
});
$("#click-about").click(function(){
$("#work,#welcome,#shop,#contact").animate({ height: ['hide', 'swing']}, 200, "linear" );
$("#about").animate({ height: ['show', 'swing']}, 800, "linear" );

$("#click-welcome,#click-work,#click-shop,#click-contact").animate({ marginLeft: "0"}, 300);
$("#click-work a").css({'color':'#666'});
$("#click-shop a").css({'color':'#666'});
$("#click-contact a").css({'color':'#666'});
$("#click-welcome a").css({'color':'#666'});

$("#click-about").animate({ marginLeft: "183px"}, 800);
$("#click-about a").css({'color':'#7f1f28'});
});
$("#click-shop").click(function(){
$("#work,#about,#welcome,#contact").animate({ height: ['hide', 'swing']}, 200, "linear" );
$("#shop").animate({ height: ['show', 'swing']}, 800, "linear" );

$("#click-welcome,#click-work,#click-about,#click-contact").animate({ marginLeft: "0"}, 300);
$("#click-work a").css({'color':'#666'});
$("#click-about a").css({'color':'#666'});
$("#click-contact a").css({'color':'#666'});
$("#click-welcome a").css({'color':'#666'});

$("#click-shop").animate({ marginLeft: "183px"}, 800);
$("#click-shop a").css({'color':'#7f1f28'});
});
$("#click-contact").click(function(){
$("#work,#about,#shop,#welcome").animate({ height: ['hide', 'swing']}, 200, "linear" );
$("#contact").animate({ height: ['show', 'swing']}, 800, "linear" );

$("#click-welcome,#click-work,#click-shop,#click-about").animate({ marginLeft: "0"}, 300);
$("#click-work a").css({'color':'#666'});
$("#click-shop a").css({'color':'#666'});
$("#click-about a").css({'color':'#666'});
$("#click-welcome a").css({'color':'#666'});

$("#click-contact").animate({ marginLeft: "183px"}, 800);
$("#click-contact a").css({'color':'#7f1f28'});
});



$("#work-identity").click(function(){
$("#calligraphy,#print,#art").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".identity-sub").animate({ height: ['show', 'swing']}, 1000, "linear" );
$(".art-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".print-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".calligraphy-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$("#work-identity a").css({'color':'#801f29'});
$("#work-print a").css({'color':'#666666'});
$("#work-art a").css({'color':'#666666'});
$("#work-calligraphy a").css({'color':'#666666'});
});

$("#work-art").click(function(){
$("#calligraphy,#print,#identity").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".identity-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".print-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".calligraphy-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".art-sub").animate({ height: ['show', 'swing']}, 1000, "linear" );
$("#work-art a").css({'color':'#801f29'});
$("#work-print a").css({'color':'#666666'});
$("#work-calligraphy a").css({'color':'#666666'});
$("#work-identity a").css({'color':'#666666'});
});

$("#work-print").click(function(){
$("#calligraphy,#art,#identity").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".identity-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".art-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".calligraphy-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".print-sub").animate({ height: ['show', 'swing']}, 1000, "linear" );
$("#work-print a").css({'color':'#801f29'});
$("#work-calligraphy a").css({'color':'#666666'});
$("#work-art a").css({'color':'#666666'});
$("#work-identity a").css({'color':'#666666'});
});

$("#work-calligraphy").click(function(){
$("#print,#art,#identity").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".identity-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".art-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".print-sub").animate({ height: ['hide', 'swing']}, 200, "linear" );
$(".calligraphy-sub").animate({ height: ['show', 'swing']}, 200, "linear" );
$("#work-calligraphy a").css({'color':'#801f29'});
$("#work-print a").css({'color':'#666666'});
$("#work-art a").css({'color':'#666666'});
$("#work-identity a").css({'color':'#666666'});
});

});