/**************************************************************************************** * This file is part of the "New Nestle Web Application / Framework". * Written by Sogeti India for Nestlé Corporate. * Part of this code has been taken from www.thumbnailscroller.com ****************************************************************************************/ var ImageScroller = function(_imageScrollerParentDivID, _imageScrollerChildDivID) { _imageScrollerParentDivID = getElem(_imageScrollerParentDivID); _imageScrollerChildDivID = getElem(_imageScrollerChildDivID); var prImagePaths = new Array(); var prFadedImagePaths = new Array(); var prScrollerImagePaths = new Array(); var prImageAltText = new Array(); var prImageClicks = new Array(); var prIntroHeading = new Array(); var prIntroText = new Array(); var prAnchorText = new Array(); var prAnchorURL = new Array(); var prMoreBrandsAnchorText = new Array(); var prMoreBrandsAnchorURL = new Array(); var iNumOfThumbsShown = 1; var iNumOfImages; var iImageHighlighted = 0; var bAutoScroll = 0; //0=false, 1=true var iAutoScrollDelay = 2000; var bAutoScrollDirection = 1; //0=back, 1=forward var bAutoReverse = 1; //0=false, 1=true var iScrollType = 1; //0=horizontal, 1=vertical var bEnableThumbBorder = 0; //0=no, 1=yes var bClickOpenType = 0; //0=same window, 1=new window var iImageScrollAmount = 1; //number of images to scroll var objCounterDiv = ""; var objDescriptionDiv = ""; var iSmoothSlideInterval = 3; var iSmoothSlideAmount = 7; var moveTimer; this.THUMB_HEIGHT = 50; this.THUMB_WIDTH = 50; this.THUMB_PADDING = 3; this.IsNextButtonEnabled = false; var thumbHeight = 50; var thumbWidth = 50; var thumbPadding = 3; var CURRENT_THUMB_INDEX = 1; var NEW_REVERSE_OFFSET = 0; var MAX_REVERSE_OFFSET = 0; var NEW_FORWARD_OFFSET = 0; var IS_SCROLLING = false; //* BEGIN FUNCTIONS *// var imgShown; this.setNumOfImageToScroll = function(_NumOfImagesToScroll) { iImageScrollAmount = parseInt(_NumOfImagesToScroll); imgShown = iImageScrollAmount; }; this.setScrollType = function(_iType) { if (_iType == 0) { iScrollType = 0; } else { iScrollType = 1; } }; this.setScrollSpeed = function(_iSpeed) { if (_iSpeed > 0 || _iSpeed < 1000) { iSmoothSlideInterval = _iSpeed; } else { iSmoothSlideInterval = 7; } }; this.setScrollAmount = function(_iAmount) { if (_iAmount > 0 || _iAmount < 1000) { iSmoothSlideAmount = _iAmount; } else { iSmoothSlideAmount = 7; } }; this.setClickOpenType = function(_openType) { if (_openType == 0 || _openType == 1) { bClickOpenType = _openType; } }; this.enableThumbBorder = function(_boolean) { bEnableThumbBorder = _boolean; }; this.setThumbsShown = function(_newNumOfThumbsShown) { iNumOfThumbsShown = parseInt(_newNumOfThumbsShown); }; this.addThumbnail = function(_thumbnailURL, _thumbnailFadedURL , _fullClickURL, _title, _introHeading, _introText, _anchorText, _anchorURL,_morebrandsText,_morebrandsAnchor) { prImagePaths[prImagePaths.length] = _thumbnailURL; prFadedImagePaths[prFadedImagePaths.length] = _thumbnailFadedURL; prScrollerImagePaths[prScrollerImagePaths.length] = _thumbnailFadedURL; prImageClicks[prImageClicks.length] = _fullClickURL; prImageAltText[prImageAltText.length] = _title; prIntroHeading[prIntroHeading.length] = _introHeading; prIntroText[prIntroText.length] = _introText; prAnchorText[prAnchorText.length] = _anchorText; prAnchorURL[prAnchorURL.length] = _anchorURL; prMoreBrandsAnchorText[prMoreBrandsAnchorText.length] = _morebrandsText; prMoreBrandsAnchorURL[prMoreBrandsAnchorURL.length] = _morebrandsAnchor; }; this.setThumbnailHeight = function(_newThumbHeight) { this.THUMB_HEIGHT = _newThumbHeight; thumbHeight = _newThumbHeight; }; this.getThumbnailHeight = function() { return this.THUMB_HEIGHT; }; this.setThumbnailWidth = function(_newThumbWidth) { this.THUMB_WIDTH = _newThumbWidth; thumbWidth = _newThumbWidth; }; this.getThumbnailWidth = function() { return this.THUMB_WIDTH; }; this.setThumbnailPadding = function(_newThumbPadding) { this.THUMB_PADDING = _newThumbPadding; thumbPadding = _newThumbPadding; }; this.getThumbnailPadding = function() { return THUMB_PADDING; }; this.setNextButtonEnabled = function(_enable) { this.IsNextButtonEnabled = _enable; }; this.getNextButtonEnabled = function() { return this.IsNextButtonEnabled; }; this.getCurrentThumbIndex = function() { return CURRENT_THUMB_INDEX; }; this.getThumbnailCount = function() { return iNumOfImages; }; this.renderScroller = function() { iNumOfImages = prScrollerImagePaths.length; if (iNumOfThumbsShown > iNumOfImages) { iNumOfThumbsShown = iNumOfImages; } iImageHighlighted = Math.floor(Math.random() * iNumOfThumbsShown) prScrollerImagePaths = prFadedImagePaths.slice(0,prFadedImagePaths.length); prScrollerImagePaths[iImageHighlighted] = prImagePaths[iImageHighlighted]; var element = getElem("isFlowersImageRow"); if (element != null) { var elemCount = 0; while (element.firstChild) { element.removeChild(element.firstChild); elemCount++; } } MAX_REVERSE_OFFSET = 0 - (iNumOfImages * this.THUMB_WIDTH); if (this.THUMB_PADDING > 0) { MAX_REVERSE_OFFSET = MAX_REVERSE_OFFSET - (iNumOfImages * (this.THUMB_PADDING * 2)); MAX_REVERSE_OFFSET = MAX_REVERSE_OFFSET; } if (bEnableThumbBorder == 1) { MAX_REVERSE_OFFSET = MAX_REVERSE_OFFSET - (iNumOfImages * 4); } if (iScrollType == 0) { _imageScrollerParentDivID.style.width = (this.THUMB_WIDTH * iNumOfThumbsShown) + (iNumOfThumbsShown * (this.THUMB_PADDING * 2)) + "px"; if (bEnableThumbBorder == 1) { _imageScrollerParentDivID.style.width = (parseInt(_imageScrollerParentDivID.style.width) + (iNumOfThumbsShown * 4)) + "px"; } _imageScrollerParentDivID.style.height = this.THUMB_HEIGHT + 10 + "px"; if (bEnableThumbBorder == 1) { _imageScrollerParentDivID.style.height = (parseInt(_imageScrollerParentDivID.style.height) + 4) + "px"; } _imageScrollerChildDivID.style.width = (this.THUMB_WIDTH * iNumOfImages) + (iNumOfImages * (this.THUMB_PADDING * 2)) + "px"; if (bEnableThumbBorder == 1) { _imageScrollerChildDivID.style.width = (parseInt(_imageScrollerChildDivID.style.width) + (iNumOfImages * 4)) + "px"; } } else if (iScrollType == 1) { _imageScrollerParentDivID.style.width = (this.THUMB_WIDTH) + ((this.THUMB_PADDING * 2)) + "px"; if (bEnableThumbBorder == 1) { _imageScrollerParentDivID.style.width = (parseInt(_imageScrollerParentDivID.style.width) + (4)) + "px"; } _imageScrollerParentDivID.style.height = (this.THUMB_HEIGHT * iNumOfThumbsShown) + (iNumOfThumbsShown * (this.THUMB_PADDING * 2)) + "px"; if (bEnableThumbBorder == 1) { _imageScrollerParentDivID.style.height = (parseInt(_imageScrollerParentDivID.style.height) + (iNumOfThumbsShown * 4)) + "px"; } _imageScrollerChildDivID.style.width = (this.THUMB_WIDTH) + (this.THUMB_PADDING * 2) + "px"; if (bEnableThumbBorder == 1) { _imageScrollerChildDivID.style.width = (parseInt(_imageScrollerChildDivID.style.width) + 4) + "px"; } } var oHref; var oImage; for (i = 0; i < iNumOfImages; i++) { oHref = document.createElement("a"); oHref.title = prImageAltText[i]; oHref.href = "#"; oHref.onclick = showImage; if (oHref.captureEvents) oHref.captureEvents(Event.CLICK); oImage = document.createElement("img"); oImage.id = "imgThumbnail" + i; oImage.name = prImageClicks[i]; oImage.src = prScrollerImagePaths[i]; // alert(oImage.src); oImage.alt = prImageAltText[i]; oImage.border = 0; oImage.width = this.THUMB_WIDTH; oImage.height = this.THUMB_HEIGHT; oImage.style.paddingLeft = this.THUMB_PADDING + "px"; oImage.style.paddingRight = this.THUMB_PADDING + "px"; oImage.style.paddingBottom = "0px"; oImage.style.paddingTop = "0px"; //oImage..style.z-index = 0; oHref.appendChild(oImage); _imageScrollerChildDivID.appendChild(oHref); } // if (iImageHighlighted > iNumOfThumbsShown - 1) // { // var iCount = Math.floor (iImageHighlighted / iNumOfThumbsShown) // for(var idx = 0; idx < iCount; idx++) // { // this.scrollForward(); // } // } if (imgShown <= iImageScrollAmount) { var prevButton = getElem("isFlowersPreviousButton"); prevButton.disabled = true; prevButton.src = "img/Brands/prev_gray.gif"; } var totalImg = prScrollerImagePaths.length; this.setNextButtonEnabled(imgShown < totalImg); return false; }; this.showRandomImage = function() { var BrandHome_BG = getElem("BrandHome_BG"); BrandHome_BG.style.backgroundImage = 'url(' + prImageClicks[iImageHighlighted] + ')'; var blockGreyHeader = getElem("HeaderSplashScreen"); blockGreyHeader.innerHTML = prImageAltText[iImageHighlighted]; var CategoryHeaderText = getElem("CategoryHeaderText"); CategoryHeaderText.innerHTML = prIntroHeading[iImageHighlighted]; var CategoryMainText = getElem("CategoryMainText"); CategoryMainText.innerHTML = prIntroText[iImageHighlighted]; var linkBrand = getElem("linkBrand"); linkBrand.innerHTML = prAnchorText[iImageHighlighted]; linkBrand.href = prAnchorURL[iImageHighlighted]; var linkOtherBrands = getElem("linkOtherBrands"); linkOtherBrands.innerHTML = prMoreBrandsAnchorText[iImageHighlighted]; linkOtherBrands.href = prMoreBrandsAnchorURL[iImageHighlighted]; } this.scrollReverse = function() { var prevButton = getElem("isFlowersPreviousButton"); prevButton.disabled = true; var nextButton = getElem("isFlowersNextButton"); nextButton.disabled = true; _origOffset = parseInt(_imageScrollerChildDivID.style.left); _currentOffset = parseInt(_imageScrollerChildDivID.style.left); _newOffset = _currentOffset + (this.THUMB_WIDTH * iImageScrollAmount); if (this.THUMB_PADDING > 0) { _newOffset = _newOffset + (this.THUMB_PADDING * (2 * iImageScrollAmount)); } if (bEnableThumbBorder == 1) { _newOffset = _newOffset + 4; } if (_newOffset > 0) { _newOffset = 0; } if(_currentOffset > (_origOffset - (this.THUMB_WIDTH * iImageScrollAmount))) { if (IS_SCROLLING == false) { NEW_REVERSE_OFFSET = _newOffset; moveScrollerRight(); } } }; this.scrollForward = function() { var prevButton = getElem("isFlowersPreviousButton"); prevButton.disabled = true; var nextButton = getElem("isFlowersNextButton"); nextButton.disabled = true; _origOffset = parseInt(_imageScrollerChildDivID.style.left); _currentOffset = parseInt(_imageScrollerChildDivID.style.left); var noOfImagesScrolled = (CURRENT_THUMB_INDEX * iImageScrollAmount) + iImageScrollAmount; if(noOfImagesScrolled < iNumOfImages) { noOfImagesScrolled = iImageScrollAmount; } else { noOfImagesScrolled = iImageScrollAmount - (noOfImagesScrolled - iNumOfImages); } _newOffset = _currentOffset - (this.THUMB_WIDTH * noOfImagesScrolled); if (this.THUMB_PADDING > 0) { _newOffset = _newOffset - ((2 * noOfImagesScrolled) * (this.THUMB_PADDING)); } if (bEnableThumbBorder == 1) { _newOffset = _newOffset - 4; } if (IS_SCROLLING == false && _newOffset >= MAX_REVERSE_OFFSET) { NEW_FORWARD_OFFSET = _newOffset; moveScrollerLeft(); } }; this.scrollEnd = function() { if (IS_SCROLLING == false) { NEW_FORWARD_OFFSET = MAX_REVERSE_OFFSET; CURRENT_THUMB_INDEX = iNumOfImages - iNumOfThumbsShown; moveScrollerLeft(); } }; this.scrollBegin = function() { if (IS_SCROLLING == false) { NEW_REVERSE_OFFSET = 0; CURRENT_THUMB_INDEX = 2; moveScrollerRight(); } }; this.updateCurrentCount = function() { getElem(objCounterDiv).innerHTML = CURRENT_THUMB_INDEX + "/" + iNumOfImages; }; moveScrollerRight = function() { _ElementObj = _imageScrollerChildDivID; _currentOffset = parseInt(_ElementObj.style.left); if (_currentOffset < NEW_REVERSE_OFFSET && (_currentOffset + iSmoothSlideAmount) <= NEW_REVERSE_OFFSET) { _ElementObj.style.left = _currentOffset + iSmoothSlideAmount + "px"; IS_SCROLLING = true; moveTimer = window.setTimeout(moveScrollerRight, iSmoothSlideInterval); } else if (_currentOffset < NEW_REVERSE_OFFSET) { _ElementObj.style.left = _currentOffset + 1 + "px"; IS_SCROLLING = true; moveTimer = window.setTimeout(moveScrollerRight, iSmoothSlideInterval); } else { IS_SCROLLING = false; CURRENT_THUMB_INDEX--; window.clearTimeout(moveTimer); var nextButton = getElem("isFlowersNextButton"); nextButton.disabled = false; nextButton.src = "img/Brands/next.gif"; imgShown -= iImageScrollAmount; var prevButton = getElem("isFlowersPreviousButton"); prevButton.disabled = false; EnableDisableScrollButtons(); } }; moveScrollerLeft = function() { _ElementObj = _imageScrollerChildDivID; _currentOffset = parseInt(_ElementObj.style.left); if (_currentOffset > NEW_FORWARD_OFFSET && (_currentOffset - iSmoothSlideAmount) >= NEW_FORWARD_OFFSET) { _ElementObj.style.left = _currentOffset - iSmoothSlideAmount + "px"; IS_SCROLLING = true; moveTimer = window.setTimeout(moveScrollerLeft, iSmoothSlideInterval); } else if (_currentOffset > NEW_FORWARD_OFFSET) { _ElementObj.style.left = _currentOffset - 1 + "px"; IS_SCROLLING = true; moveTimer = window.setTimeout(moveScrollerLeft, iSmoothSlideInterval); } else { IS_SCROLLING = false; CURRENT_THUMB_INDEX++; window.clearTimeout(moveTimer); var prevButton = getElem("isFlowersPreviousButton"); prevButton.disabled = false; prevButton.src = "img/Brands/prev.gif"; imgShown += iImageScrollAmount; var nextButton = getElem("isFlowersNextButton"); nextButton.disabled = false; EnableDisableScrollButtons(); } }; function addAnEvent(_obj, _eventName, _functionName) { if (window.addEventListener) { _obj.addEventListener(_eventName, _functionName, false); } else { _obj.attachEvent("on" + _eventName, _functionName); } }; function getElem(_elemID) { return document.getElementById(_elemID); }; function showImage(e) { var element; if(!window.event) { element = e.target || window.event.srcElement; } else { element = window.event.srcElement; } var dvSplashScreen = getElem("BrandHome_BG"); dvSplashScreen.style.backgroundImage = 'url(' + element.name + ')'; for (var i=0; i= totalImg) { var nextButton = getElem("isFlowersNextButton"); if(nextButton != null) { nextButton.disabled = true; nextButton.src = "img/Brands/next_gray.gif"; } } }; };