/* CLIQUE */
/* Item Widget Enhancements Pattern Javascript
----------------------------------------------------------------------------- */
(function($) {
$.fn.cliqueItemWidget = function(parameters) {
var defaults = {
checkStock: true,
filterPhotos: true,
pressure: true,
inlineSizes: true,
browser: 'thumbnails',
viewer: true,
preview: false,
removeEmptyThumbs: true,
slideshowFx: 'fade',
slideshowSpeed: 'slow',
slideshowTimeout: 4000,
loupeWidth: '260',
loupeHeight: '694',
loupeOffsetX: '0',
loupeOffsetY: '0',
loupePosition: 'left',
debug: false
};
var parameters = $.extend(defaults, parameters);
/* PRESERVE CHAINING
----------------------------------------------------------------------------- */
return this.each(function(index) {
var $this = $(this);
/* DEBUG FUNCTIONS
----------------------------------------------------------------------------- */
if (parameters.debug === true) {
alert('CliqueItemWidget Fired');
}
/* FIRE PHOTOS FUNCTIONS
----------------------------------------------------------------------------- */
photos();
/* UNHIDE AFTER PAGE LOAD
----------------------------------------------------------------------------- */
$('div.widget-item .purchase').show();
/* STYLES - SEGMENT OPTIONS / FILTER PHOTOS
----------------------------------------------------------------------------- */
var $dropdown = $this.find('label.size select');
$('div.widget-item div.styles li').each(function(index){
var style = $(this).children('input').attr('id');
var sizes = $dropdown.find('.' + style);
if (index != '0') {
$dropdown.clone().insertAfter($dropdown).addClass(style).empty().append(sizes).hide().attr('disabled','disabled');
} else {
$dropdown.clone().insertAfter($dropdown).addClass(style).empty().append(sizes);
}
// Hide non-default photo sets
if (parameters.filterPhotos && index != 0) $('ul.photos.' + style).hide();
if (parameters.preview && $('div.widget-item.photos ul.photos.' + style).length > 0) {
/* Show Preview */
function showPreview() {
// Don't preview if the user is currently dragging an enlarged photo
if ($('a.zoom.dragging').length == 0) {
var style = $(this).children('input').val();
// Thumbnails
// Update Label
var label = $(this).children('strong').text();
$(this).parent().siblings().remove('strong');
$('' + label + '').insertAfter($(this).parent().siblings('h4'));
$('div.widget-item.photos ul.photos').hide();
// Show photo list if there is more than one image, or it's a slideshow
if ($('div.widget-item.photos ul.photos.' + style + ' li img').length > 1 || $('div.widget-item.photos').hasClass('slideshow')) {
$('div.widget-item.photos ul.photos.' + style).show();
$('div.widget-item.photos ul.actions').show();
}
// Enlarged Image
var image = $('div.widget-item.photos ul.photos.' + style + ' li.selected a').attr('href');
$('div.widget-item.photos div.enlarged').children('a').hide();
if ($('div.widget-item.photos div.enlarged a[href=' + image + ']').length > 0) {
// Show Enlarged Image
$('div.widget-item.photos div.enlarged a[href=' + image + ']').show();
} else {
// Add Enlarged Image if not Present
$('div.widget-item.photos div.enlarged').prepend('
');
$('div.widget-item.photos div.enlarged').children('a').click(function() { return false; });
// Move Caption
$('div.widget-item.photos ul.photos.' + style + ' li.selected strong').appendTo($('div.widget-item.photos div.enlarged').children('a[href=' + image + ']'));
// Add Zoom Trigger
if ($('div.widget-item.photos ul.photos.' + style + ' li.selected').hasClass('large')) {
$('div.widget-item.photos div.enlarged a[href=' + image + ']').addClass('zoom');
zoom();
}
}
}
}
/* Hide Preview */
function hidePreview() {
// Don't preview if the user is currently dragging an enlarged photo
if ($('a.zoom.dragging').length == 0) {
// Update Label
var label = $(this).parent().children('.selected').children('strong').text();
$(this).parent().siblings().remove('strong');
$('' + label + '').insertAfter($(this).parent().siblings('h4'));
// Show Previously Selected Thumbnails
var style = $(this).children('input').val();
if ($(this).hasClass('selected')) {
if ($('div.widget-item.photos ul.photos.' + style + ' li img').length > 1 && parameters.viewer) {
$('div.widget-item.photos ul.photos.' + style).show().addClass('selected');
}
} else if ($('div.widget-item.photos ul.photos.selected').length > 0) {
$('div.widget-item.photos ul.photos').hide();
// Show photo list if there is more than one image or it's a slideshow
if ($('div.widget-item.photos ul.photos.selected li img').length > 1 || $('div.widget-item.photos').hasClass('slideshow')) {
$('div.widget-item.photos ul.photos.selected').show();
$('div.widget-item.photos ul.actions').show();
}
} else {
$('div.widget-item.photos ul.photos').hide();
// Show photo list if there is more than one image, or it's a slideshow
if ($('div.widget-item.photos ul.photos:first li img').length > 1 || $('div.widget-item.photos').hasClass('slideshow')) {
$('div.widget-item.photos ul.photos:first').show();
$('div.widget-item.photos ul.actions').show();
}
}
// Show Previously Selected Enlarged Image
var selected = $(this).parent().children('li.selected').find('input').val();
var image = $('div.widget-item.photos ul.photos.' + selected + ' li.selected a.thumbnail').attr('href');
$('div.widget-item.photos div.enlarged a').hide();
$('div.widget-item.photos div.enlarged a[href=' + image + ']').show();
}
}
try {
$(this).hoverIntent(showPreview, hidePreview);
} catch(error) {
$(this).hover(showPreview, hidePreview);
}
}
/* STYLES - SELECTION
----------------------------------------------------------------------------- */
function selectStyle() {
/* Item Display */
// $this.find('div.purchase label.email').hide();
$(this).siblings('li').removeClass('selected');
if (parameters.viewer) $(this).addClass('selected');
$(this).children("input").attr('checked', 'checked');
// Update label
var label = $(this).children('strong').text();
$(this).parent().siblings().remove('strong');
$('' + label + '').insertAfter($(this).parent().siblings('h4'));
if ($this.find('div.purchase select').length > 0) {
$this.find('div.purchase select').hide().attr('disabled', 'disabled');
$this.find('div.purchase select.' + style).show().removeAttr('disabled');
}
/* Image Browser */
if ($('div.widget-item.photos ul.photos.' + style).length > 0) {
$('div.widget-item.photos ul.photos').hide().removeClass('selected');
// Show photo list if there is more than one image or it's a slideshow
if ($('div.widget-item.photos ul.photos.' + style + ' li img').length > 1 || $('div.widget-item.photos').hasClass('slideshow')) {
$('div.widget-item.photos ul.photos.' + style).show();
$('div.widget-item.photos ul.actions').show();
}
if (parameters.viewer) {
var image = $('div.widget-item.photos ul.photos.' + style + ' li.selected a').attr('href');
$('div.widget-item.photos div.enlarged > a').hide();
if ($('div.widget-item.photos div.enlarged a[href=' + image + ']').length > 0) {
// Show Enlarged Image
$('div.widget-item.photos div.enlarged a[href=' + image + ']').show();
} else {
// Add Enlarged Image if not Present
$('div.widget-item.photos div.enlarged').prepend('');
$('div.widget-item.photos div.enlarged').children('a').click(function() { return false; });
// Move Caption
if ($('div.widget-item.photos ul.photos.' + style + ' li.selected strong').length > 0) $('div.widget-item.photos ul.photos.' + style + ' li.selected strong').appendTo($('div.widget-item.photos div.enlarged').children('a[href=' + image + ']'));
// Add Zoom Trigger
if ($('div.widget-item.photos ul.photos.' + style + ' li.selected').hasClass('large')) {
$('div.widget-item.photos div.enlarged a[href=' + image + ']').addClass('zoom');
zoom();
}
}
}
}
if ($this.find('div.purchase.preorder').length == 0) checkStock();
}
if (index == 0) $(this).each(selectStyle);
$(this).click(selectStyle);
});
if ($this.find('div.purchase select').length > 1) $dropdown.remove();
/* STOCK CHECK
----------------------------------------------------------------------------- */
$this.find('div.styles ul li:first-child input').attr('checked', 'checked');
$this.find('input.buy').parent().addClass('buy');
$this.find('input.notify').parent().addClass('notify');
if ($this.find('input.preorder').length == 0) {
// $this.find('li.notify').hide();
// $this.find('label.email').hide();
}
function checkStock() {
if ($this.find('div.styles').length > 0 && $this.find('div.purchase select').length > 0) {
var stock = $this.find('div.styles input:checked').val();
} else {
var stock = "options";
}
// Find Selected Option
if ($this.find('div.purchase select').length > 0) {
var option = $this.find('div.purchase select:visible').find('option:selected').val();
} else if ($this.find('div.purchase input').length > 0) {
var option = $this.find('div.styles input:checked').val();
}
// Show Message
if ($this.find('div.purchase.backordered').length > 0) {
var stock = "backordered";
$this.find('div.purchase > strong').show();
} else if ($this.find('div.purchase.preorder').length > 0) {
var stock = "preorder";
$this.find('div.purchase > strong').show();
} else if ($this.find('div.purchase.discontinued').length > 0) {
var stock = "discontinued";
$this.find('div.purchase > strong').show();
} else if (parameters.checkStock == false) {
$this.find('div.purchase > strong').text('In Stock');
}
// Show Stock
if ($this.find('div.purchase select').length > 0 || $this.find('div.styles').length > 0) {
var stock = eval(stock + '["' + option + '"]');
$this.find('div.purchase > strong').remove();
$('Stock 0) {
$this.find('div.purchase > strong').text("This item is backordered.").css('display', 'block');
} else {
$this.find('div.purchase > strong').text("Your selection is backordered.").css('display', 'block');
}
} else if (stock == "preorder") {
$this.find('ul.actions, li.buy').show();
$this.find('li.notify, label.email, label.email + br').hide();
$this.find('div.purchase strong').remove();
} else if ($this.find('div.purchase select').length > 0 || $this.find('div.styles').length > 0) {
$this.find('ul.actions, li.buy').show();
$this.find('li.notify, label.email, label.email + br').hide();
if (parameters.pressure == true && stock != 1 && stock < 10) {
$this.find('div.purchase > strong').text("Only " + stock + " are left, buy now!");
} else if (parameters.pressure == true && stock == 1) {
$this.find('div.purchase > strong').text("Only 1 is left, buy now!");
} else if (parameters.checkStock == true) {
$this.find('div.purchase > strong').text(stock + " in stock");
} else {
$this.find('div.purchase > strong').text("In stock").css('display','block');
}
}
}
if ($this.find('div.purchase select').length > 0 && $this.find('div.purchase.preorder').length == 0) {
$this.find('div.purchase select').change(checkStock);
$this.find('div.purchase select').each(checkStock);
} else if ($this.find('div.purchase input[type=radio]').length > 0 && $this.find('div.purchase.preorder').length == 0) {
$this.find('div.purchase input[type=radio]').change(checkStock);
$this.find('div.purchase input:checked').each(checkStock);
} else if ($this.find('div.purchase.preorder').length == 0) {
$this.find('div.purchase').each(checkStock);
}
/* SIZE CHART
----------------------------------------------------------------------------- */
$this.find('a.help.sizes').click(function() {
if (parameters.inlineSizes) {
/* Show Sizes Inline */
if ($('#sizes:visible').length > 0) {
// Hide Chart
$('#sizes').hide();
$('div.widget-item.photos div.enlarged, div.widget-item.photos.slideshow').show();
$(this).text('Help with Sizes');
} else if ($('#sizes').length > 0) {
// Show Chart
$('#sizes').show();
$('div.widget-item.photos div.enlarged, div.widget-item.photos.slideshow').hide();
$(this).text('Hide Sizes');
} else {
// Load Chart
$(this).text('Loading...');
var href = $(this).attr('href');
$('div.widget-item.photos div.enlarged, div.widget-item.photos.slideshow').hide();
$('Loading...
').insertBefore($('div.widget-item.photos')).load(href, function() {
$(this).children('div').fadeIn('fast');
$(this).append('- Close Sizing Chart
')
$('#sizes a.close').click(function() {
$('#sizes').hide();
$('div.widget-item.photos div.enlarged, div.widget-item.photos.slideshow').show();
$this.find('a.help.sizes').text('Help with Sizes');
return false;
});
$this.find('a.help.sizes').text('Hide Sizes');
});
}
} else {
/* Show Sizes in Popup */
var href = $(this).attr('href');
window.open(href, 'sizes', 'status=0, toolbar=0, width=600, height=400, scrollbars=1');
}
return false;
});
/* PHOTOS
----------------------------------------------------------------------------- */
function photos() {
if ($('.widget-item.display.photos').length > 0) {
var $photos = $('.widget-item.display.photos');
// Unhide after page load
$photos.find('ul.photos').show();
/* PHOTOS > BROWSER > SLIDESHOW
----------------------------------------------------------------------------- */
if (parameters.browser == "slideshow") {
// Remove Empty Captions (Until Silverback Does This)
$photos.find('ul.photos strong').each(function() {
var caption = $(this).text().replace(/^\s$/, '');
if (!caption) $(this).remove();
});
$photos.addClass('slideshow');
var slideshow = index;
if ($photos.find('ul.actions').length > 0) {
// REMOVE SILVERBACK ACTION PAGING ACTIONS IF PRESENT
$photos.find('ul.actions a.next').parent.remove();
$photos.find('ul.actions a.back').parent.remove();
} else {
// ADD ACTIONS CONTAINER
$photos.append('');
}
var insertion = $photos.children('ul.actions');
// INSERT SLIDESHOW CONTROLS
if ($photos.find('ul.photos img').length > 1 && $('#' + slideshow + '_next').length == 0) {
$('- Next
').prependTo(insertion);
$('- Back
').prependTo(insertion);
}
if (!$photos.hasClass('gallery')) {
$photos.children('ul.photos').each(function() {
$(this).children('li').each(function() {
if ($(this).children('a.enlarge').length > 0) {
var image = $(this).children('a.enlarge').attr('href');
$(this).append('');
$(this).children('a').remove();
} else {
$(this).remove();
}
});
});
}
$photos.children('ul.photos').each(function() {
try {
$(this).cycle({
fx: parameters.slideshowFx,
speed: parameters.slideshowSpeed,
timeout: parameters.slideshowTimeout,
next: '#' + slideshow + '_next',
prev: '#' + slideshow + '_back'
});
} catch (error) {
alert('Error: Missing jQuery Cycle Plugin');
}
});
}
/* PHOTOS > BROWSER > THUMBNAILS
----------------------------------------------------------------------------- */
if (parameters.viewer == true && parameters.browser == "thumbnails") {
/* Initial Setup */
// Remove Empty Captions (Until Silverback Does This)
$photos.find('ul.photos strong').each(function() {
var caption = $(this).text().replace(/^\s$/, '');
if (!caption) $(this).remove();
});
// Remove Empty Thumbnail Rows
if (parameters.removeEmptyThumbs) {
$photos.children('ul.photos').each(function() {
var placeholderCount = $(this).children('li').length;
var thumbnailCount = $(this).children('li:has(img)').length;
// Hide thumbnails if there's only one image
if (thumbnailCount < 2) $(this).hide();
var firstToGo = (Math.ceil(thumbnailCount / 4)) * 4 + 1;
for (i = firstToGo; i <= placeholderCount; i++) $(this).children('li:last-child').remove();
});
}
// Create Enlarged Viewer and Populate
var image = $photos.find('ul.photos:first li:first-child a').attr('href');
$photos.prepend('');
$photos.find('ul.photos:first li:first-child strong').appendTo($photos.children('div.enlarged').children('a[href=' + image + ']'));
var $enlarged = $photos.children('div.enlarged');
if ($photos.find('ul.photos:first li:first-child').hasClass('large')) $enlarged.children('a[href=' + image + ']').addClass('zoom');
$photos.find('div.enlarged a').click(function() { return false; });
// Remove alt Tags from Thumbnails (They interfere with the hover event in Firefox)
$photos.find('img').attr('title', '');
/* Thumbnail Preview */
if (parameters.preview == true) {
// Mouse In
$photos.find('ul.photos a').hover(function() {
// Don't preview if the user is currently dragging an enlarged photo
if ($('a.zoom.dragging').length == 0) {
var image = $(this).attr('href');
// Hide All Enlarged Images
$enlarged.children('a').hide();
if ($enlarged.children('a[href=' + image + ']').length > 0) {
// Show Enlarged Image if Already Exists
$enlarged.children('a[href=' + image + ']').show();
} else {
// Add Enlarged Image if Not Present
$enlarged.prepend('');
$enlarged.children('a').click(function() { return false; });
// Move Caption
if ($(this).siblings('strong').length > 0) $(this).siblings('strong').appendTo($enlarged.children('a[href=' + image + ']'));
// Add Zoom Trigger
if ($(this).parent().hasClass('large')) {
$enlarged.children('a[href=' + image + ']').addClass('zoom');
zoom();
}
}
}
}, function() { });
// Mouse Out
$photos.find('ul.photos').hover(function() { }, function() {
// Show Previously Selected Enlarged Image
var image = $photos.find('ul.photos:visible li.selected a').attr('href');
$enlarged.children('a').hide();
$enlarged.children('a[href=' + image + ']').show();
});
}
/* Thumbnail Click */
$photos.find('ul.photos a').click(function() {
$enlarged.children('a').hide();
var image = $(this).attr('href');
if ($enlarged.children('a[href=' + image + ']').length > 0) {
// Show Enlarged Image if Already Exists
$enlarged.children('a[href=' + image + ']').show();
} else {
// Prepend Enlarged Image if Not Present
$enlarged.prepend('');
$enlarged.children('a').click(function() { return false; });
// Move Caption
if ($(this).siblings('strong').length > 0) $(this).siblings('strong').appendTo($enlarged.children('a[href=' + image + ']'));
// Add Zoom Trigger
if ($(this).parent().hasClass('large')) {
$enlarged.children('a[href=' + image + ']').addClass('zoom');
zoom();
}
}
// Set Selected Thumbnail Class
$(this).parent().siblings().removeClass('selected');
$(this).parent().addClass('selected');
return false;
});
/* Zoom */
$('div.widget-item div.styles li').click(zoom);
zoom();
} else {
// Remove default 'selected' class if there is no viewer
$photos.children('ul.photos').children('li').removeClass('selected');
}
}
}
/* FUNCTION: ZOOM
----------------------------------------------------------------------------- */
function zoom() {
if (parameters.zoom == "loupe") {
try {
var loupeWidth = parseInt(parameters.loupeWidth);
var loupeHeight = parseInt(parameters.loupeHeight);
var loupeOffsetX = parseInt(parameters.loupeOffsetX);
var loupeOffsetY = parseInt(parameters.loupeOffsetY);
$('div.enlarged a.zoom:not(.louped)').jqzoom({
zoomWidth: loupeWidth,
zoomHeight: loupeHeight,
xOffset: loupeOffsetX,
yOffset: loupeOffsetY,
position: parameters.loupePosition,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeoutSpeed: 'fast',
title: false
}).addClass('louped');
} catch(errors) {
alert('Error: Missing JQ Zoom Plugin');
}
} else if (parameters.zoom == "drag") {
try {
$('div.enlarged a.zoom:not(.draggable)').cliqueDragZoom();
} catch(errors) { alert('Error: Missing Clique Drag Zoom Plugin'); }
}
}
/* TOOLTIPS
----------------------------------------------------------------------------- */
if ($this.hasClass('tooltip')) {
$this.find('ul.items > li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
/* FILTER > COLOR
----------------------------------------------------------------------------- */
if ($this.hasClass('filter')) {
if ($this.find('ul.palette > li.all > strong').length > 0) $this.find('ul.palette').addClass('all');
}
/* END PLUG-IN
----------------------------------------------------------------------------- */
});
};
})(jQuery);