$(document).ready(function(){
						   
  /*------------------- slide main images ----------------------------*/
  
  //timer #main   
  var timerID = setInterval(function(){
    $('#main a:last-child').fadeOut('slow',function(){
      $(this).prependTo('#main').fadeIn('fast');})},5000);
  
  //timer #tab
  var nowID = setInterval(function(){
    $('#now').css('top', parseInt($('#now').css('top'))+69+'px');
	  if(parseInt($('#now').css('top')) == 345){
		$('#now').css('top','0px');
	  };
    },5000);
  
  //clear timer
  $('#tab').click(function(){
    clearInterval(timerID);
    clearInterval(nowID);
  });

  //tab <li> event
  $('#pick1').click(function(){$('#p1').appendTo('#main');$('#now').css('top','0px');});
  $('#pick2').click(function(){$('#p2').appendTo('#main');$('#now').css('top','69px');});
  $('#pick3').click(function(){$('#p3').appendTo('#main');$('#now').css('top','138px');});
  $('#pick4').click(function(){$('#p4').appendTo('#main');$('#now').css('top','207px');});
  $('#pick5').click(function(){$('#p5').appendTo('#main');$('#now').css('top','276px');});
  
  /*------------------- category introduction ----------------------------*/
  
  //gray layer
  $('div.wrap > div').css('top','180px');
  
  //preload image
  $('<img>').attr('src','img/top/list_back2.png');
  
  //get background images and click event
  $('div.wrap').each(function(){
    $(this).css('background-image','url(img/top/'+$('b',this).text()+'.jpg)');
  });
  $('div.wrap').click(function(){
      $('div',this).animate({top: '0px'},'slow');
  });
});