//圖片區效果
    // The following jQuery Extension contains the bgImg animations 
    $.fn.siteFeatureImgAnimations = function (opts, settings, hash) {
        settings.imgIsAnimating = true;
        opts.width = parseInt(opts.imgWidth);
        opts.height = parseInt(opts.containerHeight);

        $imgs = $(this);
        if (opts.imgBgsAnimationType == 'random' || opts.animationMemory == 'random') {
            opts.animationMemory = 'random';
            var animationTransitions = opts.imgBgsAnimationList.slice(0);

            // IE doesn't support array.indexOf so we have to fake it.
            // Otherwise the next 7 lines would be as simple as...
            // animationTransitions.splice(animationTransitions.indexOf(opts.imgBgsAnimationType), 1);
            var found = -1;
            for (var i = 0; i < animationTransitions.length; i++) {
                if (animationTransitions[i] == opts.imgBgsAnimationType) {
                    found = i;
                    break;
                }
            }
            animationTransitions.splice(found, 1);
            // end IE nonsense

            animationTransitions.sort(function () { return 0.5 - Math.random() });
            opts.imgBgsAnimationType = animationTransitions[0];
        }

        if (opts.imgBgsAnimationType == 'cycle' || opts.animationMemory == 'cycle') {
            opts.animationMemory = 'cycle';
            for (i = 0; i < opts.imgBgsAnimationList.length; i++) {
                if (opts.imgBgsAnimationList[i] == opts.imgBgsAnimationType) {
                    opts.currentAni = i;
                    break;
                } else {
                    opts.currentAni = -1;
                }
            }
            //opts.currentAni = opts.imgBgsAnimationList.indexOf(opts.imgBgsAnimationType);
            if (opts.currentAni < 0 || opts.currentAni == opts.imgBgsAnimationList.length - 1) {
                opts.currentAni = 0;
            } else {
                opts.currentAni++;
            }
            opts.imgBgsAnimationType = opts.imgBgsAnimationList[opts.currentAni];
        }

        if (opts.imgBgsAnimationType == 'enterTheDragon') {
            $target = $(this).filter('.selected');
            $current = $(this).filter(hash);
        } else {
            $target = $(this).filter(hash);
            $current = $(this).filter('.selected');
        }
        $copy = $target.clone();

        // check animation direction
        if (opts.imgBgAnimationDirection == 'random') {
            opts.directionList = ['left', 'right'];
            opts.directionMemory = opts.directionList.sort(function () { return 0.5 - Math.random() })[0];
        } else {
            opts.directionMemory = opts.imgBgAnimationDirection;
        }

        var reeses = [];
        var pieces = [];
        var order = [];

        var colWidth = parseInt(opts.width / opts.cols);
        var rowHeight = parseInt(opts.height / opts.rows);
        var colGap = opts.width - (colWidth * opts.cols);
        var rowGap = opts.height - (rowHeight * opts.rows);
        var colLeft = 0;
        var rowTop = 0;
        var odd = 1;
        var timer = 0;
        var time = opts.imgBgsAnimationDuration / 8;
        var multiplier = 1;

        // create the cols
        for (i = 0; i < opts.cols; i++) {

            if (colGap > 0) {
                tcolWidth = colWidth + 1;
                colGap--;
            } else {
                tcolWidth = colWidth;
            }

            var eachCol = $target.clone().show().attr({ 'id': '' }).addClass('col-' + i).css({
                'background-position': -colLeft + 'px top',
                'width': tcolWidth + "px",
                'height': opts.height + "px",
                'float': 'left',
                'position': 'absolute',
                'left': colLeft
            });

            // Position the Columns for animating
            if (opts.imgBgsAnimationType == 'wave' || opts.imgBgsAnimationType == 'cascade') {
                eachCol.css({
                    'height': 0
                });
            }

            if (opts.imgBgsAnimationType == 'fall') {
                eachCol.css({
                    'top': opts.height * -1
                });
            }

            if (opts.imgBgsAnimationType == 'curtain') {
                eachCol.data('width', tcolWidth + "px").css({
                    'width': 0
                });
            }

            if (opts.imgBgsAnimationType == 'zipper') {
                if ((i + 1) % 2 == 0) {
                    eachCol.css({
                        'top': opts.height
                    });
                } else {
                    eachCol.css({
                        'top': opts.height * -1
                    });
                }
            }

            if (opts.imgBgsAnimationType == 'fountain') {
                eachCol.css({
                    'top': opts.height
                });
            }

            if (opts.imgBgsAnimationType == 'crash' || opts.imgBgsAnimationType == 'dribble') {
                eachCol.css({
                    'top': opts.height * -1
                });
            }

            if (opts.imgBgsAnimationType == 'checker') {
                eachCol.css({
                    'background-image': 'none',
                    'opacity': 1
                });
            }

            if (opts.imgBgsAnimationType == 'enterTheDragon') {
                $current.css({
                    'opacity': '1',
                    'display': 'block'
                });
            }

            $current.append(eachCol[0]);
            pieces.push(eachCol);

            // create the rows
            if (opts.imgBgsAnimationType == 'checker') {
                for (j = 0; j < opts.rows; j++) {

                    if (rowGap > 0) {
                        trowHeight = rowHeight + 1;
                        rowGap--;
                    } else {
                        trowHeight = rowHeight;
                    }

                    var eachRow = $target.clone().show().attr({ 'id': '' }).addClass('row-' + i + '-' + j).css({
                        'background-position': -colLeft + 'px ' + -rowTop + 'px',
                        'height': 0,
                        'width': 0,
                        'float': 'left',
                        'position': 'absolute',
                        'left': tcolWidth / 2,
                        'top': rowTop + (trowHeight / 2),
                        'opacity': 1
                    }).data('info', {
                        width: tcolWidth,
                        height: trowHeight,
                        'left': 0,
                        'top': rowTop
                    });

                    $('.col-' + i).append(eachRow[0]);
                    reeses.push(eachRow[0]);
                    rowTop += trowHeight;
                }; // end for
                rowTop = 0;
            } // end if
            colLeft += tcolWidth;
        }; // end for

        // reorder for Checker
        if (opts.imgBgsAnimationType == 'checker') {
            if (opts.directionMemory == 'right') {
                var colPos = opts.cols - 1;
                var rowPos = 0;
                var memorize = opts.cols - 1;
                var offset_modifier = 1;
            } else {
                var colPos = 0;
                var rowPos = 0;
                var memorize = 0;
                var offset_modifier = 1;
            }

            for (i = 0; i < reeses.length; i++) {
                if (opts.directionMemory == 'right') {
                    if (colPos < 0) {
                        colPos = colPos + offset_modifier;
                        rowPos = rowPos + offset_modifier;
                        offset_modifier++;
                    }
                    order[i] = colPos.toString() + '-' + rowPos.toString();
                    if (colPos == opts.cols - 1 || rowPos >= opts.rows - 1) {
                        memorize--;
                        colPos = memorize;
                        rowPos = 0;
                    } else {
                        colPos++;
                        rowPos++;
                    }
                } else {
                    if (colPos > opts.cols - 1) {
                        colPos = colPos - offset_modifier;
                        rowPos = rowPos + offset_modifier;
                        offset_modifier++;
                    }
                    order[i] = colPos.toString() + '-' + rowPos.toString();
                    if (colPos == 0 || rowPos >= opts.rows - 1) {
                        memorize++;
                        colPos = memorize;
                        rowPos = 0;
                    } else {
                        colPos--;
                        rowPos++;
                    }
                }
            };
            pieces = [];
            $.each(order, function (i) {
                pieces.push($(reeses).filter('[class$="-' + this + '"]'));
            });
        }

        // reorder for Fountain, Cascade, and Enter the Dragon
        if (opts.imgBgsAnimationType == 'fountain' || opts.imgBgsAnimationType == 'cascade' || opts.imgBgsAnimationType == 'dribble' || opts.imgBgsAnimationType == 'enterTheDragon') {
            var odd = 1;
            var middle = pieces.length / 2;

            for (i = 0; i < pieces.length; i++) {
                mafs = middle - (parseInt((i + 1) / 2) * odd);
                order[i] = mafs;
                if (opts.imgBgsAnimationType == 'enterTheDragon') {
                    if (i == 0) {
                        odd = 0;
                    }
                    var $cur = $(pieces[parseInt(order[i] - 1)]);
                    var offset = ($cur.width() / 2) * odd;
                    if (odd < 0) {
                        $ref = $cur.prev();
                    } else if (odd > 0) {
                        $ref = $cur.next();
                    } else {
                        $ref = $cur;
                    }

                    bgPos = parseInt($ref.css('background-position')) + offset;
                    $cur.data('bgPos-o', $cur.css('background-position'))
						.css('background-position', bgPos + 'px 0px')
						.data('bgPos-n', bgPos + 'px 0px');
                    if (i == 0) {
                        odd = 1;
                    }
                }
                odd *= -1;
            };

            order[opts.cols - 1] = 0;
            if (opts.imgBgsAnimationType == 'enterTheDragon') {
                $.each(pieces, function () {
                    $(this).css('background-position', $(this).data('bgPos-o'));
                });
            }
        }

        // check animation direction
        if (opts.directionMemory == 'right' && opts.imgBgsAnimationType != 'checker') {
            pieces.reverse();
        }

        // === Animations ===
        // fade
        if (opts.imgBgsAnimationType == 'fade') {
            $(this).filter('.selected')
				.animate({ 'opacity': '0' }, opts.imgBgsAnimationDuration, function () {
				    $(this).css({ 'display': 'none' }).empty();
				    settings.imgIsAnimating = false;
				})
				.end().filter(hash)
				.css({ 'display': 'block' }).animate({ 'opacity': '1' }, opts.imgBgsAnimationDuration)
			;
        }

        // wave
        if (opts.imgBgsAnimationType == 'wave') {
            $.each(pieces, function (i) {
                $(this).animate({ 'letter-spacing': '0' }, timer, function () {
                    $(this).animate({ 'opacity': '1', 'height': opts.height }, opts.imgBgsAnimationDuration, function () {
                        if ((i + 1) == pieces.length) {
                            timer = 0;
                            $target.css({ 'opacity': '1' }).show();
                            $current.empty().css({ 'opacity': '0' }).hide();
                            settings.imgIsAnimating = false;
                        }
                    });
                });
                timer = (timer * multiplier + time);
            });
        }

        // curtain
        if (opts.imgBgsAnimationType == 'curtain') {
            $.each(pieces, function (i) {
                $(this).animate({ 'letter-spacing': '0' }, timer, function () {
                    $(this).animate({ 'opacity': '1', 'width': $(this).data('width') }, opts.imgBgsAnimationDuration, function () {
                        if ((i + 1) == pieces.length) {
                            timer = 0;
                            $target.css({ 'opacity': '1' }).show();
                            $current.empty().css({ 'opacity': '0' }).hide();
                            settings.imgIsAnimating = false;
                        }
                    });
                });
                timer = (timer * multiplier + time);
            });
        }

        // zipper & crash
        if (opts.imgBgsAnimationType == 'zipper' || opts.imgBgsAnimationType == 'crash') {
            $.each(pieces, function (i) {
                $(this).animate({ 'letter-spacing': '0' }, timer, function () {
                    $(this).animate({ 'opacity': '1', 'top': '0' }, opts.imgBgsAnimationDuration, function () {
                        if ((i + 1) == pieces.length) {
                            timer = 0;
                            $target.css({ 'opacity': '1' }).show();
                            $current.empty().css({ 'opacity': '0' }).hide();
                            settings.imgIsAnimating = false;
                        }
                    });
                });
                timer = (timer * multiplier + time);
            });
        }

        // fountain & dribble
        if (opts.imgBgsAnimationType == 'fountain' || opts.imgBgsAnimationType == 'dribble') {
            $.each(order, function (i) {
                pieces[this].animate({ 'letter-spacing': '0' }, timer, function () {
                    $(this).animate({ 'opacity': '1', 'top': '0' }, opts.imgBgsAnimationDuration, function () {
                        if ((i + 1) == pieces.length) {
                            timer = 0;
                            $target.css({ 'opacity': '1' }).show();
                            $current.empty().css({ 'opacity': '0' }).hide();
                            settings.imgIsAnimating = false;
                        }
                    });
                });
                timer = (timer * multiplier + time);
            });
        }

        // cascade
        if (opts.imgBgsAnimationType == 'cascade') {
            $.each(order, function (i) {
                pieces[this].animate({ 'letter-spacing': '0' }, timer, function () {
                    $(this).animate({ 'opacity': '1', 'height': opts.height }, opts.imgBgsAnimationDuration, function () {
                        if ((i + 1) == pieces.length) {
                            timer = 0;
                            $target.css({ 'opacity': '1' }).show();
                            $current.empty().css({ 'opacity': '0' }).hide();
                            settings.imgIsAnimating = false;
                        }
                    });
                });
                timer = (timer * multiplier + time);
            });
        }

        // checker
        if (opts.imgBgsAnimationType == 'checker') {
            var time = opts.imgBgsAnimationDuration / 25;
            $.each(pieces, function (i) {
                $(this).animate({ 'letter-spacing': '0' }, timer, function () {
                    $(this).animate({
                        'width': $(this).data('info').width,
                        'height': $(this).data('info').height,
                        'top': $(this).data('info').top,
                        'left': $(this).data('info').left
                    }, opts.imgBgsAnimationDuration, function () {
                        if ((i + 1) == reeses.length) {
                            timer = 0;
                            $target.css({ 'opacity': '1' }).show();
                            $current.empty().css({ 'opacity': '0' }).hide();
                            settings.imgIsAnimating = false;
                        }
                    });
                });
                timer = (timer * multiplier + time);
            });
        }

        // Enter the Dragon
        if (opts.imgBgsAnimationType == 'enterTheDragon') {
            if ($.browser.msie) {
                var etdAni = 700;
            } else {
                var etdAni = opts.imgBgsAnimationDuration - 100;
            }

            $target.css({ 'opacity': '0' }).hide();
            $.each(order, function (i) {
                pieces[this].animate({ 'background-position': pieces[this].data('bgPos-n') }, etdAni, function () {
                    if (i + 1 == pieces.length) {
                        order.sort(function () { return 0.5 - Math.random() });
                        $.each(order, function (j) {
                            pieces[this].animate({ 'letter-spacing': '0' }, timer, function () {
                                $(this).animate({ 'top': opts.containerHeight }, opts.imgBgsAnimationDuration, function () {
                                    if (j + 1 == pieces.length) {
                                        $current.empty();
                                        settings.imgIsAnimating = false;
                                    }
                                });
                            });
                            timer = (timer * multiplier + time);
                        });
                    }
                });
            });
        }
        return this;
    };
    // end $.fn.siteFeatureImgAnimations
    //圖片區效果--結束