/* Thanks to the author of this great animation: Ikonic (Pellevillain Cédric) -------------------------- Carousel.us v2.0 Written by Ikonic (Pellevillain Cédric) Copyright (c) 2008 Piksite.com www.piksite.com --------------------------- */ var Moving = new Class({ //implements Implements: [Options], //options options: { /* The options you can change */ display_text: true, // Display or not texts (true or false) textfield : 'textfield', // The id for the text container (string) texts_class : 'texts', // The class for the div containing text (string) opacity : 0, // Reflection opacity (0-1) height : 0, // Reflection height (0-1) Spiegeln radiusx : 380, // Horizontal spacing between opposite images (pixel) radiusy : 120, // Vertical spacing between opposite images (pixel) centerx : 340, // Position X of the moving center (pixel) centery : 320, // Position Y of the moving center (pixel) clickit : true, // Add onclick event on each image (true or false) base : 0.15, // Base speed (number) speed : 0.05, // moving speed (number) depth : 200, // The height (distance) when moving disappears on click (pixels) duration : 500, // Animations duration (ms) zoomIn : 75/100, // Scale ratio (0-1) padding : 50, // The CSS padding-left for the textfield (pixels) /* You should not to have to modify these following options */ b : 0, elt_posx : 0, elt_posy : 0, counter : 0, tempX : 0, elements : new Array(), texts : new Array(), zooms : new Array() }, //initialization initialize: function(element,options) { //set options this.setOptions(options); this.options.element = element; var global_images = this.options.element.getElements('img'); var images = new Array(); global_images.each(function(img) { if(img.getParent('div').get('class') != this.options.texts_class) { images.push(img); } }.bind(this)); if(this.options.display_text==true) { var textfield = new Element('div', { 'id': this.options.textfield, 'styles': { 'visibility': 'hidden', 'opacity': '0' } }).inject(this.options.element); // get text for each image $$('.' + this.options.texts_class).each(function(text) { this.options.texts[text.id] = text.innerHTML; text.destroy(); }.bind(this)); } else { $$('.' + this.options.texts_class).each(function(text) { text.destroy(); }); } // create each element images.each(function(photo,i) { id = photo.src.split('/'); id = id[(id.length-1)].split('.')[0]; var div = new Element('div', { 'id': id, 'class': 'moving', 'styles': { 'position': 'absolute', 'opacity': '0' } }).inject(this.options.element); if(this.options.clickit != false) { div.setStyle('cursor', 'pointer').addEvent('click', function() { this.Click(div.id); }.bind(this) ); } var img = new Element('img', { 'src': photo.src, 'alt': photo.get('alt') }).inject(div); this.reflect(img,{ 'height': this.options.height, 'opacity': this.options.opacity }); if (!Browser.Engine.trident) { img.destroy(); } this.options.elements.include(id); photo.destroy(); this.options.zooms[i] = new Hash({ 'divX': [ div.getSize().x , Math.round(div.getSize().x * parseFloat(this.options.zoomIn)) ], 'divY': [ div.getSize().y , Math.round(div.getSize().y * parseFloat(this.options.zoomIn)) ] }); }.bind(this)); this.options.element.getElements('canvas').each(function(canvas,i) { canvas.getParent('div').setStyles({ 'height': this.options.zooms[i]['divY'][1] + 'px', 'width': this.options.zooms[i]['divX'][1] + 'px' }); canvas.setStyles({ 'width': this.options.zooms[i]['divX'][1] + 'px', 'height': this.options.zooms[i]['divY'][1] + 'px' }); }.bind(this)); if (Browser.Engine.trident) { this.options.element.getElements('div.moving').each(function(ie_div,i) { ie_div.setStyles({ 'height': this.options.zooms[i]['divY'][1] + 'px', 'width': this.options.zooms[i]['divX'][1] + 'px' }); ie_div.getElements('img').each(function(img,j) { img.setStyles({ 'width': img.width * parseFloat(this.options.zoomIn) + 'px', 'height': img.height * parseFloat(this.options.zoomIn) + 'px', 'visibility': 'visible' }); }.bind(this)); }.bind(this)); } this.options.element.onmousemove = this.position.bind(this); this.options.element.onmouseout = this.out.bind(this); this.open(); }, // add reflection reflect: function(img,options) { if (img.get('tag') == 'img') { function doReflect() { var global, reflection, reflectionHeight = Math.floor(img.height * options.height), wrapper, context, gradient; if (Browser.Engine.trident) { reflection = new Element('img', {src: img.src, alt: img.get('alt'), styles: { width: img.width, height: img.height, marginBottom: -img.height + reflectionHeight, filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (options.opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (options.height * 100) + ")" }}); reflection.setStyles({display: "block", border: 0}); wrapper = new Element(($(img.parentNode).get("tag") == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection); } else { reflection = new Element('canvas', {width: img.width, height: reflectionHeight}); context = reflection.getContext("2d"); context.save(); context.translate(0, img.height-1); context.scale(1, -1); context.drawImage(img, 0, 0, img.width, img.height); context.restore(); context.globalCompositeOperation = "destination-out"; gradient = context.createLinearGradient(0, 0, 0, reflectionHeight); gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")"); gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)"); context.fillStyle = gradient; context.rect(0, 0, img.width, reflectionHeight); context.fill(); global = new Element('canvas', {width: img.width, height: img.height + reflectionHeight, title: img.get('alt')} ).inject($(img.parentNode)); ctx = global.getContext("2d"); ctx.drawImage(img, 1, 1, img.width, img.height); //ctx.drawImage(reflection, 1, 1, reflection.width, reflection.height, 1, img.height, reflection.width, reflection.height); reflection.destroy(); } } if (img.complete) doReflect(); else img.onload = doReflect; } return img; }, // create each element open: function () { // appear each element this.options.elements.each(function(element) { var appear_effect = new Fx.Morph(element, { duration: 800, transition: Fx.Transitions.Sine.easeOut }); appear_effect.start({ 'opacity': [0, 1] }); }); // start moving this.options.b = setInterval(function() { this.moving(); }.bind(this),40); }, // set mouse events position: function(e) { if (navigator.appName.substring(0,3) == "Net") { e.preventDefault(); this.options.tempX = e.pageX; } else { this.options.tempX = event.x + document.body.scrollLeft; } this.move(); }, out: function() { this.options.speed = this.options.base; }, // moving moving: function() { this.options.elements.each(function(photo, i) { angle = i * 2 * Math.PI / this.options.elements.length; posx = this.options.centerx + Math.sin( this.options.counter * ( this.options.base * this.options.speed ) + angle ) * this.options.radiusx; posy = this.options.centery + Math.cos( this.options.counter * ( this.options.base * this.options.speed ) + angle ) * this.options.radiusy; $(photo).setStyles({ left: posx + 'px', top: posy + 'px', zIndex: Math.round( posy / 3 ) + this.options.depth }); }.bind(this)); var circon = Math.PI * ( (3 * (this.options.radiusx / 2 + this.options.radiusy / 2)) - Math.sqrt( (3 * this.options.radiusx / 2 + this.options.radiusy / 2) * (this.options.radiusx / 2 + 3 * this.options.radiusy / 2) ) ); if((this.options.counter + 40) >= parseInt(circon)) { this.options.counter = 0; } else { this.options.counter++; } }, // on mouse move on main container move: function() { this.options.speed = (this.options.tempX - this.options.centerx) / (this.options.elements.length * 1000); if(this.options.tempX <= this.options.element.getSize().x /2) { this.options.counter--; } }, // Change image event to back textIt:function (elt) { $(elt).removeEvents().addEvent('click', function() { this.Back(elt); }.bind(this) ); }, // Change image event to click untextIt: function (elt) { $(elt).removeEvents().addEvent('click', function() { this.Click(elt); }.bind(this) ); }, Click: function(elt) { // stop moving $clear(this.options.b); // get clicked element positions this.options.elt_posx = $(elt).getStyle('left').toInt(); this.options.elt_posy = $(elt).getStyle('top').toInt(); //Text im neuen Fenster öffnen window.location.href = "songtext.php?song=" + escape(elt); }, // Back to moving Back: function(elt) { // define actions var appearer = ''; if(this.options.display_text==true) { this.options.elements.each(function(photo,i) { if(photo != elt) { appearer += "var AppearEffect = new Fx.Morph($('" + photo + "'), {duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut }); AppearEffect.start({visibility: ['hidden', 'visible'], 'opacity': [0, 1]});"; } else { appearer += "$('" + photo + "').morph({position: 'absolute', left: " + this.options.elt_posx + ", top: " + this.options.elt_posy; appearer += ', height: ' + this.options.zooms[i]['divY'][1] + ', width: ' + this.options.zooms[i]['divX'][1] + ' });'; if(!Browser.Engine.trident) { appearer += "$('" + photo + "').getElement('canvas').morph({ 'width': " + this.options.zooms[i]['divX'][1] + ", 'height':" + this.options.zooms[i]['divY'][1] + "});"; } else { appearer += "$('" + photo + "').getElements('img').each(function(img){img.morph({ 'width': img.width*parseFloat(" + this.options.zoomIn + "), 'height':img.height*parseFloat(" + this.options.zoomIn + ") });}.bind(this));"; } } }.bind(this)); appearer += "var TextEffect = new Fx.Morph($('" + this.options.textfield + "'), {duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut, onComplete: function() { this.untextIt('" + elt + "'); $(this.options.textfield).innerHTML = ''; this.options.b = setInterval(function() { this.moving(); }.bind(this),40); }.bind(this) }); TextEffect.start({visibility: ['visible', 'hidden'], 'opacity': [1, 0]});"; } else { this.options.elements.each(function(photo,i) { if(photo != elt) { appearer += "var AppearEffect = new Fx.Morph($('" + photo + "'), {duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut }); AppearEffect.start({visibility: ['hidden', 'visible'], 'opacity': [0, 1]});"; } else { appearer += "var photoEffect = new Fx.Morph($('" + photo + "'), { onComplete: function() { this.untextIt('" + elt + "'); this.options.b = setInterval(function() { this.moving(); }.bind(this),40); }.bind(this) }); photoEffect.start({position: 'absolute', left: " + this.options.elt_posx + ", top: " + this.options.elt_posy + ", height: " + this.options.zooms[i]['divY'][1] + ", width: " + this.options.zooms[i]['divX'][1] + " });"; if(!Browser.Engine.trident) { appearer += "$('" + photo + "').getElement('canvas').morph({ 'width': " + this.options.zooms[i]['divX'][1] + ", 'height':" + this.options.zooms[i]['divY'][1] + "});"; } else { appearer += "$('" + photo + "').getElements('img').each(function(img){img.morph({ 'width': img.width*parseFloat(" + this.options.zoomIn + "), 'height':img.height*parseFloat(" + this.options.zoomIn + ") });}.bind(this));"; } } }.bind(this)); } // do actions eval(appearer); }, // DropOut Effect DropOut : function(element) { var oldtop = element.getStyle('top').toInt(); var DropOutEffect = new Fx.Morph(element, {duration: this.options.duration, transition: Fx.Transitions.Sine.easeOut, onComplete: function() { element.setStyle('top', oldtop); if(this.options.display_text==true) { this.options.TextEffect.start({visibility: ['hidden', 'visible'], 'opacity': [0, 1]});} }.bind(this) }); DropOutEffect.start({'top': [oldtop + 'px', oldtop + this.options.depth + 'px'], 'opacity': [1, 0]}); }, // request text requestText: function(elt) { $(this.options.textfield).innerHTML = this.options.texts[elt]; $(this.options.textfield).getElements('a.back').each(function(back) { back.addEvent('click', function() { this.Back(elt); }.bind(this) ); }.bind(this)); } });