/**
 * Brandbox base class
 * 
 * @class Brandbox
 * @author Rocco Janse <a href="rocco@efocus.nl">rocco@efocus.nl</a>
 * @version 1.0
 * @date 14/03/2011
 * @requires MooTools core 1.3.1
 * @requires MooTools Fx.Tween
 * @requires MooTools Fx.Elements
 */
var Brandbox = new Class({
	
	Implements: [Options],
	
	options: {
		'slides': 'a.bg',
		'initwidth': 'auto',
		'minwidth': 240,
		'maxwidth': 480
	},
	
	initialize: function(container, options) {
		
		// config
		this.setOptions(options);
		this.container = document.id(container);
		this.slides = this.container.getElements(this.options.slides);
		
		// init
		this.slideFx = new Fx.Elements(this.slides, {
			duration: 250,
			transition: Fx.Transitions.Cubic.easeOut
		});
		
		this.initSlides();
		//console.log(this.slides);
	},
	
	initSlides: function() {
		
		var helperobj = {};
		var slidewidth = 0;

		if (this.options.initwidth != 'auto') {
			slidewidth = (this.options.initwidth).toInt();
		} else {
			var containerwidth = this.container.getStyle('width').toInt();
			
			//console.log(containerwidth);
			
			var totalslides = this.slides.length;
			slidewidth = Math.floor(containerwidth/totalslides);
		}
		
		this.slides.each(function(slide, i) {

			helperobj[i] = {
				'width': slidewidth	
			};
			
			var maxwidth = 0;
			if (this.options.maxwidth != 'auto') {
				maxwidth = this.options.maxwidth.toInt();
			} else {
				maxwidth = Math.floor(slidewidth*2);
			}

			var minwidth = 0;
			if (this.options.minwidth != 'auto') {
				minwidth = this.options.minwidth.toInt();
			} else {
				minwidth = Math.floor((containerwidth-maxwidth)/(totalslides-1));
			}
			
			slide.addEvents({
			
				'mouseenter': function() {
					var obj = {};
					obj[i] = {
						'width': [slidewidth, maxwidth],
						'font-size': [slide.getStyle('font-size').toInt(), 30]
					};
					
					this.slides.each(function(other, j) {
						if (other != slide) {
							obj[j] = {
								'width': [slidewidth, minwidth],	
								'font-size': [other.getStyle('font-size').toInt(), 20]	
							};
							this.animatePanel(other, false);
						}
					}.bind(this));
					this.slideFx.start(obj);
					this.animatePanel(slide, true);
				}.bind(this)
				
			});
			
			
		}.bind(this));
		
		this.slideFx.set(helperobj);
		
		this.container.addEvent('mouseleave', function() {
			var obj = {};
			this.slides.each(function(other, j) {
					obj[j] = {
						'width': [other.getWidth(), slidewidth],
						'font-size': [other.getStyle('font-size').toInt(), 30]
					};
					this.animatePanel(other, false);
			}.bind(this));
			this.slideFx.start(obj);
		}.bind(this));

	},
//	
//	animateSlides: function(selected) {
//		this.slides.each(function(slide, index) {
//			var title = slide.getElement('.title');
//			if (title) {
//				title.fade(1);
//			}
//			
//			if (selected != undefined) {
//				if (index != selected) {
//					this.animatePanel(slide, false);
//					this.slideFx[index].start('width', this.contractSlideWidth);
//				} else {
//					this.currentSlide = index;
//					this.animatePanel(slide, true);
//					title.fade(0);
//					this.slideFx[index].start('width', this.expandSlideWidth);
//				}
//			} else {
//				this.animatePanel(slide, false);
//				this.slideFx[index].start('width', this.initSlideWidth);
//			}
//		}.bind(this));
//	},
	
	animatePanel: function(slide, show) {
		var panel = slide.getParent('li').getElement('.panel');
		var panelFx = new Fx.Tween(panel, {
			duration: 250,
			transition: 'sine:out'
		});
		
		if (show == false) {
			var title = slide.getElement('span.title').fade(1);
			var travel = -125;
		} else {
			var title = slide.getElement('span.title').fade(0);
			var travel = 0;
		}
		panelFx.start('bottom', travel);
	}//,
//	
//	setInitWidth: function(slide) {
//		
//		if (this.options.autosize) {
//			this.initSlideWidth = this.container.getWidth()/this.slides.length;
//			this.expandSlideWidth = Math.floor(this.initSlideWidth*1.5);
//			this.contractSlideWidth = Math.floor(this.initSlideWidth*0.75);
//		} else {
//			this.initSlideWidth = this.options.slideWidthCol;
//			this.expandSlideWidth = this.options.slideWidthExp;
//			this.contractSlideWidth = Math.floor(this.initSlideWidth*0.75);
//		}
//
//		slide.setStyles({
//			'width': this.initSlideWidth,
//			'overflow': 'hidden',
//			'cursor': 'pointer'
//		});
//	}
	
});