$(document).ready(function(){

    var $ageList = '<div id="overGrowEgecheck">  <p class="days">  <span class="1">1</span>  <span class="2">2</span>  <span class="3">3</span>  <span class="4">4</span>  <span class="5">5</span>  <span class="6">6</span>  <span class="7">7</span>  <span class="8">8</span>  <span class="9">9</span>  <span class="10">10</span>  <span class="11">11</span>  <span class="12">12</span>  <span class="13">13</span>  <span class="14">14</span>  <span class="15">15</span>  <span class="16">16</span>  <span class="17">17</span>  <span class="18">18</span>  <span class="19">19</span>  <span class="20">20</span>  <span class="21">21</span>  <span class="22">22</span>  <span class="23">23</span>  <span class="24">24</span>  <span class="25">25</span>  <span class="26">26</span>  <span class="27">27</span>  <span class="28">28</span>  <span class="29">29</span>  <span class="30">30</span>  <span class="31" id="lastDay">31</span>  </p>  <p class="months">  <span class="1">Leden</span>  <span class="2">Únor</span>  <span class="3">Březen</span>  <span class="4">Duben</span>  <span class="5">Květen</span>  <span class="6">Červen</span>  <span class="7">Červenec</span>  <span class="8">Srpen</span>  <span class="9">Září</span>  <span class="10">Říjen</span>  <span class="11">Listopad</span>  <span class="12" id="lastMonth">Prosinec</span>  </p>  <p class="years">  <b></b><span></span>  </p>  </div>';
    $("form").append( $ageList );

  // set month 
  $('p.months span').click(function() {
    var $mesic = $(this).attr('class');
    $('p.months span').css("background","none");
    $(this).css("background","url(/img/bg/date.png) 0 -33px repeat-x");
    $('select.mesic option[value="'+$mesic+'"]').attr('selected', 'selected');
  });
  
  // set day 
  $('p.days span').click(function() {
    var $den = $(this).attr('class');
    $('p.days span').css("background","none");
    $(this).css("background","url(/img/bg/date.png) 0 -33px repeat-x");
    $('select.den option[value="'+$den+'"]').attr('selected', 'selected');
  });
  
  // move year
  $('p.years').mousemove(function(e) {
    var myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    };
    var $positionDay = e.pageX-((myWidth-934)/2)-35;
    if ( $positionDay < 0 ) {
    var $positionDay = 0;
    }
    if ( $positionDay > 854 ) {
    var $positionDay = 854;
    }
    $('p.years span').show().css('left',($positionDay)+'px');
    $('p.years span').text(Math.round(1900+($positionDay*0.14)));
  });
  $('p.years').mouseleave(function() {
    $('p.years span').hide();
  });
  
  $('p.years span').click(function(e) {
    var $rok = $(this).text();
    $('select.rok option[value="'+$rok+'"]').attr('selected', 'selected');

    var myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    };
    var $positionDay = e.pageX-((myWidth-934)/2)-35;
    if ( $positionDay < 0 ) {
    var $positionDay = 0;
    }
    if ( $positionDay > 854 ) {
    var $positionDay = 854;
    }
    $('p.years b').show().css('left',($positionDay)+'px');
    $('p.years b').text($rok);
  });  
  
});