diff -r 4c86151704e9 -r 3daa4039509a web/rsln/res/metadataplayer/test/interface 1.2/source/carousel.js --- a/web/rsln/res/metadataplayer/test/interface 1.2/source/carousel.js Fri Apr 22 12:31:41 2011 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,257 +0,0 @@ -/** - * 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 - * - * 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; \ No newline at end of file