Раскрывающаяся форма справа

by AJIEKCEU

HTML

<div class="contact_form">
     <a href="#" title="" class="button_contact"></a>
<div class="form_shadow">
    <div class="form_bg">
      <form action="/index.html" method="post" id="contact_form">
          <input type="hidden" name="toadmin" value="1">
        <fieldset>
          <div class="headline">
            <h3>Обращение к администратору</h3>
          </div>
          <div class="form_body">
            <div class="form_in">
              <label>Тип запроса:</label>
              <div class="lineForm">
                <select class="sel80 chzn-done" id="type" name="type" valid-data="select" style="display: none;">
                  <option value="0" selected="selected">Выбрать</option>
                  <option value="Неполадки на сайте" selected="selected">Неполадки на сайте</option>
                  <option value="Вопрос по оплате" selected="selected">Вопрос по оплате</option>
                  <option value="Реклама на сайте" selected="selected">Реклама на сайте</option>
                  </select><div id="type_chzn" class="chzn-container chzn-container-single" style="width: 100%;" title=""><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>Реклама на сайте</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off"/></div><ul class="chzn-results"><li id="type_chzn_o_0" class="active-result" style="">Выбрать</li><li id="type_chzn_o_1" class="active-result" style="">Неполадки на сайте</li><li id="type_chzn_o_2" class="active-result" style="">Вопрос по оплате</li><li id="type_chzn_o_3" class="active-result result-selected" style="">Реклама на сайте</li></ul></div></div>
              </div>
            </div>
            <div class="form_in">
              <label>E-mail:</label>
                <div class="input"><input type="text" value="" valid-data="email" name="email"/></div>
            </div>
            <div class="form_in">
              <label>Телефон:</label>
         ...

CSS

.contact_form, .contact_form_mob {
background: #ffffff url(http://dev.metallmarket.ru/assets/templates/metall/img/form_top_bg.png) repeat-x top;
box-shadow: 0px 1px 3px 0px #b4b8bc;
-webkit-box-shadow: 0px 1px 3px 0px #b4b8bc;
-moz-box-shadow: 0px 1px 3px 0px #b4b8bc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
behavior: url("PIE.htc");
position: fixed;
zoom: 1;
right:0;
width: 57px;
overflow: hidden;
z-index: 1000;
}
.button_contact {
background: url(http://dev.metallmarket.ru/assets/templates/metall/img/buttons/04.png) no-repeat #E0E2E4;
height: 411px;
display: block;
position: absolute;
left: -4px;
width: 61px;
z-index: 1000;
}
.form_shadow {
background: url(http://dev.metallmarket.ru/assets/templates/metall/img/form_shadow.png) repeat-x bottom;
}
.form_bg {
background: url(http://dev.metallmarket.ru/assets/templates/metall/img/form_bg.png) no-repeat bottom left;
padding: 0 0 26px;
}
.contact_form, .contact_form_mob {
zoom: 1;
}
fieldset {
border: none;
}
.headline {
min-height: 34px;
padding: 17px 19px 0;
}
.form_body {
padding: 16px 0 0 10px;
width: 826px;
}
.contact_form .form_in, .contact_form_mob .form_in {
padding-left: 8px;
padding-right: 0px;
}
.form_in {
float: left;
padding: 13px 47px 0 34px;
width: 244px;
}
.contact_form .button_3, .contact_form_mob .button_3 {
text-align: center;
}
.button_3 {
text-align: center;
text-decoration: none;
margin: 0 auto;
width: auto;
}
div.button_3 {
margin-left: 0px;
text-align: left;
}

JavaScript

/* contact form */
 $(function() {
     /* contact form */
    var stat = null;
    $(".button_contact").click(function(){
        if(!stat){
            $(".contact_form").animate({
                width: "993px",
                right: "0px"
            }, 1000 );
            stat = 1;
        }
        else{
            $(".contact_form").animate({
                width: "57px",
                rignt: "0px"
            }, 1000 );
            stat = null;
        }
    });
});