$(document).ready(function(){
  $(".orelha .toggle").click(function(){
    var $pai = $(this).parent();
    if($pai.css("width") == "32px"){
        if($pai.attr("id") == "orelha3"){
          $pai.animate({width: "259px", right: 0},400);
          $(".content",$pai).animate({width: "227px"},400);

          $(".content",$("#orelha1")).animate({width: "0"},400);          
          $("#orelha1").animate({right: "291px", width: "32px"},400);
          
          $(".content",$("#orelha2")).animate({width: "0"},400);
          $("#orelha2").animate({right: "259px", width: "32px"},400);          
        }
        if($pai.attr("id") == "orelha2"){
          $pai.animate({width: "259px", right: "32px"},400);
          $(".content",$pai).animate({width: "227px"},400);

          $(".content",$("#orelha1")).animate({width: "0"},400);          
          $("#orelha1").animate({right: "291px", width: "32px"},400);
          
          $(".content",$("#orelha3")).animate({width: "0"},400);
          $("#orelha3").animate({right: "0", width: "32px"},400);        
        }
        if($pai.attr("id") == "orelha1"){         
          $pai.animate({width: "259px", right: "64px"},400);
          $(".content",$pai).animate({width: "227px"},400);
          
          $(".content",$("#orelha2")).animate({width: "0"},400);
          $("#orelha2").animate({right: "32px", width: "32px"},400);
          
          $(".content",$("#orelha3")).animate({width: "0"},400);
          $("#orelha3").animate({right: "0", width: "32px"},400);          
        }
    }else{
        $(".content",$pai).animate({width: "0"},400);
        $pai.animate({width: "32px"},400);
        if($pai.attr("id") == "orelha2"){
          $("#orelha1").animate({right: "64px", width: "259px"},400);          
        }
        if($pai.attr("id") == "orelha3"){
          //$("#orelha1").animate({right: "64px"},400);          
          $("#orelha2").animate({right: "32px", width: "259px"},400);          
        }
    }
    $("body",document).focus();
    return false;
  });

  $("#orelha1 .toggle").mouseover(function(){
    $("img",this).attr('src','images/lancamentos_hover.jpg');
  }).mouseout(function(){
    $("img",this).attr('src','images/lancamentos_top.jpg');  
  });

  $("#orelha2 .toggle").mouseover(function(){
    $("img",this).attr('src','images/residenciais_hover.jpg');
  }).mouseout(function(){
    $("img",this).attr('src','images/residenciais_top.jpg');  
  });

  $("#orelha3 .toggle").mouseover(function(){
    $("img",this).attr('src','images/comerciais_hover.jpg');
  }).mouseout(function(){
    $("img",this).attr('src','images/comerciais_top.jpg');  
  });

  $("#boxOrelhas").mouseover(function(){
    $(this).css("z-index","999");
  }).mouseleave(function(){
    
    $(".content",$("#orelha1")).animate({width: "0"},400);
    $("#orelha1").animate({right: "64px", width: "32px"},400);
    
    $(".content",$("#orelha2")).animate({width: "0"},400);
    $("#orelha2").animate({right: "32px", width: "32px"},400);
    
    $(".content",$("#orelha3")).animate({width: "0"},400);
    $("#orelha3").animate({right: "0", width: "32px"},400,function(){
        $("#boxOrelhas").css("z-index","-1");
    });
    
  });

});