(function ($) {
    $.fn.slidingGallery = function (options) {
        this.each(function (el) {
            el = $(this); setOptions(el); var centerImage = {}; var rightImage = {}; var leftImage = {}; var rightImageStorage = {}; var leftImageStorage = {}; var gallery = $(this).find('div.marker'); var moreinfo = $(this).find('div.moreinfobutton').css('cursor', 'pointer'); definePositions(this); var lastIndex = 0; var gallerySize = gallery.each(function (i) {
                $(this).attr({ 'index': i, 'prev': (i - 1), 'next': (i + 1) }).css('position', 'absolute'); if (($(this).attr('layout') !== 'portrait') && ($(this).attr('layout') !== 'landscape')) { $(this).attr('layout', options.defaultLayout); }
                lastIndex = i;
            }).hide().size(); var currIndex = 0; while (gallerySize < 4) { var $clone = gallery.filter('[index=' + currIndex + ']').clone().attr({ 'index': lastIndex + 1, 'prev': lastIndex, 'next': lastIndex + 2 }).removeClass(options.startClass); gallery.filter('[index=' + (lastIndex) + ']').after($clone); gallery = gallery.add('img[index=' + (lastIndex + 1) + ']'); lastIndex++; currIndex++; gallerySize++; }
            gallery.filter('[index=' + lastIndex + ']').attr('next', 0); gallery.filter('[index=0]').attr('prev', lastIndex); setCenter(gallery.filter('.' + options.startClass).show()); setLeft(gallery.filter('[index=' + centerImage.image.attr('prev') + ']').show()); setRight(gallery.filter('[index=' + centerImage.image.attr('next') + ']').show()); setLeftStorage(gallery.filter('[index=' + leftImage.image.attr('prev') + ']')); setRightStorage(gallery.filter('[index=' + rightImage.image.attr('next') + ']')); initialPositions(); if (rightImage.image.length > 0) { $(this).find('div.scrollright img').one('click', slideLeft); }
            if (leftImage.image.length > 0) { $(this).find('div.scrollleft img').one('click', slideRight); }
            function slideRight() {
                var liLeft = leftImage.left; var riLeft = rightImage.left; var risLeft = rightImageStorage.left; var leftImg = leftImage.image.find('img.product'); var rightImg = rightImage.image.find('img.product'); var centreImg = centerImage.image.find('img.product'); var leftStorageImg = leftImageStorage.image.find('img.product'); var rightStorageImg = rightImageStorage.image.find('img.product'); var leftbg = leftImage.image.find('img.bg'); var rightbg = rightImage.image.find('img.bg'); var centrebg = centerImage.image.find('img.bg'); var leftStoragebg = leftImageStorage.image.find('img.bg'); var rightStoragebg = rightImageStorage.image.find('img.bg'); var leftOver = leftImage.image.find('div.latestoverlay'); var rightOver = rightImage.image.find('div.latestoverlay'); var centreOver = centerImage.image.find('div.latestoverlay'); var leftStorageOver = leftImageStorage.image.find('div.latestoverlay'); var rightStorageOver = rightImageStorage.image.find('div.latestoverlay'); var newCenterHeight = 0; var newCenterWidth = 0; var newCenterTop = 0; var newCenterLeft = 0; var newRightHeight = 0; var newRightWidth = 0; var newRightTop = 0; var newRightLeft = 0; var newLeftHeight = 0; var newLeftWidth = 0; var newLeftTop = 0; var newLeftLeft = 0; if (options.Iheight == "100%") { var maxImageHeight = 120; var maxImageWidth = 120; var imageTopOffset = 7; var imageLeftOffset = 16; var smallImageFactor = 0.7; var newCenterImg = new Image(); newCenterImg.src = leftImage.image.find('img.product')[0].src; var newRightImg = new Image(); newRightImg.src = centerImage.image.find('img.product')[0].src; var newLeftImg = new Image(); newLeftImg.src = leftImageStorage.image.find('img.product')[0].src; newCenterHeight = newCenterImg.height; newCenterWidth = newCenterImg.width; newCenterTop = ((maxImageHeight - newCenterHeight) / 2) + imageTopOffset; newCenterLeft = ((maxImageWidth - newCenterWidth) / 2) + imageLeftOffset; newRightHeight = newRightImg.height * smallImageFactor; newRightWidth = newRightImg.width * smallImageFactor; newRightTop = (((maxImageHeight - newRightImg.height) / 2) + imageTopOffset) * smallImageFactor; newRightLeft = (((maxImageWidth - newRightImg.width) / 2) + imageLeftOffset) * smallImageFactor; newLeftHeight = newLeftImg.height * smallImageFactor; newLeftWidth = newLeftImg.width * smallImageFactor; newLeftTop = (((maxImageHeight - newLeftImg.height) / 2) + imageTopOffset) * smallImageFactor; newLeftLeft = (((maxImageWidth - newLeftImg.width) / 2) + imageLeftOffset) * smallImageFactor; }
                else { newCenterHeight = options.Iheight; newCenterWidth = options.Iwidth; newRightHeight = options.IheightSmall; newRightWidth = options.IwidthSmall; newLeftHeight = options.IheightSmall; newLeftWidth = options.IwidthSmall; }
                leftImage.image.css({ 'z-index': 10 }); centerImage.image.css({ 'z-index': 5 }); leftImageStorage.image.animate({ 'left': liLeft, 'height': leftImage.height, 'width': leftImage.width, 'opacity': 0.5, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }, options.slideSpeed, 'linear'); leftStorageImg.css({ 'position': 'relative' }); leftStorageImg.animate({ 'left': newLeftLeft, 'top': newLeftTop, 'height': newLeftHeight, 'width': newLeftWidth }, options.slidespeed, 'linear'); leftImage.image.animate({ 'top': centerImage.top, 'left': centerImage.left, 'height': centerImage.height, 'width': centerImage.width, 'opacity': 1, lineHeight: options.lineHeight, fontSize: "1em" }, options.slideSpeed, 'linear'); leftbg.animate({ 'height': centerImage.height, 'width': centerImage.width }, options.slideSpeed, 'linear'); leftImg.css({ "position": "relative" }); leftImg.animate({ 'left': newCenterLeft, 'top': newCenterTop, 'height': newCenterHeight, 'width': newCenterWidth }, options.slideSpeed, 'linear'); leftOver.animate({ "height": 152, "width": 152 }, options.slideSpeed, 'linear'); centerImage.image.animate({ 'top': rightImage.top, 'left': riLeft, 'height': rightImage.height, 'width': rightImage.width, 'opacity': 0.5, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }, options.slideSpeed, 'linear'); centrebg.animate({ 'height': rightImage.height, 'width': rightImage.width }, options.slideSpeed, 'linear'); centreImg.animate({ 'height': newRightHeight, 'width': newRightWidth, 'top': newRightTop, 'left': newRightLeft }, options.slideSpeed, 'linear'); centreOver.css({ 'height': rightImage.height, 'width': rightImage.width }); rightImage.image.animate({ 'left': risLeft, 'opacity': 'hide' }, options.slideSpeed, 'linear'); var id = leftImage.image.find('span.identifier'); moreinfo.unbind().bind('click', function () { window.location.href = options.submitURL + id.html(); }); rightImageStorage.image = rightImage.image; rightImage.image = centerImage.image; centerImage.image = leftImage.image; leftImage.image = leftImageStorage.image; setLeftStorage(gallery.filter('[index=' + leftImageStorage.image.attr('prev') + ']')); if (leftImage.image.length > 0) { el.find('div.scrollleft img').one('click', slideRight); }
                if (rightImage.image.length > 0) { el.find('div.scrollright img').unbind().one('click', slideLeft); } 
            }
            function slideLeft() {
                var liLeft = leftImage.left; var lisLeft = leftImageStorage.left; var riLeft = rightImage.left; var risLeft = rightImageStorage.left; var leftImg = leftImage.image.find('img.product'); var rightImg = rightImage.image.find('img.product'); var centreImg = centerImage.image.find('img.product'); var leftStorageImg = leftImageStorage.image.find('img.product'); var rightStorageImg = rightImageStorage.image.find('img.product'); var leftbg = leftImage.image.find('img.bg'); var rightbg = rightImage.image.find('img.bg'); var centrebg = centerImage.image.find('img.bg'); var leftStoragebg = leftImageStorage.image.find('img.bg'); var rightStoragebg = rightImageStorage.image.find('img.bg'); var leftOver = leftImage.image.find('div.latestoverlay'); var rightOver = rightImage.image.find('div.latestoverlay'); var centreOver = centerImage.image.find('div.latestoverlay'); var leftStorageOver = leftImageStorage.image.find('div.latestoverlay'); var rightStorageOver = rightImageStorage.image.find('div.latestoverlay'); var newCenterHeight = 0; var newCenterWidth = 0; var newCenterTop = 0; var newCenterLeft = 0; var newRightHeight = 0; var newRightWidth = 0; var newRightTop = 0; var newRightLeft = 0; var newLeftHeight = 0; var newLeftWidth = 0; var newLeftTop = 0; var newLeftLeft = 0; if (options.Iheight == "100%") { var maxImageHeight = 120; var maxImageWidth = 120; var imageTopOffset = 7; var imageLeftOffset = 16; var smallImageFactor = 0.7; var newCenterImg = new Image(); newCenterImg.src = rightImage.image.find('img.product')[0].src; var newRightImg = new Image(); newRightImg.src = rightImageStorage.image.find('img.product')[0].src; var newLeftImg = new Image(); newLeftImg.src = centerImage.image.find('img.product')[0].src; newCenterHeight = newCenterImg.height; newCenterWidth = newCenterImg.width; newCenterTop = ((maxImageHeight - newCenterHeight) / 2) + imageTopOffset; newCenterLeft = ((maxImageWidth - newCenterWidth) / 2) + imageLeftOffset; newRightHeight = newRightImg.height * smallImageFactor; newRightWidth = newRightImg.width * smallImageFactor; newRightTop = (((maxImageHeight - newRightImg.height) / 2) + imageTopOffset) * smallImageFactor; newRightLeft = (((maxImageWidth - newRightImg.width) / 2) + imageLeftOffset) * smallImageFactor; newLeftHeight = newLeftImg.height * smallImageFactor; newLeftWidth = newLeftImg.width * smallImageFactor; newLeftTop = (((maxImageHeight - newLeftImg.height) / 2) + imageTopOffset) * smallImageFactor; newLeftLeft = (((maxImageWidth - newLeftImg.width) / 2) + imageLeftOffset) * smallImageFactor; }
                else { newCenterHeight = options.Iheight; newCenterWidth = options.Iwidth; newRightHeight = options.IheightSmall; newRightWidth = options.IwidthSmall; newLeftHeight = options.IheightSmall; newLeftWidth = options.IwidthSmall; }
                rightImageStorage.image.animate({ 'left': riLeft, 'height': rightImage.height, 'width': rightImage.width, 'opacity': 0.5, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }, options.slideSpeed, 'linear'); rightStorageImg.css({ 'position': 'relative' }); rightStorageImg.animate({ 'left': newRightLeft, 'top': newRightTop, 'height': newRightHeight, 'width': newRightWidth }, options.slidespeed, 'linear'); rightImage.image.animate({ 'top': centerImage.top, 'left': centerImage.left, 'height': centerImage.height, 'width': centerImage.width, 'opacity': 1, lineHeight: options.lineHeight, fontSize: "1em" }, options.slideSpeed, 'linear'); rightOver.animate({ "height": 152, "width": 152 }, options.slideSpeed, 'linear'); rightbg.animate({ 'height': centerImage.height, 'width': centerImage.width }, options.slideSpeed, 'linear'); rightImg.css({ "position": "relative" }); rightImg.animate({ 'left': newCenterLeft, 'top': newCenterTop, 'height': newCenterHeight, 'width': newCenterWidth }, options.slideSpeed, 'linear'); centerImage.image.animate({ 'top': leftImage.top, 'left': liLeft, 'height': leftImage.height, 'width': leftImage.width, 'opacity': 0.5, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }, options.slideSpeed, 'linear'); centrebg.animate({ 'height': leftImage.height, 'width': leftImage.width }, options.slideSpeed, 'linear'); centreImg.animate({ 'height': newLeftHeight, 'width': newLeftWidth, 'top': newLeftTop, 'left': newLeftLeft }, options.slideSpeed, 'linear'); centreOver.css({ 'height': leftImage.height, 'width': leftImage.width }); leftImage.image.animate({ 'left': lisLeft, 'opacity': 'hide' }, options.slideSpeed, 'linear'); var id = rightImage.image.find('span.identifier'); moreinfo.unbind().bind('click', function () { window.location.href = options.submitURL + id.html(); }); rightImage.image.css({ 'z-index': 10 }); centerImage.image.css({ 'z-index': 5 }); leftImageStorage.image = leftImage.image; leftImage.image = centerImage.image; centerImage.image = rightImage.image; rightImage.image = rightImageStorage.image; setRightStorage(gallery.filter('[index=' + rightImageStorage.image.attr('next') + ']')); if (leftImage.image.length > 0) { el.find('div.scrollleft img').one('click', slideRight); }
                if (rightImage.image.length > 0) { el.find('div.scrollright img').unbind().one('click', slideLeft); } 
            }
            function initialPositions() { var liLeft = leftImage.left; var riLeft = rightImage.left; var risLeft = rightImageStorage.left; var leftImg = leftImage.image.find('img.product'); var rightImg = rightImage.image.find('img.product'); var centreImg = centerImage.image.find('img.product'); var leftStorageImg = leftImageStorage.image.find('img.product'); var rightStorageImg = rightImageStorage.image.find('img.product'); var leftbg = leftImage.image.find('img.bg'); var rightbg = rightImage.image.find('img.bg'); var centrebg = centerImage.image.find('img.bg'); var leftStoragebg = leftImageStorage.image.find('img.bg'); var rightStoragebg = rightImageStorage.image.find('img.bg'); var leftOver = leftImage.image.find('div.latestoverlay'); var rightOver = rightImage.image.find('div.latestoverlay'); var centreOver = centerImage.image.find('div.latestoverlay'); var leftStorageOver = leftImageStorage.image.find('div.latestoverlay'); var rightStorageOver = rightImageStorage.image.find('div.latestoverlay'); var newCenterHeight = 0; var newCenterWidth = 0; var newCenterTop = 0; var newCenterLeft = 0; var newRightHeight = 0; var newRightWidth = 0; var newRightTop = 0; var newRightLeft = 0; var newLeftHeight = 0; var newLeftWidth = 0; var newLeftTop = 0; var newLeftLeft = 0; if (options.Iheight == "100%") { var maxImageHeight = 120; var maxImageWidth = 120; var imageTopOffset = 7; var imageLeftOffset = 16; var smallImageFactor = 0.7; var newCenterImg = new Image(); newCenterImg.src = centerImage.image.find('img.product')[0].src; var newRightImg = new Image(); newRightImg.src = rightImage.image.find('img.product')[0].src; var newLeftImg = new Image(); newLeftImg.src = leftImage.image.find('img.product')[0].src; newCenterHeight = newCenterImg.height; newCenterWidth = newCenterImg.width; newCenterTop = ((maxImageHeight - newCenterHeight) / 2) + imageTopOffset; newCenterLeft = ((maxImageWidth - newCenterWidth) / 2) + imageLeftOffset; newRightHeight = newRightImg.height * smallImageFactor; newRightWidth = newRightImg.width * smallImageFactor; newRightTop = (((maxImageHeight - newRightImg.height) / 2) + imageTopOffset) * smallImageFactor; newRightLeft = (((maxImageWidth - newRightImg.width) / 2) + imageLeftOffset) * smallImageFactor; newLeftHeight = newLeftImg.height * smallImageFactor; newLeftWidth = newLeftImg.width * smallImageFactor; newLeftTop = (((maxImageHeight - newLeftImg.height) / 2) + imageTopOffset) * smallImageFactor; newLeftLeft = (((maxImageWidth - newLeftImg.width) / 2) + imageLeftOffset) * smallImageFactor; centreImg.css({ 'position': 'relative', 'top': newCenterTop, 'left': newCenterLeft, 'height': newCenterHeight, 'width': newCenterWidth }); leftImg.css({ 'position': 'relative', 'top': newLeftTop, 'left': newLeftLeft, 'height': newLeftHeight, 'width': newLeftWidth }); rightImg.css({ 'position': 'relative', 'top': newRightTop, 'left': newRightLeft, 'height': newRightHeight, 'width': newRightWidth }); } }
            function setRightStorage(image) { rightImageStorage.image = image; var img = rightImageStorage.image.find('img.product'); var bg = rightImageStorage.image.find('img.bg'); var over = rightImageStorage.image.find('div.latestoverlay'); rightImageStorage.image.hide().css({ 'top': rightImageStorage.top, 'height': rightImageStorage.height, 'width': rightImageStorage.width, 'left': rightImageStorage.left, 'z-index': 1, 'opacity': 0.1, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }); bg.css({ 'height': rightImageStorage.height, 'width': rightImageStorage.width }); over.css({ 'height': rightImageStorage.height, 'width': rightImageStorage.width }); img.css({ 'height': options.IheightSmall }); }
            function setLeftStorage(image) { leftImageStorage.image = image; var img = leftImageStorage.image.find('img.product'); var bg = leftImageStorage.image.find('img.bg'); var over = leftImageStorage.image.find('div.latestoverlay'); leftImageStorage.image.hide().css({ 'top': leftImageStorage.top, 'height': leftImageStorage.height, 'width': leftImageStorage.width, 'left': leftImageStorage.left, 'z-index': 1, 'opacity': 0.1, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }); bg.css({ 'height': leftImageStorage.height, 'width': leftImageStorage.width }); over.css({ 'height': leftImageStorage.height, 'width': leftImageStorage.width }); img.css({ 'height': options.IheightSmall }); }
            function setCenter(image) { centerImage.image = image; var img = centerImage.image.find('img.product'); var bg = centerImage.image.find('img.bg'); var over = centerImage.image.find('div.latestoverlay'); var id = centerImage.image.find('span.identifier'); centerImage.image.css({ 'top': centerImage.top, 'left': centerImage.left, 'height': centerImage.height, 'width': centerImage.width, 'z-index': 10 }); moreinfo.bind('click', function () { window.location.href = options.submitURL + id.html(); }); bg.css({ 'height': centerImage.height, 'width': centerImage.width }); over.css({ 'height': centerImage.height, 'width': centerImage.width }); img.css({ 'height': options.Iheight }); }
            function setRight(image) { rightImage.image = image; var img = rightImage.image.find('img.product'); var bg = rightImage.image.find('img.bg'); var over = rightImage.image.find('div.latestoverlay'); rightImage.image.css({ 'top': rightImage.top, 'height': rightImage.height, 'width': rightImage.width, 'left': rightImage.left, 'z-index': 1, 'opacity': 0.5, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }); bg.css({ 'height': rightImage.height, 'width': rightImage.width }); over.css({ 'height': rightImage.height, 'width': rightImage.width }); img.css({ 'height': options.IheightSmall }); }
            function setLeft(image) { leftImage.image = image; var img = leftImage.image.find('img.product'); var bg = leftImage.image.find('img.bg'); var over = leftImage.image.find('div.latestoverlay'); leftImage.image.css({ 'top': leftImage.top, 'height': leftImage.height, 'width': leftImage.width, 'left': leftImage.left, 'z-index': 1, 'opacity': 0.5, lineHeight: options.lineHeightSmall, fontSize: options.fontSmall }); bg.css({ 'height': leftImage.height, 'width': leftImage.width }); over.css({ 'height': leftImage.height, 'width': leftImage.width }); img.css({ 'height': options.IheightSmall }); }
            function definePositions() { centerImage.height = Math.round(options.Cheight); centerImage.width = Math.round(options.Cwidth); centerImage.top = Math.round(options.Ctop); centerImage.left = Math.round(options.Cleft); leftImage.height = Math.round(options.Lheight); leftImage.width = Math.round(options.Lwidth); leftImage.top = Math.round(options.Ltop); leftImage.left = Math.round(options.Lleft); rightImage.height = Math.round(options.Rheight); rightImage.width = Math.round(options.Rwidth); rightImage.top = Math.round(options.Rtop); rightImage.left = Math.round(options.Rleft); leftImageStorage.height = Math.round(options.Lheight); leftImageStorage.width = Math.round(options.Lwidth); leftImageStorage.top = Math.round(options.Ltop); leftImageStorage.left = Math.round(-options.Lwidth); rightImageStorage.height = Math.round(options.Rheight); rightImageStorage.width = Math.round(options.Rwidth); rightImageStorage.top = Math.round(options.Rtop); rightImageStorage.left = Math.round(options.Rleft + options.Rwidth); } 
        }); function setOptions(el) { options = $.extend({}, $.fn.slidingGallery.defaults, el.data('my_plugin:options'), options); el.data('my_plugin:options', options); }
        return this;
    }; $.fn.slidingGallery.defaults = { Cheight: 152, Cwidth: 152, Cleft: 58, Ctop: 35, Lheight: 106, Lwidth: 106, Lleft: 10, Ltop: 60, Rheight: 106, Rwidth: 106, Rleft: 150, Rtop: 60, Lshrink: function (dimension) { return dimension * 0.75; }, Lzoom: function (dimension) { return dimension * 2; }, Pheight: 400, Pwidth: 300, Pshrink: function (dimension) { return dimension * 0.75; }, Pzoom: function (dimension) { return dimension * 2; }, defaultLayout: 'landscape', startClass: 'start', slideSpeed: 500, zoomSpeed: 'fast', gutterWidth: -50, Iwidth: 99, Iheight: 92, IheightSmall: 45, IwidthSmall: 60, Itop: 100, ItopSmall: 120, fontSmall: "0.68em", lineHeightSmall: "10px", lineHeight: "14px", submitURL: 'PLPageBuilder.asp?id=20&method=mViewProduct&productid=' };
})(jQuery);