// Crutchfield Rotating Lead (a jQuery Site Feature based on a script written by Michael Kafka)

(function($) { $.fn.siteFeature = function(options) { var opts = $.extend({}, $.fn.siteFeature.defaults, options); return this.each(function(i) { obj = $(this); var settings = {}; settings.which = i; createFeature(opts, settings); customizeFeature(opts, settings); eventFeature(opts, settings); }); }; $.fn.siteFeature.defaults = { outputElementId: 'siteFeature', txtBoxIdPrefix: 'txtBox', imgBgIdPrefix: 'imgBg', tabIdPrefix: 'tab', titleText: 'h3', containerWidth: '900px', containerHeight: '265px', imgWidth: '700px', tabsLocation: 'left', tabBgImg: imageserver + '/multi-lead/arrow-left-styled.png', tabBgImgIE6: imageserver + '/multi-lead/arrow-left-styled.gif', txtBoxWidth: '100%', txtBoxHorizontalHeight: '65px', txtBoxOpacity: 0.5, activeTabIsLink: false, activeWindowIsLink: false, animateInOnLoad: true, txtBoxAnimateInType: 'blink', txtBoxAnimateOutType: 'blink', txtBoxAnimateHorzAlt: true, txtBoxAnimateInHorzType: 'slideUp', txtBoxAnimateOutHorzType: 'slideDown', txtBoxAnimateInDuration: 500, txtBoxAnimateOutDuration: 500, txtBoxPauseBetweenInOut: 250, imgBgsAnimateInDuration: 500, imgBgsAnimateOutDuration: 500, tabsAnimateInDuration: 100, tabsAnimateWidth: '+=26', autoPlay: true, autoPlayInterval: 7000, pauseOnHover: true, endCreateFunction: null }; $.fn.siteFeatureAnimationsOut = function(opts) { 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).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).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' }).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' }).animate({ 'left': '-' + opts.imgWidth }, opts.txtBoxAnimateOutDuration, function() { $(this).css({ 'opacity': '0', 'left': '0', 'display': 'none' }); }); } } else { $(this).css({ 'right': 'auto', 'left': '0' }).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' }).animate({ 'right': '-' + opts.txtBoxWidth }, opts.txtBoxAnimateOutDuration, function() { $(this).css({ 'opacity': '0', 'right': '0', 'display': 'none' }); }); } else { $(this).css({ 'opacity': '1', 'left': 'auto' }).animate({ 'right': '-' + opts.imgWidth }, opts.txtBoxAnimateOutDuration, function() { $(this).css({ 'opacity': '0', 'right': '0', 'display': 'none' }); }); } } else { if (!$(this).hasClass('horizontal')) { $(this).css({ 'left': '0px' }).animate({ 'left': '-' + opts.txtBoxWidth }, opts.txtBoxAnimateOutDuration, function() { $(this).css({ 'opacity': '0', 'display': 'none', 'left': '0px' }); }); } else { $(this).css({ 'left': '0px' }).animate({ 'left': '-' + opts.imgWidth }, opts.txtBoxAnimateOutDuration, function() { $(this).css({ 'opacity': '0', 'display': 'none', 'left': '0px' }); }); } } } if ($(this).hasClass('horizontal') && opts.txtBoxAnimateHorzAlt) { opts.txtBoxAnimateOutType = origAniStorage; } return this; }; $.fn.siteFeatureAnimationsIn = function(opts) { 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); }); } 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); }); } 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); }); } else { $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function() { $(this).css({ 'display': 'block', 'opacity': '1' }).slideUp(0).slideDown(opts.txtBoxAnimateInDuration); }); } } 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); }); } else { $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function() { $(this).css({ 'display': 'block', 'opacity': '1', 'left': 'auto', 'right': '-' + opts.imgWidth }).animate({ 'right': '0' }, opts.txtBoxAnimateInDuration); }); } } 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); }); } } } 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); }); } 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); }); } } else { $(this).animate({ 'opacity': '0' }, opts.txtBoxPauseBetweenInOut, function() { $(this).css({ 'display': 'block', 'opacity': '1', 'left': '-' + opts.imgWidth }).animate({ 'left': '0' }, opts.txtBoxAnimateInDuration); }); } } if ($(this).hasClass('horizontal') && opts.txtBoxAnimateHorzAlt) { opts.txtBoxAnimateInType = origAniStorage; } return this; }; function outerHTML(element) { return $('<div>').append(element.eq(0).clone()).html(); }; function createFeature(opts, settings) { var siteFeature; var txtBoxes = "<div id='" + opts.txtBoxIdPrefix + "Container'>"; var imgBgs = "<div id='" + opts.imgBgIdPrefix + "Container'>"; var tabs = "<div id='" + opts.tabIdPrefix + "Container'>"; if ($.browser.msie && $.browser.version == 6) { if (opts.tabBgImgIE6 != null || opts.tabBgImgIE6 != '') { opts.tabBgImg = opts.tabBgImgIE6; } } obj.children().each(function(i) { current = $(this); cloned = current.clone().attr({ id: opts.tabIdPrefix + i }).find('img').remove().end().wrapInner('<div>').prepend('<span></span>'); txtBoxes += outerHTML(cloned); imgBgs += '<div id="' + opts.tabIdPrefix + i + '" style="background-image:url(' + current.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>' + current.find('h3').text() + '</h4><p>' + current.find('img').attr('title') + '</p></a>'; }); txtBoxes += "</div>"; imgBgs += "</div>"; tabs += "</div>"; siteFeature = (imgBgs + txtBoxes + tabs); obj.empty().attr({ 'id': opts.outputElementId, 'class': opts.tabsLocation }).css({ 'width': opts.containerWidth, 'height': opts.containerHeight }).append(siteFeature); obj.addClass('SF-' + settings.which); if ($.isFunction(opts.endCreateFunction)) { opts.endCreateFunction.apply(this, [opts]); } } function customizeFeature(opts, settings) { var txtBoxes = $('#' + opts.txtBoxIdPrefix + 'Container', obj); var imgBgs = $('#' + opts.imgBgIdPrefix + 'Container', obj); var tabs = $('#' + opts.tabIdPrefix + 'Container', obj); imgBgs.css({ 'width': opts.imgWidth, 'height': opts.containerHeight }); tabs.children().css({ 'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)), 'height': ((parseInt(opts.containerHeight) / tabs.children().length) - (1 + (1 / tabs.children().length))) }).children('span').css({ 'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)), 'height': ((parseInt(opts.containerHeight) / tabs.children().length) - (1 + (1 / tabs.children().length))) }).children('img').css({ 'left': ((opts.tabsLocation == 'left') ? parseInt(opts.containerWidth) - parseInt(opts.imgWidth) : '0') }).prev().css({ 'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)) }); 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' }); } 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(); tabs.click(function(e) { if (!tabs.hasClass('selected')) { if (opts.animateInOnLoad) { txtBoxes.css({ 'opacity': '0', 'display': 'none' }).filter(this.hash).siteFeatureAnimationsIn(opts); imgBgs.css({ 'opacity': '0', 'display': 'none' }).filter(this.hash).css({ 'display': 'block' }).animate({ 'opacity': '1' }, opts.imgBgsAnimateInDuration, null); tabs.filter(this.hash).children('span').animate({ 'width': opts.tabsAnimateWidth }, opts.tabsAnimateInDuration, null); } 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); } } else { if (!$(this).hasClass('selected')) { var hash = this.hash; txtBoxes.filter('.selected').siteFeatureAnimationsOut(opts).end().filter(this.hash).siteFeatureAnimationsIn(opts); imgBgs.filter('.selected').animate({ 'opacity': '0' }, opts.imgBgsAnimateOutDuration, function() { $(this).css({ 'display': 'none' }); }).end().filter(this.hash).css({ 'display': 'block' }).animate({ 'opacity': '1' }, opts.imgBgsAnimateInDuration); tabs.filter('.selected').children('span').css({ 'width': (parseInt(opts.containerWidth) - parseInt(opts.imgWidth)), 'display': 'none' }).end().end().filter(this.hash).children('span').animate({ 'width': opts.tabsAnimateWidth }, opts.tabsAnimateInDuration); } else { if (opts.activeTabIsLink) { window.location = txtBoxes.filter(this.hash).find('a').attr('href'); return false; } } } siteFeature.find('.selected').removeClass('selected'); siteFeature.find(this.hash).each(function() { $(this).addClass('selected'); }); return false; }).filter(':first').click(); if ($.browser.msie && $.browser.version == 6) { if (txtBoxes.filter(':first').hasClass('horizontal')) { txtBoxes.filter(':first').css({ 'height': opts.txtBoxHorizontalHeight }); } else { txtBoxes.filter(':first').css({ 'height': opts.containerHeight }); } } if (opts.activeWindowIsLink) { $('#' + opts.txtBoxIdPrefix + 'Container').css({ 'cursor': 'pointer' }).click(function(e) { var hash = tabs.filter('.selected').attr('href'); window.location = txtBoxes.filter(hash).find('a').attr('href'); return false; }); } 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); }); } } } })(jQuery); var SiteFeatureAutoPlayInterval = []; function siteFeatureAutoPlayer(id) { var tabs = $('.SF-' + id).find('#' + $.fn.siteFeature.defaults.tabIdPrefix + 'Container').children(); if ((tabs.length - 1) == tabs.index(tabs.filter('.selected'))) { tabs.filter(':first').click(); } else { tabs.filter('.selected').next().click(); } }