/* *------------------------------------------------------------------------------------------------------------------------------- * Double Hover Background Arrow function creates two '>' shaped arrows with normal, hover, and click states. * * A background is added with the potential for rounded corners. * *=============================================================================================================================== * ID (@String) = The id that will be used to name the arrow ex: 'next'. * * Class (@String) = The class name of the arrow ex: 'arrowID'. * * arrowBackgroundWidth (@Number) = The width of the background ex: 30. * * arrowBackgroundHeight (@Number) = The height of the background ex 14. * * width (@Number) = The width of a single arrow ex: 8. * * height (@Number) = The height of a single arrow ex: 5. * * arrowBackgroundRounding (@String) = The border-radius of the background ex '0px 0px 6px 0px'. * * arrowBackgroundColour (@Array) = The color of the background for each state (normal, hover, click) ex: '#000000'. * * opacity (@Number) = The starting opacity of the arrow ex: .8. * * hoverOpacity (@Number) = The opacity that will become on hover ex: 1. * * arrowX (@Number) = The 'x' background position of the image sprite. * * arrowY (@Number) = The 'y' background position of the image sprite. * *******************************************************<== NOTES ==>************************************************************ ******************************************************************************************************************************** * @author Chris Brenner * @date Nov 8, 2013 * @version 1.0 * @modify_by Chris Brenner * @modify_date May 1 2014 * Updated May 1 2014 by Chris: Refactored class to use sprite images instead of canvas tag. *------------------------------------------------------------------------------------------------------------------------------- */ // Colour variables needed for state changes. var _arrowBackgroundColour; var _arrowBackgroundHoverColour; var _arrowBackgroundClickColour; var doubleHoverBackgroundArrow = function(ID, Class, arrowBackgroundWidth, arrowBackgroundHeight, arrowWidth, arrowHeight, arrowBackgroundRounding, arrowBackgroundColour, opacity, hoverOpacity, arrowX, arrowY) { // Position the arrow inside the background. var centerArrowX = Math.floor((arrowBackgroundWidth - arrowWidth) / 2); var centerArrowY = Math.ceil((arrowBackgroundHeight - arrowHeight) / 2); // Colours used for state changes. _arrowBackgroundColour = arrowBackgroundColour[0]; _arrowBackgroundHoverColour = arrowBackgroundColour[1]; _arrowBackgroundClickColour = arrowBackgroundColour[2]; // Create the background and arrow. var arrowBackground = document.createElement('div'); arrowBackground.setAttribute('id', ID); arrowBackground.setAttribute('class', Class); var doubleArrows = document.createElement('div'); // Add the arrow to the background container. arrowBackground.appendChild(doubleArrows); // Styles the background. superStyle(arrowBackground, { position: 'absolute', height: arrowBackgroundHeight + 'px', width: arrowBackgroundWidth + 'px', '-moz-border-radius': arrowBackgroundRounding, '-webkit-border-radius': arrowBackgroundRounding, borderRadius: arrowBackgroundRounding, backgroundColor: _arrowBackgroundColour, cursor: 'pointer', zIndex: '5' }); // For a reason I can't determine the height attribute set above is being removed from the cells and needs to be reset. if (ie < 9) { superStyle(arrowBackground, { height: arrowBackgroundHeight + 'px' }); }; // Styles the arrow. superStyle(doubleArrows, { position: 'absolute', top: centerArrowY + 'px', left: centerArrowX + 'px', height: arrowHeight + 'px', width: arrowWidth + 'px', background: 'url(' + SSM_ad_obj['ApCdnDomain'] + '/products/dynamicwebads/adserving/htmlbackup/jstemplate/images/shuffle/shuffle_arrows.png) no-repeat ' + arrowX + 'px ' + arrowY + 'px' }); // Stores some variables to be used by the arrow. this.opacity = opacity; this.hoverOpacity = hoverOpacity; this.dom = arrowBackground; // Adds mouse events to the arrow. this.addMouseListeners(); } // Arrows extend the cell. doubleHoverBackgroundArrow.prototype = new baseCell(); // Changes the constructor to double hover background arrow. doubleHoverBackgroundArrow.prototype.constructor = doubleHoverBackgroundArrow; // Overrides the mouse events of the cell. doubleHoverBackgroundArrow.prototype.hover = function(event) { var self = this; var event = event || window.event; event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //new timeAnimation(self.dom, {opacity: this.hoverOpacity}, 150); self.dom.style.background = _arrowBackgroundHoverColour; } doubleHoverBackgroundArrow.prototype.unHover = function(event) { var self = this; var event = event || window.event; event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //new timeAnimation(self.dom, {opacity: this.opacity}, 150); self.dom.style.background = _arrowBackgroundColour; } doubleHoverBackgroundArrow.prototype.focusState = function(event) { var self = this; var event = event || window.event; event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); self.dom.style.background = _arrowBackgroundClickColour; } doubleHoverBackgroundArrow.prototype.unFocusState = function(event) { var self = this; var event = event || window.event; event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); self.dom.style.background = _arrowBackgroundColour; }