//jQuery(document).ready(function(){
//	heropuzzle();
//});

var heropuzzle = function(sTotal) {
    /**
    * 'Public' variables (i.e. tweak for different effects)
    */
    var puzzle_n = 'heropuzzle';
    var piece_n = 'heropuzzle-box';
    var pTotal = parseInt(sTotal);
    var wait_start = 1000; //Initial delay on page load before starting
    var wait_fades = 4000; //Time spent fading out pieces
    var wait_puzzle = 6000; //Total time spent on each 'puzzle'

    //Define your images
//    var img_url = 'static/HeroImages/heropuzzle-underlay-0';
//    var img_pieces = [
//    img_url + '1.jpg',
//    img_url + '2.jpg',
//    img_url + '3.jpg',
//    img_url + '4.jpg',
//    img_url + '5.jpg',
//    img_url + '6.jpg'
//  ];

    var fade_out_min = 0; //Min opacity value at end of effect (set to 0 for completely transparent)
    var fade_out_max = 0.3; //Max opacity value at end of effect (set to 1 for completely opaque)

    /**
    * 'Private' variables, etc. (i.e. don't edit anything below)
    */
    var img_start = 1;
    var img_cur = 1;
    var img_stop = sTotal; //img_pieces.length;
//    for (var i = 0; i < img_stop; i++) {
//        jQuery("<img>").attr("src", img_pieces[i]);
    //    }
    var spanImg = jQuery('.multipromo-img' + img_cur, jQuery('#multipromo-collectionDetails'));
    $('.' + puzzle_n).css({ 'background': 'transparent url(' + spanImg.html() + ') no-repeat top center' });

    var map = function() {
        var puzzle_w = $('.' + puzzle_n).width();
        var puzzle_h = $('.' + puzzle_n).height();
        var piece_w = 140;
        var piece_h = 140;
        var cols = Math.ceil(puzzle_w / piece_w);
        var rows = Math.ceil(puzzle_h / piece_h);
        for (var r = 0; r < rows; r++) {
            for (var c = 0; c < cols; c++) {
                var top = (r * (piece_h + 1)) - 1;
                var left = (c * (piece_w + 1)) - 1;
                var id = 'piece' + r + '-' + c;
                $('.' + puzzle_n).append($('<div />')
					.attr('id', id)
					.addClass(piece_n)
					.css({ 'top': top + 'px', 'left': left + 'px', 'width': piece_w + 'px', 'height': piece_h + 'px' })
				);
            }
        }
    }

    var display = function() {
        var q2 = $({});
        var n2 = "displaySequence";
        $('.' + piece_n).each(function() {
            var $that = $(this);
            q2.queue(n2, function(next) {
                var o_min = fade_out_min;
                var o_max = fade_out_max;
                var d = Math.random() * wait_fades;
                var o = o_min + (Math.random() * (o_max - o_min));
                $that.fadeTo(d, o);
                next();
            });
        });
        q2.delay(wait_puzzle, n2);
        q2.queue(n2, function(next) {
            $('.' + piece_n).fadeTo(200, 1);
            next();
        });
        q2.delay(200, n2);
        q2.queue(n2, function(next) {
            img_cur++;
            if (img_cur > img_stop) {
                img_cur = img_start;
            }
            var spanImg = jQuery('.multipromo-img' + img_cur, jQuery('#multipromo-collectionDetails'));

            //$('.'+puzzle_n).css('background-image', "url('"+img_pieces[(img_cur-1)]+"')");
            $('.' + puzzle_n).css({ 'background': 'transparent url(' + spanImg.html() + ') no-repeat top center' });
            display();
            next();
        });
        q2.dequeue(n2);
    }

    var q = $({});
    var n = "welcomeSequence";
    q.queue(n, function(next) {
        map();
        next();
    });
    q.delay(wait_start, n);
    q.queue(n, function(next) {
        display();
        next();
    });
    q.dequeue(n);
}