--- 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
- * <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;
\ No newline at end of file