/**
 * Copyright (c) 2007 Alexander Interactive, Inc
 *                    http://www.alexanderinteractive.com
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 */
 
 /**
  * This class creates a Kwicks-like sliding effect and 
  * works with most block level elements, like this:
  * 	<div class="sliders" style="width:100px;">
  * 		<div>First</div>
  * 		<div>Second</div>
  * 		<div>Third</div>
  * 		<div>Fourth</div>
  * 	</div>
  * or this:
  * 	<ul class="sliders" style="width:90px;">
  * 		<li>First</li>
  * 		<li>Second</li>
  * 		<li>Third</li>
  * 	</ul>
  * 	
  * Initialize each slider with:
  * 	new Slider(element, options);
  * or do a whole bunch at once with the helper method:
  * 	createSliders(elements, options);
  * where elements might look like:
  * 	$$('.sliders')
  * and options might look like:
  * 	{bigWidth:200}
  * 
  * The class preserves text's line breaks, etc, through wrapping the
  * children elements in properly overflowed wrapper divs.  Children
  * are automatically assigned the proper widths.
  * 
  * Options are:
  * 	bigWidth, int: 			the width that should be used for
  * 	wrapperClass, string:	the class to give to the wrapper div
  * 	wrapperStyles, string:	any styles to attach to the wrapper div
  * 	duration, int:			the duration parameter for the Fx class
  * 	transition, Transition:	the transition parameter for the Fx class
  * 
  * 	onShow^:				the function to call when a child is fully shown
  * 	onHide^:				the function to call when a child is fully hidden
  * 	
  * ^These options can be functions, in which case the same function is called
  * for every child, or they can be arrays of functions with the length equal
  * to the number of children, in which case a specific function is called for 
  * each child.  They should take one parameter, which will be the wrapping div.
  */
var Slider = new Class({
	initialize: function(slider,options) {
		options = options ? options : {};
		
		var self = this;
		this.onShow = options.onShow ? options.onShow : null;
		this.onHide = options.onHide ? options.onHide : null;
				
		var width = slider.getStyle('width').toInt();
		var kids = slider.getChildren()
		var numKids = kids.length
		var normalWidth = 138; //Math.floor(width/numKids)
		var bigWidth = options.bigWidth ? options.bigWidth : Math.floor(normalWidth * 1.5);
		var littleWidth = 138; // Math.floor((width - bigWidth)/(numKids-1));

		this.bigWidth = bigWidth;
		this.normalWidth = normalWidth;
		this.littleWidth = littleWidth;

		// set up inner box:
		slider.setStyle('overflow','hidden');
		var container = new Element('div');
		var innerWidth = width+10;
		container.setStyles({width:innerWidth+'px'});
		slider.adopt(container);
		
		// set up kid wrappers:
		kids = kids.map(function(kid,i) {
			var wrapper = new Element('div');
			if (options.wrapperClass) wrapper.addClass(options.wrapperClass);
			if (options.wrapperStyles)
				wrapper.setStyles(options.wrapperStyles);
			wrapper.setStyles({width:normalWidth,
							   overflow:'hidden',
							   'float':'left'});
			kid.setStyle('width',bigWidth);
			wrapper.adopt(kid);
			container.adopt(wrapper);
			return wrapper;
		});
		
		this.kids = kids;
		
		// set up effects:
		var duration = options.duration ? options.duration : 200;
		var transition = options.transition ? options.transition : Fx.Transitions.quadOut;
		var fx = new Fx.Elements(kids, {wait: false, duration: duration, transition: transition,
										onComplete:function(){self.fxCompleted();}});
		
			
		kids.each(function(kid, i){
			
			
									
		switch (window.location.hash) {
				case "#unternehmen":
					kids[1].setStyle('width', bigWidth);
				break;
				case "#leistungen":
					kids[2].setStyle('width', bigWidth);
					
				break;
				case "#news":
					kids[3].setStyle('width', bigWidth);
				break;
				case "#kontakt":
					kids[4].setStyle('width', bigWidth);
				break;
				default:
					kids[0].setStyle('width', bigWidth);
				break;
			}
		
			
			
			kid.addEvent('mouseover', function(e){
				var obj = {};
				obj[i] = {'width': [kid.getStyle('width').toInt(), bigWidth]};
				
				kids.each(function(other, j){
					if (other != kid){
						var w = other.getStyle('width').toInt();
						if (w != littleWidth) obj[j] = {'width': [w, littleWidth]};
					}
				});
				fx.start(obj);
			});	
		});
		slider.addEvent('mouseout', function(e){
			var obj = {};
			var obj2 = {};
			switch (window.location.hash) {
					case "#unternehmen":
						var j2 = 1;
					break;
					case "#leistungen":
						var j2 = 2;
						
					break;
					case "#news":
						var j2 = 3;
					break;
					case "#kontakt":
						var j2 = 4;
					break;
					default:
						var j2 = 0;
					break;				
				}
			
			
			kids.each(function(other, j){
				obj[j] = {'width': [other.getStyle('width').toInt(), littleWidth]};
				obj[j2] = {'width': [kids[j2].getStyle('width').toInt(), bigWidth]};
			});
			fx.start(obj);
		});
	},
	fxCompleted: function() {
		var self = this;
		if (self.onShow)
			self.kids.each(function(kid, i) {
				if (kid.getStyle('width').toInt() == self.bigWidth)
					typeof(self.onShow) == "function" ? self.onShow(kid) : self.onShow[i](kid);
			});
		if (self.onHide)
			self.kids.each(function(kid, i) {
				if (kid.getStyle('width').toInt() != self.bigWidth)
					typeof(self.onHide) == "function" ? self.onHide(kid) : self.onHide[i](kid);
			});
	}
})

function createSliders(sliders,options) {
	sliders.each(function(slider) {
		new Slider(slider,options);
	});
}