/**

 * Interface Elements for jQuery

 * 3D Carousel

 * 

 * http://interface.eyecon.ro

 * 

 * Copyright (c) 2006 Stefan Petre

 * Dual licensed under the MIT (MIT-LICENSE.txt) 

 * and GPL (GPL-LICENSE.txt) licenses.

 *

 */

/**

 * Created a 3D Carousel from a list of images, with reflections and animated by mouse position

 * 

 * @example window.onload = 

 *			function()

 *			{

 *				$('#carousel').Carousel(

 *					{

 *						itemWidth: 110,

 *						itemHeight: 62,

 *						itemMinWidth: 50,

 *						items: 'a',

 *						reflections: .5,

 *						rotationSpeed: 1.8

 *					}

 *				);

 *			}

 * HTML

 *			<div id="carousel">

 *				<a href="" title=""><img src="" width="100%" /></a>

 *				<a href="" title=""><img src="" width="100%" /></a>

 *				<a href="" title=""><img src="" width="100%" /></a>

 *				<a href="" title=""><img src="" width="100%" /></a>

 *				<a href="" title=""><img src="" width="100%" /></a>

 *			</div>

 * CSS

 *			#carousel

 *			{

 *				width: 700px;

 *				height: 150px;

 *				background-color: #111;

 *				position: absolute;

 *				top: 200px;

 *				left: 100px;

 *			}

 *			#carousel a

 *			{

 *				position: absolute;

 *				width: 110px;

 *			}

 *

 * @desc Creates a 3D carousel from all images inside div tag with id 'carousel'

 *

 *

 * @name 3D Carousel

 * @description Created a 3D Carousel from a list of images, with reflections and animated by mouse position

 * @param Hash hash A hash of parameters

 * @option String items items selection

 * @option Integer itemWidth the max width for each item

 * @option Integer itemHeight the max height for each item

 * @option Integer itemMinWidth the minimum width for each item, the height is automaticaly calculated to keep proportions

 * @option Float rotationSpeed the speed for rotation animation

 * @option Float reflectionSize the reflection size a fraction from items' height

 *

 * @type jQuery

 * @cat Plugins/Interface

 * @author Stefan Petre

 */

jQuery.iCarousel = {

	build : function(options)

	{

		return this.each(

			function()

			{

				var el = this;

				var increment = 2*Math.PI/360;

				var maxRotation = 2*Math.PI;

				if(jQuery(el).css('position') != 'relative' && jQuery(el).css('position') != 'absolute') {

					jQuery(el).css('position', 'relative');

				}

				el.carouselCfg = {

					items : jQuery(options.items, this),

					itemWidth : options.itemWidth,

					itemHeight : options.itemHeight,

					itemMinWidth : options.itemMinWidth,

					maxRotation : maxRotation,

					size : jQuery.iUtil.getSize(this),

					position : jQuery.iUtil.getPosition(this),

					start : Math.PI/2,

					rotationSpeed : options.rotationSpeed,

					reflectionSize : options.reflections,

					reflections : [],

					protectRotation : false,

					increment: 2*Math.PI/360

				};

				el.carouselCfg.radiusX = (el.carouselCfg.size.w - el.carouselCfg.itemWidth)/2;

				el.carouselCfg.radiusY =  (el.carouselCfg.size.h - el.carouselCfg.itemHeight - el.carouselCfg.itemHeight * el.carouselCfg.reflectionSize)/2;

				el.carouselCfg.step =  2*Math.PI/el.carouselCfg.items.size();

				el.carouselCfg.paddingX = el.carouselCfg.size.w/2;

				el.carouselCfg.paddingY = el.carouselCfg.size.h/2 - el.carouselCfg.itemHeight * el.carouselCfg.reflectionSize;

				var reflexions = document.createElement('div');

				jQuery(reflexions)

					.css(

						{

							position: 'absolute',

							zIndex: 1,

							top: 0,

							left: 0

						}

					);

				jQuery(el).append(reflexions);

				el.carouselCfg.items

					.each(

						function(nr)

						{

							image = jQuery('img', this).get(0);

							height = parseInt(el.carouselCfg.itemHeight*el.carouselCfg.reflectionSize);

							if (jQuery.browser.msie) {

								canvas = document.createElement('img');

								jQuery(canvas).css('position', 'absolute');

								canvas.src = image.src;				

								canvas.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=60, style=1, finishOpacity=0, startx=0, starty=0, finishx=0)';

							} else {

								canvas = document.createElement('canvas');

								if (canvas.getContext) {

									context = canvas.getContext("2d");

									canvas.style.position = 'absolute';

									canvas.style.height = height +'px';

									canvas.style.width = el.carouselCfg.itemWidth+'px';

									canvas.height = height;

									canvas.width = el.carouselCfg.itemWidth;

									context.save();

									context.translate(0,height);

									context.scale(1,-1);

									context.drawImage(

										image, 

										0, 

										0, 

										el.carouselCfg.itemWidth, 

										height

									);

									context.restore();

									context.globalCompositeOperation = "destination-out";

									var gradient = context.createLinearGradient(

										0, 

										0, 

										0, 

										height

									);

									gradient.addColorStop(1, "rgba(255, 255, 255, 1)");

									gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");

									context.fillStyle = gradient;

									if (navigator.appVersion.indexOf('WebKit') != -1) {

										context.fill();

									} else {

										context.fillRect(

											0, 

											0, 

											el.carouselCfg.itemWidth, 

											height

										);

									}

								}

							}

							el.carouselCfg.reflections[nr] = canvas;

							jQuery(reflexions).append(canvas);

						}

					)

					.bind(

						'mouseover',

						function(e)

						{

							el.carouselCfg.protectRotation = true;

							el.carouselCfg.speed = el.carouselCfg.increment*0.1 * el.carouselCfg.speed / Math.abs(el.carouselCfg.speed);

							return false;

						}

					)

					.bind(

						'mouseout',

						function(e)

						{

							el.carouselCfg.protectRotation = false;

							return false;

						}

					);

				jQuery.iCarousel.positionItems(el);

				el.carouselCfg.speed = el.carouselCfg.increment*0.2;

				el.carouselCfg.rotationTimer = window.setInterval(

					function()

					{

						el.carouselCfg.start += el.carouselCfg.speed;

						if (el.carouselCfg.start > maxRotation)

							el.carouselCfg.start = 0;

						jQuery.iCarousel.positionItems(el);

					},

					20

				);

				jQuery(el)

					.bind(

						'mouseout',

						function()

						{

							el.carouselCfg.speed = el.carouselCfg.increment*0.2 * el.carouselCfg.speed / Math.abs(el.carouselCfg.speed);

						}

					)

					.bind(

						'mousemove',

						function(e)

						{

							if (el.carouselCfg.protectRotation == false) {

								pointer = jQuery.iUtil.getPointer(e);

								mousex =  el.carouselCfg.size.w - pointer.x + el.carouselCfg.position.x;

								el.carouselCfg.speed = el.carouselCfg.rotationSpeed * el.carouselCfg.increment * (el.carouselCfg.size.w/2 - mousex) / (el.carouselCfg.size.w/2);

							}

						}

					);

			}

		);

	},

	positionItems : function(el)

	{

		el.carouselCfg.items.each(

			function (nr)

			{

				angle = el.carouselCfg.start+nr*el.carouselCfg.step;

				x = el.carouselCfg.radiusX*Math.cos(angle);

				y = el.carouselCfg.radiusY*Math.sin(angle) ;

				itemZIndex = parseInt(100*(el.carouselCfg.radiusY+y)/(2*el.carouselCfg.radiusY));

				parte = (el.carouselCfg.radiusY+y)/(2*el.carouselCfg.radiusY);

				width = parseInt((el.carouselCfg.itemWidth - el.carouselCfg.itemMinWidth) * parte + el.carouselCfg.itemMinWidth);

				height = parseInt(width * el.carouselCfg.itemHeight / el.carouselCfg.itemWidth);

				this.style.top = el.carouselCfg.paddingY + y - height/2 + "px";

	     		this.style.left = el.carouselCfg.paddingX + x - width/2 + "px";

	     		this.style.width = width + "px";

	     		this.style.height = height + "px";

	     		this.style.zIndex = itemZIndex;

				el.carouselCfg.reflections[nr].style.top = parseInt(el.carouselCfg.paddingY + y + height - 1 - height/2) + "px";

				el.carouselCfg.reflections[nr].style.left = parseInt(el.carouselCfg.paddingX + x - width/2) + "px";

				el.carouselCfg.reflections[nr].style.width = width + "px";

				el.carouselCfg.reflections[nr].style.height = parseInt(height * el.carouselCfg.reflectionSize) + "px";

			}

		);

	}

};

jQuery.fn.Carousel = jQuery.iCarousel.build;