/* (c) LoopNet Carousel Version 1.0 */
LNJS.__carousel = true; if (!LNJS.Widget) LNJS.Widget = {}; LNJS.Widget.Carousel = Class.create(); LNJS.Widget.Carousel.prototype = { initialize: function(el, options) { this.__className = "Carousel"; options = (options || {}); if (!document.getElementById(el)) { return; } this.vertical = (options.vertical || false); this.duration = (options.duration || 0.5); this.scroll = (options.scroll || 3); this.skin = (options.skin || 'default'); this.direction = (this.vertical) ? 'vertical' : 'horizontal'; this.classNames = { carousel: (options.classNames && options.classNames.carousel || 'carousel-list carousel-list-' + this.direction), skin: (options.classNames && options.classNames.skin || 'carousel-skin-' + this.skin), container: (options.classNames && options.classNames.container || 'carousel-container carousel-container-' + this.direction), navPrev: (options.classNames && options.classNames.navPrev || 'carousel-prev carousel-prev-' + this.direction), navPrevDisabled: (options.classNames && options.classNames.navPrev || 'carousel-prev carousel-prev-' + this.direction + ' carousel-prev-disabled carousel-prev-disabled-' + this.direction), navNext: (options.classNames && options.classNames.navNext || 'carousel-next carousel-next-' + this.direction), navNextDisabled: (options.classNames && options.classNames.navNext || 'carousel-next carousel-next-' + this.direction + ' carousel-next-disabled carousel-next-disabled-' + this.direction), clip: (options.classNames && options.classNames.clip || 'carousel-clip carousel-clip-' + this.direction), item: (options.classNames && options.classNames.item || 'carousel-item carousel-item-' + this.direction) }; this.doAfterScroll = options.doAfterScroll || function() { return true; }; this.elements = { carousel: document.getElementById(el), skin: document.createElement('div'), container: document.createElement('div'), navPrev: document.createElement('div'), navNext: document.createElement('div'), clip: document.createElement('div') }; this.buildUI(); this.currentPage = 1; this.scrollItems = this.createScrollItems(this.elements.carousel.getElementsByTagName('li')); this.pages = Math.ceil(this.scrollItems.length / this.scroll); this.elements.carousel.style.width = (this.scrollItems.itemWidth * this.scrollItems.length) + 'px'; this.scrollPixels = this.scrollItems.itemWidth * this.scroll; this.locks = { prev: false, next: false }; this.updateButtons(); if (document.getElementById('carouselWrapper')) { document.getElementById('carouselWrapper').style.visibility = 'visible'; } }, buildUI: function(el) { this.elements.carousel.className = this.classNames.carousel; this.elements.skin.className = this.classNames.skin; this.elements.container.className = this.classNames.container; this.elements.clip.className = this.classNames.clip; this.elements.carousel.parentNode.insertBefore(this.elements.skin, this.elements.carousel); this.elements.skin.appendChild(this.elements.container); this.elements.container.appendChild(this.elements.navPrev); this.elements.container.appendChild(this.elements.navNext); this.elements.container.appendChild(this.elements.clip); this.elements.clip.appendChild(this.elements.carousel); var self = this; Event.observe(this.elements.navNext, 'click', function() { self.moveNext() }); Event.observe(this.elements.navPrev, 'click', function() { self.movePrev() }); }, createScrollItems: function(items) { for (var item in items) { if (!isNaN(parseInt(item))) { items[item].className = this.classNames.item; } } items.itemWidth = 0; items.itemWidth += parseInt(items[0].scrollWidth); if (window.getComputedStyle) { items.itemWidth += parseInt(window.getComputedStyle(items[0], "").getPropertyValue("margin-right").replace('px', '')); items.itemWidth += parseInt(window.getComputedStyle(items[0], "").getPropertyValue("margin-left").replace('px', '')); } else if (items[0].currentStyle) { var cs = items[0].currentStyle; items.itemWidth += (isNaN(parseInt(cs.marginRight.replace('px', '')))) ? 0 : parseInt(cs.marginRight.replace('px', '')); items.itemWidth += (isNaN(parseInt(cs.marginLeft.replace('px', '')))) ? 0 : parseInt(cs.marginLeft.replace('px', '')); } if (items.length <= 4) { this.elements.skin.className = this.classNames.skin + ' noscroll'; } return items; }, updateButtons: function() { if (this.currentPage === 1) { this.elements.navPrev.className = this.classNames.navPrevDisabled; this.elements.navNext.className = this.classNames.navNext; this.locks.next = false; this.locks.prev = true; } else if (this.currentPage === this.pages) { this.elements.navPrev.className = this.classNames.navPrev; this.elements.navNext.className = this.classNames.navNextDisabled; this.locks.next = true; this.locks.prev = false; } else { this.elements.navPrev.className = this.classNames.navPrev; this.elements.navNext.className = this.classNames.navNext; this.locks.next = false; this.locks.prev = false; } this.elements.container.style.display = 'block'; this.elements.navPrev.style.display = 'block'; this.elements.navNext.style.display = 'block'; var self = this; this.doAfterScroll({ currentPage: self.currentPage, pages: self.pages }); }, moveNext: function() { var self = this; if (!self.locks.next) { new LNJS.Effect.Move('carousel', { x: (self.vertical) ? 0 : -self.scrollPixels, y: (self.vertical) ? -self.scrollPixels : 0, duration: self.duration, beforeStartInternal: function() { self.locks.prev = true; self.locks.next = true; }, afterFinishInternal: function() { self.currentPage++; self.updateButtons(); } }); } }, movePrev: function() { var self = this; if (!self.locks.prev) { new LNJS.Effect.Move('carousel', { x: (self.vertical) ? 0 : self.scrollPixels, y: (self.vertical) ? self.scrollPixels : 0, duration: self.duration, beforeStartInternal: function() { self.locks.prev = true; self.locks.next = true; }, afterFinishInternal: function() { self.currentPage--; self.updateButtons(); } }); } } }