/******************************************************************************
* Online-Shop                                                                 *
* Copyright (C) 2010 Digital-Tronic		                                      *
* http://www.digital-tronic.com                                               *
******************************************************************************/

/******************************************************************************
* @file charts.js                                                             *
* @brief Topsellerbox mit MooTools-Kwicks-Effekt                              *
* @author Stefan Flaischlen (info@digital-tronic.com)                         *
* @version 1.0                                                                *
*                                                                             *
* Historie: 03.06.2010 (Ausgangsversion)                                      *
******************************************************************************/

var Kwix = {
	
	// Topseller initialisieren:
	start: function() {		
		if ($('topseller')) Kwix.parseKwicks();
	},
	
	parseKwicks: function(){
		
		// Hoehen festlegen:
		var topHeight = 50;
		var topHeightImg = 90;
		
		// Kwicks anhand der CSS-Elemente einlesen:
		var kwicks = $$('#topseller .toprule');
		var kwicksImg = $$('#topseller .topruleimg');
		
		// Effekte laden:
		var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.quadOut});
		var fxImg = new Fx.Elements(kwicksImg, {wait: false, duration: 500, transition: Fx.Transitions.quadOut});
		
		// Alle Kwicks durchlaufen:
		kwicks.each(function(kwick, i){
			
			// MouseOver-Ereignis:
			kwick.addEvent('mouseenter', function(e) {
	
				e = new Event(e);
				
				// Ausdehnen:
				var obj = {};
				var objImg = {};
				obj[i] = {'top': [kwick.getStyle('top').toInt(), i * topHeight + 31]};
				objImg[i] = {'top': [kwick.getFirst().getStyle('top').toInt(), 5]};
				
				// Element unter der Maus sichtbar machen:
				kwick.removeClass('out').addClass('over');
				
				// Die anderen Elemente zusammendruecken:				
				kwicks.each(function(other, j) {
					if (other != kwick) {
						
						// Hoehe bestimmen:
						var h = other.getStyle('top').toInt();
						
						// Hoehe anpassen:
						if (h != j * topHeight - topHeightImg) {
							if (i > j) {
								obj[j] = {'top': [h, j * topHeight - topHeightImg + 31]};
							} else {
								obj[j] = {'top': [h, j * topHeight + 31]};
							}
							objImg[j] = {'top': [other.getFirst().getStyle('top').toInt(), 100]};
							
							// Element unsichtbar machen:
							other.removeClass('over').addClass('out');

						}

					}
				});
				
				// Effekte starten:
				fx.start(obj);
				fxImg.start(objImg);
				e.stop();

			});
		});
		
		// Ausgangsposition wiederherstellen, wenn der Cursor die Box verlaesst:
		$('topseller').addEvent('mouseleave', function(e) {
		
			var obj = {};
			var objImg = {};
			
			// Kwicks zurueckfuehren:
			kwicks.each(function(other, j) {
				if (j == 0) {
					obj[j] = {'top': [other.getStyle('top').toInt(), 31]};
					objImg[j] = {'top': [other.getFirst().getStyle('top').toInt(), 5]};
					other.removeClass('out').addClass('over');
				} else {
					obj[j] = {'top': [other.getStyle('top').toInt(), j * topHeight + 31]};
					objImg[j] = {'top': [other.getFirst().getStyle('top').toInt(), 100]};
					other.removeClass('over').addClass('out');
				}
			});
			
			// Effekt starten:
			fx.start(obj);
			fxImg.start(objImg);

		});
	}
};

// Abschliessen und laden:
window.addEvent('load', Kwix.start);