(function($) { /***************************************************/ // plugin: Carousel // // Developped by: Son Pham // // description: Carousel based on links vs images // // requirement: jQuery 1.3.2+ // // usage: 1) $(".selector").carousel({params}) // // params : // @autoPlay: (boolean) enables the caroursel to start automatically default: false // @timer: (integer) sets the interval in seconds between each media (autoPlay must be set to True) default: 5 // @slide: (boolean) enables the caroursel to slide between the media changes default: true // @speed: (integer) the animation speed default: 300 // @navInside: (boolean) set if the navigation should be outside the carousel or part of the media zone default: true // @navCenter: (boolean) set if the navigation should be centered to the carousel default: true // @navShow: (boolean) set if the navigation should be displayed default: true // @mediaContainer: (string) className of the element containing the media files default: "mediaContainer" // @navContainer: (string) className of the element containing the carousel navigation default: "carouselNav" // @activeClassName: (string) className that will be use on the navigation when its active default: "active" /**********************************************************/ jQuery.fn.carousel = function(settings) { var defaults, timerId, validateParams, loadMedias, setDimension, show, playShow, play; defaults = { autoPlay: false, timer: 5, // in seconds slide: false, speed: 300, navInside: false, navCenter: true, navShow: true, navContainer: "carouselNav", mediaContainer: "carouselMedia", activeClassName: "active" }; settings = $.extend(defaults, settings); timerId = 0; // Validate Params validateParams = function() { if (typeof(settings.autoPlay) !== "boolean") { settings.autoPlay = false; } if (isNaN(settings.timer)) { settings.timer = 5; } if (typeof(settings.slide) !== "boolean") { settings.slide = false; } if (isNaN(settings.speed)) { settings.speed = 300; } if (typeof(settings.navInside) !== "boolean") { settings.navInside = false; } if (typeof(settings.navCenter) !== "boolean") { settings.navCenter = true; } if (typeof(settings.navShow) !== "boolean") { settings.navShow = true; } if (typeof(settings.navContainer) !== "string") { settings.navContainer = "carouselNav"; } if (typeof(settings.mediaContainer) !== "string") { settings.mediaContainer = "carouselMedia"; } if (typeof(settings.activeClassName) !== "string") { settings.activeClassName = "active"; } }; // set images width/height by loading the images loadMedias = function($carouselImages) { if ($.isFunction($.loadImages)) { $carouselImages.each(function() { var $image = $(this), $link, toHide; if ($image.attr("id") === "") { if (document.getElementById($image.parent().attr("id")).nodeName === "A") { $link = $($image.parent()); toHide = false; if (!$link.is(":visible")) { toHide = true; $link.show(); } return function() { $.loadImages($("img", $link)); if (toHide) { $link.hide(); } }; } } else { return function() { $.loadImages($image); }; } }); } }; // set carousel dimension by tallest and widest image setDimension = function($element) { var tallestH = 0, tallestW = 0, totalImgW = 0, dimension = { height: 0, width: 0 }, validData = false, $carouselImages = $element.find("."+settings.mediaContainer+" img"), zIndex, $img, imgH, imgW, killOutLine, $nav; // load images loadMedias($carouselImages); zIndex = 66666; $carouselImages.each(function(i) { $img = $(this); imgH = $img.outerHeight(); imgW = $img.outerWidth(); // functionality check if (imgH === 0) { // somethings wrong !!! return false; } else { validData = true; } if (imgH > tallestH) { tallestH = imgH; } if (imgW > tallestW) { tallestW = imgW; } dimension.height = tallestH; dimension.width = tallestW; totalImgW += imgW; if (!$img.attr("id")) { if (document.getElementById($img.parent().attr("id")).nodeName === "A") { $img = $($img.parent()); } } // always show first if (i === 0) { $img.show(); } if (i === 0 || !settings.slide) { $img.css("left", 0); if (i > 0 && !settings.slide) { $img.hide(); } if (!settings.slide) { $img.css("position","absolute"); } } else { $img.css("left", totalImgW-imgW+"px").css("float", "left"); } }); // functionality check if (!validData) { // Somethings wrong exit function return false; } else { // Everything seems to be OK! Now set Mask width if (dimension.width) { $element.width(dimension.width); } // Set the media container width $element.find("."+settings.mediaContainer).each(function() { if (settings.slide) { $(this).width(totalImgW); } else { $(this).width(dimension.width); } }); killOutLine = false; if ($.isFunction($().outLineKiller)) { killOutLine = true; } // position navigation $element.find("."+settings.navContainer).each(function() { $nav = $(this); if (settings.navShow) { if (settings.navCenter) { $nav.css("left", (dimension.width-$nav.width())/2+"px"); } if (killOutLine) { $("a",$nav).outLineKiller(); } if (dimension.height) { if (settings.navInside) { $element.height(dimension.height); $nav.css("zIndex", zIndex++); } else { $element.height(dimension.height+$nav.outerHeight(true)); } } } else { $nav.hide(); if (dimension.height) { $element.height(dimension.height); } } }); return true; } }; // Show media show = function(element, lnk, arrMedia) { var $element = $(element), $link = $(lnk), imageId, $img, $media; $element.find("."+settings.navContainer+" a").each(function() { $(this).removeClass(settings.activeClassName); }); $link.addClass(settings.activeClassName); imageId = $link.attr("href").split("#")[1]; $img = $("#"+imageId); if (settings.slide) { $element.find("."+settings.mediaContainer).each(function() { if ($img.length) { $(this).stop().animate({left: "-"+$img.css("left") }, settings.speed); } }); } else { $.each(arrMedia, function(idx, value) { $media = $(value); if ($media.is(":visible") && ($img.attr("id")!==$media.attr("id"))) { if (settings.navInside) { $media.css("bottom",0); } $media.fadeOut(settings.speed, function() { $img.fadeIn(settings.speed); }); return false; } }); } }; // AutoPlay Show playShow = function(element, content, arrMedia, index) { var $element = $(element), $content = $(content), zIndex = 66666, //$.getHighestZIndex(), $nav = $element.find("."+settings.navContainer); $content.css("zIndex", zIndex); $content.fadeIn(settings.speed); if ($nav.length) { $nav.css("zIndex", zIndex++); } timerId = setTimeout(function() { var nextIdx = index+1>arrMedia.length-1? 0 : index+1; play($element, arrMedia, nextIdx, false); }, settings.timer*1000); }; // on autoPlay mode play = function(element, arrMedia, index, isFirstTimeLoad) { if (arrMedia.length) { var $element = $(element), $img = $(arrMedia[index]), $media, nextIdx, href; // get media link $element.find("a").each(function() { href = $(this).attr("href").split("#")[1]; if (href === $img.attr("id")) { $(this).removeClass(settings.activeClassName).addClass(settings.activeClassName); } else { $(this).removeClass(settings.activeClassName); } }); if (settings.slide) { $element.find("."+settings.mediaContainer).each(function() { $(this).stop().animate({left: "-"+$img.css("left") }, settings.speed, function() { //interval validation if (isNaN(settings.timer)) { settings.timer = defaults.timer; } timerId = setTimeout(function() { nextIdx = index+1>arrMedia.length-1? 0 : index+1; play($element, arrMedia, nextIdx, false); }, settings.timer*1000); }); }); } else { $.each(arrMedia, function(idx, value) { $media = $(value); if ($media.is(":visible")) { if (!isFirstTimeLoad) { $media.fadeOut(settings.speed, function() { playShow($element, $img, arrMedia, index); }); } else { playShow($element, $img, arrMedia, index); } return false; } }); } } }; return this.each(function(idx){ var $element = $(this), $links, media, $link, $content, contentId; //validateParams if (idx ===0) { validateParams(); } // Set Carousel dimension if (!$.data($element.get(0),"initialized")) { if (setDimension($element)) { // error functionality check if (window.carouselTimerId) { clearTimeout(window.carouselTimerId); } if (!settings.slide) { $element.css("overflow","visible"); } // find links and initialize it $links = $element.find("."+settings.navContainer+" a"); if ($links.length > 1) { // Get media array media = []; $links.each(function(i) { $link = $(this); contentId = $link.attr("href").split("#")[1]; if (i===0) { $link.addClass(settings.activeClassName); } else { $link.removeClass(settings.activeClassName); } try { $content = $("#"+contentId); if ($content.length) { if (settings.navInside) { $content.css("bottom",0); } media.push($content); } } catch(e) {} $link.unbind("click").click(function() { show($element, $(this), media); clearTimeout(timerId); return false; }); }); // autoPlay mode if (settings.autoPlay) { play($element, media, 0, true); } } else if ($links.length === 1) { // We only show navigation for at least 2 items $links.hide(); } $.data($element.get(0),"initialized",true); } else { // re-run carousel call window.carouselTimerId = setTimeout(function() { $element.carousel(settings); }, 100); } } }); }; /***************************************************/ // plugin: flyOut // // Developped by: Son Pham // // description: similar to toggleShowHide but this function has two types of Flyout // 1) with Inputs: after selecting an input, the label of this input will replace // the text of element responsible to trigger the flyOut // // 2) links: after clicking on a link, the link will do its native function wich is // to go to the resource indicated in the attribute href // // requirement: jQuery 1.3.2+ // // usage: 1) $(".selector").flyout({params}) // // params : // @ajax: (boolean) determine if content if from ajax default: false // @fade: (boolean) enables fade out effect default: true // @inputs: (boolean) indicates that flyout is composed of form inputs default: false // @hide: (boolean) indicates that flyout must be hidden default: false // normaly used to force the flyout content to be hidden after an external javascript call // @generateHtml: (boolean) indicates if the function will generate the flyOut HTML markup default: true // @speed: (integer) sets the fading speed (fade must be true) default: 250 // @className: (string) sets the flyOut ClassName default: ""; // @itemActiveClassName: (string) used to specify the className of the parent of the element when clicked default "active" // @closeTimer: (integer) specifies the timer clock to close the flyout on mouseLeave default: 250 /**********************************************************/ jQuery.fn.flyOut = function(settings) { var defaults, mouseOn, validateParams, show, hide, startTimer, resetActive, setActiveInput, setAlwaysOnTop, generateHTML; defaults = { ajax: false, fade: true, inputs: false, hide: false, generateHtml: true, speed: 250, className: "", itemActiveClassName: "active", itemHoverClassName: "hover", closeTimer: 250 }; settings = $.extend(defaults, settings); mouseOn = false; // Validate Params validateParams = function() { if (typeof(settings.ajax) !== "boolean") { settings.ajax = false; } if (typeof(settings.fade) !== "boolean") { settings.fade = true; } if (typeof(settings.inputs) !== "boolean") { settings.inputs = true; } if (typeof(settings.hide) !== "boolean") { settings.hide = false; } if (typeof(settings.generateHtml) !== "boolean") { settings.generateHtml = true; } if (isNaN(settings.speed)) { settings.speed = 250; } if (typeof(settings.className) !== "string") { settings.className = ""; } if (typeof(settings.contentClassName) !== "string") { settings.contentClassName = "flyOut"; } if (typeof(settings.itemActiveClassName) !== "string") { settings.itemActiveClassName = "active"; } if (isNaN(settings.closeTimer)) { settings.closeTimer = 250; } }; // show flyOut show = function(element) { var $element = $(element), fromAjax = arguments[1]; // make sure content will be showned $($(".flyOutContJs", $element).children()[0]).show(); // animate effect if (settings.fade) { $element.stop(); if (fromAjax || $.isIE("<9")) { $element.show(); } else { $element.fadeIn(settings.speed); } } else { $element.show(); } // handling mouse out/leave on element $element.mouseover(function() { mouseOn = true; $element.show(); }).mouseleave(function() { mouseOn = false; startTimer($element); }); // $.getHighestZIndex() $element.css("zIndex", 999999); }; // hide flyOut hide = function(element) { var $element = $(element); mouseOn = false; if (settings.fade && $.isIE(">8")) { $element.fadeOut(settings.speed); } else { $element.hide(); } // IE select always on top fix if ($.isIE()) { // remove IE bug overlay links $("#"+$element.attr("id")+"-img").remove(); } }; // start timer before closing flyOut startTimer = function(element) { var $element = $(element); window.bellFlyOutTimer = setTimeout(function() { clearTimeout(window.bellFlyOutTimer); if (!mouseOn) { hide($element); } }, settings.closeTimer); }; resetActive = function(elements) { var $elements = $(elements); $elements.each(function() { $(this).parent().removeClass(settings.itemActiveClassName); }); }; setActiveInput = function(content, text) { if (settings.inputs) { var $inputs = $(content).find(":input"), $parent; resetActive($inputs); $inputs.each(function() { $parent = $(this).parent(); if ($.trim($parent.text())===text) { $parent.addClass(settings.itemActiveClassName); } }); } }; setAlwaysOnTop = function(content) { var $content = $(content), $img, src; // IE PNG check (because IE does not like fade effect when PNG is involve) if ($.browser.msie) { if ($content.css("backgroundImage").indexOf(".png") !== -1) { settings.fade = false; } else { $content.children().each(function() { if ($(this).css("backgroundImage").indexOf(".png") !== -1) { settings.fade = false; return false; } }); } // IE flyout mouseleave bug fix if ($("#"+$content.attr("id")+"-img").length === 0) { $img = $(""); $img.addClass("transparent"); $content.prepend($img); src = $img.css("backgroundImage").replace("url(","").replace(".png)",".png"); src = src.substr(0,src.length-1); src = src.substr(1,src.length-2); $img.attr("src",src); $img.css("position", $content.css("position")); if ($content.css("left") === "auto") { if ($content.css("right") !== "auto") { $img.css("right", $content.css("right")); } } else { $img.css("left", $content.css("left")); } $img.css("top", $content.css("top")); $img.width($content.width()); $img.height($content.height()); $img.mouseenter(function() { mouseOn = true; }); } } }; generateHTML = function(flyOutId) { var rand, html; if (!flyOutId || flyOutId === "" || flyOutId.indexOf("#")!== -1) { rand = Math.floor(Math.random()*1000); if ($.isFunction($.getRandomNumber)) { rand = $.getRandomNumber(); } flyOutId = "bell-flyOut-"+rand; } else { flyOutId += "-flyOut"; } html = ""; html += "
\n"; html += "
\n"; html += "
\n"; html += "
<\/div>\n"; html += "
\n"; html += " <\/div>\n"; html += "
<\/div><\/div>\n"; html += "
<\/div><\/div>\n"; html += "<\/div>\n"; return html; }; return this.each(function(idx){ var $element = $(this), contentId = $element.attr("href").split("#")[1], $content = $("#"+contentId); //validateParams if (idx ===0) { validateParams(); $("body").click(function() { hide($content); }); } if (settings.hide) { hide($content); } else { if ($content.length) { $content.hide(); } $element.unbind("click").click(function(idx) { var $link = $(this), flyOutId, $flyOut, $placeHolder, url, rand, loaderEnabled, toBindEventHandling, $parent, $inputs, strFor, label, $links, currentText; // indicate that mouse is on mouseOn = true; // hide previous flyOut $("body").find(".flyOut").each(function() { if (settings.ajax) { } else { flyOutId = $(this).attr("id"); if (flyOutId) { if (flyOutId !== contentId+"-flyOut") { $(this).hide(); } } } }); // Set default selected input based on the link text (if applicable) setActiveInput($content, $link.text()); // Content if (settings.ajax) { // Ajax url = $link.attr('href'); rand = 0; if ($.getRandomNumber) { rand = $.getRandomNumber(); } if (url.indexOf("&") !== -1) { url += "&refreshxyz="+rand; } else if (url.indexOf("?") === -1) { url += "?refreshxyz="+rand; } $flyOut = $.data($link.get(0),"flyOut"); if (!$flyOut) { $flyOut = $(generateHTML()); $link.after($flyOut); $placeHolder = $(".flyOutContJs", $flyOut); loaderEnabled = false; if ($.isFunction($.ajaxLoader.show)) { loaderEnabled = true; $flyOut.show(); $placeHolder.addClass("loading"); $.ajaxLoader.show({targetId:$placeHolder}); } // Loads data synchronously. // Blocks the browser while the requests is active. // It is better to block user interaction by other means when synchronization is necessary. $.ajax({ url: url, async: false, dataType: "html", success: function(data) { // place new content var $data = $(data); $flyOut.addClass($data.attr("class")); $data.removeClass("class"); $placeHolder.prepend(data).removeClass("loading"); if (loaderEnabled) { $.ajaxLoader.hide({targetId:$placeHolder}); } show($flyOut, true); // handling mouse out/leave on the link $link.mouseover(function() { mouseOn = true; }).mouseleave(function() { mouseOn = false; startTimer($flyOut); }); // save state $.data($link.get(0),"flyOut", $flyOut); }, error: function() { var defErrorText = "Error"; if ($.isFunction($.getText)) { defErrorText = $.getText("error"); } /*global alert */ alert(defErrorText); } }); } else { if (!$flyOut.is(":visible")) { show($flyOut); // handling mouse out/leave on the link $link.mouseover(function() { mouseOn = true; }).mouseleave(function() { mouseOn = false; startTimer($flyOut); }); } else { hide($flyOut); } } } else { // In Page // create new flyOut? toBindEventHandling = false; if (settings.generateHtml) { flyOutId = contentId+"-flyOut"; $flyOut = $("#"+flyOutId); } else if ($content.length) { toBindEventHandling = true; $flyOut = $content; } if ($flyOut.length === 0 || toBindEventHandling) { // content handling if ($content.length) { // main element mouseout handling $link.unbind("mouseleave").mouseleave(function() { mouseOn = false; startTimer($flyOut); }); if (settings.generateHtml) { $flyOut = $(generateHTML(contentId)); $flyOut.addClass($content.attr("class")); $content.removeAttr("class"); // move content in flyOut $content.after($flyOut); $content.show(); $placeHolder = $(".flyOutContJs", $flyOut); $placeHolder.append($content); } // transparent layer workaround setAlwaysOnTop($flyOut); if (!$flyOut.is(":visible")) { // Handling flyOut types if (settings.inputs) { $inputs = $content.find(":input"); $inputs.each(function() { // Click $(this).unbind("click").click(function() { strFor = $(this).attr("id"); resetActive($inputs); $parent = $(this).parent(); $parent.addClass(settings.itemActiveClassName); label = $parent.find("label[for='"+strFor+"']").text(); $element.text(label); $flyOut.hide(); }); // Mouse hover $(this).parent().find("label:first").hover(function() { $(this).addClass(settings.itemHoverClassName); }, function() { $(this).removeClass(settings.itemHoverClassName); }); if($.browser.msie) { $(this).parent().find("label:first").unbind("click").click(function() { resetActive($inputs); $(this).parent().addClass(settings.itemActiveClassName); $element.text($(this).text()); $flyOut.hide(); }); } }); } else { $links = $flyOut.find("a"); $links.each(function() { $(this).unbind("click").click(function() { currentText = $element.text(); $element.html($element.html().replace(currentText,$(this).text())); resetActive($links); $(this).parent().addClass(settings.itemActiveClassName); window.location.href = $(this).attr("href"); }); }); } show($flyOut); } } } else { // flyOut already generated if (!$flyOut.is(":visible")) { show($flyOut); } else { hide($flyOut); } } } return false; }); } }); }; /***************************************************/ // Function: $.labelOver() // // Developped by: Jean-Francois Payant // // description: Mostly used to place a label over the input text, and when // the focus is on the input text the label toggles hide/show // // requirement: 1) jQuery 1.3.2+ // 2) the