/*
buell.fx.pack.js, effects for buell.com
Friday, July 05, 2006
v 1.0.0

"If I have seen farther than others, it is because I was standing on the shoulders of giants."
- Isaac Newton
*/


fx.featuresWidget = Class.create();
fx.featuresWidget.prototype = {

	THROBBER_DELAY_MS	: 150,

	fwSpecifications	: Object(),
	fwAccordion			: Object(),
	fwToggles			: Object(),
	fwStretchers		: Object(),
	fwCurrentFeature	: 0,
	fwCurrentDetail		: -1,
	fwOpacity			: Object(),
	fwTextOpacity		: Object(),
	fwThrobberTimeout	: Object(),

	initialize: function(jsonURL) {
		//-- for IE6 but not IE7, Moz, Safari, Opera...
		if (typeof document.body.style.maxHeight == "undefined") {
			try {
			  document.execCommand('BackgroundImageCache', false, true);
			} catch(e) { /* unless it's not IE6... */ }
		} // if

		new ajax(jsonURL, { method: 'get', onComplete: this.renderFeaturesMenu.bind(this) } );
	}, // constructor..initialize

	parseUrlForFilename: function(url) {
	    var e=/^((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?$/;
		return (url.match(e)) ? RegExp.$6 : "";
    }, // method..parseUrlForFilename

	renderFeaturesMenu: function(xhr) {
		//-- we're back from the break...
		try {
			this.fwSpecifications = eval("("+xhr.responseText+")"); //-- 'responseText' is a JSON object
		} catch(e) {
			alert("There was difficulty in retriving the features data for this motorcycle.");
			return false;
		} // try..catch

		//-- build up features menu
		var html = '';
		var voidCount = 0;
		this.fwSpecifications.motorcycle.features.each(
			function(feature,featureIdx) {
				html += '<div class="featurenav">';
				html += '<h3 class="display" id="'+feature.id+'"><a href="#" id="'+feature.id+'FeatureAnchor" class="off"></a></h3>';
				html += '<div class="stretcher" id="'+feature.id+'Stretcher">';
				//-- build up small diagram bullets
				feature.details.each(
					function(detail,detailIdx) {
						html += '<div class="bullet" style="position: absolute; top: '+(detail.smallDiagramCoords.top-3)+'px; left: '+(detail.smallDiagramCoords.left-3)+'px;"><a href="#" id="smbullet_'+featureIdx+'_'+detailIdx+'"></a></div>';
					} // function..detail
				); // each..details
				html += '<ul>';
				//-- build up menu/detail items
				feature.details.each(
					function(detail,detailIdx) {
						html += '<li><a href="#" id="detailAnchor_'+featureIdx+'_'+detailIdx+'">'+detail.detailTitle+'</a></li>';
					} // function..detail
				); // each..details
				html += '</ul>';
				html += '</div>';
				html += '</div>';
			} // function..feature
		); // each..features
		$('featuresnav').innerHTML = html;

		var html = '';
		html += '<img src="'+this.fwSpecifications.motorcycle.imagePath+'" alt="" width="584" height="370" />';
		$('featuresDisplayContainer').innerHTML = html;
		
		//-- link up event handlers
		this.fwSpecifications.motorcycle.features.each(
			function(feature,featureIdx) {
				$(feature.id+'FeatureAnchor').onclick = function() {
					this.renderFeaturePane(featureIdx);
					this.revealFeaturePane(featureIdx);
				}.bind(this);							
				feature.details.each(
					function(detail,detailIdx) {
						$('smbullet_'+featureIdx+'_'+detailIdx).onclick = function() {
							this.renderDetailPane(featureIdx,detailIdx);
						}.bind(this);
						$('smbullet_'+featureIdx+'_'+detailIdx).onmouseover = function() {
							this.setTriLightStateClass(featureIdx,detailIdx,'on');
						}.bind(this);
						$('smbullet_'+featureIdx+'_'+detailIdx).onmouseout = function() {
							this.setTriLightStateClass(featureIdx,detailIdx,'off');
						}.bind(this);

						$('detailAnchor_'+featureIdx+'_'+detailIdx).onclick = function() {
							this.renderDetailPane(featureIdx,detailIdx);
						}.bind(this);
						$('detailAnchor_'+featureIdx+'_'+detailIdx).onmouseover = function() {
							this.setTriLightStateClass(featureIdx,detailIdx,'on');
						}.bind(this);
						$('detailAnchor_'+featureIdx+'_'+detailIdx).onmouseout = function() {
							this.setTriLightStateClass(featureIdx,detailIdx,'off');
						}.bind(this);
					}.bind(this) // function..detail
				); // each..details
			}.bind(this) // function..feature
		) // each..features
			
		this.fwStretchers	= document.getElementsByClassName('stretcher');
		this.fwToggles		= document.getElementsByClassName('display');
		this.fwAccordion	= new fx.Accordion( this.fwToggles, this.fwStretchers, {opacity: true, duration: 400} );

		$('closeBoxAnchor').onclick = function() {
			this.closeDetailPane();
		}.bind(this);

		this.renderFeaturePane(0);
		this.revealFeaturePane(0);
	}, // method..renderFeaturesMenu

	setTriLightStateClass: function(currentFeatureIdx,currentDetailIdx,stateClass) {
		if(this.fwCurrentDetail!=currentDetailIdx) {
			var sfx = currentFeatureIdx+'_'+currentDetailIdx;
			if($('bullet_'+sfx)) $('bullet_'+sfx).className = stateClass;
			$('smbullet_'+sfx).className = stateClass;
			$('detailAnchor_'+sfx).className = stateClass;
		} // if
	}, // method..setTriLightStateClass

	closeDetailPane: function() {
		$('detailDisplayContainer').style.display = 'none';
		$('featuresDisplayContainer').style.display = 'block';

		this.fwCurrentDetail = -1;
		this.fwSpecifications.motorcycle.features[this.fwCurrentFeature].details.each(
			function(detail,detailIdx) {
				this.setTriLightStateClass(this.fwCurrentFeature,detailIdx,'off');
			}.bind(this) // function..detail
		); // each
	}, // method..closeDetailPane

	revealFeaturePane: function(currentFeatureIdx) {
		$('detailDisplayContainer').style.display = 'none';
		$('featuresDisplayContainer').style.display = 'block';
		
		this.fwAccordion.showThisHideOpen(this.fwStretchers[currentFeatureIdx]);
	}, // method..revealFeaturePane
	
	renderFeaturePane: function(currentFeatureIdx) {
		//-- build up large diagram bullets
		var html = '';
		this.fwSpecifications.motorcycle.features[currentFeatureIdx].details.each(
			function(detail,detailIdx) {
				html += '<div class="bullet" style="position: absolute; top: '+(detail.largeDiagramCoords.top-14)+'px; left: '+(detail.largeDiagramCoords.left-14)+'px;"><a href="#" id="bullet_'+currentFeatureIdx+'_'+detailIdx+'"><img src="/_media/images/common/spacer.gif" alt="" width="14" height="14" /></a></div>';
			} // function..detail
		); // each..details
		html += '<img src="'+this.fwSpecifications.motorcycle.imagePath+'" alt="" width="584" height="370" />';
		$('featuresDisplayContainer').innerHTML = html;

		//-- link up event handlers
		this.fwSpecifications.motorcycle.features[currentFeatureIdx].details.each(
			function(detail,detailIdx) {
				$('bullet_'+currentFeatureIdx+'_'+detailIdx).onclick = function() {
					this.renderDetailPane(currentFeatureIdx,detailIdx);
				}.bind(this);
				$('bullet_'+currentFeatureIdx+'_'+detailIdx).onmouseover = function() {
					this.setTriLightStateClass(currentFeatureIdx,detailIdx,'on');
				}.bind(this);
				$('bullet_'+currentFeatureIdx+'_'+detailIdx).onmouseout = function() {
					this.setTriLightStateClass(currentFeatureIdx,detailIdx,'off');
				}.bind(this);
			}.bind(this) // function..detail
		) // each..features
		
		this.fwSpecifications.motorcycle.features.each(
			function(feature,featureIdx) {
				$(feature.id+'FeatureAnchor').className = (featureIdx==currentFeatureIdx) ? 'on' : 'off';
			} // function..feature
		); // each

		this.fwSpecifications.motorcycle.features[currentFeatureIdx].details.each(
			function(detail,detailIdx) {
				var sfx = currentFeatureIdx+'_'+detailIdx;
				if($('bullet_'+sfx)) 
					$('bullet_'+sfx).className =  '';
				$('smbullet_'+sfx).className =  '';
				$('detailAnchor_'+sfx).className =  '';
			} // function..detail
		); // each

		this.fwCurrentFeature = currentFeatureIdx;
	}, // method..renderFeaturePane	

	finishDetailPaneDisplay: function(currentFeatureIdx,currentDetailIdx,rate) {
		currentDetail = this.fwSpecifications.motorcycle.features[currentFeatureIdx].details[currentDetailIdx];

		//-- rethink any scroll position to top for large amounts of text
		$('fwOverflowWindow').scrollTop = 0;

		this.fwTextOpacity = new fx.Opacity($('fwOverflowWindow') , {duration: rate} );
		this.fwTextOpacity.setOpacity(0);
		$('detailTitle').innerHTML = currentDetail.detailTitle;
		$('detailDescription').innerHTML = currentDetail.detailDescription;
		this.fwTextOpacity.custom(0,1);
	}, // method..finishDetailPaneDisplay

	renderDetailPane: function(currentFeatureIdx,currentDetailIdx) {
		if(currentDetailIdx >= 0) {
			if($('detailDisplayContainer').style.display=='none') {
				$('detailImage').onload = null;
				$('detailImage').src = '/_media/images/common/spacer.gif';
				$('detailBackgroundImage').onload = null;
				$('detailBackgroundImage').src = '/_media/images/common/spacer.gif';

				$('detailTitle').innerHTML = '';
				$('detailDescription').innerHTML = '';
				$('detailDisplayContainer').style.display = 'block';

				this.finishDetailPaneDisplay(currentFeatureIdx,currentDetailIdx,500);
			} else {
				this.fwTextOpacity = new fx.Opacity($('fwOverflowWindow') , {duration: 250, onComplete: function() { this.finishDetailPaneDisplay(currentFeatureIdx,currentDetailIdx,250)}.bind(this) } );
				this.fwTextOpacity.custom(1,0);
			} // if

			currentDetail = this.fwSpecifications.motorcycle.features[currentFeatureIdx].details[currentDetailIdx];

			//-- make sure they are different!  Safari has a problem with onload events otherwise...
			if(this.parseUrlForFilename($('detailImage').src) != this.parseUrlForFilename(currentDetail.imagePath)) {
				//-- put current image to back, when DOM done, THEN load new image, when DOM done, THEN fade new image
				$('detailBackgroundImage').onload = function() {
					$('detailImage').style.display = 'none';
					this.fwOpacity = new fx.Opacity($('detailImage') , {duration: 500} );
					this.fwOpacity.setOpacity(0);
					//-- need a fraction of a second for setOpacity to register w/DOM
					setTimeout(function() {
						$('detailImage').onload = function() {
							window.clearTimeout(this.fwThrobberTimeout);
							$('throbber').style.display = 'none';
							$('detailImage').style.display = 'block';
							this.fwOpacity.custom(0,1);
						}.bind(this);
						$('detailImage').src = currentDetail.imagePath;
					}.bind(this)
					,20); // setTimeout
				}.bind(this);

				this.fwThrobberTimeout = window.setTimeout(function() { $('throbber').style.display = 'block';	}, this.THROBBER_DELAY_MS);
				$('detailBackgroundImage').src = $('detailImage').src;
			} // if
	
			this.fwSpecifications.motorcycle.features[currentFeatureIdx].details.each(
				function(detail,detailIdx) {
					var sfx = currentFeatureIdx+'_'+detailIdx;
					if($('bullet_'+sfx)) 
						$('bullet_'+sfx).className =  (detail.id==currentDetail.id) ? 'on' : '';
					$('smbullet_'+sfx).className =  (detail.id==currentDetail.id) ? 'on' : '';
					$('detailAnchor_'+sfx).className =  (detail.id==currentDetail.id) ? 'on' : '';
				}.bind(this) // function..detail
			); // each
			
			//-- generate 'back' link
			if((currentFeatureIdx==0) && (currentDetailIdx==0)) {
				$('detailLinkBackContainer').style.display = 'none';
			} else {
				$('detailLinkBackContainer').style.display = 'inline';
				if(currentDetailIdx==0) {
					$('detailLinkBackContainer').onclick = function() {
						this.renderFeaturePane(currentFeatureIdx-1);
						this.renderDetailPane(currentFeatureIdx-1,this.fwSpecifications.motorcycle.features[currentFeatureIdx-1].details.length-1);
					}.bind(this);
				} else {
					$('detailLinkBackContainer').onclick = function() {
						this.renderDetailPane(currentFeatureIdx,currentDetailIdx-1);
					}.bind(this);							
				} // if..else
			} // if..else
	
			//-- generate 'next' link
			if((currentFeatureIdx==(this.fwSpecifications.motorcycle.features.length-1)) && (currentDetailIdx==this.fwSpecifications.motorcycle.features[currentFeatureIdx].details.length-1)) {
				$('detailLinkNextContainer').style.display = 'none';
			} else {
				$('detailLinkNextContainer').style.display = 'inline';
				if(currentDetailIdx==(this.fwSpecifications.motorcycle.features[currentFeatureIdx].details.length-1)) {
					$('detailLinkNextContainer').onclick = function() {
						this.renderFeaturePane(currentFeatureIdx+1);
						this.renderDetailPane(currentFeatureIdx+1,0);
					}.bind(this);							
				} else {
					$('detailLinkNextContainer').onclick = function() {
						this.renderDetailPane(currentFeatureIdx,currentDetailIdx+1);
					}.bind(this);							
				} // if..else
			} // if..else
		} else {
			this.closeDetailPane();
		} // if..else..currentDetailIdx

		this.fwSpecifications.motorcycle.features.each(
			function(feature,fIdx) {
				$(feature.id+'FeatureAnchor').className = (currentFeatureIdx==fIdx) ? 'on' : 'off';
			} // function..feature
		); // each
		
		this.fwAccordion.showThisHideOpen(this.fwStretchers[currentFeatureIdx]);

		this.fwCurrentDetail = currentDetailIdx;
	} // method..renderDetailPane
	
} // featuresWidget..class


fx.galleryWidget = Class.create();
fx.galleryWidget.prototype = {

	THROBBER_DELAY_MS	: 150,

	fwImages			: Object(),
	fwPositioning		: Object(),
	fwOpacity			: Object(),
	fwThrobberTimeout	: Object(),
	
	initialize: function(jsonURL) {
		new ajax(jsonURL, { method: 'get', onComplete: this.renderThumbnailMenu.bind(this) } );
	}, // constructor..initialize

	
	parseUrlForFilename: function(url) {
	    var e=/^((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?$/;
		return (url.match(e)) ? RegExp.$6 : "";
    }, // method..parseUrlForFilename
	
	renderThumbnailMenu: function(xhr) {
		//-- we're back from the break...
		try {
			this.fwImages = eval("("+xhr.responseText+")"); //-- 'responseText' is a JSON object
		} catch(e) {
			alert("There was difficulty in retriving the gallery data for this motorcycle.");
			return false;
		} // try..catch

		//-- build up thumbnails menu
		var html = '';
		html += '<table cellspacing="0" cellpadding="0"><tr>';
		this.fwImages.gallery.images.each(
			function(image,imageIdx) {
				html += '<td><a href="#" id="thumbnailImageAnchor'+imageIdx+'"><img src="'+this.fwImages.gallery.basePath+image.thumbnailImagePath+'" alt="" width="40" height="40" id="thumbnailImage'+imageIdx+'" /></a></td>';
				if((imageIdx % 3)==2) { html += '</tr><tr>' }
			}.bind(this) // function..feature
		); // each..features
		html += '</tr></table>';
		$('gallerynav').innerHTML = html;

		//-- link up event handlers
		this.fwImages.gallery.images.each(
			function(image,imageIdx) {
				$('thumbnailImageAnchor'+imageIdx).onclick = function() {
					this.presentGalleryImage(imageIdx);
				}.bind(this);							
			}.bind(this) // function..feature
		) // each..features

		//-- show the first one
		this.presentGalleryImage(0);
	}, // method..renderThumbnailMenu

	presentGalleryImage: function(imageIdx) {
		html = this.fwImages.gallery.downloadLinkText+': ';
		this.fwImages.gallery.images[imageIdx].wallpapers.each(
			function(wallpaper,wallpaperIdx) {
				html += '<a target="_blank" href="../../../tools/wallpaper.asp?BikeURL='+this.fwImages.gallery.basePath+wallpaper.path+'">'+wallpaper.size+'</a> | ';
			}.bind(this) // function..feature
		); // each..features
		$('galleryWallLink').innerHTML = html.substring(0,html.length-2);

		//-- put current image to back, when DOM done, THEN load new image, when DOM done, THEN fade new image
		$('galleryBackgroundImage').onload = function() {
			this.fwOpacity = new fx.Opacity($('galleryImage') , {duration: 500} );
			this.fwOpacity.setOpacity(0);
			//-- need a fraction of a second for setOpacity to register w/DOM
			setTimeout(function() {
				$('galleryImage').onload = function() {
					window.clearTimeout(this.fwThrobberTimeout);
					$('throbber').style.display = 'none';
					this.fwOpacity.custom(0,1);
				}.bind(this);
				$('galleryImage').src = this.fwImages.gallery.basePath+this.fwImages.gallery.images[imageIdx].webImagePath;
			}.bind(this)
			,20); // setTimeout
		}.bind(this);

		//-- make sure they are different!  Safari has a problem with onload events otherwise...
		if(this.parseUrlForFilename($('galleryImage').src) != this.parseUrlForFilename(this.fwImages.gallery.images[imageIdx].webImagePath)) {
			this.ip = new fx.ImgPuff('thumbnailImage'+imageIdx, {duration: 350,
				onComplete : function() {
					this.fwThrobberTimeout = window.setTimeout(function() { $('throbber').style.display = 'block'; }, this.THROBBER_DELAY_MS);
					$('galleryBackgroundImage').src = $('galleryImage').src;
				}.bind(this)
			});
			this.ip.puff();
		} // if
	} // method..presentGalleryImage

} // galleryWidget..class


fx.colorsWidget = Class.create();
fx.colorsWidget.prototype = {

	THROBBER_DELAY_MS	: 150,

	fwColors			: Object(),
	fwAccordion			: Object(),
	fwToggles			: Object(),
	fwStretchers		: Object(),
	fwCurrentColor		: 0,
	fwCurrentView		: 0,
	fwOpacity			: Object(),
	fwThrobberTimeout	: Object(),

	initialize: function(jsonURL) {
		new ajax(jsonURL, { method: 'get', onComplete: this.renderColorsMenu.bind(this) } );
	}, // constructor..initialize

	parseUrlForFilename: function(url) {
	    var e=/^((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?$/;
		return (url.match(e)) ? RegExp.$6 : "";
    }, // method..parseUrlForFilename
	
	renderColorsMenu: function(xhr) {
		//-- we're back from the break...
		try {
			this.fwColors = eval("("+xhr.responseText+")"); //-- 'responseText' is a JSON object
		} catch(e) {
			alert("There was difficulty in retriving the colors data for this motorcycle.");
			return false;
		} // try..catch

		//-- build up features menu
		var html = '';
		this.fwColors.motorcycle.colors.each(
			function(color,colorIdx) {
				html += '<div class="colornav">'+"\n";
				html += '<h3 class="display" id="'+color.id+'"><a id="'+color.id+'ColorAnchor" href="#" class="off"></a></h3>'+"\n";
				html += '<div class="stretcher '+color.id+'" id="'+color.id+'insert">'+"\n";

				color.views.each(
					function(view,viewIdx) {
						html += '<div id="'+color.id+view.id+'" class="viewButton"><a id="colorAnchor_'+colorIdx+'_'+viewIdx+'" href="#" class="off"></a></div>'+"\n";
					}.bind(this) // function..view
				); // each..view
				html += '<p>&nbsp;</p>'+"\n";

				html += '</div>'+"\n";
				html += '</div>'+"\n";
			} // function..feature
		); // each..features
		$('colorsnav').innerHTML = html;

		//-- link up event handlers
		this.fwColors.motorcycle.colors.each(
			function(color,colorIdx) {
				$(color.id+'ColorAnchor').onclick = function() {
					this.renderColorPane(colorIdx);
				}.bind(this);

				color.views.each(
					function(view,viewIdx) {
						$('colorAnchor_'+colorIdx+'_'+viewIdx).onclick = function() {
							this.renderViewPane(colorIdx,viewIdx);
						}.bind(this);
					}.bind(this) // function..view
				); // each..views

			}.bind(this) // function..color
		) // each..colors

		this.fwStretchers	= document.getElementsByClassName('stretcher');
		this.fwToggles		= document.getElementsByClassName('display');
		this.fwAccordion	= new fx.Accordion( this.fwToggles, this.fwStretchers, {opacity: true, duration: 400} );

		this.renderColorPane(0);
	}, // method..renderColorsMenu

	renderColorPane: function(currentColorIdx) {
		this.fwAccordion.showThisHideOpen(this.fwStretchers[currentColorIdx]);

		this.fwColors.motorcycle.colors.each(
			function(color,colorIdx) {
				$(color.id+'ColorAnchor').className = (currentColorIdx==colorIdx) ? 'on' : 'off';
			} // function..colors
		); // each

		this.fwCurrentColor = currentColorIdx;
		this.renderViewPane(currentColorIdx,0);
	}, // method..renderColorPane

	renderViewPane: function(currentColorIdx,currentViewIdx) {
		this.fwColors.motorcycle.colors[currentColorIdx].views.each(
			function(view,viewIdx) {
				$('colorAnchor_'+currentColorIdx+'_'+viewIdx).className = (currentViewIdx==viewIdx) ? 'on' : 'off';
			} // function..view
		); // each

		//-- put current image to back, when DOM done, THEN load new image, when DOM done, THEN fade new image
		$('colorsBackgroundImage').onload = function() {
			this.fwOpacity = new fx.Opacity($('colorsImage') , {duration: 500} );
			this.fwOpacity.setOpacity(0);
			//-- need a fraction of a second for setOpacity to register w/DOM
			setTimeout(function() {
				$('colorsImage').onload = function() {
					window.clearTimeout(this.fwThrobberTimeout);
					$('throbber').style.display = 'none';
					this.fwOpacity.custom(0,1);
				}.bind(this);
				$('colorsImage').src = this.fwColors.motorcycle.basePath+'/'+this.fwColors.motorcycle.colors[currentColorIdx].views[currentViewIdx].image;
			}.bind(this)
			,20); // setTimeout
		}.bind(this);

		//-- make sure they are different!  Safari has a problem with onload events otherwise...
		if(this.parseUrlForFilename($('colorsImage').src) != this.parseUrlForFilename(this.fwColors.motorcycle.colors[currentColorIdx].views[currentViewIdx].image)) {
			this.fwThrobberTimeout = window.setTimeout(function() { $('throbber').style.display = 'block';	}, this.THROBBER_DELAY_MS);
			$('colorsBackgroundImage').src = $('colorsImage').src;
		} // if
		
		this.fwCurrentView = currentViewIdx;
	} // method..renderViewPane

} // colorsWidget..class


fx.ImgPuff = Class.create();
fx.ImgPuff.prototype = Object.extend(new fx.Base(), {
	initialize: function(el, options) {
		this.el = $(el);
		this.setOptions(options);
		this.now = [0,0];
	},

	step: function() {
		var time  = (new Date).getTime();
		if (time >= this.options.duration+this.startTime) {
			this.now = this.to;
			this.trans = this.sizeTo;
			this.opacity = 0;
			clearInterval (this.timer);
			this.timer = null;
			document.body.removeChild(this.el)
			if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);
		}
		else {
			var Tpos = (time - this.startTime) / (this.options.duration);
			var tmp = [];
			var tmpTrans = [];
			tmp[0] = (this.options.transition(Tpos) * (this.to[0]-this.from[0]) + this.from[0]);
			tmp[1] = (this.options.transition(Tpos) * (this.to[1]-this.from[1]) + this.from[1]);
			tmpTrans[0] = (this.options.transition(Tpos) * (this.sizeTo[0]-this.sizeFrom[0]) + this.sizeFrom[0]);
			tmpTrans[1] = (this.options.transition(Tpos) * (this.sizeTo[1]-this.sizeFrom[1]) + this.sizeFrom[1]);
			this.now = tmp;
			this.trans = tmpTrans;
			this.opacity = (1-this.options.transition(Tpos));
		}
		this.increase();
	},

	increase: function() {
		this.el.style["left"] = this.now[0] + "px";
		this.el.style["top"] = this.now[1] + "px";
		this.el.style["height"] = this.trans[0] + "px";
		this.el.style["width"] = this.trans[1] + "px";
		this.setOpacity(this.opacity);
	},

	setOpacity: function(opacity) {
		if (opacity == 0 && this.el.style.visibility != "hidden") this.el.style.visibility = "hidden";
		else if (this.el.style.visibility != "visible") this.el.style.visibility = "visible";
		if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + opacity*100 + ")";
		this.el.style.opacity = opacity;
	},

	setToSamePos: function(sourceObj,targetObj) {
		var curleft = 0;
		var curtop = 0;
		if (sourceObj.offsetParent) {
			while (sourceObj.offsetParent) {
				curleft += sourceObj.offsetLeft;
				curtop += sourceObj.offsetTop;
				sourceObj = sourceObj.offsetParent;
			}
		} else {
			if (sourceObj.x) curleft += sourceObj.x;
			if (sourceObj.y) curtop += sourceObj.y;
		}
		targetObj.style["left"] = curleft+'px';
		targetObj.style["top"] = curtop+'px';
	},

	puff: function() {
		this.puffImg = document.createElement('IMG');
		this.puffImg.src = this.el.src;
		this.puffImg.style["position"]	= 'absolute';
		this.puffImg.style["zIndex"] = '100';
		this.setToSamePos(this.el,this.puffImg);

		this.el = this.puffImg;
		document.body.appendChild(this.el);

		this.sizeFrom=[this.el.width,this.el.height];
		this.sizeTo=[this.el.width*2,this.el.height*2];
		this.custom( [this.el.offsetLeft,this.el.offsetTop], [this.el.offsetLeft-(this.el.height/2),this.el.offsetTop-(this.el.width/2)] );
	}
});