$(function () {
    var demo = $('#test'),
	fx = 'fade',
	timeout = '2',
	speed = '2',
	index = '1',
	step = '5';

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