var savedSKU = '';
		var opac = 100;
		var fadetimer = null;
		var msgtimer = null;
		var timer = 1000;
		var ie = (navigator.userAgent.indexOf("MSIE") > 0) ? true:false; 
		var brow = parseInt(jQuery.browser.version, 10);
		
		function showExpressBtn(id, show) {
				var btnContainer = document.getElementById('quickViewBtn_' + id);
				
				if (!btnContainer)
						return;
		 
				if (show) {
						btnContainer.innerHTML = '<img id="btn_' + id + '" src="/layout/images/buttons/quick.png" title="quick view" border="0" style="cursor:pointer;" onmouseover="this.src=\'/layout/images/buttons/quick.png\'" onmousedown="this.src=\'/layout/images/buttons/quick.png\'" onmouseup="this.src=\'/layout/images/buttons/quick.png\'" onclick="showPopUp(\'' + id + '\',\'' + btnContainer.title + '\'); setValue(\'' + id + '\',\'' + btnContainer.title + '\')" />';
				}
		 
				if (!show) {
						btnContainer.innerHTML = '';
				}

				return;
		}
		 
function ajaxFunction() {
	var xmlHttp;

	try {
		xmlHttp = new XMLHttpRequest();
	}
	catch (e) {
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
				alert("Your browser does not support AJAX!");
				return false;
			}
		}
	}
	return xmlHttp;
}

		function mouseEventHandler(mEvent) {
				var id, currentSKU;
				// modified to use class name so that color sorting works...
				// the image id needs to stay consistent for the correct default thumbnail to load...
				if (mEvent.srcElement) {
					if (/^[0-9]+$/.test(mEvent.srcElement.className))
						id = mEvent.srcElement.className;
					else
						id = mEvent.srcElement.id;
				}    
				else if (mEvent.target) {
					if (/^[0-9]+$/.test(mEvent.target.className))
						id = mEvent.target.className;
					else
						id = mEvent.target.id;
				}
			 
				var prod_image = /^[a-zA-Z0-9]+$/.test(id);
				var quickView_image = /^btn_[a-zA-Z0-9]+$/.test(id);
				var quickView_container = /^quickViewBtn_[a-zA-Z0-9]+$/.test(id);
		 
				if (prod_image)
						currentSKU = id;
				else if (quickView_image) {
						var temp = id.split('_');
						currentSKU = temp[1];
				}
				else if (quickView_container) {
						var temp = id.split('_');
						currentSKU = temp[1];
				}
		 
				if (savedSKU != currentSKU)
						showExpressBtn(savedSKU, false)
		 
				if (prod_image || quickView_image || quickView_container) {
						if (prod_image)
								showExpressBtn(id, true);
						savedSKU = currentSKU;
				}
				return;
		} 

		function setValue(sku, color) {
				current_sku = sku;
				current_color = color;
				
				return;
		}

		var Drag = { obj: null, init: function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
		{ o.onmousedown = Drag.start; o.hmode = bSwapHorzRef ? false : true; o.vmode = bSwapVertRef ? false : true; o.root = oRoot && oRoot != null ? oRoot : o; if (o.hmode && isNaN(parseInt(o.root.style.left))) o.root.style.left = "0px"; if (o.vmode && isNaN(parseInt(o.root.style.top))) o.root.style.top = "0px"; if (!o.hmode && isNaN(parseInt(o.root.style.right))) o.root.style.right = "0px"; if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px"; o.minX = typeof minX != 'undefined' ? minX : null; o.minY = typeof minY != 'undefined' ? minY : null; o.maxX = typeof maxX != 'undefined' ? maxX : null; o.maxY = typeof maxY != 'undefined' ? maxY : null; o.xMapper = fXMapper ? fXMapper : null; o.yMapper = fYMapper ? fYMapper : null; o.root.onDragStart = new Function(); o.root.onDragEnd = new Function(); o.root.onDrag = new Function(); }, start: function(e) {
				var o = Drag.obj = this; e = Drag.fixE(e); var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right); o.root.onDragStart(x, y); o.lastMouseX = e.clientX; o.lastMouseY = e.clientY; if (o.hmode) { if (o.minX != null) o.minMouseX = e.clientX - x + o.minX; if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX; } else { if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x; if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x; }
				if (o.vmode) { if (o.minY != null) o.minMouseY = e.clientY - y + o.minY; if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY; } else { if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y; if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y; }
				document.onmousemove = Drag.drag; document.onmouseup = Drag.end; return false;
		}, drag: function(e) {
				e = Drag.fixE(e); var o = Drag.obj; var ey = e.clientY; var ex = e.clientX; var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom); var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right); var nx, ny; if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX); if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX); if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY); if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY); nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1)); ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1)); if (o.xMapper) nx = o.xMapper(y)
				else if (o.yMapper) ny = o.yMapper(x)
				Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px"; Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px"; Drag.obj.lastMouseX = ex; Drag.obj.lastMouseY = ey; Drag.obj.root.onDrag(nx, ny); return false;
		}, end: function()
		{ document.onmousemove = null; document.onmouseup = null; Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"])); Drag.obj = null; }, fixE: function(e)
		{ if (typeof e == 'undefined') e = window.event; if (typeof e.layerX == 'undefined') e.layerX = e.offsetX; if (typeof e.layerY == 'undefined') e.layerY = e.offsetY; return e; }
		};

		var Spry; if (!Spry) Spry = {}; Spry.forwards = 1; Spry.backwards = 2; if (!Spry.Effect) Spry.Effect = {}; Spry.Effect.Transitions = { linearTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; return begin + (time / duration) * change }, sinusoidalTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; return begin + ((-Math.cos((time / duration) * Math.PI) / 2) + 0.5) * change }, squareTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; return begin + Math.pow(time / duration, 2) * change }, squarerootTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; return begin + Math.sqrt(time / duration) * change }, fifthTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; return begin + Math.sqrt((-Math.cos((time / duration) * Math.PI) / 2) + 0.5) * change }, circleTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; var pos = time / duration; return begin + Math.sqrt(1 - Math.pow((pos - 1), 2)) * change }, pulsateTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; return begin + (0.5 + Math.sin(17 * time / duration) / 2) * change }, growSpecificTransition: function(time, begin, change, duration) { if (time > duration) return change + begin; var pos = time / duration; return begin + (5 * Math.pow(pos, 3) - 6.4 * Math.pow(pos, 2) + 2 * pos) * change } }; for (var trans in Spry.Effect.Transitions) { Spry[trans] = Spry.Effect.Transitions[trans] } Spry.Effect.Registry = function() { this.effects = [] }; Spry.Effect.Registry.prototype.getRegisteredEffect = function(element, options) { var a = {}; a.element = Spry.Effect.getElement(element); a.options = options; for (var i = 0; i < this.effects.length; i++) if (this.effectsAreTheSame(this.effects[i], a)) return this.effects[i].effect; return false }; Spry.Effect.Registry.prototype.addEffect = function(effect, element, options) { if (!this.getRegisteredEffect(element, options)) { var len = this.effects.length; this.effects[len] = {}; var eff = this.effects[len]; eff.effect = effect; eff.element = Spry.Effect.getElement(element); eff.options = options } }; Spry.Effect.Registry.prototype.effectsAreTheSame = function(effectA, effectB) { if (effectA.element != effectB.element) return false; var compare = Spry.Effect.Utils.optionsAreIdentical(effectA.options, effectB.options); if (compare) { if (typeof effectB.options.setup == 'function') effectA.options.setup = effectB.options.setup; if (typeof effectB.options.finish == 'function') effectA.options.finish = effectB.options.finish } return compare }; var SpryRegistry = new Spry.Effect.Registry; if (!Spry.Effect.Utils) Spry.Effect.Utils = {}; Spry.Effect.Utils.showError = function(msg) { alert('Spry.Effect ERR: ' + msg) }; Spry.Effect.Utils.showInitError = function(effect) { Spry.Effect.Utils.showError('The ' + effect + ' class can\'t be accessed as a static function anymore. ' + "\n" + 'Please read Spry Effects migration documentation.'); return false }; Spry.Effect.Utils.Position = function() { this.x = 0; this.y = 0; this.units = "px" }; Spry.Effect.Utils.Rectangle = function() { this.width = 0; this.height = 0; this.units = "px" }; Spry.Effect.Utils.intToHex = function(integerNum) { var result = integerNum.toString(16); if (result.length == 1) result = "0" + result; return result }; Spry.Effect.Utils.hexToInt = function(hexStr) { return parseInt(hexStr, 16) }; Spry.Effect.Utils.rgb = function(redInt, greenInt, blueInt) { var intToHex = Spry.Effect.Utils.intToHex; var redHex = intToHex(redInt); var greenHex = intToHex(greenInt); var blueHex = intToHex(blueInt); compositeColorHex = redHex.concat(greenHex, blueHex).toUpperCase(); compositeColorHex = '#' + compositeColorHex; return compositeColorHex }; Spry.Effect.Utils.longColorVersion = function(color) { if (color.match(/^#[0-9a-f]{3}$/i)) { var tmp = color.split(''); var color = '#'; for (var i = 1; i < tmp.length; i++) { color += tmp[i] + '' + tmp[i] } } return color }; Spry.Effect.Utils.camelize = function(stringToCamelize) { if (stringToCamelize.indexOf('-') == -1) { return stringToCamelize } var oStringList = stringToCamelize.split('-'); var isFirstEntry = true; var camelizedString = ''; for (var i = 0; i < oStringList.length; i++) { if (oStringList[i].length > 0) { if (isFirstEntry) { camelizedString = oStringList[i]; isFirstEntry = false } else { var s = oStringList[i]; camelizedString += s.charAt(0).toUpperCase() + s.substring(1) } } } return camelizedString }; Spry.Effect.Utils.isPercentValue = function(value) { var result = false; if (typeof value == 'string' && value.length > 0 && value.lastIndexOf("%") > 0) result = true; return result }; Spry.Effect.Utils.getPercentValue = function(value) { var result = 0; try { result = Number(value.substring(0, value.lastIndexOf("%"))) } catch (e) { Spry.Effect.Utils.showError('Spry.Effect.Utils.getPercentValue: ' + e) } return result }; Spry.Effect.Utils.getPixelValue = function(value) { var result = 0; if (typeof value == 'number') return value; var unitIndex = value.lastIndexOf("px"); if (unitIndex == -1) unitIndex = value.length; try { result = parseInt(value.substring(0, unitIndex), 10) } catch (e) { } return result }; Spry.Effect.Utils.getFirstChildElement = function(node) { if (node) { var childCurr = node.firstChild; while (childCurr) { if (childCurr.nodeType == 1) return childCurr; childCurr = childCurr.nextSibling } } return null }; Spry.Effect.Utils.fetchChildImages = function(startEltIn, targetImagesOut) { if (!startEltIn || startEltIn.nodeType != 1 || !targetImagesOut) return; if (startEltIn.hasChildNodes()) { var childImages = startEltIn.getElementsByTagName('img'); var imageCnt = childImages.length; for (var i = 0; i < imageCnt; i++) { var imgCurr = childImages[i]; var dimensionsCurr = Spry.Effect.getDimensions(imgCurr); targetImagesOut.push([imgCurr, dimensionsCurr.width, dimensionsCurr.height]) } } }; Spry.Effect.Utils.optionsAreIdentical = function(optionsA, optionsB) { if (optionsA == null && optionsB == null) return true; if (optionsA != null && optionsB != null) { var objectCountA = 0; var objectCountB = 0; for (var propA in optionsA) objectCountA++; for (var propB in optionsB) objectCountB++; if (objectCountA != objectCountB) return false; for (var prop in optionsA) { var typeA = typeof optionsA[prop]; var typeB = typeof optionsB[prop]; if (typeA != typeB || (typeA != 'undefined' && optionsA[prop] != optionsB[prop])) return false } return true } return false }; Spry.Effect.Utils.DoEffect = function(effectName, element, options) { if (!options) var options = {}; options.name = effectName; var ef = SpryRegistry.getRegisteredEffect(element, options); if (!ef) { ef = new Spry.Effect[effectName](element, options); SpryRegistry.addEffect(ef, element, options) } ef.start(); return true }; if (!Spry.Utils) Spry.Utils = {}; Spry.Utils.Notifier = function() { this.observers = []; this.suppressNotifications = 0 }; Spry.Utils.Notifier.prototype.addObserver = function(observer) { if (!observer) return; var len = this.observers.length; for (var i = 0; i < len; i++) if (this.observers[i] == observer) return; this.observers[len] = observer }; Spry.Utils.Notifier.prototype.removeObserver = function(observer) { if (!observer) return; for (var i = 0; i < this.observers.length; i++) { if (this.observers[i] == observer) { this.observers.splice(i, 1); break } } }; Spry.Utils.Notifier.prototype.notifyObservers = function(methodName, data) { if (!methodName) return; if (!this.suppressNotifications) { var len = this.observers.length; for (var i = 0; i < len; i++) { var obs = this.observers[i]; if (obs) { if (typeof obs == "function") obs(methodName, this, data); else if (obs[methodName]) obs[methodName](this, data) } } } }; Spry.Utils.Notifier.prototype.enableNotifications = function() { if (--this.suppressNotifications < 0) { this.suppressNotifications = 0; Spry.Effect.Utils.showError("Unbalanced enableNotifications() call!\n") } }; Spry.Utils.Notifier.prototype.disableNotifications = function() { ++this.suppressNotifications }; Spry.Effect.getElement = function(ele) { var element = ele; if (typeof ele == "string") element = document.getElementById(ele); if (element == null) Spry.Effect.Utils.showError('Element "' + ele + '" not found.'); return element }; Spry.Effect.getStyleProp = function(element, prop) { var value; var camelized = Spry.Effect.Utils.camelize(prop); try { if (element.style) value = element.style[camelized]; if (!value) { if (document.defaultView && document.defaultView.getComputedStyle) { var css = document.defaultView.getComputedStyle(element, null); value = css ? css.getPropertyValue(prop) : null } else if (element.currentStyle) { value = element.currentStyle[camelized] } } } catch (e) { Spry.Effect.Utils.showError('Spry.Effect.getStyleProp: ' + e) } return value == 'auto' ? null : value }; Spry.Effect.setStyleProp = function(element, prop, value) { try { element.style[Spry.Effect.Utils.camelize(prop)] = value } catch (e) { Spry.Effect.Utils.showError('Spry.Effect.setStyleProp: ' + e) } }; Spry.Effect.getStylePropRegardlessOfDisplayState = function(element, prop, displayElement) { var refElement = displayElement ? displayElement : element; var displayOrig = Spry.Effect.getStyleProp(refElement, 'display'); var visibilityOrig = Spry.Effect.getStyleProp(refElement, 'visibility'); if (displayOrig == 'none') { Spry.Effect.setStyleProp(refElement, 'visibility', 'hidden'); Spry.Effect.setStyleProp(refElement, 'display', 'block'); if (window.opera) refElement.focus() } var styleProp = Spry.Effect.getStyleProp(element, prop); if (displayOrig == 'none') { Spry.Effect.setStyleProp(refElement, 'display', 'none'); Spry.Effect.setStyleProp(refElement, 'visibility', visibilityOrig) } return styleProp }; Spry.Effect.makePositioned = function(element) { var pos = Spry.Effect.getStyleProp(element, 'position'); if (!pos || pos == 'static') { element.style.position = 'relative'; if (window.opera) { element.style.top = 0; element.style.left = 0 } } }; Spry.Effect.isInvisible = function(element) { var propDisplay = Spry.Effect.getStyleProp(element, 'display'); if (propDisplay && propDisplay.toLowerCase() == 'none') return true; var propVisible = Spry.Effect.getStyleProp(element, 'visibility'); if (propVisible && propVisible.toLowerCase() == 'hidden') return true; return false }; Spry.Effect.enforceVisible = function(element) { var propDisplay = Spry.Effect.getStyleProp(element, 'display'); if (propDisplay && propDisplay.toLowerCase() == 'none') Spry.Effect.setStyleProp(element, 'display', 'block'); var propVisible = Spry.Effect.getStyleProp(element, 'visibility'); if (propVisible && propVisible.toLowerCase() == 'hidden') Spry.Effect.setStyleProp(element, 'visibility', 'visible') }; Spry.Effect.makeClipping = function(element) { var overflow = Spry.Effect.getStyleProp(element, 'overflow'); if (!overflow || (overflow.toLowerCase() != 'hidden' && overflow.toLowerCase() != 'scroll')) { var heightCache = 0; var needsCache = /MSIE 7.0/.test(navigator.userAgent) && /Windows NT/.test(navigator.userAgent); if (needsCache) heightCache = Spry.Effect.getDimensionsRegardlessOfDisplayState(element).height; Spry.Effect.setStyleProp(element, 'overflow', 'hidden'); if (needsCache) Spry.Effect.setStyleProp(element, 'height', heightCache + 'px') } }; Spry.Effect.cleanWhitespace = function(element) { var childCountInit = element.childNodes.length; for (var i = childCountInit - 1; i >= 0; i--) { var node = element.childNodes[i]; if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) try { element.removeChild(node) } catch (e) { Spry.Effect.Utils.showError('Spry.Effect.cleanWhitespace: ' + e) } } }; Spry.Effect.getComputedStyle = function(element) { return /MSIE/.test(navigator.userAgent) ? element.currentStyle : document.defaultView.getComputedStyle(element, null) }; Spry.Effect.getDimensions = function(element) { var dimensions = new Spry.Effect.Utils.Rectangle; var computedStyle = null; if (element.style.width && /px/i.test(element.style.width)) dimensions.width = parseInt(element.style.width, 10); else { computedStyle = Spry.Effect.getComputedStyle(element); var tryComputedStyle = computedStyle && computedStyle.width && /px/i.test(computedStyle.width); if (tryComputedStyle) dimensions.width = parseInt(computedStyle.width, 10); if (!tryComputedStyle || dimensions.width == 0) dimensions.width = element.offsetWidth } if (element.style.height && /px/i.test(element.style.height)) dimensions.height = parseInt(element.style.height, 10); else { if (!computedStyle) computedStyle = Spry.Effect.getComputedStyle(element); var tryComputedStyle = computedStyle && computedStyle.height && /px/i.test(computedStyle.height); if (tryComputedStyle) dimensions.height = parseInt(computedStyle.height, 10); if (!tryComputedStyle || dimensions.height == 0) dimensions.height = element.offsetHeight } return dimensions }; Spry.Effect.getDimensionsRegardlessOfDisplayState = function(element, displayElement) { var refElement = displayElement ? displayElement : element; var displayOrig = Spry.Effect.getStyleProp(refElement, 'display'); var visibilityOrig = Spry.Effect.getStyleProp(refElement, 'visibility'); if (displayOrig == 'none') { Spry.Effect.setStyleProp(refElement, 'visibility', 'hidden'); Spry.Effect.setStyleProp(refElement, 'display', 'block'); if (window.opera) refElement.focus() } var dimensions = Spry.Effect.getDimensions(element); if (displayOrig == 'none') { Spry.Effect.setStyleProp(refElement, 'display', 'none'); Spry.Effect.setStyleProp(refElement, 'visibility', visibilityOrig) } return dimensions }; Spry.Effect.getOpacity = function(element) { var o = Spry.Effect.getStyleProp(element, "opacity"); if (typeof o == 'undefined' || o == null) o = 1.0; return o }; Spry.Effect.getBgColor = function(ele) { return Spry.Effect.getStyleProp(ele, "background-color") }; Spry.Effect.intPropStyle = function(e, prop) { var i = parseInt(Spry.Effect.getStyleProp(e, prop), 10); if (isNaN(i)) return 0; return i }; Spry.Effect.getPosition = function(element) { var position = new Spry.Effect.Utils.Position; var computedStyle = null; if (element.style.left && /px/i.test(element.style.left)) position.x = parseInt(element.style.left, 10); else { computedStyle = Spry.Effect.getComputedStyle(element); var tryComputedStyle = computedStyle && computedStyle.left && /px/i.test(computedStyle.left); if (tryComputedStyle) position.x = parseInt(computedStyle.left, 10); if (!tryComputedStyle || position.x == 0) position.x = element.offsetLeft } if (element.style.top && /px/i.test(element.style.top)) position.y = parseInt(element.style.top, 10); else { if (!computedStyle) computedStyle = Spry.Effect.getComputedStyle(element); var tryComputedStyle = computedStyle && computedStyle.top && /px/i.test(computedStyle.top); if (tryComputedStyle) position.y = parseInt(computedStyle.top, 10); if (!tryComputedStyle || position.y == 0) position.y = element.offsetTop } return position }; Spry.Effect.getOffsetPosition = Spry.Effect.getPosition; Spry.Effect.Animator = function(options) { Spry.Utils.Notifier.call(this); this.name = 'Animator'; this.element = null; this.startMilliseconds = 0; this.repeat = 'none'; this.isRunning = false; this.timer = null; this.cancelRemaining = 0; if (!options) var options = {}; if (options.toggle) this.direction = false; else this.direction = Spry.forwards; var self = this; if (options.setup != null) this.addObserver({ onPreEffect: function() { try { self.options.setup(self.element, self) } catch (e) { Spry.Effect.Utils.showError('Spry.Effect.Animator.prototype.start: setup callback: ' + e) } } }); if (options.finish != null) this.addObserver({ onPostEffect: function() { try { self.options.finish(self.element, self) } catch (e) { Spry.Effect.Utils.showError('Spry.Effect.Animator.prototype.stop: finish callback: ' + e) } } }); this.options = { duration: 1000, toggle: false, transition: Spry.linearTransition, interval: 16 }; this.setOptions(options); if (options.transition) this.setTransition(options.transition); if (options.fps) this.setFps(options.fps) }; Spry.Effect.Animator.prototype = new Spry.Utils.Notifier(); Spry.Effect.Animator.prototype.constructor = Spry.Utils.Animator; Spry.Effect.Animator.prototype.notStaticAnimator = true; Spry.Effect.Animator.prototype.setOptions = function(options) { if (!options) return; for (var prop in options) this.options[prop] = options[prop] }; Spry.Effect.Animator.prototype.setTransition = function(transition) { if (typeof transition == 'number' || transition == "1" || transition == "2") switch (parseInt(transition, 10)) { case 1: transition = Spry.linearTransition; break; case 2: transition = Spry.sinusoidalTransition; break; default: Spry.Effect.Utils.showError('unknown transition') } else if (typeof transition == 'string') { if (typeof window[transition] == 'function') transition = window[transition]; else if (typeof Spry[transition] == 'function') transition = Spry[transition]; else Spry.Effect.Utils.showError('unknown transition') } this.options.transition = transition; if (typeof this.effectsArray != 'undefined') { var l = this.effectsArray.length; for (var i = 0; i < l; i++) this.effectsArray[i].effect.setTransition(transition) } }; Spry.Effect.Animator.prototype.setDuration = function(duration) { this.options.duration = duration; if (typeof this.effectsArray != 'undefined') { var l = this.effectsArray.length; for (var i = 0; i < l; i++) { this.effectsArray[i].effect.setDuration(duration) } } }; Spry.Effect.Animator.prototype.setFps = function(fps) { this.options.interval = parseInt(1000 / fps, 10); this.options.fps = fps; if (typeof this.effectsArray != 'undefined') { var l = this.effectsArray.length; for (var i = 0; i < l; i++) { this.effectsArray[i].effect.setFps(fps) } } }; Spry.Effect.Animator.prototype.start = function(withoutTimer) { if (!this.element) return; if (arguments.length == 0) withoutTimer = false; if (this.isRunning) this.cancel(); this.prepareStart(); var currDate = new Date(); this.startMilliseconds = currDate.getTime(); if (this.element.id) this.element = document.getElementById(this.element.id); if (this.cancelRemaining != 0 && this.options.toggle) { if (this.cancelRemaining < 1 && typeof this.options.transition == 'function') { var startTime = 0; var stopTime = this.options.duration; var start = 0; var stop = 1; var emergency = 0; this.cancelRemaining = Math.round(this.cancelRemaining * 1000) / 1000; var found = false; var middle = 0; while (!found) { if (emergency++ > this.options.duration) break; var half = startTime + ((stopTime - startTime) / 2); middle = Math.round(this.options.transition(half, 1, -1, this.options.duration) * 1000) / 1000; if (middle == this.cancelRemaining) { this.startMilliseconds -= half; found = true } if (middle < this.cancelRemaining) { stopTime = half; stop = middle } else { startTime = half; start = middle } } } this.cancelRemaining = 0 } this.notifyObservers('onPreEffect', this); if (withoutTimer == false) { var self = this; this.timer = setInterval(function() { self.drawEffect() }, this.options.interval) } this.isRunning = true }; Spry.Effect.Animator.prototype.stopFlagReset = function() { if (this.timer) { clearInterval(this.timer); this.timer = null } this.startMilliseconds = 0 }; Spry.Effect.Animator.prototype.stop = function() { this.stopFlagReset(); this.notifyObservers('onPostEffect', this); this.isRunning = false }; Spry.Effect.Animator.prototype.cancel = function() { var elapsed = this.getElapsedMilliseconds(); if (this.startMilliseconds > 0 && elapsed < this.options.duration) this.cancelRemaining = this.options.transition(elapsed, 0, 1, this.options.duration); this.stopFlagReset(); this.notifyObservers('onCancel', this); this.isRunning = false }; Spry.Effect.Animator.prototype.drawEffect = function() { var isRunning = true; this.notifyObservers('onStep', this); var timeElapsed = this.getElapsedMilliseconds(); if (typeof this.options.transition != 'function') { Spry.Effect.Utils.showError('unknown transition'); return } this.animate(); if (timeElapsed > this.options.duration) { isRunning = false; this.stop() } return isRunning }; Spry.Effect.Animator.prototype.getElapsedMilliseconds = function() { if (this.startMilliseconds > 0) { var currDate = new Date(); return (currDate.getTime() - this.startMilliseconds) } return 0 }; Spry.Effect.Animator.prototype.doToggle = function() { if (!this.direction) { this.direction = Spry.forwards; return } if (this.options.toggle == true) { if (this.direction == Spry.forwards) { this.direction = Spry.backwards; this.notifyObservers('onToggle', this) } else if (this.direction == Spry.backwards) { this.direction = Spry.forwards } } }; Spry.Effect.Animator.prototype.prepareStart = function() { if (this.options && this.options.toggle) this.doToggle() }; Spry.Effect.Animator.prototype.animate = function() { }; Spry.Effect.Animator.prototype.onStep = function(el) { if (el != this) this.notifyObservers('onStep', this) }; Spry.Effect.Move = function(element, fromPos, toPos, options) { this.dynamicFromPos = false; if (arguments.length == 3) { options = toPos; toPos = fromPos; fromPos = Spry.Effect.getPosition(element); this.dynamicFromPos = true } Spry.Effect.Animator.call(this, options); this.name = 'Move'; this.element = Spry.Effect.getElement(element); if (!this.element) return; if (fromPos.units != toPos.units) Spry.Effect.Utils.showError('Spry.Effect.Move: Conflicting units (' + fromPos.units + ', ' + toPos.units + ')'); this.units = fromPos.units; this.startX = Number(fromPos.x); this.stopX = Number(toPos.x); this.startY = Number(fromPos.y); this.stopY = Number(toPos.y) }; Spry.Effect.Move.prototype = new Spry.Effect.Animator(); Spry.Effect.Move.prototype.constructor = Spry.Effect.Move; Spry.Effect.Move.prototype.animate = function() { var left = 0; var top = 0; var floor = Math.floor; var elapsed = this.getElapsedMilliseconds(); if (this.direction == Spry.forwards) { left = floor(this.options.transition(elapsed, this.startX, this.stopX - this.startX, this.options.duration)); top = floor(this.options.transition(elapsed, this.startY, this.stopY - this.startY, this.options.duration)) } else if (this.direction == Spry.backwards) { left = floor(this.options.transition(elapsed, this.stopX, this.startX - this.stopX, this.options.duration)); top = floor(this.options.transition(elapsed, this.stopY, this.startY - this.stopY, this.options.duration)) } this.element.style.left = left + this.units; this.element.style.top = top + this.units }; Spry.Effect.Move.prototype.prepareStart = function() { if (this.options && this.options.toggle) this.doToggle(); if (this.dynamicFromPos == true) { var fromPos = Spry.Effect.getPosition(this.element); this.startX = fromPos.x; this.startY = fromPos.y; this.rangeMoveX = this.startX - this.stopX; this.rangeMoveY = this.startY - this.stopY } }; Spry.Effect.Size = function(element, fromRect, toRect, options) { this.dynamicFromRect = false; if (arguments.length == 3) { options = toRect; toRect = fromRect; fromRect = Spry.Effect.getDimensionsRegardlessOfDisplayState(element); this.dynamicFromRect = true } Spry.Effect.Animator.call(this, options); this.name = 'Size'; this.element = Spry.Effect.getElement(element); if (!this.element) return; element = this.element; if (fromRect.units != toRect.units) { Spry.Effect.Utils.showError('Spry.Effect.Size: Conflicting units (' + fromRect.units + ', ' + toRect.units + ')'); return false } this.units = fromRect.units; var originalRect = Spry.Effect.getDimensionsRegardlessOfDisplayState(element); this.originalWidth = originalRect.width; this.originalHeight = originalRect.height; this.startWidth = fromRect.width; this.startHeight = fromRect.height; this.stopWidth = toRect.width; this.stopHeight = toRect.height; this.childImages = new Array(); if (this.options.useCSSBox) { Spry.Effect.makePositioned(this.element); var intProp = Spry.Effect.intPropStyle; this.startFromBorder_top = intProp(element, 'border-top-width'); this.startFromBorder_bottom = intProp(element, 'border-bottom-width'); this.startFromBorder_left = intProp(element, 'border-left-width'); this.startFromBorder_right = intProp(element, 'border-right-width'); this.startFromPadding_top = intProp(element, 'padding-top'); this.startFromPadding_bottom = intProp(element, 'padding-bottom'); this.startFromPadding_left = intProp(element, 'padding-left'); this.startFromPadding_right = intProp(element, 'padding-right'); this.startFromMargin_top = intProp(element, 'margin-top'); this.startFromMargin_bottom = intProp(element, 'margin-bottom'); this.startFromMargin_right = intProp(element, 'margin-right'); this.startFromMargin_left = intProp(element, 'margin-left'); this.startLeft = intProp(element, 'left'); this.startTop = intProp(element, 'top') } if (this.options.scaleContent) Spry.Effect.Utils.fetchChildImages(element, this.childImages); this.fontFactor = 1.0; var fontSize = Spry.Effect.getStyleProp(this.element, 'font-size'); if (fontSize && /em\s*$/.test(fontSize)) this.fontFactor = parseFloat(fontSize); var isPercent = Spry.Effect.Utils.isPercentValue; if (isPercent(this.startWidth)) { var startWidthPercent = Spry.Effect.Utils.getPercentValue(this.startWidth); this.startWidth = originalRect.width * (startWidthPercent / 100) } if (isPercent(this.startHeight)) { var startHeightPercent = Spry.Effect.Utils.getPercentValue(this.startHeight); this.startHeight = originalRect.height * (startHeightPercent / 100) } if (isPercent(this.stopWidth)) { var stopWidthPercent = Spry.Effect.Utils.getPercentValue(this.stopWidth); this.stopWidth = originalRect.width * (stopWidthPercent / 100) } if (isPercent(this.stopHeight)) { var stopHeightPercent = Spry.Effect.Utils.getPercentValue(this.stopHeight); this.stopHeight = originalRect.height * (stopHeightPercent / 100) } this.enforceVisible = Spry.Effect.isInvisible(this.element) }; Spry.Effect.Size.prototype = new Spry.Effect.Animator(); Spry.Effect.Size.prototype.constructor = Spry.Effect.Size; Spry.Effect.Size.prototype.animate = function() { var width = 0; var height = 0; var fontSize = 0; var direction = 0; var floor = Math.floor; var elapsed = this.getElapsedMilliseconds(); if (this.direction == Spry.forwards) { width = floor(this.options.transition(elapsed, this.startWidth, this.stopWidth - this.startWidth, this.options.duration)); height = floor(this.options.transition(elapsed, this.startHeight, this.stopHeight - this.startHeight, this.options.duration)); direction = 1 } else if (this.direction == Spry.backwards) { width = floor(this.options.transition(elapsed, this.stopWidth, this.startWidth - this.stopWidth, this.options.duration)); height = floor(this.options.transition(elapsed, this.stopHeight, this.startHeight - this.stopHeight, this.options.duration)); direction = -1 } var propFactor = width / this.originalWidth; fontSize = this.fontFactor * propFactor; var elStyle = this.element.style; if (width < 0) width = 0; if (height < 0) height = 0; elStyle.width = width + this.units; elStyle.height = height + this.units; if (typeof this.options.useCSSBox != 'undefined' && this.options.useCSSBox == true) { var intProp = Spry.Effect.intPropStyle; var origTop = intProp(this.element, 'top'); var origLeft = intProp(this.element, 'left'); var origMarginTop = intProp(this.element, 'margin-top'); var origMarginLeft = intProp(this.element, 'margin-left'); var widthFactor = propFactor; var heightFactor = height / this.originalHeight; var border_top = floor(this.startFromBorder_top * heightFactor); var border_bottom = floor(this.startFromBorder_bottom * heightFactor); var border_left = floor(this.startFromBorder_left * widthFactor); var border_right = floor(this.startFromBorder_right * widthFactor); var padding_top = floor(this.startFromPadding_top * heightFactor); var padding_bottom = floor(this.startFromPadding_bottom * heightFactor); var padding_left = floor(this.startFromPadding_left * widthFactor); var padding_right = floor(this.startFromPadding_right * widthFactor); var margin_top = floor(this.startFromMargin_top * heightFactor); var margin_bottom = floor(this.startFromMargin_bottom * heightFactor); var margin_right = floor(this.startFromMargin_right * widthFactor); var margin_left = floor(this.startFromMargin_left * widthFactor); elStyle.borderTopWidth = border_top + this.units; elStyle.borderBottomWidth = border_bottom + this.units; elStyle.borderLeftWidth = border_left + this.units; elStyle.borderRightWidth = border_right + this.units; elStyle.paddingTop = padding_top + this.units; elStyle.paddingBottom = padding_bottom + this.units; elStyle.paddingLeft = padding_left + this.units; elStyle.paddingRight = padding_right + this.units; elStyle.marginTop = margin_top + this.units; elStyle.marginBottom = margin_bottom + this.units; elStyle.marginLeft = margin_left + this.units; elStyle.marginRight = margin_right + this.units; elStyle.left = floor(origLeft + origMarginLeft - margin_left) + this.units; elStyle.top = floor(origTop + origMarginTop - margin_top) + this.units } if (this.options.scaleContent) { for (var i = 0; i < this.childImages.length; i++) { this.childImages[i][0].style.width = propFactor * this.childImages[i][1] + this.units; this.childImages[i][0].style.height = propFactor * this.childImages[i][2] + this.units } this.element.style.fontSize = fontSize + 'em' } if (this.enforceVisible) { Spry.Effect.enforceVisible(this.element); this.enforceVisible = false } }; Spry.Effect.Size.prototype.prepareStart = function() { if (this.options && this.options.toggle) this.doToggle(); if (this.dynamicFromRect == true) { var fromRect = Spry.Effect.getDimensions(this.element); this.startWidth = fromRect.width; this.startHeight = fromRect.height; this.widthRange = this.startWidth - this.stopWidth; this.heightRange = this.startHeight - this.stopHeight } }; Spry.Effect.Opacity = function(element, startOpacity, stopOpacity, options) { this.dynamicStartOpacity = false; if (arguments.length == 3) { options = stopOpacity; stopOpacity = startOpacity; startOpacity = Spry.Effect.getOpacity(element); this.dynamicStartOpacity = true } Spry.Effect.Animator.call(this, options); this.name = 'Opacity'; this.element = Spry.Effect.getElement(element); if (!this.element) return; if (/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout)) Spry.Effect.setStyleProp(this.element, 'zoom', '1'); this.startOpacity = startOpacity; this.stopOpacity = stopOpacity; this.enforceVisible = Spry.Effect.isInvisible(this.element) }; Spry.Effect.Opacity.prototype = new Spry.Effect.Animator(); Spry.Effect.Opacity.prototype.constructor = Spry.Effect.Opacity; Spry.Effect.Opacity.prototype.animate = function() { var opacity = 0; var elapsed = this.getElapsedMilliseconds(); if (this.direction == Spry.forwards) opacity = this.options.transition(elapsed, this.startOpacity, this.stopOpacity - this.startOpacity, this.options.duration); else if (this.direction == Spry.backwards) opacity = this.options.transition(elapsed, this.stopOpacity, this.startOpacity - this.stopOpacity, this.options.duration); if (opacity < 0) opacity = 0; if (/MSIE/.test(navigator.userAgent)) { var tmpval = Spry.Effect.getStyleProp(this.element, 'filter'); if (tmpval) { tmpval = tmpval.replace(/alpha\(opacity=[0-9]{1,3}\)/g, '') } this.element.style.filter = tmpval + "alpha(opacity=" + Math.floor(opacity * 100) + ")" } else this.element.style.opacity = opacity; if (this.enforceVisible) { Spry.Effect.enforceVisible(this.element); this.enforceVisible = false } }; Spry.Effect.Opacity.prototype.prepareStart = function() { if (this.options && this.options.toggle) this.doToggle(); if (this.dynamicStartOpacity == true) { this.startOpacity = Spry.Effect.getOpacity(this.element); this.opacityRange = this.startOpacity - this.stopOpacity } }; Spry.Effect.Color = function(element, startColor, stopColor, options) { this.dynamicStartColor = false; if (arguments.length == 3) { options = stopColor; stopColor = startColor; startColor = Spry.Effect.getBgColor(element); this.dynamicStartColor = true } Spry.Effect.Animator.call(this, options); this.name = 'Color'; this.element = Spry.Effect.getElement(element); if (!this.element) return; this.startColor = startColor; this.stopColor = stopColor; this.startRedColor = Spry.Effect.Utils.hexToInt(startColor.substr(1, 2)); this.startGreenColor = Spry.Effect.Utils.hexToInt(startColor.substr(3, 2)); this.startBlueColor = Spry.Effect.Utils.hexToInt(startColor.substr(5, 2)); this.stopRedColor = Spry.Effect.Utils.hexToInt(stopColor.substr(1, 2)); this.stopGreenColor = Spry.Effect.Utils.hexToInt(stopColor.substr(3, 2)); this.stopBlueColor = Spry.Effect.Utils.hexToInt(stopColor.substr(5, 2)) }; Spry.Effect.Color.prototype = new Spry.Effect.Animator(); Spry.Effect.Color.prototype.constructor = Spry.Effect.Color; Spry.Effect.Color.prototype.animate = function() { var redColor = 0; var greenColor = 0; var blueColor = 0; var floor = Math.floor; var elapsed = this.getElapsedMilliseconds(); if (this.direction == Spry.forwards) { redColor = floor(this.options.transition(elapsed, this.startRedColor, this.stopRedColor - this.startRedColor, this.options.duration)); greenColor = floor(this.options.transition(elapsed, this.startGreenColor, this.stopGreenColor - this.startGreenColor, this.options.duration)); blueColor = floor(this.options.transition(elapsed, this.startBlueColor, this.stopBlueColor - this.startBlueColor, this.options.duration)) } else if (this.direction == Spry.backwards) { redColor = floor(this.options.transition(elapsed, this.stopRedColor, this.startRedColor - this.stopRedColor, this.options.duration)); greenColor = floor(this.options.transition(elapsed, this.stopGreenColor, this.startGreenColor - this.stopGreenColor, this.options.duration)); blueColor = floor(this.options.transition(elapsed, this.stopBlueColor, this.startBlueColor - this.stopBlueColor, this.options.duration)) } this.element.style.backgroundColor = Spry.Effect.Utils.rgb(redColor, greenColor, blueColor) }; Spry.Effect.Color.prototype.prepareStart = function() { if (this.options && this.options.toggle) this.doToggle(); if (this.dynamicStartColor == true) { this.startColor = Spry.Effect.getBgColor(element); this.startRedColor = Spry.Effect.Utils.hexToInt(startColor.substr(1, 2)); this.startGreenColor = Spry.Effect.Utils.hexToInt(startColor.substr(3, 2)); this.startBlueColor = Spry.Effect.Utils.hexToInt(startColor.substr(5, 2)); this.redColorRange = this.startRedColor - this.stopRedColor; this.greenColorRange = this.startGreenColor - this.stopGreenColor; this.blueColorRange = this.startBlueColor - this.stopBlueColor } }; Spry.Effect.Cluster = function(options) { Spry.Effect.Animator.call(this, options); this.name = 'Cluster'; this.effectsArray = new Array(); this.currIdx = -1; var _ClusteredEffect = function(effect, kind) { this.effect = effect; this.kind = kind; this.isRunning = false }; this.ClusteredEffect = _ClusteredEffect }; Spry.Effect.Cluster.prototype = new Spry.Effect.Animator(); Spry.Effect.Cluster.prototype.constructor = Spry.Effect.Cluster; Spry.Effect.Cluster.prototype.setInterval = function(interval) { var l = this.effectsArray.length; this.options.interval = interval; for (var i = 0; i < l; i++) { this.effectsArray[i].effect.setInterval(interval) } }; Spry.Effect.Cluster.prototype.drawEffect = function() { var isRunning = true; var allEffectsDidRun = false; var baseEffectIsStillRunning = false; var evalNextEffectsRunning = false; if ((this.currIdx == -1 && this.direction == Spry.forwards) || (this.currIdx == this.effectsArray.length && this.direction == Spry.backwards)) this.initNextEffectsRunning(); var start = this.direction == Spry.forwards ? 0 : this.effectsArray.length - 1; var stop = this.direction == Spry.forwards ? this.effectsArray.length : -1; var step = this.direction == Spry.forwards ? 1 : -1; for (var i = start; i != stop; i += step) { if (this.effectsArray[i].isRunning == true) { baseEffectIsStillRunning = this.effectsArray[i].effect.drawEffect(); if (baseEffectIsStillRunning == false && i == this.currIdx) { this.effectsArray[i].isRunning = false; evalNextEffectsRunning = true } } } if (evalNextEffectsRunning == true) allEffectsDidRun = this.initNextEffectsRunning(); if (allEffectsDidRun == true) { this.stop(); isRunning = false; for (var i = 0; i < this.effectsArray.length; i++) this.effectsArray[i].isRunning = false; this.currIdx = this.direction == Spry.forwards ? this.effectsArray.length : -1 } return isRunning }; Spry.Effect.Cluster.prototype.initNextEffectsRunning = function() { var allEffectsDidRun = false; var step = this.direction == Spry.forwards ? 1 : -1; var stop = this.direction == Spry.forwards ? this.effectsArray.length : -1; this.currIdx += step; if ((this.currIdx > (this.effectsArray.length - 1) && this.direction == Spry.forwards) || (this.currIdx < 0 && this.direction == Spry.backwards)) allEffectsDidRun = true; else for (var i = this.currIdx; i != stop; i += step) { if ((i > this.currIdx && this.direction == Spry.forwards || i < this.currIdx && this.direction == Spry.backwards) && this.effectsArray[i].kind == "queue") break; this.effectsArray[i].effect.start(true); this.effectsArray[i].isRunning = true; this.currIdx = i } return allEffectsDidRun }; Spry.Effect.Cluster.prototype.toggleCluster = function() { if (!this.direction) { this.direction = Spry.forwards; return } if (this.options.toggle == true) { if (this.direction == Spry.forwards) { this.direction = Spry.backwards; this.notifyObservers('onToggle', this); this.currIdx = this.effectsArray.length } else if (this.direction == Spry.backwards) { this.direction = Spry.forwards; this.currIdx = -1 } } else { if (this.direction == Spry.forwards) this.currIdx = -1; else if (this.direction == Spry.backwards) this.currIdx = this.effectsArray.length } }; Spry.Effect.Cluster.prototype.doToggle = function() { this.toggleCluster(); for (var i = 0; i < this.effectsArray.length; i++) { if (this.effectsArray[i].effect.options && (this.effectsArray[i].effect.options.toggle != null)) if (this.effectsArray[i].effect.options.toggle == true) this.effectsArray[i].effect.doToggle() } }; Spry.Effect.Cluster.prototype.cancel = function() { for (var i = 0; i < this.effectsArray.length; i++) if (this.effectsArray[i].effect.isRunning) this.effectsArray[i].effect.cancel(); var elapsed = this.getElapsedMilliseconds(); if (this.startMilliseconds > 0 && elapsed < this.options.duration) this.cancelRemaining = this.options.transition(elapsed, 0, 1, this.options.duration); this.stopFlagReset(); this.notifyObservers('onCancel', this); this.isRunning = false }; Spry.Effect.Cluster.prototype.addNextEffect = function(effect) { effect.addObserver(this); this.effectsArray[this.effectsArray.length] = new this.ClusteredEffect(effect, "queue"); if (this.effectsArray.length == 1) { this.element = effect.element } }; Spry.Effect.Cluster.prototype.addParallelEffect = function(effect) { if (this.effectsArray.length == 0 || this.effectsArray[this.effectsArray.length - 1].kind != 'parallel') effect.addObserver(this); this.effectsArray[this.effectsArray.length] = new this.ClusteredEffect(effect, "parallel"); if (this.effectsArray.length == 1) { this.element = effect.element } }; Spry.Effect.Cluster.prototype.prepareStart = function() { this.toggleCluster() }; Spry.Effect.Fade = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Fade'); Spry.Effect.Cluster.call(this, options); this.name = 'Fade'; var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; var durationInMilliseconds = 1000; var fromOpacity = 0.0; var toOpacity = 100.0; var doToggle = false; var transition = Spry.fifthTransition; var fps = 60; var originalOpacity = 0; if (/MSIE/.test(navigator.userAgent)) originalOpacity = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(this.element, 'filter').replace(/alpha\(opacity=([0-9]{1,3})\)/g, '$1'), 10); else originalOpacity = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(this.element, 'opacity') * 100, 10); if (isNaN(originalOpacity)) originalOpacity = 100; if (options) { if (options.duration != null) durationInMilliseconds = options.duration; if (options.from != null) { if (Spry.Effect.Utils.isPercentValue(options.from)) fromOpacity = Spry.Effect.Utils.getPercentValue(options.from) * originalOpacity / 100; else fromOpacity = options.from } if (options.to != null) { if (Spry.Effect.Utils.isPercentValue(options.to)) toOpacity = Spry.Effect.Utils.getPercentValue(options.to) * originalOpacity / 100; else toOpacity = options.to } if (options.toggle != null) doToggle = options.toggle; if (options.transition != null) transition = options.transition; if (options.fps != null) fps = options.fps; else this.options.transition = transition } fromOpacity = fromOpacity / 100.0; toOpacity = toOpacity / 100.0; options = { duration: durationInMilliseconds, toggle: doToggle, transition: transition, from: fromOpacity, to: toOpacity, fps: fps }; var fadeEffect = new Spry.Effect.Opacity(element, fromOpacity, toOpacity, options); this.addNextEffect(fadeEffect) }; Spry.Effect.Fade.prototype = new Spry.Effect.Cluster(); Spry.Effect.Fade.prototype.constructor = Spry.Effect.Fade; Spry.Effect.Blind = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Blind'); Spry.Effect.Cluster.call(this, options); this.name = 'Blind'; var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; var durationInMilliseconds = 1000; var doToggle = false; var kindOfTransition = Spry.circleTransition; var fps = 60; var doScaleContent = false; Spry.Effect.makeClipping(element); var originalRect = Spry.Effect.getDimensionsRegardlessOfDisplayState(element); var fromHeightPx = originalRect.height; var toHeightPx = 0; var optionFrom = options ? options.from : originalRect.height; var optionTo = options ? options.to : 0; var fullCSSBox = false; if (options) { if (options.duration != null) durationInMilliseconds = options.duration; if (options.from != null) { if (Spry.Effect.Utils.isPercentValue(options.from)) fromHeightPx = Spry.Effect.Utils.getPercentValue(options.from) * originalRect.height / 100; else fromHeightPx = Spry.Effect.Utils.getPixelValue(options.from) } if (options.to != null) { if (Spry.Effect.Utils.isPercentValue(options.to)) toHeightPx = Spry.Effect.Utils.getPercentValue(options.to) * originalRect.height / 100; else toHeightPx = Spry.Effect.Utils.getPixelValue(options.to) } if (options.toggle != null) doToggle = options.toggle; if (options.transition != null) kindOfTransition = options.transition; if (options.fps != null) fps = options.fps; if (options.useCSSBox != null) fullCSSBox = options.useCSSBox } var fromRect = new Spry.Effect.Utils.Rectangle; fromRect.width = originalRect.width; fromRect.height = fromHeightPx; var toRect = new Spry.Effect.Utils.Rectangle; toRect.width = originalRect.width; toRect.height = toHeightPx; options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, scaleContent: doScaleContent, useCSSBox: fullCSSBox, from: optionFrom, to: optionTo, fps: fps }; var blindEffect = new Spry.Effect.Size(element, fromRect, toRect, options); this.addNextEffect(blindEffect) }; Spry.Effect.Blind.prototype = new Spry.Effect.Cluster(); Spry.Effect.Blind.prototype.constructor = Spry.Effect.Blind; Spry.Effect.Highlight = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Highlight'); Spry.Effect.Cluster.call(this, options); this.name = 'Highlight'; var durationInMilliseconds = 1000; var toColor = "#ffffff"; var doToggle = false; var kindOfTransition = Spry.sinusoidalTransition; var fps = 60; var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; var fromColor = Spry.Effect.getBgColor(element); if (fromColor == "transparent") fromColor = "#ffff99"; if (options) { if (options.duration != null) durationInMilliseconds = options.duration; if (options.from != null) fromColor = options.from; if (options.to != null) toColor = options.to; if (options.toggle != null) doToggle = options.toggle; if (options.transition != null) kindOfTransition = options.transition; if (options.fps != null) fps = options.fps } if (fromColor.indexOf('rgb') != -1) var fromColor = Spry.Effect.Utils.rgb(parseInt(fromColor.substring(fromColor.indexOf('(') + 1, fromColor.indexOf(',')), 10), parseInt(fromColor.substring(fromColor.indexOf(',') + 1, fromColor.lastIndexOf(',')), 10), parseInt(fromColor.substring(fromColor.lastIndexOf(',') + 1, fromColor.indexOf(')')), 10)); if (toColor.indexOf('rgb') != -1) var toColor = Spry.Effect.Utils.rgb(parseInt(toColor.substring(toColor.indexOf('(') + 1, toColor.indexOf(',')), 10), parseInt(toColor.substring(toColor.indexOf(',') + 1, toColor.lastIndexOf(',')), 10), parseInt(toColor.substring(toColor.lastIndexOf(',') + 1, toColor.indexOf(')')), 10)); var fromColor = Spry.Effect.Utils.longColorVersion(fromColor); var toColor = Spry.Effect.Utils.longColorVersion(toColor); this.restoreBackgroundImage = Spry.Effect.getStyleProp(element, 'background-image'); options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, fps: fps }; var highlightEffect = new Spry.Effect.Color(element, fromColor, toColor, options); this.addNextEffect(highlightEffect); this.addObserver({ onPreEffect: function(effect) { Spry.Effect.setStyleProp(effect.element, 'background-image', 'none') }, onPostEffect: function(effect) { Spry.Effect.setStyleProp(effect.element, 'background-image', effect.restoreBackgroundImage); if (effect.direction == Spry.forwards && effect.options.restoreColor) Spry.Effect.setStyleProp(element, 'background-color', effect.options.restoreColor) } }) }; Spry.Effect.Highlight.prototype = new Spry.Effect.Cluster(); Spry.Effect.Highlight.prototype.constructor = Spry.Effect.Highlight; Spry.Effect.Slide = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Slide'); Spry.Effect.Cluster.call(this, options); this.name = 'Slide'; var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; var durationInMilliseconds = 1000; var doToggle = false; var kindOfTransition = Spry.sinusoidalTransition; var fps = 60; var slideHorizontally = false; var firstChildElt = Spry.Effect.Utils.getFirstChildElement(element); var direction = -1; if (/MSIE 7.0/.test(navigator.userAgent) && /Windows NT/.test(navigator.userAgent)) Spry.Effect.makePositioned(element); Spry.Effect.makeClipping(element); if (/MSIE 6.0/.test(navigator.userAgent) && /Windows NT/.test(navigator.userAgent)) { var pos = Spry.Effect.getStyleProp(element, 'position'); if (pos && (pos == 'static' || pos == 'fixed')) { Spry.Effect.setStyleProp(element, 'position', 'relative'); Spry.Effect.setStyleProp(element, 'top', ''); Spry.Effect.setStyleProp(element, 'left', '') } } if (firstChildElt) { Spry.Effect.makePositioned(firstChildElt); Spry.Effect.makeClipping(firstChildElt); var childRect = Spry.Effect.getDimensionsRegardlessOfDisplayState(firstChildElt, element); Spry.Effect.setStyleProp(firstChildElt, 'width', childRect.width + 'px') } var fromDim = Spry.Effect.getDimensionsRegardlessOfDisplayState(element); var initDim = new Spry.Effect.Utils.Rectangle(); var toDim = new Spry.Effect.Utils.Rectangle(); initDim.width = toDim.width = fromDim.width; initDim.height = toDim.height = fromDim.height; if (!this.options.to) { if (!options) options = {}; options.to = '0%' } if (options && options.horizontal !== null && options.horizontal === true) slideHorizontally = true; if (options.duration != null) durationInMilliseconds = options.duration; if (options.from != null) { if (slideHorizontally) { if (Spry.Effect.Utils.isPercentValue(options.from)) fromDim.width = initDim.width * Spry.Effect.Utils.getPercentValue(options.from) / 100; else fromDim.width = Spry.Effect.Utils.getPixelValue(options.from) } else { if (Spry.Effect.Utils.isPercentValue(options.from)) fromDim.height = initDim.height * Spry.Effect.Utils.getPercentValue(options.from) / 100; else fromDim.height = Spry.Effect.Utils.getPixelValue(options.from) } } if (options.to != null) { if (slideHorizontally) { if (Spry.Effect.Utils.isPercentValue(options.to)) toDim.width = initDim.width * Spry.Effect.Utils.getPercentValue(options.to) / 100; else toDim.width = Spry.Effect.Utils.getPixelValue(options.to) } else { if (Spry.Effect.Utils.isPercentValue(options.to)) toDim.height = initDim.height * Spry.Effect.Utils.getPercentValue(options.to) / 100; else toDim.height = Spry.Effect.Utils.getPixelValue(options.to) } } if (options.toggle != null) doToggle = options.toggle; if (options.transition != null) kindOfTransition = options.transition; if (options.fps != null) fps = options.fps; options = { duration: durationInMilliseconds, transition: kindOfTransition, scaleContent: false, toggle: doToggle, fps: fps }; var size = new Spry.Effect.Size(element, fromDim, toDim, options); this.addParallelEffect(size); if ((fromDim.width < toDim.width && slideHorizontally) || (fromDim.height < toDim.height && !slideHorizontally)) direction = 1; var fromPos = new Spry.Effect.Utils.Position(); var toPos = new Spry.Effect.Utils.Position(); toPos.x = fromPos.x = Spry.Effect.intPropStyle(firstChildElt, 'left'); toPos.y = fromPos.y = Spry.Effect.intPropStyle(firstChildElt, 'top'); toPos.units = fromPos.units; if (slideHorizontally) toPos.x = parseInt(fromPos.x + direction * (fromDim.width - toDim.width), 10); else toPos.y = parseInt(fromPos.y + direction * (fromDim.height - toDim.height), 10); if (direction == 1) { var tmp = fromPos; var fromPos = toPos; var toPos = tmp } options = { duration: durationInMilliseconds, transition: kindOfTransition, toggle: doToggle, from: fromPos, to: toPos, fps: fps }; var move = new Spry.Effect.Move(firstChildElt, fromPos, toPos, options); this.addParallelEffect(move) }; Spry.Effect.Slide.prototype = new Spry.Effect.Cluster(); Spry.Effect.Slide.prototype.constructor = Spry.Effect.Slide; Spry.Effect.Grow = function(element, options) { if (!element) return; if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Grow'); Spry.Effect.Cluster.call(this, options); this.name = 'Grow'; var durationInMilliseconds = 1000; var doToggle = false; var doScaleContent = true; var calcHeight = false; var growFromCenter = true; var fullCSSBox = false; var kindOfTransition = Spry.squareTransition; var fps = 60; var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; Spry.Effect.makeClipping(element); var dimRect = Spry.Effect.getDimensionsRegardlessOfDisplayState(element); var originalWidth = dimRect.width; var originalHeight = dimRect.height; var propFactor = (originalWidth == 0) ? 1 : originalHeight / originalWidth; var fromRect = new Spry.Effect.Utils.Rectangle; fromRect.width = 0; fromRect.height = 0; var toRect = new Spry.Effect.Utils.Rectangle; toRect.width = originalWidth; toRect.height = originalHeight; var optionFrom = options ? options.from : dimRect.width; var optionTo = options ? options.to : 0; var pixelValue = Spry.Effect.Utils.getPixelValue; if (options) { if (options.growCenter != null) growFromCenter = options.growCenter; if (options.duration != null) durationInMilliseconds = options.duration; if (options.useCSSBox != null) fullCSSBox = options.useCSSBox; if (options.scaleContent != null) doScaleContent = options.scaleContent; if (options.from != null) { if (Spry.Effect.Utils.isPercentValue(options.from)) { fromRect.width = originalWidth * (Spry.Effect.Utils.getPercentValue(options.from) / 100); fromRect.height = originalHeight * (Spry.Effect.Utils.getPercentValue(options.from) / 100) } else { if (calcHeight) { fromRect.height = pixelValue(options.from); fromRect.width = pixelValue(options.from) / propFactor } else { fromRect.width = pixelValue(options.from); fromRect.height = propFactor * pixelValue(options.from) } } } if (options.to != null) { if (Spry.Effect.Utils.isPercentValue(options.to)) { toRect.width = originalWidth * (Spry.Effect.Utils.getPercentValue(options.to) / 100); toRect.height = originalHeight * (Spry.Effect.Utils.getPercentValue(options.to) / 100) } else { if (calcHeight) { toRect.height = pixelValue(options.to); toRect.width = pixelValue(options.to) / propFactor } else { toRect.width = pixelValue(options.to); toRect.height = propFactor * pixelValue(options.to) } } } if (options.toggle != null) doToggle = options.toggle; if (options.transition != null) kindOfTransition = options.transition; if (options.fps != null) fps = options.fps } options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, scaleContent: doScaleContent, useCSSBox: fullCSSBox, fps: fps }; var sizeEffect = new Spry.Effect.Size(element, fromRect, toRect, options); this.addParallelEffect(sizeEffect); if (growFromCenter) { Spry.Effect.makePositioned(element); var startOffsetPosition = new Spry.Effect.Utils.Position(); startOffsetPosition.x = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(element, "left"), 10); startOffsetPosition.y = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(element, "top"), 10); if (!startOffsetPosition.x) startOffsetPosition.x = 0; if (!startOffsetPosition.y) startOffsetPosition.y = 0; options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, from: optionFrom, to: optionTo, fps: fps }; var fromPos = new Spry.Effect.Utils.Position; fromPos.x = startOffsetPosition.x + (originalWidth - fromRect.width) / 2.0; fromPos.y = startOffsetPosition.y + (originalHeight - fromRect.height) / 2.0; var toPos = new Spry.Effect.Utils.Position; toPos.x = startOffsetPosition.x + (originalWidth - toRect.width) / 2.0; toPos.y = startOffsetPosition.y + (originalHeight - toRect.height) / 2.0; var moveEffect = new Spry.Effect.Move(element, fromPos, toPos, options); this.addParallelEffect(moveEffect) } }; Spry.Effect.Grow.prototype = new Spry.Effect.Cluster(); Spry.Effect.Grow.prototype.constructor = Spry.Effect.Grow; Spry.Effect.Shake = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Shake'); Spry.Effect.Cluster.call(this, options); this.options.direction = false; if (this.options.toggle) this.options.toggle = false; this.name = 'Shake'; var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; var durationInMilliseconds = 100; var kindOfTransition = Spry.linearTransition; var fps = 60; var steps = 4; if (options) { if (options.duration != null) steps = Math.ceil(this.options.duration / durationInMilliseconds) - 1; if (options.fps != null) fps = options.fps; if (options.transition != null) kindOfTransition = options.transition } Spry.Effect.makePositioned(element); var startOffsetPosition = new Spry.Effect.Utils.Position(); startOffsetPosition.x = parseInt(Spry.Effect.getStyleProp(element, "left"), 10); startOffsetPosition.y = parseInt(Spry.Effect.getStyleProp(element, "top"), 10); if (!startOffsetPosition.x) startOffsetPosition.x = 0; if (!startOffsetPosition.y) startOffsetPosition.y = 0; var centerPos = new Spry.Effect.Utils.Position; centerPos.x = startOffsetPosition.x; centerPos.y = startOffsetPosition.y; var rightPos = new Spry.Effect.Utils.Position; rightPos.x = startOffsetPosition.x + 20; rightPos.y = startOffsetPosition.y + 0; var leftPos = new Spry.Effect.Utils.Position; leftPos.x = startOffsetPosition.x + -20; leftPos.y = startOffsetPosition.y + 0; options = { duration: Math.ceil(durationInMilliseconds / 2), toggle: false, fps: fps, transition: kindOfTransition }; var effect = new Spry.Effect.Move(element, centerPos, rightPos, options); this.addNextEffect(effect); options = { duration: durationInMilliseconds, toggle: false, fps: fps, transition: kindOfTransition }; var effectToRight = new Spry.Effect.Move(element, rightPos, leftPos, options); var effectToLeft = new Spry.Effect.Move(element, leftPos, rightPos, options); for (var i = 0; i < steps; i++) { if (i % 2 == 0) this.addNextEffect(effectToRight); else this.addNextEffect(effectToLeft) } var pos = (steps % 2 == 0) ? rightPos : leftPos; options = { duration: Math.ceil(durationInMilliseconds / 2), toggle: false, fps: fps, transition: kindOfTransition }; var effect = new Spry.Effect.Move(element, pos, centerPos, options); this.addNextEffect(effect) }; Spry.Effect.Shake.prototype = new Spry.Effect.Cluster(); Spry.Effect.Shake.prototype.constructor = Spry.Effect.Shake; Spry.Effect.Shake.prototype.doToggle = function() { }; Spry.Effect.Squish = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Squish'); if (!options) options = {}; if (!options.to) options.to = '0%'; if (!options.from) options.from = '100%'; options.growCenter = false; Spry.Effect.Grow.call(this, element, options); this.name = 'Squish' }; Spry.Effect.Squish.prototype = new Spry.Effect.Grow(); Spry.Effect.Squish.prototype.constructor = Spry.Effect.Squish; Spry.Effect.Pulsate = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Pulsate'); Spry.Effect.Cluster.call(this, options); this.options.direction = false; if (this.options.toggle) this.options.toggle = false; var element = Spry.Effect.getElement(element); var originalOpacity = 0; this.element = element; if (!this.element) return; this.name = 'Pulsate'; var durationInMilliseconds = 100; var fromOpacity = 100.0; var toOpacity = 0.0; var doToggle = false; var kindOfTransition = Spry.linearTransition; var fps = 60; if (/MSIE/.test(navigator.userAgent)) originalOpacity = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(this.element, 'filter').replace(/alpha\(opacity=([0-9]{1,3})\)/g, '$1'), 10); else originalOpacity = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(this.element, 'opacity') * 100, 10); if (isNaN(originalOpacity)) { originalOpacity = 100 } if (options) { if (options.from != null) { if (Spry.Effect.Utils.isPercentValue(options.from)) fromOpacity = Spry.Effect.Utils.getPercentValue(options.from) * originalOpacity / 100; else fromOpacity = options.from } if (options.to != null) { if (Spry.Effect.Utils.isPercentValue(options.to)) toOpacity = Spry.Effect.Utils.getPercentValue(options.to) * originalOpacity / 100; else toOpacity = options.to } if (options.transition != null) kindOfTransition = options.transition; if (options.fps != null) fps = options.fps } options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, fps: fps }; fromOpacity = fromOpacity / 100.0; toOpacity = toOpacity / 100.0; var fadeEffect = new Spry.Effect.Opacity(element, fromOpacity, toOpacity, options); var appearEffect = new Spry.Effect.Opacity(element, toOpacity, fromOpacity, options); var steps = parseInt(this.options.duration / 200, 10); for (var i = 0; i < steps; i++) { this.addNextEffect(fadeEffect); this.addNextEffect(appearEffect) } }; Spry.Effect.Pulsate.prototype = new Spry.Effect.Cluster(); Spry.Effect.Pulsate.prototype.constructor = Spry.Effect.Pulsate; Spry.Effect.Pulsate.prototype.doToggle = function() { }; Spry.Effect.Puff = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Puff'); Spry.Effect.Cluster.call(this, options); var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; this.name = 'Puff'; var doToggle = false; var doScaleContent = false; var durationInMilliseconds = 1000; var kindOfTransition = Spry.fifthTransition; var fps = 60; Spry.Effect.makePositioned(element); if (options) { if (options.toggle != null) doToggle = options.toggle; if (options.duration != null) durationInMilliseconds = options.duration; if (options.transition != null) kindOfTransition = options.transition; if (options.fps != null) fps = options.fps } var originalRect = Spry.Effect.getDimensions(element); var startWidth = originalRect.width; var startHeight = originalRect.height; options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, fps: fps }; var fromOpacity = 1.0; var toOpacity = 0.0; var opacityEffect = new Spry.Effect.Opacity(element, fromOpacity, toOpacity, options); this.addParallelEffect(opacityEffect); var fromPos = Spry.Effect.getPosition(element); var toPos = new Spry.Effect.Utils.Position; toPos.x = startWidth / 2.0 * -1.0; toPos.y = startHeight / 2.0 * -1.0; options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, from: fromPos, to: toPos, fps: fps }; var moveEffect = new Spry.Effect.Move(element, fromPos, toPos, options); this.addParallelEffect(moveEffect); var self = this; this.addObserver({ onPreEffect: function() { if (self.direction == Spry.backwards) { self.element.style.display = 'block' } }, onPostEffect: function() { if (self.direction == Spry.forwards) { self.element.style.display = 'none' } } }) }; Spry.Effect.Puff.prototype = new Spry.Effect.Cluster; Spry.Effect.Puff.prototype.constructor = Spry.Effect.Puff; Spry.Effect.DropOut = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('DropOut'); Spry.Effect.Cluster.call(this, options); var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; var durationInMilliseconds = 1000; var fps = 60; var kindOfTransition = Spry.fifthTransition; var direction = Spry.forwards; var doToggle = false; this.name = 'DropOut'; Spry.Effect.makePositioned(element); if (options) { if (options.duration != null) durationInMilliseconds = options.duration; if (options.toggle != null) doToggle = options.toggle; if (options.fps != null) fps = options.fps; if (options.transition != null) kindOfTransition = options.transition; if (options.dropIn != null) direction = -1 } var startOffsetPosition = new Spry.Effect.Utils.Position(); startOffsetPosition.x = parseInt(Spry.Effect.getStyleProp(element, "left"), 10); startOffsetPosition.y = parseInt(Spry.Effect.getStyleProp(element, "top"), 10); if (!startOffsetPosition.x) startOffsetPosition.x = 0; if (!startOffsetPosition.y) startOffsetPosition.y = 0; var fromPos = new Spry.Effect.Utils.Position; fromPos.x = startOffsetPosition.x + 0; fromPos.y = startOffsetPosition.y + 0; var toPos = new Spry.Effect.Utils.Position; toPos.x = startOffsetPosition.x + 0; toPos.y = startOffsetPosition.y + (direction * 160); options = { from: fromPos, to: toPos, duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, fps: fps }; var moveEffect = new Spry.Effect.Move(element, options.from, options.to, options); this.addParallelEffect(moveEffect); var fromOpacity = 1.0; var toOpacity = 0.0; options = { duration: durationInMilliseconds, toggle: doToggle, transition: kindOfTransition, fps: fps }; var opacityEffect = new Spry.Effect.Opacity(element, fromOpacity, toOpacity, options); this.addParallelEffect(opacityEffect); var self = this; this.addObserver({ onPreEffect: function() { self.element.style.display = 'block' }, onPostEffect: function() { if (self.direction == Spry.forwards) { self.element.style.display = 'none' } } }) }; Spry.Effect.DropOut.prototype = new Spry.Effect.Cluster(); Spry.Effect.DropOut.prototype.constructor = Spry.Effect.DropOut; Spry.Effect.Fold = function(element, options) { if (!this.notStaticAnimator) return Spry.Effect.Utils.showInitError('Fold'); Spry.Effect.Cluster.call(this, options); var element = Spry.Effect.getElement(element); this.element = element; if (!this.element) return; this.name = 'Fold'; var durationInMilliseconds = 1000; var doToggle = false; var doScaleContent = true; var fullCSSBox = false; var kindOfTransition = Spry.fifthTransition; var fps = fps; Spry.Effect.makeClipping(element); var originalRect = Spry.Effect.getDimensionsRegardlessOfDisplayState(element); var startWidth = originalRect.width; var startHeight = originalRect.height; var stopWidth = startWidth; var stopHeight = startHeight / 5; var fromRect = new Spry.Effect.Utils.Rectangle; fromRect.width = startWidth; fromRect.height = startHeight; var toRect = new Spry.Effect.Utils.Rectangle; toRect.width = stopWidth; toRect.height = stopHeight; if (options) { if (options.duration != null) durationInMilliseconds = Math.ceil(options.duration / 2); if (options.toggle != null) doToggle = options.toggle; if (options.useCSSBox != null) fullCSSBox = options.useCSSBox; if (options.fps != null) fps = options.fps; if (options.transition != null) kindOfTransition = options.transition } options = { duration: durationInMilliseconds, toggle: doToggle, scaleContent: doScaleContent, useCSSBox: fullCSSBox, transition: kindOfTransition, fps: fps }; var sizeEffect = new Spry.Effect.Size(element, fromRect, toRect, options); this.addNextEffect(sizeEffect); fromRect.width = toRect.width; fromRect.height = toRect.height; toRect.width = '0%'; var sizeEffect = new Spry.Effect.Size(element, fromRect, toRect, options); this.addNextEffect(sizeEffect) }; Spry.Effect.Fold.prototype = new Spry.Effect.Cluster(); Spry.Effect.Fold.prototype.constructor = Spry.Effect.Fold; Spry.Effect.DoFade = function(element, options) { return Spry.Effect.Utils.DoEffect('Fade', element, options) }; Spry.Effect.DoBlind = function(element, options) { return Spry.Effect.Utils.DoEffect('Blind', element, options) }; Spry.Effect.DoHighlight = function(element, options) { return Spry.Effect.Utils.DoEffect('Highlight', element, options) }; Spry.Effect.DoSlide = function(element, options) { return Spry.Effect.Utils.DoEffect('Slide', element, options) }; Spry.Effect.DoGrow = function(element, options) { return Spry.Effect.Utils.DoEffect('Grow', element, options) }; Spry.Effect.DoShake = function(element, options) { return Spry.Effect.Utils.DoEffect('Shake', element, options) }; Spry.Effect.DoSquish = function(element, options) { return Spry.Effect.Utils.DoEffect('Squish', element, options) }; Spry.Effect.DoPulsate = function(element, options) { return Spry.Effect.Utils.DoEffect('Pulsate', element, options) }; Spry.Effect.DoPuff = function(element, options) { return Spry.Effect.Utils.DoEffect('Puff', element, options) }; Spry.Effect.DoDropOut = function(element, options) { return Spry.Effect.Utils.DoEffect('DropOut', element, options) }; Spry.Effect.DoFold = function(element, options) { return Spry.Effect.Utils.DoEffect('Fold', element, options) };
					
		function BuildQuicklookJs() {                
				var content = document.getElementById("jLoader").innerHTML;                              
				var head = document.getElementsByTagName("head");
				var script = document.createElement("script");
				head[0].appendChild(script);
				script.type = "text/javascript";
				script.text = content;        
				jQuery.getScript('/layout/js/requestcolor.js', function() {
					//SetCantFindColor();
				});
		}
				
		function showPopUp(productid, color) {
                
				var box = document.getElementById('ql-main-container');
				var container = document.getElementById('ql-container');
				 
				where = where.replace('&', ' and ');
				where = where.replace('&', ' and ');
				where = where.replace('%', '[perc]');
 
				var xmlHttp = ajaxFunction();
				var params = 'productid=' + productid + '&color=' + color + '&action=1&where=' + where;
 
				xmlHttp.onreadystatechange = function() {

                        showMask();

						if (xmlHttp.readyState == 4) {

								if (document.all) {
										var result=xmlHttp.responseText;
										 result=result.replace(/<[//]{0,1}(form|Form)[^><]*>/g, ""); 
										 box.innerHTML = result;  
								}
								else
								{
										box.innerHTML = xmlHttp.responseText;
								} 
								
								getPopupPosition();
								
								if(document.getElementById("jLoader")!= null && document.getElementById("jLoader").innerHTML!= "")
									 BuildQuicklookJs();
									 
								change_unitcost(productid);
								init();
								    
								initializeAllProducts('true');
                                																									
								if (container.style.display == 'none') {    
										
                                        container.style.display = 'block';
										containerFadeIn.start();
								}
								
								if (typeof document.body.style.maxHeight == "undefined") {             
									hideSelects('hidden');
								}
								down = false;
								ut.SetPRODDetSalePrice();
								ut.SetCantFindColor();
						}
				}
	
				xmlHttp.open("POST", "/ajaxpopup.aspx", true);
				xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlHttp.setRequestHeader("Content-length", params.length);
				xmlHttp.setRequestHeader("Connection", "close");
				xmlHttp.send(params);

				return;
		}



        function showMask() {
			if(!jQuery.browser.msie && jQuery.browser.version!='7.0')  {
			 jQuery('.overlay').show();
			}
        }
		
		function hidePopUp(ol) {
				var box = document.getElementById('ql-container');
               if(ol!=true) 
					jQuery('.overlay').fadeOut(500);

				if (box.style.display != 'none') { 
						box.style.display = 'none';
				}

				down = false;
				return;
		}


		
		function trackme(url,query) { 
			if (window.XMLHttpRequest) {
					request = new XMLHttpRequest();
 
			} else if (window.ActiveXObject) {
					request = new ActiveXObject("Microsoft.XMLHTTP");
			}
			if (request) {
					request.onreadystatechange = function() { 
							return false; 
					};
					request.open("get", url, true);
					request.send(query);
			}
		}
		
		function getPopupPosition() {
				var width, scrollY;
				var IE = /*@cc_on!@*/false;
 
				var container = document.getElementById('ql-container');
 
				if (window.innerWidth)
						width = window.innerWidth;
				else if (document.body.clientWidth)
						width = document.body.clientWidth;
 
				if (window.pageYOffset || window.pageYOffset == 0)
						scrollY = window.pageYOffset;       
				else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) )            
						scrollY = document.body.scrollTop;
				else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) )  
						scrollY = document.documentElement.scrollTop;         
				else if (document.body.scrollTop || document.body.scrollTop == 0)
						scrollY = document.body.scrollTop;
 
				var posx, posy;
				posx = (width/2)-233;
				posy = scrollY + 150;
 
				var tmp = container.style.top.split('px');
				var position = tmp[0];
				if (container.style.display == 'none' || position < scrollY) {
						container.style.left = posx + 'px';            
						if(IE){
						 container.style.top = posy-15 + 'px';
						}else{
						 container.style.top = posy + 'px';
						}
				}
				else {
						container.style.left = posx + 'px';
						container.style.top = posy + 'px';
				}


				return;
		}
 
		function addToCart(productid) {
				var qty = document.getElementById('qty_sel_ddl').value;
				var productid = document.getElementById('ProductIDHidden').value;
				var color = document.getElementById('ProductColors').value;
				var size = document.getElementById('ProductSizes').value;
				var modelname = document.getElementById('ModelName').innerHTML;
				var price = document.getElementById('UnitCostSpan').innerHTML;
				
				if (color == '-1') {
						$('message').style.padding = "5px";
					$('message').style.color = "#fff";
					$('message').style.display = "block";

					$('message').style.background = "#999999";
					$('message').innerHTML = "Please select a color!";
					$('message').style.fontSize = "9px";
					$('message').style.fontFamily = "Lucida Grande, Verdana, Arial, tahoma"; 
						return false;
				}
 
				if (size == '-1') {
						$('message').style.padding = "5px";
					$('message').style.color = "#fff";
					$('message').style.display = "block";
					$('message').style.background = "#999999";
					$('message').innerHTML = "Please select a size!";
					$('message').style.fontSize = "9px";
					$('message').style.fontFamily = "Lucida Grande, Verdana, Arial, tahoma"; 
						return false;
				}
								 
				if (!qty.match(/^[0-9]+$/) || qty == 0) {
						alert('quantity is Invalid');
						return false;
				}
 
				var xmlHttp = ajaxFunction();
				var params = '?productid=' + productid + '&colorid=' + color + '&sizeid=' + size + "&quantity=" + qty + "&ajax-add=1";
                var prodPlacementMember = -1;
	            if (prodPlacementJSON && prodPlacementJSON.ProductPlacement) {
	    
	                for (var index = 0; index < prodPlacementJSON.ProductPlacement.length; index++) {
	                    if (prodPlacementJSON.ProductPlacement[index].ProductID == productid) {
	                        if (prodPlacementJSON.ProductPlacement[index].ColorID > 0) {
	                            if (prodPlacementJSON.ProductPlacement[index].ProductID == productid && prodPlacementJSON.ProductPlacement[index].ColorID == color) {
	                                prodPlacementMember = prodPlacementJSON.ProductPlacement[index].PlacementMemberID;
	                                break;
	                            }
	                            continue;
	                        } else {
	                            prodPlacementMember = prodPlacementJSON.ProductPlacement[index].PlacementMemberID
                            }
                        }
                    }
                }
	            if (prodPlacementMember > 0) {
	                params += "&placementMemberID=" + prodPlacementMember;
	            }
				
				document.getElementById('productid').value = productid;
				document.getElementById('colorid').value = color;
				document.getElementById('sizeid').value = size;
				document.getElementById('params').value = params;      
				
				var url = '/store/os/addtocart.aspx';
				url += params;
				
				$('message').innerHTML = "processing...";
				$('message').style.padding = "5px";
				$('message').style.color = "#000";
				$('message').style.background = "transparent";
			    $('message').style.display = "block";
			    $('message').style.fontSize = "9px";
			    $('message').style.fontFamily = "'Courier New', Arial, Helvetica";
				
				new Ajax.Request(url,{
					method:'post',
					onSuccess: function(transport){
					 var notice = $('message');
					 var checkout = $('checkout');
                        //Update Cart Count > Defined in main.js//
                        mc.GetCartCount();
						notice.update('item added to your bag!');
						checkout.setStyle({ display: 'block' });
                        addtobagUniTag(productid, modelname);
						UpdateShoppingBag(qty, price);
					},
						onFailure: function(){ 
						notice.update('item has not been added!').setStyle({ background: '#dfd' }); 
					}
				});
				
				return false;     
		}

		
		// wait x number of secs before fading out message
		function fadeAddtoCartMsg() {
			// fade message out
			msgtimer = setTimeout("fadeMessageAway()",timer);
		}

		// decrements opacity by 1 until reaches 0
		function fadeMessageAway() {
			var ie = (document.all) ? true : false;
			if (msgtimer != null) {
				clearTimeout(msgtimer);
				msgtimer = null;
			}
			if (opac > 0) {
				// decrement var
				opac--;
				// update styles
				if (ie) {
					$('message').style.filter = "alpha(opacity=" + opac + ")";
				} else {
					$('message').style.opacity = opac/100;
				}
				// set timer
				fadetimer = setTimeout("fadeMessageAway()",10);	
			} else {
				// reset timer
				resetTimer();
			}	
		}

		// resets msg styles + fade timers + global var
		function resetTimer() {
			clearTimeout(fadetimer);
			fadetimer = null;
			// reset display
			$('message').style.display = "none";
			// reset opacity
			if (ie) {
				$('message').style.filter = "alpha(opacity=100)";
			} else {
				$('message').style.opacity = 1.0;
			}
			// reset opac var
			opac = 100;
		}
		
		function UpdateShoppingBag() {
			reloadShoppingBag();
		}
			
		function hideSelects(action) {
		if (action!='visible'){action='hidden';}
			if (navigator.appName.indexOf("MSIE")) {
				for (var S = 0; S < document.forms.length; S++){
					for (var R = 0; R < document.forms[S].length; R++) {
						if (document.forms[S].elements[R].options) {
							document.forms[S].elements[R].style.visibility = action;
							}
						}
					}
				}
			}
		
		function getItemColor(productid) { 
				if (!document.getElementById('quickViewBtn_' + productid))
						skuColor = '';
				else
						skuColor = document.getElementById('quickViewBtn_' + productid).title;

				return skuColor;
		}   
		
		var tabLinks = new Array();
	var contentDivs = new Array();

	function init() {

		// Grab the tab links and content divs from the page
		var tabListItems = document.getElementById('tabs').childNodes;
		for (var i = 0; i < tabListItems.length; i++) {
			if (tabListItems[i].nodeName == "LI") {
				var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
				var id = getHash(tabLink.getAttribute('href'));
				tabLinks[id] = tabLink;
				contentDivs[id] = document.getElementById(id);
//				var tabbg = document.getElementById('tabs');       
//		        tabbg.style.background ="url(/layout/ql/images/tab-sizecolor.gif)";
			}
		}

		// Assign onclick events to the tab links, and
		// highlight the first tab
		var i = 0;

		for (var id in tabLinks) {
			tabLinks[id].onclick = showTab;
			tabLinks[id].onfocus = function() { this.blur() };
			if (i == 0) tabLinks[id].className = 'selected';
			i++;
		}

		// Hide all content divs except the first
		var i = 0;

		for (var id in contentDivs) {
			if (i!= 0) contentDivs[id].className = 'tabContent hide';
			i++;      
		}    
		
		contentDivs["sizecolor"].className = 'tabContent';
		
		if (brow != 7 && brow != 9)	{	

		Cufon.replace('.model-name',{ fontFamily: 'Futura MdCn BT' });

		var salepriceactive = jQuery("span").hasClass('crossedout');
		if (salepriceactive) {
				Cufon.replace('#UnitCostSpan', { fontFamily: 'Futura MdCn BT', color: '-linear-gradient(#A0410D, #A0410D)' });
			} else {
			}
		}


	}

	function showTab() {
		var selectedId = getHash(this.getAttribute('href'));

		// Highlight the selected tab, and dim all others.
		// Also show the selected content div, and hide all others.
		for (var id in contentDivs) {
			if (id == selectedId) {
				tabLinks[id].className = 'selected';
				contentDivs[id].className = 'tabContent';

				//var tabbg = $("tabs");
				//tabbg.style.background ="url(/layout/ql/images/tab-"+selectedId+".gif)";
			} else {
				tabLinks[id].className = '';
				contentDivs[id].className = 'tabContent hide';
			}
		}

		// Stop the browser following the link
		return false;
	}

	function getFirstChildWithTagName(element, tagName) {
		for (var i = 0; i < element.childNodes.length; i++) {
			if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
		}
	}

	function getHash(url) {
		var hashPos = url.lastIndexOf('#');
		return url.substring(hashPos + 1);
	}