/*
Joe Maffia v1.0
June '07

this function recreate the same look&feel of the new Apple website (apple.com/mac) - look at the Mac@work section bottom/left

I'm using jquery and the animate function, so please include also "jquery" and "jquery interface" in your page.

enjoy ^_^
*/

function bureau(drawer) {
    if(drawer==1) {
        $('#drawer1').animate( {style:'top:0%; background-position:0px 100%;'}, 400 );
        $('.handle1').animate( {style:'color:#FFFFFF;'}, 400 );  
        $('#drawer2').animate( {style:'top:-96%; background-position:-168px 100%;'}, 400 );
        $('.handle2').animate( {style:'color:#0074bc;'}, 400 );  
        $('#drawer3').animate( {style:'top:-192%; background-position:-168px 100%;'}, 400 );
        $('.handle3').animate( {style:'color:#0074bc;'}, 400 ); 
        $('#drawer4').animate( {style:'background-position:-168px 100%;'}, 400 );
        $('.handle4').animate( {style:'color:#0074bc;'}, 400 );  
        return false;    
    }
    if(drawer==2) {
        $('#drawer1').animate( {style:'top:-88%; background-position:-168px 100%;'}, 400 );
        $('.handle1').animate( {style:'color:#0074bc;'}, 400 ); 
        $('#drawer2').animate( {style:'top:-96%; background-position:0px 100%;'}, 400 ); 
        $('.handle2').animate( {style:'color:#FFFFFF;'}, 400 ); 
        $('#drawer3').animate( {style:'top:-192%; background-position:-168px 100%;'}, 400 ); 
        $('.handle3').animate( {style:'color:#0074bc;'}, 400 ); 
        $('#drawer4').animate( {style:'background-position:-168px 100%;'}, 400 );
        $('.handle4').animate( {style:'color:#0074bc;'}, 400 );  return false;   
    }
    if(drawer==3) {
        $('#drawer4').animate( {style:'background-position:-168px 100%;'}, 400 );
        $('.handle4').animate( {style:'color:#0074bc;'}, 400 );  
        $('#drawer3').animate( {style:'top:-192%; background-position:0px 100%;'}, 400 );
        $('.handle3').animate( {style:'color:#FFFFFF;'}, 400 );  
        $('#drawer2').animate( {style:'top:-185%; background-position:-168px 100%;'}, 400 );
        $('.handle2').animate( {style:'color:#0074bc;'}, 400 );  
        $('#drawer1').animate( {style:'top:-88%; background-position:-168px 100%;'}, 400 );
        $('.handle1').animate( {style:'color:#0074bc;'}, 400 ); return false;
    }
    if(drawer==4) {
        $('#drawer4').animate( {style:'background-position:0px 100%;'}, 400 );
        $('.handle4').animate( {style:'color:#FFFFFF;'}, 400 ); 
        $('#drawer3').animate( {style:'top:-281%; background-position:-168px 100%;'}, 400 );
        $('.handle3').animate( {style:'color:#0074bc;'}, 400 );  
        $('#drawer2').animate( {style:'top:-185%; background-position:-168px 100%;'}, 400 ); 
        $('.handle2').animate( {style:'color:#0074bc;'}, 400 ); 
        $('#drawer1').animate( {style:'top:-88%; background-position:-168px 100%;'}, 400 );
        $('.handle1').animate( {style:'color:#0074bc;'}, 400 ); return false;
    }
}