(function ($) {

    $.fn.siteFeature = function (options) {
        var opts = $.extend({}, $.fn.siteFeature.defaults, options);

        return this.each(function (i) {
            obj = $(this);
            var settings = {};
            settings.which = i;
            // contains all DOM traversal and manipulation
            createFeature(opts, settings);
            // configures the Feature based on the options
            customizeFeature(opts, settings);
            // binds all associated events
            eventFeature(opts, settings);
        });
    }; // end $.fn.siteFeature

    // SiteFeature Customizable Options
    $.fn.siteFeature.defaults = {
        outputElementId: 'siteFeature', 		 // this is the ID given to the container div generated by siteFeature
        txtBoxIdPrefix: 'txtBox', 			     // creates the naming convention for the TextBox (ie: txtBoxContainer) 
        imgBgIdPrefix: 'imgBg', 				// creates the naming convention for the ImageBackgounds (ie: imgBgContainer)
        tabIdPrefix: 'tab', 					// creates the naming convention for the Tabs (ie: tabContainer)
        titleText: 'h3', 					// identifies the Title Text for manipulation
        containerWidth: '400px', 		// sets the generated Container's width
        containerHeight: '175px', 			// sets the generated Container's height
        imgWidth: '0px', 					// sets the width of the ImageBox/TextBox section. When subtracted from the Container's width - yields the Tabs width.
        tabsLocation: 'right', 				// sets position of the Tabs (relative to the Image Box)
        //tabBgImg: 'Js/Shared/siteFeature/images/arrow-left.png', 	// relative path for Image used as Highlighted Tab background (ie: the arrow)
        //tabBgImgIE6: 'Js/Shared/siteFeature/images/arrow-left.gif', // relative path for Image used by IE6 (to prevent PNG alpha issues). Leave blank ('') or set to null to uses the same image (and to teach IE6 users a lesson).
        tabBgImg: 'Js/Shared/siteFeature/images/t.gif', 	// relative path for Image used as Highlighted Tab background (ie: the arrow)
        tabBgImgIE6: 'Js/Shared/siteFeature/images/t.gif', // relative path for Image used by IE6 (to prevent PNG alpha issues). Leave blank ('') or set to null to uses the same image (and to teach IE6 users a lesson).
        tabControl: 'click', 				// sets the event that activates the tab change: 'click', 'hover'
        tabLock: 2, 							// sets the number of tabs before the overflow (int / null)
        startTab: 1, 						// sets the tab to be displayed onLoad
        txtBoxWidth: '185px', 				// sets the width of the Vertical TextBox
        txtBoxHorizontalHeight: '118px', 	// sets the height of the Horizontal TextBox
        txtBoxOpacity: 1, 					// sets the opcaity of the TextBox background (color set in CSS - default is #000000)
        activeTabIsLink: true, 				// determines if the the Highlighted Tab is a link to said Tab's default destination (the original href)
        activeWindowIsLink: false, 			// determines if the current ImageBackground and TextBox are links to the Tab's default destination (the original href)
        animateInOnLoad: true, 				// determines if the Tab, ImageBackground, and TextBox animate In on page load or simply appear
        txtBoxAnimateInType: 'slideLeft', 	// sets animation In type for vertical TextBoxes: 'blink', 'fade', 'slideUp', 'slideDown', 'slideLeft', 'slideRight'
        txtBoxAnimateOutType: 'slideRight', 	// sets animation Out type for vertical TextBoxes: 'blink', 'fade', 'slideUp', 'slideDown', 'slideLeft', 'slideRight'
        txtBoxAnimateHorzAlt: true, 			// allows horizontal txtBoxes to animate in/out differently
        txtBoxAnimateInHorzType: 'slideUp', 	// sets animation In type for horizontal TextBoxes: 'blink', 'fade', 'slideUp', 'slideDown', 'slideLeft', 'slideRight'
        txtBoxAnimateOutHorzType: 'slideDown', // sets animation Out type for horizontal TextBoxes: 'blink', 'fade', 'slideUp', 'slideDown', 'slideLeft', 'slideRight'
        txtBoxAnimateInDuration: 500, 		// sets the duration for TextBox In animations (in milliseconds)
        txtBoxAnimateOutDuration: 500, 		// sets the duration for TextBox Out animations (in milliseconds)
        txtBoxPauseBetweenInOut: 10, 		// sets the duration for the pause between the current TextBox animating Out and the new TextBox animating In ('0' for no delay) (in milliseconds)
        cols: 5, 							// sets the number of columns used in the bgImg transitions
        rows: 5, 							// sets the number of rows used in the bgImg transitions
        imgBgsAnimationDuration: 500, 		// sets the duration for ImageBackground In animations (in milliseconds)
        imgBgsAnimateOutDuration: 500, 		// sets the duration for ImageBackground Out animations (in milliseconds)
        imgBgsAnimationType: 'fade', 		// sets animation type: 'fade', 'wave', 'crash', 'curtain', 'zipper', 'fountain', 'cascade', 'dribble', 'checker', 'enterTheDragon', 'random', 'cycle'
        imgBgsAnimationList: ['fade', 'wave', 'crash', 'curtain', 'zipper', 'fountain', 'cascade', 'dribble', 'checker', 'enterTheDragon'],
        imgBgAnimationDirection: 'random', 	// sets the start position of the transition: 'left', 'right', 'random'
        tabsAnimateInDuration: 3000, 			// sets the duration for Tab In animations (in milliseconds)
        tabsAnimateWidth: '-=0', 			// sets the relative pixel width difference to be animated (to reveal the arrow)
        autoPlay: true, 					// determines if the tabs cycle automatically
        autoPlayInterval: 3000, 				// sets the autoPlay interval
        pauseOnHover: true, 					// pause the autoPlay when hovering on siteFeature
        ieEnableFilters: false, 				// adds a function to the end of every animation to remove IE filters (re-enables transparency)(boolean - true/false)
        endCreateFunction: null					// creates a userdefined Callback (with access to all plugin Options) that fires after everything has been written to the DOM but before events are bound.
    }; // end $.fn.siteFeature.defaults


    //下方文字盒效果-入場
    // The following 2 jQuery Extensions contain all of the custom In and Out animations for the txtBoxes.  
    $.fn.siteFeatureTxtBoxAnimationsOut = function (opts) {

        // checks if the current data is to be displayed Horizontally, whether it should be treated differently, and executes accordingly
        if ($(this).hasClass('horizontal') && opts.txtBoxAnimateHorzAlt) {
            var origAniStorage = opts.txtBoxAnimateOutType;
            opts.txtBoxAnimateOutType = opts.txtBoxAnimateOutHorzType
        }

        if (opts.txtBoxAnimateOutType == 'blink') {
            $(this).css({ 'opacity': '0', 'display': 'none' });
        }

        if (opts.txtBoxAnimateOutType == 'fade') {
            $(this).animate({ 'opacity': '0' }, opts.txtBoxAnimateOutDuration, function () {
                $(this).css({ 'display': 'none' });
            });
        }

        if (opts.txtBoxAnimateOutType == 'slideUp') {
            if (!$(this).hasClass('horizontal')) {
                $(this).stop().animate({ 'marginTop': '-' + opts.containerHeight }, opts.txtBoxAnimateOutDuration, function () {
                    $(this).css({ 'opacity': '0', 'margin-top': '0', 'display': 'none' })
                });
            } else {
                $(this).css({ 'opacity': '1' }).slideUp(opts.txtBoxAnimateOutDuration, function () {
                    $(this).css({ 'opacity': '0', 'display': 'none' })
                });
            }
        }

        if (opts.txtBoxAnimateOutType == 'slideDown') {
            $(this).stop().animate({ 'marginTop': opts.containerHeight }, opts.txtBoxAnimateOutDuration, function () {
                $(this).css({ 'opacity': '0', 'margin-top': '0', 'display': 'none' })
            });

        }

        if (opts.txtBoxAnimateOutType == 'slideLeft') {
            if (opts.tabsLocation == 'left') {
                if (!$(this).hasClass('horizontal')) {
                    $(this).css({ 'right': 'auto', 'left': (parseInt(opts.imgWidth) - parseInt(opts.txtBoxWidth)) })
						.children().each(function () {
						    $(this).css({ 'width': $(this).width() });
						}).end()
						.css({ 'opacity': '1' }).stop().animate({ 'width': '0' }, opts.txtBoxAnimateOutDuration, function () {
						    $(this).css({ 'opacity': '0', 'width': opts.txtBoxWidth, 'display': 'none' });
						})
					;
                } else {
                    $(this).children().each(function () {
                        $(this).css({ 'width': $(this).width() });
                    }).end()
					.css({ 'opacity': '1' }).stop().animate({ 'left': '-' + opts.imgWidth }, opts.txtBoxAnimateOutDuration, function () {
					    $(this).css({ 'opacity': '0', 'left': '0', 'display': 'none' });
					});
                }
            } else {
                $(this).css({ 'right': 'auto', 'left': '0' }).stop().animate({ 'left': '-' + opts.imgWidth }, opts.txtBoxAnimateOutDuration, function () {
                    $(this).css({ 'opacity': '0', 'left': '0', 'display': 'none' });
                });
            }
        }

        if (opts.txtBoxAnimateOutType == 'slideRight') {
            if (opts.tabsLocation == 'left') {
                if (!$(this).hasClass('horizontal')) {
                    $(this).css({ 'opacity': '1', 'left': 'auto', 'right': '0' }).stop().animate({ 'right': '-' + opts.txtBoxWidth }, opts.txtBoxAnimateOutDuration, function () {
                        $(this).css({ 'opacity': '0', 'right': '0', 'display': 'none' });
                    });
                } else {
                    $(this).css({ 'opacity': '1', 'left': 'auto' }).stop().animate({ 'right': '-' + opts.imgWidth }, opts.txtBoxAnimateOutDuration, function () {
                        $(this).css({ 'opacity': '0', 'right': '0', 'display': 'none' });
                    });
                }
            } else {
                if (!$(this).hasClass('horizontal')) {
                    $(this).css({ 'left': '0px' }).stop().animate({ 'left': '-' + opts.txtBoxWidth }, opts.txtBoxAnimateOutDuration, function () {
                        $(this).css({ 'opacity': '0', 'display': 'none', 'left': '0px' });
                    });
                } else {
                    $(this).css({ 'left': '0px' }).stop().animate({ 'left': '-' + opts.imgWidth }, opts.txtBoxAnimateOutDuration, function () {
                        $(this).css({ 'opacity': '0', 'display': 'none', 'left': '0px' });
                    });
                }
            }
        }

        // undoes the tempory Horizontal bindings.
        if ($(this).hasClass('horizontal') && opts.txtBoxAnimateHorzAlt) {
            opts.txtBoxAnimateOutType = origAniStorage;
        }
        return this;
    }; // end $.fn.siteFeatureAnimationsOut

    //下方文字盒效果-出場
    $.fn.siteFeatureTxtBoxAnimationsIn = function (opts) {
        // checks if the current data is to be displayed Horizontally, whether it should be treated differently, and executes accordingly
        if ($(this).hasClass('horizontal') && opts.txtBoxAnimateHorzAlt) {
            var origAniStorage = opts.txtBoxAnimateInType;
            opts.txtBoxAnimateInType = opts.txtBoxAnimateInHorzType
        }

        if (opts.txtBoxAnimateInType == 'blink') {
            $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                $(this).css({ 'opacity': '1', 'display': 'block' });
            });
        }

        if (opts.txtBoxAnimateInType == 'fade') {
            $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                $(this).css({ 'display': 'block' }).animate({ 'opacity': '1' }, opts.txtBoxAnimateInDuration, function () {
                    ieStyleFilterCleanup($(this), opts);
                });
            });
        }

        if (opts.txtBoxAnimateInType == 'slideUp') {
            $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                $(this).css({ 'display': 'block', 'opacity': '1', 'margin-top': opts.containerHeight }).animate({ 'marginTop': '0' }, opts.txtBoxAnimateInDuration, function () {
                    ieStyleFilterCleanup($(this), opts);
                });
            });

        }

        if (opts.txtBoxAnimateInType == 'slideDown') {
            if (!$(this).hasClass('horizontal')) {
                $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                    $(this).css({ 'display': 'block', 'opacity': '1', 'margin-top': '-' + opts.containerHeight }).animate({ 'marginTop': '0' }, opts.txtBoxAnimateInDuration, function () {
                        ieStyleFilterCleanup($(this), opts);
                    });
                });
            } else {
                $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                    $(this).css({ 'display': 'block', 'opacity': '1' }).slideUp(0).slideDown(opts.txtBoxAnimateInDuration, function () {
                        ieStyleFilterCleanup($(this), opts);
                    });
                });
            }
        }

        if (opts.txtBoxAnimateInType == 'slideLeft') {
            if (opts.tabsLocation == 'left') {
                if (!$(this).hasClass('horizontal')) {
                    $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                        $(this).css({ 'display': 'block', 'opacity': '1', 'right': '-' + opts.txtBoxWidth }).animate({ 'right': '0' }, opts.txtBoxAnimateInDuration, function () {
                            ieStyleFilterCleanup($(this), opts);
                        });
                    });
                } else {
                    $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                        $(this).css({ 'display': 'block', 'opacity': '1', 'left': 'auto', 'right': '-' + opts.imgWidth }).animate({ 'right': '0' }, opts.txtBoxAnimateInDuration, function () {
                            ieStyleFilterCleanup($(this), opts);
                        });
                    });
                }
            } else {
                if (!$(this).hasClass('horizontal')) {
                    $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                        $(this).css({ 'display': 'block' }).children().each(function () {
                            $(this).css({ 'width': $(this).width() });
                        }).end()
						.css({ 'display': 'block', 'opacity': '1', 'width': '0', 'left': 'auto', 'right': parseInt(opts.imgWidth) - parseInt(opts.txtBoxWidth) })
						.animate({ 'width': opts.txtBoxWidth });
                    });
                } else {
                    $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                        $(this).css({ 'display': 'block', 'opacity': '1', 'left': 'auto', 'right': '-' + opts.imgWidth }).animate({ 'right': '0' }, opts.txtBoxAnimateInDuration, function () {
                            ieStyleFilterCleanup($(this), opts);
                        });
                    });
                }
            }
        }

        if (opts.txtBoxAnimateInType == 'slideRight') {
            if (opts.tabsLocation == 'left') {
                if (!$(this).hasClass('horizontal')) {
                    $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                        $(this).css({ 'display': 'block', 'right': 'auto', 'left': (parseInt(opts.imgWidth) - parseInt(opts.txtBoxWidth)) })
						.children().each(function () {
						    $(this).css({ 'width': $(this).width() });
						}).end()
						.css({ 'opacity': '1', 'width': '0' }).animate({ 'width': opts.txtBoxWidth }, opts.txtBoxAnimateInDuration, function () {
						    ieStyleFilterCleanup($(this), opts);
						});
                    });
                } else {
                    $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                        $(this).css({ 'display': 'block', 'right': 'auto', 'left': '-' + opts.imgWidth })
							.children().each(function () {
							    $(this).css({ 'width': $(this).width() });
							}).end()
							.css({ 'opacity': '1' }).animate({ 'left': '0' }, opts.txtBoxAnimateInDuration, function () {
							    ieStyleFilterCleanup($(this), opts);
							});
                    });
                }
            } else {
                $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function () {
                    $(this).css({ 'display': 'block', 'opacity': '1', 'left': '-' + opts.imgWidth }).animate({ 'left': '0' }, opts.txtBoxAnimateInDuration, function () {
                        ieStyleFilterCleanup($(this), opts);
                    });
                });
            }
        }

        // undoes the tempory Horizontal bindings.
        if ($(this).hasClass('horizontal') && opts.txtBoxAnimateHorzAlt) {
            opts.txtBoxAnimateInType = origAniStorage;
        }

        return this;
    }; // end $.fn.siteFeatureAnimationsIn


    //圖片區效果
    // 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
    //圖片區效果--結束



    // clean-up IE style filters
    function ieStyleFilterCleanup(iescrub, opts) {
        if ($.browser.msie && opts.ieEnableFilters) {
            iescrub.attr('style', iescrub.attr('style').replace(/filter+[^\;]*./gi, '')).children().each(function () {
                $(this).attr('style', $(this).attr('style').replace(/filter+[^\;]*./gi, ''))
            });
        }
    }

    // simple utility function to replicate jQuery's InnerHTML function but to include the containing Element 文字盒
    function outerHTML(element) {
        return $('<div>').append(element.eq(0).clone()).html();
    }

    // This function contains all of the DOM traversal and manipulation.  All part of Progressive Enhancement and Unobtrusive Javascript.
    function createFeature(opts, settings) {
        // Injecting into the DOM wastes time. Write to memory (create a string) and inject once when finished
        var siteFeature;
        var txtBoxes = "<div id='" + opts.txtBoxIdPrefix + "Container'>";
        var imgBgs = "<div id='" + opts.imgBgIdPrefix + "Container'>";
        var tabs = "<div id='" + opts.tabIdPrefix + "Container'>";


        // allows a seperate "Arrow" image to be assigned to IE6 (to prevent transparency issues)
        if ($.browser.msie && $.browser.version == 6) {
            if (opts.tabBgImgIE6 != null || opts.tabBgImgIE6 != '') {
                opts.tabBgImg = opts.tabBgImgIE6;
            }
        }

        // Loop through each Item and create all necessary HTML
        obj.children().each(function (i) {

            sfcurrent = $(this);
            cloned = sfcurrent.clone()
				.attr({ id: opts.tabIdPrefix + i })
				.children('img').remove().end()
				.wrapInner('<div>')
				.prepend('<span></span>')
			;

            //var $filter = $(this '#editid').css('border' , "3px solid red");

            txtBoxes += outerHTML(cloned);
            //imgBgs += '<div id="' + opts.tabIdPrefix + i + '" style="background-image:url(' + sfcurrent.find('img').attr('src') + '); width:' + opts.imgWidth + '; height:' + opts.containerHeight + ';"></div>';
            //tabs += '<a href="#' + opts.tabIdPrefix + i + '" id="' + opts.tabIdPrefix + i + '"><span><span></span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="60px" height="45px" style="float:left; margin-right:5px;margin-left:8px;"/>' + '<div>' + sfcurrent.find('h3').text() + '</div>' + '</h4><p>' + sfcurrent.find('img').attr('title') + '</p></a>' + '<span><input type="button" value="" class="button_edit"/></span><span><input type="button" value="" class="button_remove"/></span>';
            //tabs += '<a href="#' + opts.tabIdPrefix + i + '" id="' + opts.tabIdPrefix + i + '"><span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="82px" height="68px" style="float:left; margin: 0 5px 0 8px;"/><div style="background: url(Js/Shared/siteFeature/images/arr_btn_right.png) 0 0 no-repeat; float:left; width:35px; height:68px;"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';

            //tabs += '<a href="" onClick=" var bob=window.open("","' + sfcurrent.find("a").attr("target") + '");bob.location="' + sfcurrent.find("a").attr("href") + '";)" ><span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="82px" height="68px" style="float:left; margin: 0 5px 0 8px;"/><div style="background: url(Js/Shared/siteFeature/images/arr_btn_right.png) 0 0 no-repeat; float:left; width:35px; height:68px;"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
            if (sfcurrent.find("a").attr("target") == "_blank") {
                //tabs += '<a href="javascript: void(0)" onClick=window.open("' + sfcurrent.find("a").attr("href") + '") ><span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="82px" height="68px" style="float:left; margin: 0 5px 0 8px;"/><div style="background: url(Js/siteFeature/images/right-arrow.png) 0 0 no-repeat; float:left; width:35px; height:68px;"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
                //tabs += '<a href="javascript: void(0)" onClick=window.open("' + sfcurrent.find("a").attr("href") + '") ><span><img src="' + opts.tabBgImg + '"/></span><h4><div style="background: url(Js/Shared/siteFeature/images/right-arrow.png) 0 0 no-repeat; float:left; width:35px; height:68px;"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
                tabs += '<a href="javascript: void(0)" onClick=window.open("' + sfcurrent.find("a").attr("href") + '") ><span><img src="' + opts.tabBgImg + '"/></span><h4><div class="arrow_icon"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
            } else {
                //tabs += '<a href="javascript:"  onClick=\'location.href="' + sfcurrent.find("a").attr("href") + '"\' ><span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="82px" height="68px" style="float:left; margin: 0 5px 0 8px;"/><div style="background: url(Js/siteFeature/images/right-arrow.png) 0 0 no-repeat; float:left; width:35px; height:68px;"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
                //tabs += '<a href="javascript:"  onClick=\'location.href="' + sfcurrent.find("a").attr("href") + '"\' ><span><img src="' + opts.tabBgImg + '"/></span><h4><div style="background: url(Js/Shared/siteFeature/images/right-arrow.png) 0 0 no-repeat; float:left; width:35px; height:68px;"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
                tabs += '<a href="javascript:"  onClick=\'location.href="' + sfcurrent.find("a").attr("href") + '"\' ><span><img src="' + opts.tabBgImg + '"/></span><h4><div class="arrow_icon"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
            }
            //tabs += '<a href="http://www.kimo.com" target="_blank"><span></span></a>';
            //tabs += '<a href="" onClick="javascript: window.open(\'http://www.kimo.com\', \'_self\');"><span></span></a>';
            //tabs += '<a href="#' + opts.tabIdPrefix + i + '" id="' + opts.tabIdPrefix + i + '" onclick="'+ '"javascript:window.open("' + sfcurrent.find("p").attr("href") + '")><span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="82px" height="68px" style="float:left; margin: 0 5px 0 8px;"/><div style="background: url(Js/Shared/siteFeature/images/arr_btn_right.png) 0 0 no-repeat; float:left; width:35px; height:68px;"></div>' + '<div class="title">' + sfcurrent.find('h3').text() + '</div>' + '<div class="date">' + sfcurrent.find('p').text() + '</div>' + '</h4></a>';
            //tabs += '<a href="#' + opts.tabIdPrefix + i + '" id="' + opts.tabIdPrefix + i + '"><span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="60px" height="45px" style="float:left; margin-right:5px; margin-left:8px;"/>' + '<div>' + sfcurrent.find('h3').text() + '</div>' + '</h4><input type="button" style="width:16px; float:right; display:' + sfcurrent.find("input:eq(1)").attr("value") + ';" value="" onclick="' + sfcurrent.find("input:eq(1)").attr("title") + '" class="button_remove"/><input type="button" value="" style="width:16px; float:right; display:' + sfcurrent.find("input:eq(0)").attr("value") + ';" onclick="' + sfcurrent.find("input:eq(0)").attr("title") + '" class="button_edit"/></a>';
            //tabs += '<a href="#' + opts.tabIdPrefix + i + '" id="' + opts.tabIdPrefix + i + '"><span><img src="' + opts.tabBgImg + '"/></span><h4><img src="' + sfcurrent.find('img').attr('src') + '" width="60px" height="45px" style="float:left; margin-right:5px; margin-left:8px;"/>' + '<div>' + sfcurrent.find('h3').text() + '</div>' + '<input type="button" style="width:16px; float:right; display:' + sfcurrent.find("input:eq(1)").attr("value") + ';" value="" onclick="' + sfcurrent.find("input:eq(1)").attr("title") + '" class="button_remove"/><input type="button" value="" style="width:16px; float:right; display:' + sfcurrent.find("input:eq(0)").attr("value") + ';" onclick="' + sfcurrent.find("input:eq(0)").attr("title") + '" class="button_edit"/></h4></a>';
        }); // end Each

        txtBoxes += "</div>";
        imgBgs += "</div>";
        tabs += "</div>";
        //siteFeature = (imgBgs + txtBoxes + tabs);
        siteFeature = (tabs);

        // Clear the current HTML and inject the siteFeature HTML
        obj.empty().attr({ 'id': opts.outputElementId, 'class': opts.tabsLocation }).css({ 'width': opts.containerWidth, 'height': opts.containerHeight }).append(siteFeature);
        //obj.empty().attr({ 'id': opts.outputElementId, 'class': opts.tabsLocation }).css({ 'width': opts.containerWidth, 'height': opts.containerHeight }).append(siteFeature);
        obj.addClass('SF-' + settings.which);

        // Callback for DOM manipulation before event binding
        if ($.isFunction(opts.endCreateFunction)) {
            opts.endCreateFunction.apply(this, [opts]);
        }
    } // end createFeature()

    // This is the function that customizes the recently inject HTML based on the plugin options
    function customizeFeature(opts, settings) {
        var txtBoxes = $('#' + opts.txtBoxIdPrefix + 'Container', obj);
        var imgBgs = $('#' + opts.imgBgIdPrefix + 'Container', obj);
        var tabs = $('#' + opts.tabIdPrefix + 'Container', obj);

        // style the Images
        imgBgs.css({ 'width': opts.imgWidth, 'height': opts.containerHeight });

        // style the tabs
        /*
        tabLock logic check: turn off the lock if...
        - the number of tabs is less than the lock -- so the tabs fill the vertical space 
        - the number of tabs is equal too the lock -- to prevent the scroll arrows
        */
        if (tabs.children().length <= opts.tabLock) {
            opts.tabLock = 0;
        }
        if (!opts.tabLock) {
            settings.calcdTabHeight = Math.round((parseInt(opts.containerHeight) / tabs.children().length) - (1 + (1 / tabs.children().length)));
        } else {
            settings.calcdTabHeight = Math.round((parseInt(opts.containerHeight) / opts.tabLock) - (1 + (1 / tabs.children().length)));
            settings.tabTriggers = obj.after('<div id="' + opts.outputElementId + '-nav"><a href="#" id="SF-n-prev"><i>prev</i></a><a href="#" id="SF-n-next"><i>next</i></a><a href="#" id="SF-n-reset"><i>reset</i></a></div>').next().children();
            settings.offsetCount = 0;

            settings.tabTriggers.hide().filter('#SF-n-prev').click(function () {
                if (tabs.children().length - opts.tabLock - settings.offsetCount != tabs.children().length - opts.tabLock) {
                    tabs.animate({ 'top': '+=' + (settings.calcdTabHeight + 1) }, 500);
                    settings.offsetCount++;
                    return false;
                } else {
                    return false;
                }
            }).end().filter('#SF-n-next').click(function () {
                if (tabs.children().length - opts.tabLock + settings.offsetCount != 0) {
                    tabs.animate({ 'top': '-=' + (settings.calcdTabHeight + 1) }, 500);
                    settings.offsetCount--;
                    return false;
                } else {
                    tabs.animate({ 'top': '+=' + ((settings.calcdTabHeight + 1) * (settings.offsetCount * -1)) }, 500);
                    settings.offsetCount = 0;
                    return false;
                }
            }).end().filter('#SF-n-reset').click(function () {
                //LOOP<----------------
                tabs.animate({ 'top': '+=' + ((settings.calcdTabHeight + 1) * (settings.offsetCount * -1)) }, 500);
                settings.offsetCount = 0;
                return false;
            }).end().hover(function () {
                settings.overTriggers = true;
            }, function () {
                settings.overTriggers = false;
                $(this).animate({ 'azimuth': '0' }, 200, function () {
                    if (!settings.overTabs) {
                        settings.tabTriggers.fadeOut(350);
                    }
                });
            });

            settings.tabTriggers.filter('#SF-n-prev').css({
                'top': obj[0].offsetTop
            }).end().filter('#SF-n-next').css({
                'top': obj[0].offsetTop + obj.height() - settings.tabTriggers.filter('#SF-n-prev').height() - 3
            });
            /*settings.tabTriggers.filter('#SF-n-prev').css({
            'top' : obj[0].offsetTop - settings.tabTriggers.filter('#SF-n-prev').height() - 1
            }).end().filter('#SF-n-next').css({
            'top' : obj[0].offsetTop + obj.height()
            });*/

            if (opts.tabsLocation == 'left') {
                settings.tabTriggers.css({
                    'left': obj[0].offsetLeft + ((parseInt(opts.containerWidth) - parseInt(opts.imgWidth)) / 2) - (settings.tabTriggers.filter('#SF-n-prev').width() / 2)
                });
            } else {
                settings.tabTriggers.css({
                    /*'left' : obj[0].offsetLeft + (parseInt(opts.containerWidth) - ((parseInt(opts.containerWidth) - parseInt(opts.imgWidth))/2)) - (settings.tabTriggers.filter('#SF-n-prev').width() / 2)*/
                    'left': obj[0].offsetLeft + (parseInt(opts.containerWidth)) - 1
                });
            }

            tabs.hover(function () {
                settings.overTabs = true;
                if (!settings.overTriggers) {
                    settings.tabTriggers.fadeIn(350);
                }
            }, function () {
                settings.overTabs = false;
                $(this).animate({ 'azimuth': '0' }, 200, function () {
                    if (!settings.overTriggers) {
                        settings.tabTriggers.fadeOut(350);
                    }
                });
            });

        }

        tabs.children().css({
            'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)),
            'height': settings.calcdTabHeight
        }).children('span').css({
            'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)),
            'height': settings.calcdTabHeight
        }).children('img').css({
            'left': ((opts.tabsLocation == 'left') ? parseInt(opts.containerWidth) - parseInt(opts.imgWidth) : '0')
        }).prev().css({
            'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth))
        });

        // style the text boxes
        txtBoxes
			.css({ 'width': opts.imgWidth, 'height': opts.containerHeight })
			.children('div:not(.horizontal)').css({ 'width': opts.txtBoxWidth, 'height': '100%' }).end()
			.children('div.horizontal').css({ 'width': opts.imgWidth, 'height': opts.txtBoxHorizontalHeight, 'top': (parseInt(opts.containerHeight) - parseInt(opts.txtBoxHorizontalHeight)), 'left': '0px' }).end()
			.find('div span').css({ 'opacity': opts.txtBoxOpacity }).next().css({ 'opacity': '1' })
		;
    } // end customizeFeature()


    // This function binds all associated events
    function eventFeature(opts, settings) {

        var siteFeature = obj;
        var txtBoxes = $('#' + opts.txtBoxIdPrefix + 'Container', obj).children();
        var imgBgs = $('#' + opts.imgBgIdPrefix + 'Container', obj).children();
        var tabs = $('#' + opts.tabIdPrefix + 'Container', obj).children();
        // error check that the specified startTab isn't greater than the number of tabs
        if (opts.startTab > tabs.length || opts.startTab < 1) {
            if (window.console && window.console.log) {
                console.log('Your startTab value(' + opts.startTab + ') isn\'t in range of the number of tabs(1 - ' + tabs.length + '). The first tab has been shown.');
            } else {
                alert('Your startTab value(' + opts.startTab + ') isn\'t in range of the number of tabs(1 - ' + tabs.length + '). The first tab has been shown.');
            }
            opts.startTab = 1;
        }

        // to streamline the number of events and conditions... there is only one Click event and it gets called onLoad
        // all methods are chained... we begin with "all txtBoxes / imgBgs / tabs", then we filter to just the 'selected' item, animated it Out, revert back to the
        // "all txtBoxes / imgBgs / tabs" selector, filter to that which matches the clicked Tab, animate it In.
        // FYI: "this.hash" = is a great way to match an href (href="#item") with an element with a matching id (id="item"). It's the foundation for the tabbing used here. 

        tabs.click(function (e) {
            // prevent crashing by overloading the queue
            if (settings.imgIsAnimating) {
                return false
            }
            // quick check to determine if this onLoad (the class 'selected' hasn't been set yet - happens onLoad)
            if (!tabs.hasClass('selected')) {

                // if onLoad animations are turned on
                if (opts.animateInOnLoad) {
                    txtBoxes.css({ 'opacity': '0', 'display': 'none' })
						.filter(this.hash)
						.siteFeatureTxtBoxAnimationsIn(opts)
					;

                    imgBgs.css({ 'opacity': '0', 'display': 'none' })
						.filter(this.hash)
						.css({ 'display': 'block' }).animate({ 'opacity': '1' }, opts.imgBgsAnimationDuration, null)
					;

                    tabs.filter(this.hash).children('span')
						.animate({ 'width': opts.tabsAnimateWidth }, opts.tabsAnimateInDuration, null)
					;

                    // if onLoad animations are turned off
                } else {
                    txtBoxes.css({ 'opacity': '0', 'display': 'none' })
						.filter(this.hash)
						.css({ 'opacity': '1', 'display': 'block' })
					;

                    imgBgs.css({ 'opacity': '0', 'display': 'none' })
						.filter(this.hash)
						.css({ 'opacity': '1', 'display': 'block' })
					;

                    tabs.filter(this.hash).children('span')
						.animate({ 'width': opts.tabsAnimateWidth }, 0, null)
					;
                }

                // the following are called onClick (as opposed to onLoad)
            } else {
                // seperates a click to load a new tab v. a click on the current tab visit the original link
                if (!$(this).hasClass('selected')) {
                    var hash = this.hash;
                    txtBoxes.filter('.selected')
						.siteFeatureTxtBoxAnimationsOut(opts)
						.end().filter(this.hash)
						.siteFeatureTxtBoxAnimationsIn(opts)
					;

                    imgBgs.siteFeatureImgAnimations(opts, settings, this.hash);

                    tabs.filter('.selected').children('span').css({
                        'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)),
                        'display': 'none'
                    });
                    tabs.filter(hash).children('span').animate({ 'width': opts.tabsAnimateWidth }, opts.tabsAnimateInDuration).css({ 'display': 'block' });
                    // the tab clicked is already open - trigger the original link
                } else {
                    if (opts.activeTabIsLink) {
                        window.location = txtBoxes.filter(this.hash).find('a').attr('href');
                        //window.location = tabs.filter(this.hash).find('a').attr('href');
                        return false;
                    }
                }

            }



            /////////////////////////////////////////////////////////////////////////////////////////////////
            //siteFeature.find('.selected').removeClass('selected').end().find(this.hash).addClass('selected');
            siteFeature.find('.selected').removeClass('selected').end().find(this.hash).addClass('selected');
            return false;
            // the ".filter(':first').click()" is a chaining method for triggering an event onLoad but only after it has been bound.
            // in this case... after the click has been bound to the Tabs, click the first Tab in the selector list. 
            //}).filter(':eq(' + (opts.startTab - 1) + ')').click();
        }).filter(':eq(' + (opts.startTab - 1) + ')');

        if ($.browser.msie && $.browser.version == 6) {
            if (txtBoxes.filter(':eq(' + (opts.startTab - 1) + ')').hasClass('horizontal')) {
                txtBoxes.filter(':eq(' + (opts.startTab - 1) + ')').css({ 'height': opts.txtBoxHorizontalHeight });
            } else {
                txtBoxes.filter(':eq(' + (opts.startTab - 1) + ')').css({ 'height': opts.containerHeight });
            }
        }


        // binds a click to the ImgBg that calls the original link
        if (opts.activeWindowIsLink) {

            $('#' + opts.txtBoxIdPrefix + 'Container').css({ 'cursor': 'pointer' }).click(function (e) {
                if (e.target.tagName == 'A') {
                    return true;
                } else {
                    var hash = tabs.filter('.selected').attr('href');
                    var hashMark = hash.lastIndexOf('#');
                    hash = hash.substring(hashMark, hash.length);
                    //window.location = txtBoxes.filter(hash).find('a').attr('href');
                    window.location = tabs.filter(this.hash).find('a').attr('href');
                    return false;

                }

            });
        }

        // binds the AutoPlay
        if (opts.autoPlay) {
            SiteFeatureAutoPlayInterval['which' + settings.which] = setInterval("siteFeatureAutoPlayer(" + settings.which + ")", opts.autoPlayInterval);

            if (opts.pauseOnHover) {
                obj.hover(function () {
                    clearInterval(SiteFeatureAutoPlayInterval['which' + settings.which]);
                }, function () {
                    SiteFeatureAutoPlayInterval['which' + settings.which] = setInterval("siteFeatureAutoPlayer(" + settings.which + ")", opts.autoPlayInterval);
                });
            }

        }

        // binds the events for changing the tabs on hover
        if (opts.tabControl == 'hover') {
            tabs.mouseover(function () {

                if (settings.imgIsAnimating) {
                    return false
                }

                if (!$(this).hasClass('selected')) {
                    var hash = this.hash;

                    txtBoxes.filter('.selected')
						.siteFeatureTxtBoxAnimationsOut(opts)
						.end().filter(this.hash)
						.siteFeatureTxtBoxAnimationsIn(opts)
					;

                    imgBgs.siteFeatureImgAnimations(opts, settings, this.hash);

                    tabs.filter('.selected').children('span').css({
                        'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)),
                        'display': 'none'
                    });
                    tabs.filter(hash).children('span').animate({ 'width': opts.tabsAnimateWidth }, opts.tabsAnimateInDuration);
                }


            });
        } // end if HOVER

    } // end eventFeature()

    // this function allows the tabs to autoscroll during autoplay
    function tabReset() {

    }

    /*
    jQuery Background Position Effect Plugin
    http://plugins.jquery.com/project/backgroundPosition-Effect
    http://www.protofunc.com/scripts/jquery/backgroundPosition/
    @author Alexander Farkas
    v. 1.21
    Liscenses: MIT, GPL
    */
    if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8
        var oldCurCSS = jQuery.curCSS;
        jQuery.curCSS = function (elem, name, force) {
            if (name === 'background-position') {
                name = 'backgroundPosition';
            }
            if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if (!force && style && style[name]) {
                return style[name];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }
    var oldAnim = $.fn.animate;
    $.fn.animate = function (prop) {
        if ('background-position' in prop) {
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if ('backgroundPosition' in prop) {
            prop.backgroundPosition = '(' + prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };

    function toArray(strg) {
        strg = strg.replace(/left|top/g, '0px');
        strg = strg.replace(/right|bottom/g, '100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];
    }

    $.fx.step.backgroundPosition = function (fx) {
        if (!fx.bgPosReady) {
            var start = $.curCSS(fx.elem, 'backgroundPosition');

            if (!start) {//FF2 no inline-style fallback
                start = '0px 0px';
            }

            start = toArray(start);

            fx.start = [start[0], start[2]];

            var end = toArray(fx.options.curAnim.backgroundPosition);
            fx.end = [end[0], end[2]];

            fx.unit = [end[1], end[3]];
            fx.bgPosReady = true;
        }
        //return;
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];

    };
    // end Background Position Animation Plugin

})(jQuery);

// this is the AutoPlay function
var SiteFeatureAutoPlayInterval = [];
function siteFeatureAutoPlayer(id){
	var tabs = jQuery('.SF-' + id).find('#' + jQuery.fn.siteFeature.defaults.tabIdPrefix + 'Container').children();
	if( (tabs.length - 1) == tabs.index(tabs.filter('.selected'))){
		tabs.filter(':first').click();
		jQuery('.SF-' + id).next('#siteFeature-nav').find('#SF-n-reset').click();
	} else {
		tabs.filter('.selected').next().click();
		jQuery('.SF-' + id).next('#siteFeature-nav').find('#SF-n-next').click();
	}
}