/**
 * jsPsych plugin for showing scenes that mimic the experiments described in
 * 
 * Fiser, J., & Aslin, R. N. (2001). Unsupervised statistical learning of 
 * higher-order spatial structures from visual scenes. Psychological science, 
 * 12(6), 499-504.
 * 
 * Josh de Leeuw
 * February 2014
 * 
 * 
 * parameters:
 *      stimuli: array of arrays describing scenes. each interior array should have dimensions
 *          equal to the size of the desired grid. for example, a 3 x 3 grid  with stimuli along
 *          the top-left to bottom-right diagonal would be declared like this:
 * 
 *              var s = [
 *                  [ "img_path", 0, 0 ],
 *                  [ 0, "img_path", 0 ],
 *                  [ 0, 0, "img_path" ]
 *              ]
 * 
 *          for blank spaces in the grid, you need to put a 0 in the corresponding location. 
 *      image_size: array [width, height] - how big to draw the stimuli
 *      timing_duration: how long to show the scene
 *      timing_post_trial: how long to show blank screen after trial
 *      data: the optional data object
 * 
 */

(function($) {
    jsPsych['vsl-grid-scene'] = (function() {

        var plugin = {};

        plugin.create = function(params) {
            var trials = new Array(params.stimuli.length);
            for (var i = 0; i < trials.length; i++) {
                trials[i] = {};
                trials[i].type = "vsl-grid-scene";
                trials[i].stimuli = params.stimuli[i];
                trials[i].image_size = params.image_size || [100, 100];
                trials[i].timing_post_trial = (typeof params.timing_post_trial === 'undefined') ? 1000 : params.timing_post_trial;
                trials[i].timing_duration = (typeof params.timing_duration === 'undefined') ? 2000 : params.timing_duration;
                //trials[i].prompt = (typeof params.prompt === 'undefined') ? "" : params.prompt;
                trials[i].data = (typeof params.data === 'undefined') ? {} : params.data;
            }
            return trials;
        };

        plugin.trial = function(display_element, block, trial, part) {

            display_element.html(plugin.generate_stimulus(trial.stimuli, trial.image_size));

            setTimeout(function() {
                endTrial();
            }, trial.timing_duration);

            function endTrial() {

                display_element.html('');

                block.writeData($.extend({}, {
                    "trial_type": "vsl-grid-scene",
                    "trial_index": block.trial_idx,
                    "stimuli": JSON.stringify(trial.stimuli)
                }, trial.data));

                if (trial.timing_post_trial > 0) {
                    setTimeout(function() {
                        block.next();
                    }, trial.timing_post_trial);
                }
                else {
                    block.next();
                }
            }
        };

        plugin.generate_stimulus = function(pattern, image_size) {
            var nrows = pattern.length;
            var ncols = pattern[0].length;

            // create blank element to hold code that we generate
            $('body').append($('<div>', {
                id: 'jspsych-vsl-grid-scene-dummy',
                css: {
                    display: 'none'
                }
            }));

            // create table
            $('#jspsych-vsl-grid-scene-dummy').append($('<table>', {
                id: 'jspsych-vsl-grid-scene-table',
                css: {
                    'border-collapse': 'collapse',
                    'margin-left': 'auto',
                    'margin-right': 'auto'
                }
            }));

            for (var row = 0; row < nrows; row++) {
                $("#jspsych-vsl-grid-scene-table").append($('<tr>', {
                    id: 'jspsych-vsl-grid-scene-table-row-' + row,
                    css: {
                        height: image_size[1] + "px"
                    }
                }));
                for (var col = 0; col < ncols; col++) {
                    $("#jspsych-vsl-grid-scene-table-row-" + row).append($('<td>', {
                        id: 'jspsych-vsl-grid-scene-table-' + row + '-' + col,
                        css: {
                            padding: image_size[1] / 10 + "px " + image_size[0] / 10 + "px",
                            border: '1px solid #555'
                        }
                    }));
                    $('#jspsych-vsl-grid-scene-table-' + row + '-' + col).append($('<div>', {
                        id: 'jspsych-vsl-grid-scene-table-cell-' + row + '-' + col,
                        css: {
                            width: image_size[0] + "px",
                            height: image_size[1] + "px"
                        }
                    }));
                }
            }


            for (var row = 0; row < nrows; row++) {
                for (var col = 0; col < ncols; col++) {
                    if (pattern[row][col] !== 0) {
                        $('#jspsych-vsl-grid-scene-table-cell-' + row + '-' + col).append($('<img>', {
                            src: pattern[row][col],
                            css: {
                                width: image_size[0] + "px",
                                height: image_size[1] + "px",
                            }
                        }));
                    }
                }
            }
            
            var html_out =  $('#jspsych-vsl-grid-scene-dummy').html();
            $('#jspsych-vsl-grid-scene-dummy').remove();
             
            return html_out;

        };

        return plugin;
    })();
})(jQuery);