(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 += "