$(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();
  });
});