--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/rsln-opendata/res/metadataplayer/test/interface 1.2/source/carousel.js Tue Mar 15 13:46:46 2011 +0100
@@ -0,0 +1,257 @@
+/**
+ * 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