islandora/collection_views/yui_coverflow/js/CoverFlow.js

/**
 * @author elmasse (Maximiliano Fierro)
 * @version 0.1 beta
 *
 * @usage:
 * <code> 
 * 	var images = [
 * 				  {src: 'images/ardillitaMac.jpg'},
 *	              {src: 'http://farm2.static.flickr.com/1380/1426855399_b4b8eccbdb.jpg?v=0'},
 *	              {src: 'http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg'}
 *	              ];
 *	var myCoverFlow = new YAHOO.ext.CoverFlow('coverFlowTest', {height: 200, width: 800, images: images, bgColor: '#C0C0C0'});
 *	</code>
 *
 */


YAHOO.namespace("ext");

//(function(){

	/**
	 * @class CoverFlow 
	 * @namespace YAHOO.ext
	 * @constructor
	 * @param el {String|HTMLElement} Reference to element where CoverFlow will be rendered.
	 * @param config {Object} configuration object
	 *        config.height {Number} Element height. Optional. Default: CoverFlow.DEFAULT_HEIGHT.
	 *        config.width  {Number} Element width. Optional. Default: CoverFlow.DEFAULT_WIDTH.
	 *        config.images {Array} Array of Images. [{src:}]
	 *        config.bgColor {String} Background color. Could be in the form #00000 or black. Optional. Default: CoverFlow.DEFAULT_BG_COLOR. 
	 *        
	 */
	YAHOO.ext.CoverFlow = function(el, userConfig){
		if(el)
			this.init(el, userConfig || {});
	};
	
	//shortcuts
	var CoverFlow = YAHOO.ext.CoverFlow; 
	var Dom = YAHOO.util.Dom;

	
	/**
	 * Defaults
	 */
	CoverFlow.DEFAULT_HEIGHT = 300;
	CoverFlow.DEFAULT_WIDTH = 800;
	CoverFlow.DEFAULT_BG_COLOR = '#000000'; 
	CoverFlow.IMAGE_SEPARATION = 50;
	CoverFlow.RIGHT = 'right';
	CoverFlow.LEFT = 'left';
	CoverFlow.LABEL_CLASS = 'coverFlowLabel';
	
	CoverFlow.prototype = {
		//Images array (it's a sort of transient var)
		images: [],	
		//Items array {CoverFlowItem[]}
		coverFlowItems: [],
		
		remainingImages: 9999,
		
		element: null,
		labelElement: null,
		containerHeight: 0,
		containerWidth: 0,
		
		imageHeightRatio: 0.6,
		imageWidthRatio: 0.2,
		reflectionRatio: 0.6, // this causes:  imageTotalHeightRatio = imageHeightRatio + imageHeightRatio*reflectionRatio
		topRatio: 0.1,
		sideRatio: 0.4,
		
		perspectiveAngle: 20,
		imageZIndex: 1000,
		selectedImageZIndex: 9999,
		selectedItem: 0,
		
		moveQueue: [],
		animationWorking: false,
		
		init: function(el, userConfig){
		
			this.element = Dom.get(el);
			this.applyConfig(userConfig);
			
			if(userConfig.images)
				this.addImages(userConfig.images);
			
			this.attachEventListeners();
			this.createLabelElement();
		},
		
		applyConfig: function(config){
			this.containerHeight = config.height || CoverFlow.DEFAULT_HEIGHT;
			this.containerWidth = config.width || CoverFlow.DEFAULT_WIDTH;
			this.backgroundColor = config.bgColor || CoverFlow.DEFAULT_BG_COLOR;
			
			this.element.style.position = 'relative';
			this.element.style.height = this.containerHeight + 'px';
			this.element.style.width = this.containerWidth + 'px';
			this.element.style.background = this.backgroundColor;
			this.element.style.overflow = 'hidden';
		},
		
		addImages: function(images){
			this.images = [];
			this.remainingImages = images.length;

			for(var i=0; i < images.length; i++){
				var img = images[i];
				var image = new Image();
				image.id = Dom.generateId();
				image.index = i;
				image.onclick = img.onclick;
				image.label = img.label;
				
				//hide images
				image.style.visibility = 'hidden';
				image.style.display = 'none';
				//this is to maintain image order since image.onload will be called randomly
				this.element.appendChild(image);
				//a shortcut to not create another context to call onload
				var me = this;
//				image.onload = function(){
//					CoverFlow.preloadImage(me, this); // this = image
//				};
				YAHOO.util.Event.on(image, 'load', this.preloadImage, image, this);
				image.src = img.src;
				
			};		
			
		},
		
		/**
		 * @function preloadImage
		 * @param event
		 * @param image
		 * @return void
		 */
		preloadImage : function(e, image){
			this.images.push(image);
			this.checkAllImagesLoaded();
		},
		
		checkAllImagesLoaded: function(){
			this.remainingImages--;
			if(!this.remainingImages){
				this.setup();
			}
		},
		
		setup: function(){
			this.createCoverFlowItems();
			this.sortCoverFlowItems();
			this.initCoverFlow();
		},
		
		initCoverFlow: function(){
			
			for(var i=0; i < this.coverFlowItems.length; i++){
				var coverFlowItem = this.coverFlowItems[i];
				
				var angle = 0;
				var direction;

				if(i==0){
					coverFlowItem.setZIndex(this.selectedImageZIndex);
					coverFlowItem.setLeft(this.getCenter() - coverFlowItem.element.width/2);
					coverFlowItem.isSelected(true);
					this.selectedItem = 0;
					this.showLabel(coverFlowItem.getLabel());
				}else{
					angle = this.perspectiveAngle;
					direction = CoverFlow.LEFT;
					coverFlowItem.setZIndex(this.imageZIndex - i);
					coverFlowItem.setLeft( this.getRightStart()+ (i - 1)* CoverFlow.IMAGE_SEPARATION);
					coverFlowItem.isSelected(false);
				}
				coverFlowItem.setAngle(angle);
				coverFlowItem.drawInPerspective(direction);
			}
		},
		
		createLabelElement: function(){
			var label = document.createElement('div');
			label.id = Dom.generateId();
			label.style.position = 'absolute';
			label.style.top = this.getFooterOffset() + 'px';
			label.innerHTML = ' ';
			label.style.textAlign = 'center';
			label.style.width = this.containerWidth + 'px';
			label.style.zIndex = this.selectedImageZIndex + 10;
			label.className = CoverFlow.LABEL_CLASS;
			this.labelElement = this.element.appendChild(label);
		},
		
		showLabel: function(text){
			if(text)
				this.labelElement.innerHTML = text;
			else
				this.labelElement.innerHTML = '';
		},
		
		attachEventListeners: function(){
			new YAHOO.util.KeyListener(this.element, { keys:39 },  							
					  { fn:this.selectNext,
						scope:this,
						correctScope:true } ).enable();

			new YAHOO.util.KeyListener(this.element, { keys:37 },  							
					  { fn:this.selectPrevious,
						scope:this,
						correctScope:true } ).enable();
			

		},
		
		select: function(e,coverFlowItem){
			var distance = this.selectedItem - coverFlowItem.index;
			if(distance < 0){
				for(var i=0; i < -distance; i++)
					this.selectNext();
			}else{
				for(var i=0; i < distance; i++)
					this.selectPrevious();
			}
		},
		
		
		selectNext: function(){
			if(this.animationWorking){
				this.moveQueue.push('moveLeft');
				return;
			}
			
			var animateItems = [];
			
			for(var i=0; i < this.coverFlowItems.length; i++){
				var coverFlowItem = this.coverFlowItems[i];
				var isLast = (this.selectedItem == this.coverFlowItems.length -1);
				if(!isLast){
					var distance = i-this.selectedItem;

					if(distance == 0){// selected
						coverFlowItem.setZIndex(this.imageZIndex);
						coverFlowItem.isSelected(false);
						animateItems.push({item: coverFlowItem, attribute:{angle: {start: 0, end: this.perspectiveAngle} } });

						coverFlowItem = this.coverFlowItems[++i];
						coverFlowItem.isSelected(true);
						this.showLabel(coverFlowItem.getLabel());
						animateItems.push({item: coverFlowItem, attribute:{angle: {start: this.perspectiveAngle, end: 0} } });
						
					}else{
						animateItems.push({item: coverFlowItem, attribute: {left: {start:coverFlowItem.getLeft(), end: coverFlowItem.getLeft() - CoverFlow.IMAGE_SEPARATION} }});
					}
				}
			}
			
			var animation = new CoverFlowAnimation({
				direction: CoverFlow.LEFT,
				center: this.getCenter(),
				startLeftPos: this.getLeftStart(),
				startRightPos: this.getRightStart()
			}, 
			animateItems, 0.5);
	
			animation.onStart.subscribe(this.handleAnimationWorking, this);
			animation.onComplete.subscribe(this.handleQueuedMove, this);

			animation.animate();

			if(this.selectedItem + 1 < this.coverFlowItems.length)
				this.selectedItem++;
		},

		selectPrevious: function(){
			if(this.animationWorking){
				this.moveQueue.push('moveRight');
				return;
			}
			
			var animateItems = [];
			
			for(var i=0; i < this.coverFlowItems.length; i++){
				var coverFlowItem = this.coverFlowItems[i];
				var isFirst = (this.selectedItem == 0);
				var distance = i-this.selectedItem;
				if(!isFirst){
					if(distance == - 1){
						coverFlowItem.setZIndex(this.selectedImageZIndex);
						coverFlowItem.isSelected(true);
						this.showLabel(coverFlowItem.getLabel());
						animateItems.push({item: coverFlowItem, attribute: {angle: {start: this.perspectiveAngle, end: 0}}});
						
						coverFlowItem = this.coverFlowItems[++i];
						coverFlowItem.isSelected(false);
						coverFlowItem.setZIndex(this.imageZIndex);
						animateItems.push({item: coverFlowItem, attribute: {angle: {start: 0, end: this.perspectiveAngle}}});
					}else{
						coverFlowItem.setZIndex(coverFlowItem.getZIndex() - 1);
						animateItems.push({item: coverFlowItem, attribute: {left: {start:coverFlowItem.getLeft(), end: coverFlowItem.getLeft() + CoverFlow.IMAGE_SEPARATION} }});
					}
				}
			}
			var animation = new CoverFlowAnimation({
				direction: CoverFlow.RIGHT,
				center: this.getCenter(),
				startLeftPos: this.getLeftStart(),
				startRightPos: this.getRightStart()
			}, 
			animateItems, 0.5);
			
			animation.onStart.subscribe(this.handleAnimationWorking, this);
			animation.onComplete.subscribe(this.handleQueuedMove, this);
			
			animation.animate();

			if(this.selectedItem > 0)
				this.selectedItem--;
		},
		
		handleAnimationWorking: function(a, b, cf){
			cf.animationWorking = true;
		},
		
		handleQueuedMove: function(msg, data, cf){
			cf.animationWorking = false;
			
			var next = cf.moveQueue.pop();
			if(next == 'moveLeft')
				cf.selectNext();
			if(next == 'moveRight')
				cf.selectPrevious();
		},
		
		getCenter: function(){
			return this.containerWidth / 2;
		},
		
		getRightStart: function() {
			return this.containerWidth - this.sideRatio * this.containerWidth;
		},
		
		getLeftStart: function() {
			return this.sideRatio * this.containerWidth;
		},
		
		sortCoverFlowItems: function(){
			function sortFunction(aCoverFlowItem, bCoverFlowItem){
				return aCoverFlowItem.index - bCoverFlowItem.index;
			}
			
			this.coverFlowItems.sort(sortFunction);
		},
		
		createCoverFlowItems: function(){
			this.coverFlowItems = [];
			for(var i=0; i<this.images.length; i++){
				var image = this.images[i];
				var coverFlowItem = new CoverFlowItem(image, {
					scaledWidth: this.scaleWidth(image), 
					scaledHeight: this.scaleHeight(image), 
					reflectionRatio: this.reflectionRatio,
					bgColor: this.backgroundColor,
					onclick: {fn: this.select, scope: this}
				});
				this.alignCenterHeight(coverFlowItem);
				this.coverFlowItems.push(coverFlowItem);
			};
			delete this.images;
		},
		
		alignCenterHeight: function(coverFlowItem){//review!!!!!
			coverFlowItem.element.style.position = 'absolute';
			
			var imageHeight = coverFlowItem.canvas.height / (1 + this.reflectionRatio);
			var top = this.getMaxImageHeight() - imageHeight;
			top += this.topRatio * this.containerHeight;
			
			coverFlowItem.setTop(top);
			
		},
		
		scaleHeight: function(image){
			var height = 0;
			if(image.height <= this.getMaxImageHeight()	&& image.width <= this.getMaxImageWidth()){
				height = image.height;
			}
			if(image.height > this.getMaxImageHeight()	&& image.width <= this.getMaxImageWidth()){
				height = ((image.height / this.getMaxImageHeight())) * image.height;
			}
			if(image.height <= this.getMaxImageHeight()	&& image.width > this.getMaxImageWidth()){
				height = ((image.width / this.getMaxImageWidth())) * image.height;
			}
			if(image.height > this.getMaxImageHeight()	&& image.width > this.getMaxImageWidth()){
				if(image.height > image.width)
					height = ((this.getMaxImageHeight() / image.height)) * image.height;
				else
					height = ((this.getMaxImageWidth() / image.width)) * image.height;
			}
			return height;
		},

		scaleWidth: function(image){
			var width = 0;
			if(image.height <= this.getMaxImageHeight()	&& image.width <= this.getMaxImageWidth()){
				width = image.width;
			}
			if(image.height > this.getMaxImageHeight()	&& image.width <= this.getMaxImageWidth()){
				width = ((image.height / this.getMaxImageHeight())) * image.width;
			}
			if(image.height <= this.getMaxImageHeight()	&& image.width > this.getMaxImageWidth()){
				width = ((image.width / this.getMaxImageWidth())) * image.width;
			}
			if(image.height > this.getMaxImageHeight()	&& image.width > this.getMaxImageWidth()){
				if(image.height > image.width)
					width = ((this.getMaxImageHeight() / image.height)) * image.width;
				else
					width = ((this.getMaxImageWidth() / image.width)) * image.width;
			}
			return width;
		},
		
		
		getMaxImageHeight: function(){
			return (this.containerHeight * this.imageHeightRatio);
		},
		
		getMaxImageWidth: function(){
			return (this.containerWidth * this.imageWidthRatio);
		},
		
		getTopOffset: function(){
			return this.containerHeight * this.topRatio;
		},
		
		getFooterOffset: function(){
			return this.containerHeight * (this.topRatio + this.imageHeightRatio);
		}
	};
	
	
	/**
	 * @class CoverFlowItem 
	 * 
	 */
	CoverFlowItem = function(image, config){
		if(image)
			this.init(image, config);
	};
	
	CoverFlowItem.prototype = {
		canvas: null,
		element: null,
		index: null,
		id: null,
		angle: 0,
		selected: false,
		onclickFn: null,
		selectedOnclickFn: null,
		label: null,
		
		onSelected: null,
		
		init: function(image, config){
			var scaledWidth = config.scaledWidth;
			var scaledHeight = config.scaledHeight;
			var reflectionRatio = config.reflectionRatio;
			var bgColor = config.bgColor;
			
			this.id = image.id;
			this.index = image.index;
			this.onclickFn = config.onclick;
			this.selectedOnclickFn = image.onclick;
			this.label = image.label;
			var parent = image.parentNode;
			this.canvas = this.createImageCanvas(image,scaledWidth,scaledHeight,reflectionRatio, bgColor);
			this.element = this.canvas.cloneNode(false);
			this.element.id = this.id;
			parent.replaceChild(this.element, image);
			
			this.onSelected = new YAHOO.util.CustomEvent('onSelected', this);
			this.onSelected.subscribe(this.handleOnclick);
			
		},
		
		getLabel: function(){
			return this.label;
		},
		
		handleOnclick: function(){
			YAHOO.util.Event.removeListener(this.element, 'click');
			if(!this.selected){
				YAHOO.util.Event.addListener(this.element, 'click', this.onclickFn.fn, this, this.onclickFn.scope);
			}else{
				if(this.selectedOnclickFn && this.selectedOnclickFn.fn)
					YAHOO.util.Event.addListener(this.element, 'click', this.selectedOnclickFn.fn, this, this.selectedOnclickFn.scope);
				else
					YAHOO.util.Event.addListener(this.element, 'click', this.selectedOnclickFn);
			}
		},
		
		isSelected: function(selected){
			this.selected = selected;
			this.onSelected.fire();
		},
		
		setAngle: function(angle){
			this.angle = angle;
		},
		
		getAngle: function(){
			return this.angle;
		},
		
		setTop: function(top){
			this.element.style.top = top + 'px'; 
		},
		
		setLeft: function(left){
			this.element.style.left = left + 'px';
		},
		
		getLeft: function(){
			var ret = this.element.style.left;
			return new Number(ret.replace("px", ""));
		},
		
		getZIndex: function(){
			return this.element.style.zIndex;
		},
		
		setZIndex: function(zIndex){
			this.element.style.zIndex = zIndex;
		},
		
		createImageCanvas: function(image, sWidth, sHeight, reflectionRatio, bgColor){

			var imageCanvas = document.createElement('canvas');
			
			if(imageCanvas.getContext){
				
				var scaledWidth = sWidth;
				var scaledHeight = sHeight;
				var reflectionHeight = scaledHeight * reflectionRatio;
				
				imageCanvas.height = scaledHeight + reflectionHeight;
				imageCanvas.width = scaledWidth;
				
				var ctx = imageCanvas.getContext('2d');
			
				ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
				ctx.globalCompositeOperation = 'source-over';
				ctx.fillStyle = 'rgba(0, 0, 0, 1)';
				ctx.fillRect(0, 0, imageCanvas.width, imageCanvas.height);
				
				//draw the reflection image
				ctx.save();
				ctx.translate(0, (2*scaledHeight));
				ctx.scale(1, -1);
				ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
				ctx.restore();
				//create the gradient effect
				ctx.save();
				ctx.translate(0, scaledHeight);
				ctx.globalCompositeOperation = 'destination-out';
				var grad = ctx.createLinearGradient( 0, 0, 0, scaledHeight);
				grad.addColorStop(1, 'rgba(0, 0, 0, 1)');
				grad.addColorStop(0, 'rgba(0, 0, 0, 0.75)');
				ctx.fillStyle = grad;
				ctx.fillRect(0, 0, scaledWidth, scaledHeight);
				//apply the background color to the gradient
				ctx.globalCompositeOperation = 'destination-over';
				ctx.fillStyle = bgColor; '#000';
				ctx.globalAlpha = 0.8;
				ctx.fillRect(0, 0 , scaledWidth, scaledHeight);
				ctx.restore();
				//draw the image
				ctx.save();
				ctx.translate(0, 0);
				ctx.globalCompositeOperation = 'source-over';
				ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
				ctx.restore();
				
				return imageCanvas;
			}
		},
		
		drawInPerspective: function(direction, frameSize){
			var canvas = this.element;
			var image = this.canvas;
			var angle = Math.ceil(this.angle);
			var ctx;
			var originalWidth = image.width;
			var originalHeight = image.height;
			var destinationWidth = destinationWidth || originalWidth; // for future use
			var destinationHeight = destinationHeight || originalHeight; // for future use
			
			var perspectiveCanvas = document.createElement('canvas');
			perspectiveCanvas.height = destinationHeight;
			perspectiveCanvas.width = destinationWidth;
			var perspectiveCtx = perspectiveCanvas.getContext('2d');

			var alpha = angle * Math.PI/180; // Math uses radian
			
			if(alpha > 0){ // if we have an angle greater than 0 then apply the perspective
				var right = (direction == CoverFlow.RIGHT);

				var initialX=0, finalX=0, initialY=0, finalY=0;

				frameSize = frameSize || 1;
				var xDes, yDes;
				var heightDes, widthDes;
				var perspectiveWidht = destinationWidth;
				
				var frameFactor = frameSize / originalWidth;
				var frames = Math.floor(originalWidth / frameSize);
	
				var widthSrc = frameSize ;
				var heightSrc = originalHeight;
				
				for(var i=0; i < frames; i++){
					var xSrc = (i) * frameSize;
					var ySrc = 0;
					var betaTan = 0;
					width = destinationWidth * (i) * frameFactor;
					horizon = destinationHeight / 2;
	
					if(right){
						betaTan = horizon/((Math.tan(alpha)*horizon) + width);
						xDes = (betaTan*width)/(Math.tan(alpha) + betaTan);
						yDes = Math.tan(alpha) * xDes;
						
						if(i == frames -1){
							finalX=xDes;
							finalY=yDes;
						}
					}else{
						betaTan = horizon/((Math.tan(alpha)*horizon) +(destinationWidth-width));
						xDes = (Math.tan(alpha)*(destinationWidth) + (betaTan * width))/(Math.tan(alpha) + betaTan);
						yDes = -Math.tan(alpha)*xDes + (Math.tan(alpha)*(destinationWidth));
						
						if(i == 0){
							initialX = xDes;
							initialY = yDes;
							finalX = destinationWidth;
							finalY = 0;
						}
					}
	
					heightDes = destinationHeight - (2*yDes);
					widthDes = heightDes / destinationHeight * destinationWidth;
					
					perspectiveCtx.drawImage(image, xSrc, ySrc, widthSrc, heightSrc, xDes, yDes, widthDes, heightDes);
			
				}

				perspectiveWidth = finalX - initialX;
				originalCanvasWidth = destinationWidth;
				canvas.width = perspectiveWidth;
				
				ctx = canvas.getContext('2d');
				
				//remove exceeded pixels
				ctx.beginPath();
				if(right){
					ctx.moveTo(0, 0);
					ctx.lineTo(finalX, finalY);
					ctx.lineTo(finalX, finalY + (destinationHeight - 2*finalY));
					ctx.lineTo(0, destinationHeight);
					ctx.lineTo(0,0);
				}else{
					var initialX1 = initialX - (originalCanvasWidth - perspectiveWidth);
					var finalX1 = finalX - (originalCanvasWidth - perspectiveWidth);
					ctx.moveTo(0, initialY);
					ctx.lineTo(finalX1, finalY);
					ctx.lineTo(finalX1, destinationHeight);
					ctx.lineTo(initialX1, initialY + (destinationHeight - 2*initialY));
					ctx.lineTo(0, initialY);
				}
				ctx.closePath();
				ctx.clip();
				
				ctx.drawImage(perspectiveCanvas, initialX, 0, perspectiveWidth, destinationHeight, 0, 0, perspectiveWidth, destinationHeight);
			
			}else{
				
				canvas.width = perspectiveCanvas.width;
				canvas.height = perspectiveCanvas.height;
				perspectiveCtx.drawImage(image, 0, 0, originalWidth, originalHeight, 0, 0, destinationWidth, destinationHeight);
				ctx = canvas.getContext('2d');
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.drawImage(perspectiveCanvas, 0, 0);
			}
		}
		
	};
	
	/**
	 * @class CoverFlowAnimation
	 * @requires YAHOO.util.AnimMgr
	 */
	CoverFlowAnimation = function(config, animationItems, duration){
		this.init(config, animationItems, duration);
	};	
	
	CoverFlowAnimation.prototype = {
		direction: null,
		
		center: null,
		
		startLeftPos: null,
		
		startRightPos: null,
		
		animationItems: null,

		method : YAHOO.util.Easing.easeNone,
		
		animated: false,
		
		startTime: null,
		
		actualFrames : 0, 
		
		useSeconds : true, // default to seconds
		
		currentFrame : 0,
		
		totalFrames : YAHOO.util.AnimMgr.fps,
			
		init: function(config, animationItems, duration){
			this.direction = config.direction;
			this.center = config.center;
			this.startLeftPos = config.startLeftPos;
			this.startRightPos = config.startRightPos;
			this.animationItems = animationItems;
	        this.duration = duration || 1;
	        this.registerEvents();
		},
		
		registerEvents: function(){
	        /**
	         * Custom event that fires after onStart, useful in subclassing
	         * @private
	         */    
	        this._onStart = new YAHOO.util.CustomEvent('_start', this, true);

	        /**
	         * Custom event that fires when animation begins
	         * Listen via subscribe method (e.g. myAnim.onStart.subscribe(someFunction)
	         * @event onStart
	         */    
	        this.onStart = new YAHOO.util.CustomEvent('start', this);
	        
	        /**
	         * Custom event that fires between each frame
	         * Listen via subscribe method (e.g. myAnim.onTween.subscribe(someFunction)
	         * @event onTween
	         */
	        this.onTween = new YAHOO.util.CustomEvent('tween', this);
	        
	        /**
	         * Custom event that fires after onTween
	         * @private
	         */
	        this._onTween = new YAHOO.util.CustomEvent('_tween', this, true);
	        
	        /**
	         * Custom event that fires when animation ends
	         * Listen via subscribe method (e.g. myAnim.onComplete.subscribe(someFunction)
	         * @event onComplete
	         */
	        this.onComplete = new YAHOO.util.CustomEvent('complete', this);
	        /**
	         * Custom event that fires after onComplete
	         * @private
	         */
	        this._onComplete = new YAHOO.util.CustomEvent('_complete', this, true);

	        this._onStart.subscribe(this.doOnStart);
	        this._onTween.subscribe(this.doOnTween);
	        this._onComplete.subscribe(this.doOnComplete);			
			
		},
        
        isAnimated : function() {
            return this.animated;
        },
        
        getStartTime : function() {
            return this.startTime;
        },      
        
        doMethod: function(start, end) {
            return this.method(this.currentFrame, start, end - start, this.totalFrames);
        },        
        
        animate : function() {
            if ( this.isAnimated() ) {
                return false;
            }
            
            this.currentFrame = 0;
            
            this.totalFrames = ( this.useSeconds ) ? Math.ceil(YAHOO.util.AnimMgr.fps * this.duration) : this.duration;
    
            if (this.duration === 0 && this.useSeconds) { // jump to last frame if zero second duration 
                this.totalFrames = 1; 
            }
            YAHOO.util.AnimMgr.registerElement(this);
            return true;
        },
          
        stop : function(finish) {
            if (!this.isAnimated()) { // nothing to stop
                return false;
            }

            if (finish) {
                 this.currentFrame = this.totalFrames;
                 this._onTween.fire();
            }
            YAHOO.util.AnimMgr.stop(this);
        },
        
        doOnStart : function() {            
            this.onStart.fire();
            
            this.runtimeItems = [];
            for (var i=0; i<this.animationItems.length; i++) {
                this.setRuntimeItem(this.animationItems[i]);
            }
            
            this.animated = true;
            this.actualFrames = 0;
            this.startTime = new Date(); 
        },
        
        doOnTween : function() {
            var data = {
                duration: new Date() - this.getStartTime(),
                currentFrame: this.currentFrame
            };
            
            data.toString = function() {
                return (
                    'duration: ' + data.duration +
                    ', currentFrame: ' + data.currentFrame
                );
            };
            
            this.onTween.fire(data);
            
            this.actualFrames += 1;

            var runtimeItems = this.runtimeItems;
            
            for (var i=0; i < runtimeItems.length; i++) {
                this.setItemAttributes(runtimeItems[i]); 
            }
            
        },
        
        doOnComplete : function() {
            var actual_duration = (new Date() - this.getStartTime()) / 1000 ;
            
            var data = {
                duration: actual_duration,
                frames: this.actualFrames,
                fps: this.actualFrames / actual_duration
            };
            
            data.toString = function() {
                return (
                    'duration: ' + data.duration +
                    ', frames: ' + data.frames +
                    ', fps: ' + data.fps
                );
            };
            
            this.animated = false;
            this.actualFrames = 0;
            this.onComplete.fire(data);
        },
        
        setRuntimeItem: function(item){
        	var runtimeItem = {};
        	runtimeItem.item = item.item;
        	runtimeItem.attribute = {};
        	for(var attr in item.attribute){
        		runtimeItem.attribute[attr] = item.attribute[attr];
        		if(attr == 'angle'){
        			if(item.attribute[attr].start - item.attribute[attr].end > 0){
        				runtimeItem.attribute[attr].perspectiveDirection = this.direction;
        				runtimeItem.attribute[attr].center = true;
        			}else{
        				runtimeItem.attribute[attr].perspectiveDirection = this.direction == CoverFlow.RIGHT ? CoverFlow.LEFT : CoverFlow.RIGHT;
        				runtimeItem.attribute[attr].center = false;
        			}
        		}
        	}
        	this.runtimeItems.push(runtimeItem);
        },
        
        setItemAttributes: function(item){
        	
        	for(var attr in item.attribute){
        
        		var value = Math.ceil(this.doMethod(item.attribute[attr].start, item.attribute[attr].end));
        		
        		if(attr == 'angle'){
        			item.item.setAngle(value);
        			var frameSize = Math.ceil(this.doMethod(3, 1));
        			item.item.drawInPerspective(item.attribute[attr].perspectiveDirection, frameSize);
        			var left;
        			if(item.attribute[attr].center){
        				left = this.doMethod(item.item.getLeft(), this.center - item.item.element.width/2);
        			}else{
        				if(this.direction == CoverFlow.LEFT)
        					left = this.doMethod(item.item.getLeft(), this.startLeftPos - item.item.element.width);
        				else
        					left = this.doMethod(item.item.getLeft(), this.startRightPos);
        			}
        			item.item.setLeft(Math.ceil(left));
        		
        		}else{
        			item.item.setLeft(value);
        		}
        	}
        }
	};
	
//});