$(function(){
  var demo= $('#test'),
    fx= $('#fx').val(),
    timeout= $('#timeout').val(),
    speed= $('#speed').val(),
    index= $('#index').val(),
    step= $('#step').val();
  
  demo.find('.first').canvasCycle();
  demo.find('.second').canvasCycle({
    fx: 'coverUp',
    timeout: 2000,
    speed: 500,
    index: 3,
    step: 10
  });
  
  function init_demo() {
    demo.find('.third').canvasCycle({
      fx: fx,
      timeout: parseInt(timeout) * 1000,
      speed: parseInt(speed) * 1000,
      index: parseInt(index),
      step: parseInt(step),
      mask: '#mask'
    });
  }
  init_demo();
  
  demo.find('form').submit(function(){
    return false;
  });
  
  $('#fx').change(function(){
    fx= $(this).val();
    init_demo();
  });
  
  $('#speed').change(function(){
    speed= $(this).val();
    init_demo();
  });
  
  $('#timeout').change(function(){
    timeout= $(this).val();
    init_demo();
  });
  
  $('#step').change(function(){
    step= $(this).val();
    init_demo();
  });
  
  $('#index').change(function(){
    index= $(this).val();
    init_demo();
  });
});