// the Sliding Tabs mootools plugin is a creation of Jenna “Blueberry” Fox! Who
// releases it as public domain as of the 16th of September, 2007. More info and
// up to date downloads and demo's at: http://creativepony.com/journal/scripts/sliding-tabs/
// version: 1.4

var SlidingTabs = new Class({
	options: {
    startingSlide: false, // sets the slide to start on, either an element or an id 
	defaultSlide: false,
	activeButtonClass: 'slideButtonActive', // class to add to selected button
	activationEvent: 'click', // you can set this to ‘mouseover’ or whatever you like
	wrap: true, // calls to previous() and next() should wrap around?
	slideEffect: { // options for effect used to animate the sliding, see Fx.Base in mootools docs
		duration: 400 // half a second
		}
	},
	current: null, // zero based current pane number, read only
	buttons: false,
	masterButton: false,
	outerSlidesBox: null,
	innerSlidesBox: null,
	panes: null,
	fx: null,
	paneOffset: 0,
	
	
	initialize: function(masterButton, buttonContainer, slideContainer, offset, options) {
		if (buttonContainer) { this.buttons = $(buttonContainer).getChildren(); }
		if (masterButton) { this.masterButton = $(masterButton).getChildren(); }
		this.outerSlidesBox = $(slideContainer);
		this.innerSlidesBox = this.outerSlidesBox.getFirst();
		this.panes = this.innerSlidesBox.getChildren();
		this.paneOffset = offset;
		this.setOptions(options);
		
		this.fx = new Fx.Scroll(this.outerSlidesBox, this.options.effect);
		
		// set up button highlight
		this.current = this.options.startingSlide ? this.panes.indexOf($(this.options.startingSlide)) : 0;
		if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); }
		
		// add needed stylings
		this.outerSlidesBox.setStyle('overflow', 'hidden');
		this.panes.each(function(pane, index) {
			pane.setStyle('float', 'left');
			pane.setStyle('width', this.outerSlidesBox.getStyle('width'));
		}.bind(this));
		
		// stupidness to make IE work - it boggles the mind why this has any effect
		// maybe it's something to do with giving it layout?
		this.innerSlidesBox.setStyle('float', 'left');
		
		this.innerSlidesBox.setStyle(
			'width', (this.outerSlidesBox.offsetWidth.toInt() * this.panes.length) + 'px'
		);
		
		this.fx.toElement(this.options.startingSlide);
		
		// add events to the buttons
		if (this.buttons) this.buttons.each( function(button) {
		  button.addEvent(this.options.activationEvent, this.buttonEventHandler.bindWithEvent(this, button));
		}.bind(this));
		// 
		if ( this.masterButton) this.masterButton.addEvent(this.options.activationEvent, this.masterButtonEventHandler.bindWithEvent(this, masterButton));
	},
	
	
	changeTo: function(element) {
		var event = { cancel: false, target: $(element)  };
		this.fireEvent('change', event);
		if (event.cancel == true) { return; };
		if (this.buttons) { this.buttons[this.current].removeClass(this.options.activeButtonClass); };
		this.current = this.panes.indexOf($(event.target));
		if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); };
		this.fx.stop();
		this.fx.toElement(event.target);
	},
	
	// Handles a click
	buttonEventHandler: function(event, button) {
		if (event.target == this.buttons[this.current]) return;
		this.changeTo(this.panes[this.buttons.indexOf($(button))]);
	},
	// Handles a click
	masterButtonEventHandler: function(event, button) {
		if (this.options.defaultSlide )	{
			if (this.buttons) { this.buttons[this.current].removeClass(this.options.activeButtonClass); };
			this.changeTo(this.options.defaultSlide);
		}
	},
	next: function() {
		var next = this.current + 1;
		if (next == this.panes.length) {
			if (this.options.wrap == true) { next = 0 } else { return }
		}
		
		this.changeTo(this.panes[next]);
	},
	
	previous: function() {
		var prev = this.current - 1
		if (prev < 0) {
			if (this.options.wrap == true) { prev = this.panes.length - 1 } else { return }
		}
		
		this.changeTo(this.panes[prev]);
	}
});

SlidingTabs.implement(new Options, new Events);

// r7 Effects

var r7Site = {
	
	start: function() {
		
		r7Site.appearText();
		slidingtabs = new SlidingTabs('logo','servicesList', 'serviceFrame', 1, {startingSlide: 'slideDefault', defaultSlide: 'slideDefault',activationEvent: 'click'});
	},
	appearText: function() {
		var timer = 0;
		var sideblocks = $$('#servicesList li');
		
		var slidefxs = [];
		var colorfxs = [];		
		
		sideblocks.each(function(el, i){
		el.setStyle('margin-right', '-355px');
		timer += 150;
		slidefxs[i] = new Fx.Style(el, 'margin-right', {
			duration: 600,
			transition: Fx.Transitions.backOut,
			wait: false,
			onComplete: r7Site.overEffect.pass([el, i])
		});
		slidefxs[i].start.delay(timer, slidefxs[i], 0);

		}, this);	
	},

	overEffect: function(el, i) {
	
		var overfxs = new Fx.Styles(el, {'duration': 250, 'wait': false});
		el.mouseouted = true;
		el.addEvent('mouseenter', function(e){
			overfxs.start({
					'margin-right': 14,
					'padding-right': 48,
					'background-color': '#EEEEEE',
					color: '#B86F64'
			});
		});
		el.addEvent('mouseleave', function(e){
			overfxs.start({
					'margin-right': 0,
					'padding-right': 24,
					'background-color': '#FFFFFF',
					'color': '#333'
			});
		});	

	}
}

window.addEvent('domready', r7Site.start );