/* * carousel.js * 3 March 09 * * This script builds carousel interaction for the center column * of the InformationWeek analytics page. * */ $(document).ready(function() { // attach interaction to carousel controls on document load carouselAttachControls ("#one"); carouselAttachControls ("#two"); carouselAttachControls ("#three"); carouselAttachControls ("#four"); } ); function carouselAttachControls (target) { // This function sets up each carousel. The target passed must be a CSS selector // specific enough that another carousel does not get included in the selection. // This function has been specifically built to match the HTML used in the IWK // analytics page. It's not re-usable in other pages unless the same HTML and // functional requirements are used. Sorry it's not more fully abstracted. // hide all tabbed sections but the first, just in case $(target + " .carousel-wrap:gt(0)").css("display","none"); // hide all slides but the first, just in case //$(target + " .box_wrap:gt(0)").css("display","none"); // set up the tabbed controls $(target + " .carousel-wrap").each( function() { $(".tabs a", this).each( function(i) { $(this).click(function() { // alert (target + ", action: " + i); tabJump(target, i); return false; }); }); }); // set up the slide controls // set up previous/next buttons $(target + " .controls a.slide_left").click(function(){ carouselJump(target, "prev"); return false }); $(target + " .controls a.slide_right").click(function(){ carouselJump(target, "next"); return false }); // set up indicator dots, if they exist $(target + " .controls img").each( function(i) { $(this).click( function() { carouselJump(target, i); } ); } ); // set up icon/list view buttons $(target + " .display-type a.icons").click(function() { toggleIconList (target, "icon"); return false; } ); $(target + " .display-type a.list").click(function() { toggleIconList (target, "list"); return false; } ); }; function toggleIconList (target, action) { // toggles display of the text accompanying images in the "float-left" divs // of the currently targeted carousel. We can't use jQuery's toggle() function // because it doesn't work in IE6. // These CSS styles should really be abstracted into CSS and the class name toggled. // alert ("target: " + target + ", action: " + action); $(target + " .display-type span").html(action); if (action == "icon") { // these are the styles that need to be activated when // the "icon" display is active $(target + " .display-type a.icons").css("color","#000000"); $(target + " .display-type a.list").css("color","#0847c4"); var icon = { "float" : "left", "width" : "100px", "margin" : "5px", "text-align" : "center" } $(target + " .float-left").css(icon); $(target + " .float-left img").css("display", "inline"); $(target + " .box_wrap .clear").css("display", "block"); $(target + " .float-left span").css("display", "none"); $(target + " .float-left p ").css("display", "inline"); } else if (action == "list") { // these are the styles that need to be activated when // the "list" display is active $(target + " .display-type a.list").css("color","#000000"); $(target + " .display-type a.icons").css("color","#0847c4"); var list = { "float" : "none", "width" : "400px", "margin" : "-5px -5px 5px 10px", "text-align" : "left" } $(target + " .float-left").css(list); $(target + " .float-left img").css("display", "none"); $(target + " .box_wrap .clear").css("display", "none"); $(target + " .float-left span ").css("display", "inline"); $(target + " .float-left p ").css("display", "none"); } }; function tabJump (target, action) { // displays a tab using the particular HTML in the IWK analytics page // target is the selector for the currently selected carousel // action is the tab number that should become highlighted // determine which tab is active //carouselJump (target, "reset"); var activeTab = 0; $(target + " .carousel-wrap").each( function(i) { if ($(this).css('display') != "none") { activeTab = i } }); //if (activeTab != action) { // if the selected tab isn't already active, then... // alert("active tab: " + activeTab + ", action: " + action); // hide the active tab $(target + " .carousel-wrap:eq(" + activeTab + ")").css('display', 'none'); // display the action tab $(target + " .carousel-wrap:eq(" + action + ")").css('display','block'); // go to the first slide in that tab carouselJump (target, "reset"); //}; }; function carouselJump (target,action) { // Not fully abstracted; this is a quickie. // Preferences must be reset here if HTML of carousel changes. // target is the selector for the currently selected carousel // action is the frame number that should become highlighted // assume multiple tabs are possible and only display in currently highlighted one var indicatorTarget = target + " .controls img"; var activeIndicatorSrc = "/images/carousel_dot-current.png"; var inactiveIndicatorSrc = "/images/carousel_dot.png"; // alert ("action: " + action); // determine which tab is active var activeTab; $(target + " .carousel-wrap").each( function(i) { if ($(this).css('display') != "none") { activeTab = i; } }); var targetTab = target + " .carousel-wrap:eq(" + activeTab + ")"; // determine which frame is active var activeFrame; $(targetTab + " .box_wrap").each( function(i) { if ($(this).css('display') != "none") { activeFrame = i } }); // how many frames exist? var numFrames = $(targetTab + " .box_wrap").size(); if(action >= numFrames) { return false; } // figure out what frame to show next var nextFrame = 0; if (action == "next") { nextFrame = (activeFrame + 1) % numFrames; }; if (action == "prev") { nextFrame = (activeFrame == 0) ? numFrames - 1 : Math.abs( (activeFrame - 1) % numFrames); } if (action <= numFrames) { nextFrame = action; } /*if(action == 'next' && activeFrame>nextFrame) return; if(action == 'prev' && activeFrame